【增加】增加 chat stream 功能(删除、复制、滚动删除、发送消息自动到最下面)

package.json

@@ -29,6 +29,7 @@
     "@form-create/designer": "^3.1.3",
     "@form-create/designer": "^3.1.3",
     "@form-create/element-ui": "^3.1.24",
     "@form-create/element-ui": "^3.1.24",
     "@iconify/iconify": "^3.1.1",
     "@iconify/iconify": "^3.1.1",
+    "@microsoft/fetch-event-source": "^2.0.1",
     "@videojs-player/vue": "^1.0.0",
     "@videojs-player/vue": "^1.0.0",
     "@vueuse/core": "^10.9.0",
     "@vueuse/core": "^10.9.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor": "^5.1.23",

src/api/ai/chat/message/index.ts

 import request from '@/config/axios'
 import request from '@/config/axios'
+import {fetchEventSource} from '@microsoft/fetch-event-source';
+import {getAccessToken} from '@/utils/auth'
+import {config} from '@/config/axios/config'
 
 
 // 聊天VO
 // 聊天VO
 export interface ChatMessageVO {
 export interface ChatMessageVO {
-  id: number // 编号
+  id: string // 编号
   conversationId: string // 会话编号
   conversationId: string // 会话编号
   type: string // 消息类型
   type: string // 消息类型
   userId: string // 用户编号
   userId: string // 用户编号
   roleId: string // 角色编号
   roleId: string // 角色编号
   model: number // 模型标志
   model: number // 模型标志
   modelId: number // 模型编号
   modelId: number // 模型编号
-  content: number // 聊天内容
+  content: string // 聊天内容
   tokens: number // 消耗 Token 数量
   tokens: number // 消耗 Token 数量
   createTime: Date // 创建时间
   createTime: Date // 创建时间
 }
 }
@@ -27,11 +30,35 @@ export const ChatMessageApi = {
     return await request.get({ url: `/ai/chat/message/list-by-conversation-id?conversationId=${conversationId}`})
     return await request.get({ url: `/ai/chat/message/list-by-conversation-id?conversationId=${conversationId}`})
   },
   },
 
 
+  // 发送 add 消息
+  add: async (data: ChatMessageSendVO) => {
+    return await request.post({ url: `/ai/chat/message/add`, data})
+  },
+
   // 发送 send 消息
   // 发送 send 消息
   send: async (data: ChatMessageSendVO) => {
   send: async (data: ChatMessageSendVO) => {
-    return await request.post({ url: `/ai/chat/message/send`, data })
+    return await request.post({ url: `/ai/chat/message/send`, data})
   },
   },
 
 
+  // 发送 send stream 消息
+  sendStream: async (id: string, ctrl, onMessage, onError, onClose) => {
+    const token = getAccessToken()
+    return fetchEventSource(`${ config.base_url}/ai/chat/message/send-stream`, {
+      method: 'post',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`
+      },
+      openWhenHidden: true,
+      body: JSON.stringify({
+        id: id,
+      }),
+      onmessage: onMessage,
+      onerror:onError,
+      onclose: onClose,
+      signal: ctrl.signal,
+    });
+  },
 
 
   // 发送 send 消息
   // 发送 send 消息
   delete: async (id: string) => {
   delete: async (id: string) => {

src/views/ai/chat/components/MessageList.vue

@@ -62,12 +62,11 @@
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
-
 <script setup lang="ts">
 <script setup lang="ts">
+
 import { useClipboard } from '@vueuse/core'
 import { useClipboard } from '@vueuse/core'
-import {ChatMessageApi, ChatMessageVO, ChatMessageSendVO} from '@/api/ai/chat/message'
+import { ChatMessageApi, ChatMessageVO, ChatMessageSendVO} from '@/api/ai/chat/message'
 import { formatDate } from '@/utils/formatTime'
 import { formatDate } from '@/utils/formatTime'
-import {ApiKeyVO} from "@/api/ai/model/apiKey";
 
 
 // 初始化 copy 到粘贴板
 // 初始化 copy 到粘贴板
 const { copy, isSupported } = useClipboard();
 const { copy, isSupported } = useClipboard();
@@ -94,20 +93,6 @@ const messageList = async () => {
 const messageContainer: any = ref(null);
 const messageContainer: any = ref(null);
 const isScrolling = ref(false)//用于判断用户是否在滚动
 const isScrolling = ref(false)//用于判断用户是否在滚动
 
 
-/** send */
-const sendMessage = async () => {
-  try {
-    const requestParams = {
-      conversationId,
-      content,
-    }
-    const messageSendVO = requestParams as unknown as ChatMessageSendVO
-    const res = await ChatMessageApi.send(messageSendVO) as unknown as ChatMessageVO
-    console.log('---', res.content)
-  } finally {
-  }
-}
-
 function scrollToBottom() {
 function scrollToBottom() {
   nextTick(() => {
   nextTick(() => {
     //注意要使用nexttick以免获取不到dom
     //注意要使用nexttick以免获取不到dom
@@ -167,110 +152,5 @@ onMounted(async () => {
 
 
 <style scoped lang="scss">
 <style scoped lang="scss">
 
 
-.message-container {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  overflow-y: scroll;
-  padding: 0 15px;
-}
-
-// 中间
-.chat-list {
-  display: flex;
-  flex-direction: column;
-  overflow-y: hidden;
-
-  .message-item {
-    margin-top: 50px;
-  }
-
-  .left-message {
-    display: flex;
-    flex-direction: row;
-  }
-
-  .right-message {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: flex-start;
-  }
-
-  .avatar {
-    //height: 170px;
-    //width: 170px;
-  }
-
-  .message {
-    display: flex;
-    flex-direction: column;
-    text-align: left;
-    margin: 0 15px;
-
-    .time {
-      text-align: left;
-      line-height: 30px;
-    }
-
-    .left-text-container {
-      display: flex;
-      flex-direction: column;
-      overflow-wrap: break-word;
-      background-color: #e4e4e4;
-      box-shadow: 0 0 0 1px #e4e4e4;
-      border-radius: 10px;
-      padding: 10px 10px 5px 10px;
-
-      .left-text {
-        color: #393939;
-      }
-    }
-
-    .right-text-container {
-      display: flex;
-      flex-direction: column;
-      overflow-wrap: break-word;
-      background-color: #267fff;
-      color: #FFF;
-      box-shadow: 0 0 0 1px #267fff;
-      border-radius: 10px;
-      padding: 10px;
-
-      .right-text {
-        color: #FFF;
-      }
-    }
-
-    .left-btns, .right-btns {
-      display: flex;
-      flex-direction: row;
-      margin-top: 8px;
-    }
-  }
-
-  // 复制、删除按钮
-  .btn-cus {
-    display: flex;
-    background-color: transparent;
-    align-items: center;
-
-    .btn-image {
-      height: 20px;
-      margin-right: 5px;
-    }
-
-    .btn-cus-text {
-      color: #757575;
-    }
-  }
-
-  .btn-cus:hover {
-    cursor: pointer;
-  }
-
-  .btn-cus:focus {
-    background-color: #8c939d;
-  }
-}
 
 
 </style>
 </style>