实现与ai chat的demo实现

src/api/im.ts

@@ -0,0 +1,13 @@
+import request from '@/utils/request2';
+
+export const GetMessageService = (Data) => {
+    const params = new URLSearchParams();
+    for (let key in Data) {
+        params.append(key, Data[key])
+    }
+    return request.post('/im/get_message', params,{
+        headers: {
+            'token': Data.token, //token
+        }
+    })
+}

src/types/im.ts

@@ -0,0 +1,32 @@
+
+export interface WSMessage {
+    type: string;
+    msg: AIQMessage;
+    session_id: number;
+    to_id: number;
+}
+
+export interface AIQMessage {
+    type: string;
+    id: number;
+    msg: OllamaMessage;
+}
+
+export interface OllamaMessage {
+    model: string;
+    created_at: string;
+    response: string;
+    done: boolean;
+    done_reason: string;
+    //int数组
+    context:  number[];
+}
+
+export interface OllamaRequest {
+    model: string;
+    request: string;
+    system: string;
+    prompt: string;
+    context: number[];
+}
+

src/views/system/gen-chat.vue

@@ -1,5 +1,159 @@
 <template>
-    <div>
+    <div class="chat-container">
-        <h2>通用AI对话</h2>
+      <div class="chat-messages" ref="messageContainer">
+        <el-card
+          v-for="(message, index) in messages"
+          :key="index"
+          :class="{ 'user-message': message.sender === 'user', 'ai-message': message.sender === 'ai' }"
+          shadow="never"
+        >
+          <template #header>
+            <span>{{ message.sender === 'user' ? '你' : 'AI' }}</span>
+          </template>
+          <div>{{ message.content }}</div>
+        </el-card>
+        <el-card
+          v-if="currentAIMessage.length > 0"
+          class="ai-message"
+          shadow="never"
+        >
+          <template #header>
+            <span>AI</span>
+          </template>
+          <div>{{ currentAIMessage }}</div>
+        </el-card>
+      </div>
+      <div class="input-container">
+        <el-input
+          v-model="inputMessage"
+          placeholder="输入你的消息..."
+
+          @keyup.enter="sendMessage"
+        ></el-input>
+        <el-button @click="sendMessage">发送</el-button>
+      </div>
     </div>
-</template>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, onMounted, onUnmounted } from 'vue';
+  import { ElCard, ElInput, ElButton } from 'element-plus';
+  import { WSMessage,AIQMessage,OllamaMessage } from '@/types/im';
+  import { ElMessage } from 'element-plus';
+  import {GetMessageService} from "@/api/im";
+  
+  const messages = ref([]);
+  const inputMessage = ref('');
+  const socket = ref(null);
+  const currentAIMessage = ref('');
+  const messageContainer = ref(null);
+  const sessionID = ref(0);
+  
+  onMounted(() => {
+    let url ='wss://pm.ljsea.top/im/ai_chat_ws?' + 'token=' + localStorage.getItem('token');
+    socket.value = new WebSocket(url);
+  
+    socket.value.onopen = () => {
+      console.log('WebSocket 连接已建立');
+      ElMessage.success('连接成功');
+
+    };
+  
+    socket.value.onmessage = (event) => {
+        let msg : WSMessage = JSON.parse(event.data);
+       const chunk = event.data;
+      if (msg.msg.msg.done) {
+        messages.value.push({ sender: 'ai', content: currentAIMessage.value });
+        currentAIMessage.value = '';
+        scrollToBottom();
+        return;
+      }
+      //console.log("resp:",msg);
+      sessionID.value =msg.session_id;
+      currentAIMessage.value += msg.msg.msg.response;
+      scrollToBottom();
+    };
+  
+    socket.value.onclose = () => {
+      console.log('WebSocket 连接已关闭');
+      ElMessage.error('连接已关闭');
+    };
+  
+    socket.value.onerror = (error) => {
+      console.error('WebSocket 发生错误:', error);
+    };
+  });
+  
+  onUnmounted(() => {
+    if (socket.value) {
+      socket.value.close();
+    }
+  });
+  
+  const sendMessage = () => {
+    let msg = {
+        msg: inputMessage.value,
+        type: "ollama",
+    }
+    if (inputMessage.value.trim() === '') return;
+    messages.value.push({ sender: 'user', content: inputMessage.value });
+    socket.value.send(JSON.stringify(msg));
+    inputMessage.value = '';
+    //getMessage();
+    scrollToBottom();
+  };
+  
+  const scrollToBottom = () => {
+    if (messageContainer.value) {
+      messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
+    }
+  };
+
+  const getMessage = async () => {
+    let result = {};
+    try{
+      let req={
+          token: localStorage.getItem('token'),
+          session_id: sessionID.value,
+      };
+      result = await GetMessageService(req)
+      if(result.code===0){
+        return result.data;
+      }
+    }catch(e){
+      console.log(e);
+    }
+    return {};
+  }
+  </script>
+  
+  <style scoped>
+  .chat-container {
+    display: flex;
+    flex-direction: column;
+    height: 600px;
+  }
+  
+  .chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    border: 1px solid #ccc;
+    margin-bottom: 10px;
+  }
+  
+  .user-message {
+    text-align: right;
+    margin-bottom: 10px;
+  }
+  
+  .ai-message {
+    text-align: left;
+    margin-bottom: 10px;
+  }
+  
+  .input-container {
+    display: flex;
+    gap: 10px;
+  }
+  </style>    

src/views/system/manage-model.vue

@@ -50,8 +50,9 @@ const searchOpt = ref<FormOptionList[]>([
     { type: 'input', label: '模型ID：', prop: 'name' }
 ])
 const handleSearch = async () => {
-    if (isFinite(query.name) == false){
+    // query.name是否是数字
-        ElMessage.error("请输入正确的会话ID");
+    if (isNaN(Number(query.name))) {
+        ElMessage.error('请输入数字');
         return;
     }
     let req={
@@ -136,18 +137,17 @@ const handleEdit = async (row: Model) => {
 const updateData = async (data) => {
     let result ={}
       try{
-        let req={};
+        let req={
-        req.token=localStorage.getItem("token");
+            token:localStorage.getItem("token"),
-        //修改后的数据
+            id: data.ID,
-        req.id = data.ID;
+            type: data.Type,
-        req.type = data.Type;
+            url: data.Url,
-        req.url = data.Url;
+            parameter: data.Parameter,
-        req.parameter = data.Parameter;
+            description: data.Description
-        req.description = data.Description;
+        };
         result = await UpdateModelService(req)
         if (result.code === 0) {
           ElMessage.success("更新成功");
-          this.updateDialogVisible = false;
         } else {
           ElMessage.error("更新失败");
         }
@@ -172,7 +172,6 @@ const addData = async (data) => {
         result = await AddModelService(req)
         if (result.code === 0) {
           ElMessage.success("新增成功");
-          this.updateDialogVisible = false;
         } else {
           ElMessage.error("新增失败");
         }

src/views/system/manage-session.vue

@@ -136,7 +136,6 @@ const updateData = async (data) => {
         result = await UpdateSessionService(req)
         if (result.code === 0) {
           ElMessage.success("更新成功");
-          this.updateDialogVisible = false;
         } else {
           ElMessage.error("更新失败");
         }
@@ -158,7 +157,6 @@ const addData = async (data) => {
         result = await AddSessionService(req)
         if (result.code === 0) {
           ElMessage.success("新增成功");
-          this.updateDialogVisible = false;
         } else {
           ElMessage.error("新增失败");
         }