ai前端聊天窗口

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

@@ -3,9 +3,6 @@
     <div class="chat-list" v-for="(item, index) in list" :key="index">
       <!-- 靠左 message：system、assistant 类型 -->
       <div class="left-message message-item" v-if="item.type !== 'user'">
-        <div class="avatar">
-          <el-avatar :src="roleAvatar" />
-        </div>
         <div class="message">
           <div>
             <el-text class="time">{{ formatDate(item.createTime) }}</el-text>
@@ -25,9 +22,6 @@
       </div>
       <!-- 靠右 message：user 类型 -->
       <div class="right-message message-item" v-if="item.type === 'user'">
-        <div class="avatar">
-          <el-avatar :src="userAvatar" />
-        </div>
         <div class="message">
           <div>
             <el-text class="time">{{ formatDate(item.createTime) }}</el-text>
@@ -39,7 +33,7 @@
             <el-button class="btn-cus" link @click="copyContent(item.content)">
               <img class="btn-image" src="@/assets/ai/copy.svg" />
             </el-button>
-            <el-button class="btn-cus" link @click="onDelete(item.id)">
+            <el-button class="btn-cus" link @click="onDelete(index)">
               <img class="btn-image h-17px mr-12px" src="@/assets/ai/delete.svg" />
             </el-button>
             <el-button class="btn-cus" link @click="onRefresh(item)">
@@ -64,29 +58,18 @@ import { formatDate } from '@/utils/formatTime'
 import MarkdownView from '@/components/MarkdownView/index.vue'
 import { useClipboard } from '@vueuse/core'
 import { ArrowDownBold, Edit, RefreshRight } from '@element-plus/icons-vue'
-import { ChatMessageApi, ChatMessageVO } from '@/api/ai/chat/message'
+import { ChatMessageVO } from '@/api/ai/chat/message'
-import { ChatConversationVO } from '@/api/ai/chat/conversation'
-import { useUserStore } from '@/store/modules/user'
-import userAvatarDefaultImg from '@/assets/imgs/avatar.gif'
-import roleAvatarDefaultImg from '@/assets/ai/gpt.svg'
 
 const message = useMessage() // 消息弹窗
 const { copy } = useClipboard() // 初始化 copy 到粘贴板
-const userStore = useUserStore()
 
 // 判断“消息列表”滚动的位置(用于判断是否需要滚动到消息最下方)
 const messageContainer: any = ref(null)
 const isScrolling = ref(false) //用于判断用户是否在滚动
 
-const userAvatar = computed(() => userStore.user.avatar ?? userAvatarDefaultImg)
-const roleAvatar = computed(() => props.conversation.roleAvatar ?? roleAvatarDefaultImg)
 
 // 定义 props
 const props = defineProps({
-  conversation: {
-    type: Object as PropType<ChatConversationVO>,
-    required: true
-  },
   list: {
     type: Array as PropType<ChatMessageVO[]>,
     required: true
@@ -95,7 +78,7 @@ const props = defineProps({
 
 const { list } = toRefs(props) // 消息列表
 
-const emits = defineEmits(['onDeleteSuccess', 'onRefresh', 'onEdit']) // 定义 emits
+const emits = defineEmits(['onDeleteSuccess', 'onRefresh', 'onEdit','update:list']) // 定义 emits
 
 // ============ 处理对话滚动 ==============
 
@@ -146,12 +129,14 @@ const copyContent = async (content) => {
 }
 
 /** 删除 */
-const onDelete = async (id) => {
+const onDelete = async (index) => {
+  const oldList = props.list
+  const newList = oldList?.splice(index,1)
   // 删除 message
-  await ChatMessageApi.deleteChatMessage(id)
+  // console.log("item,index",newList)
   message.success('删除成功！')
   // 回调
-  emits('onDeleteSuccess')
+  emits('update:list',newList)
 }
 
 /** 刷新 */

src/views/ai/chat/index/index.vue

@@ -1,14 +1,5 @@
 <template>
   <el-container class="ai-layout">
-    <!-- 左侧：对话列表 -->
-    <ConversationList
-      :active-id="activeConversationId"
-      ref="conversationListRef"
-      @on-conversation-create="handleConversationCreateSuccess"
-      @on-conversation-click="handleConversationClick"
-      @on-conversation-clear="handleConversationClear"
-      @on-conversation-delete="handlerConversationDelete"
-    />
     <!-- 右侧：对话详情 -->
     <el-container class="detail-container">
       <el-header class="header">
@@ -45,22 +36,16 @@
           <div class="message-container">
             <!-- 情况一：消息加载中 -->
             <MessageLoading v-if="activeMessageListLoading" />
-            <!-- 情况二：无聊天对话时 -->
-            <MessageNewConversation
-              v-if="!activeConversation"
-              @on-new-conversation="handleConversationCreate"
-            />
             <!-- 情况三：消息列表为空 -->
             <MessageListEmpty
-              v-if="!activeMessageListLoading && messageList.length === 0 && activeConversation"
+              v-if="!activeMessageListLoading && messageList.length === 0"
               @on-prompt="doSendMessage"
             />
             <!-- 情况四：消息列表不为空 -->
             <MessageList
               v-if="!activeMessageListLoading && messageList.length > 0"
               ref="messageRef"
-              :conversation="activeConversation"
+              v-model:list="messageList"
-              :list="messageList"
               @on-delete-success="handleMessageDelete"
               @on-edit="handleMessageEdit"
               @on-refresh="handleMessageRefresh"
@@ -84,25 +69,25 @@
           <div class="prompt-btns">
             <div>
               <el-switch v-model="enableContext" />
-              <span class="ml-5px text-14px text-#8f8f8f">上下文</span>
+              <span class="ml-5px text-14px text-#8f8f8f">记忆内容</span>
             </div>
+<!--            v-if="conversationInProgress == false"-->
             <el-button
               type="primary"
               size="default"
               @click="handleSendByButton"
               :loading="conversationInProgress"
-              v-if="conversationInProgress == false"
             >
-              {{ conversationInProgress ? '进行中' : '发送1' }}
+              {{ conversationInProgress ? '进行中' : '发送' }}
-            </el-button>
-            <el-button
-              type="danger"
-              size="default"
-              @click="stopStream()"
-              v-if="conversationInProgress == true"
-            >
-              停止
             </el-button>
+<!--            <el-button-->
+<!--              type="danger"-->
+<!--              size="default"-->
+<!--              @click="stopStream()"-->
+<!--              v-if="conversationInProgress == true"-->
+<!--            >-->
+<!--              等待-->
+<!--            </el-button>-->
           </div>
         </form>
       </el-footer>
@@ -119,29 +104,29 @@
 <script setup lang="ts">
 import { ChatMessageApi, ChatMessageVO } from '@/api/ai/chat/message'
 import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
-import ConversationList from './components/conversation/ConversationList.vue'
+// import ConversationList from './components/conversation/ConversationList.vue'
 import ConversationUpdateForm from './components/conversation/ConversationUpdateForm.vue'
 import MessageList from './components/message/MessageList.vue'
 import MessageListEmpty from './components/message/MessageListEmpty.vue'
 import MessageLoading from './components/message/MessageLoading.vue'
-import MessageNewConversation from './components/message/MessageNewConversation.vue'
+// import MessageNewConversation from './components/message/MessageNewConversation.vue'
-import { Download, Top } from '@element-plus/icons-vue'
+// import { Download, Top } from '@element-plus/icons-vue'
 import axios from "axios";
-import {getUserProfile, ProfileVO} from "@/api/system/user/profile";
+import {getUserProfile} from "@/api/system/user/profile";
-import {DeptVO, getDept, getDeptInfo} from "@/api/system/dept";
+import {getDeptInfo} from "@/api/system/dept";
-import { getAccessToken } from '@/utils/auth'
+// import { getAccessToken } from '@/utils/auth'
 import { config } from '@/config/axios/config'
 /** AI 聊天对话 列表 */
 defineOptions({ name: 'AiChat' })
 
-const route = useRoute() // 路由
+// const route = useRoute() // 路由
 const message = useMessage() // 消息弹窗
 const userid = ref('') //pch add
 const userName = ref('') //pch add
 const deptfull = ref('') //pch add
 const postName = ref('') //pch add
 // 聊天对话
-const conversationListRef = ref()
+// const conversationListRef = ref()
 const activeConversationId = ref<number | null>(null) // 选中的对话编号
 const activeConversation = ref<ChatConversationVO | null>(null) // 选中的 Conversation
 const conversationInProgress = ref(false) // 对话是否正在进行中。目前只有【发送】消息时，会更新为 true，避免切换对话、删除对话等操作
@@ -152,18 +137,19 @@ const activeMessageList = ref<ChatMessageVO[]>([]) // 选中对话的消息列
 const activeMessageListLoading = ref<boolean>(false) // activeMessageList 是否正在加载中
 const activeMessageListLoadingTimer = ref<any>() // activeMessageListLoading Timer 定时器。如果加载速度很快，就不进入加载中
 // 消息滚动
-const textSpeed = ref<number>(50) // Typing speed in milliseconds
+// const textSpeed = ref<number>(50) // Typing speed in milliseconds
-const textRoleRunning = ref<boolean>(false) // Typing speed in milliseconds
+// const textRoleRunning = ref<boolean>(false) // Typing speed in milliseconds
 
 // 发送消息输入框
 const isComposing = ref(false) // 判断用户是否在输入
 const conversationInAbortController = ref<any>() // 对话进行中 abort 控制器(控制 stream 对话)
 const inputTimeout = ref<any>() // 处理输入中回车的定时器
 const prompt = ref<string>() // prompt
-const enableContext = ref<boolean>(true) // 是否开启上下文
+const enableContext = ref<boolean>(true) // 是否开启记忆
+const flag = ref<number>(1);//记忆功能参数
 // 接收 Stream 消息
-const receiveMessageFullText = ref('')
+// const receiveMessageFullText = ref('')
-const receiveMessageDisplayedText = ref('')
+// const receiveMessageDisplayedText = ref('')
 
 // =========== 【聊天对话】相关 ===========
 
@@ -186,43 +172,43 @@ const getConversation = async (id: number | null) => {
  * @param conversation 选中的对话
  * @return 是否切换成功
  */
-const handleConversationClick = async (conversation: ChatConversationVO) => {
+// const handleConversationClick = async (conversation: ChatConversationVO) => {
-  // 对话进行中，不允许切换
+//   // 对话进行中，不允许切换
-  if (conversationInProgress.value) {
+//   if (conversationInProgress.value) {
-    message.alert('对话中，不允许切换!')
+//     message.alert('对话中，不允许切换!')
-    return false
+//     return false
-  }
+//   }
-
+//
-  // 更新选中的对话 id
+//   // 更新选中的对话 id
-  activeConversationId.value = conversation.id
+//   activeConversationId.value = conversation.id
-  activeConversation.value = conversation
+//   activeConversation.value = conversation
-  // 刷新 message 列表
+//   // 刷新 message 列表
-  await getMessageList()
+//   await getMessageList()
-  // 滚动底部
+//   // 滚动底部
-  scrollToBottom(true)
+//   scrollToBottom(true)
-  // 清空输入框
+//   // 清空输入框
-  prompt.value = ''
+//   prompt.value = ''
-  return true
+//   return true
-}
+// }
 
 /** 删除某个对话*/
-const handlerConversationDelete = async (delConversation: ChatConversationVO) => {
+// const handlerConversationDelete = async (delConversation: ChatConversationVO) => {
-  // 删除的对话如果是当前选中的，那么就重置
+//   // 删除的对话如果是当前选中的，那么就重置
-  if (activeConversationId.value === delConversation.id) {
+//   if (activeConversationId.value === delConversation.id) {
-    await handleConversationClear()
+//     await handleConversationClear()
-  }
+//   }
-}
+// }
 /** 清空选中的对话 */
-const handleConversationClear = async () => {
+// const handleConversationClear = async () => {
-  // 对话进行中，不允许切换
+//   // 对话进行中，不允许切换
-  if (conversationInProgress.value) {
+//   if (conversationInProgress.value) {
-    message.alert('对话中，不允许切换!')
+//     message.alert('对话中，不允许切换!')
-    return false
+//     return false
-  }
+//   }
-  activeConversationId.value = null
+//   activeConversationId.value = null
-  activeConversation.value = null
+//   activeConversation.value = null
-  activeMessageList.value = []
+//   activeMessageList.value = []
-}
+// }
 
 /** 修改聊天对话 */
 const conversationUpdateFormRef = ref()
@@ -235,15 +221,15 @@ const handleConversationUpdateSuccess = async () => {
 }
 
 /** 处理聊天对话的创建成功 */
-const handleConversationCreate = async () => {
+// const handleConversationCreate = async () => {
-  // 创建对话
+//   // 创建对话
-  await conversationListRef.value.createConversation()
+//   await conversationListRef.value.createConversation()
-}
+// }
 /** 处理聊天对话的创建成功 */
-const handleConversationCreateSuccess = async () => {
+// const handleConversationCreateSuccess = async () => {
-  // 创建新的对话，清空输入框
+//   // 创建新的对话，清空输入框
-  prompt.value = ''
+//   prompt.value = ''
-}
+// }
 
 // =========== 【消息列表】相关 ===========
 
@@ -275,25 +261,63 @@ const getMessageList = async () => {
     activeMessageListLoading.value = false
   }
 }
-
+const messli = ref<{ type: string; content: string }[]>([]);
+/** 真正执行【发送】消息操作 */
+const doSendMessage = async (content: string) => {
+  if (conversationInProgress.value){
+    message.error('发送失败，原因：发送中！')
+    return
+  }
+  if (messli.value.length==0){
+    activeMessageListLoading.value = true
+  }
+  conversationInProgress.value=true
+  // console.log("content",content)
+  // 校验
+  if (!content) {
+    activeMessageListLoading.value = false
+    conversationInProgress.value=false
+    message.error('发送失败，原因：内容为空！')
+    return
+  }
+  messli.value.push({
+    type: 'user',
+    content: content
+  })
+  // 清空输入框
+  prompt.value = ''
+  if (enableContext.value){
+    flag.value=1
+  }else if (!enableContext.value){
+    flag.value=0
+  }
+  // console.log("flag",flag.value)
+  let response
+  try {
+    response = await axios.post(`${config.ai_url}/chat?query=${content}&userid=${userid.value}&username=${userName.value}&deptfull=${deptfull.value}&postname=${postName.value}&memoryflag=${flag.value}`);
+    activeMessageListLoading.value = false
+    conversationInProgress.value=false
+    // console.log("response",response)
+    messli.value.push({
+      type: 'system',
+      content: response.data.msg.output
+    })
+  }catch (error){
+    activeMessageListLoading.value = false
+    conversationInProgress.value=false
+    console.error("错误: ",error)
+  }
+  // console.log("messli",messli.value)
+  return  response.data.msg.output
+}
 /**
  * 消息列表
  *
  * 和 {@link #getMessageList()} 的差异是，把 systemMessage 考虑进去
  */
 const messageList = computed(() => {
-  if (activeMessageList.value.length > 0) {
+  if (messli.value.length>0){
-    return activeMessageList.value
+    return messli.value
-  }
-  // 没有消息时，如果有 systemMessage 则展示它
-  if (activeConversation.value?.systemMessage) {
-    return [
-      {
-        id: 0,
-        type: 'system',
-        content: activeConversation.value.systemMessage
-      }
-    ]
   }
   return []
 })
@@ -389,91 +413,61 @@ const onCompositionend = () => {
   }, 200)
 }
 
+
 /** 真正执行【发送】消息操作 */
-const doSendMessage = async (content: string) => {
+// const doSendMessageStream = async (userMessage: ChatMessageVO) => {
-  // 校验
+//
-  if (content.length < 1) {
+//   // 创建 AbortController 实例，以便中止请求
-    message.error('发送失败，原因：内容为空！')
+//   conversationInAbortController.value = new AbortController()
-    return
+//   // 标记对话进行中
-  }
+//   conversationInProgress.value = true
-  // if (activeConversationId.value == null) {
+//   // 设置为空
-  //   message.error('还没创建对话，不能发送!')
+//   receiveMessageFullText.value = ''
-  //   return
+//
-  // }
+//   try {
-  // 清空输入框
+//     // 1.1 先添加两个假数据，等 stream 返回再替换
-  prompt.value = ''
+//     activeMessageList.value.push({
-  // 执行发送
+//       id: -1,
-  // const result = await doSendMessageStream({
+//       conversationId: activeConversationId.value,
-  //   userId : userid ,
+//       type: 'user',
-  //   userName :userName ,
+//       content: userMessage.content,
-  //   content: content,
+//       createTime: new Date()
-  //   deptFull:deptfull,
-  //   postName:postName
 //     } as ChatMessageVO)
-
+//     activeMessageList.value.push({
-  const token = getAccessToken()
+//       id: -2,
-
+//       conversationId: activeConversationId.value,
-  alert(userid.value+" "+userName.value+" "+deptfull.value+" "+postName.value)
+//       type: 'assistant',
-  const response = await axios.post(`${config.ai_url}/chat?query=${content}&token=${token}&userid=${userid.value}&username=${userName.value}&deptfull=${deptfull.value}&postname=${postName.value}&memoryflag=1`);
+//       content: '思考中...',
-  console.log(response.data.msg.output,"response")
+//       createTime: new Date()
- return  response.data.msg.output
+//     } as ChatMessageVO)
-
+//
-}
+//     // 1.2 滚动到最下面
-
+//     //await nextTick()
-/** 真正执行【发送】消息操作 */
+//
-const doSendMessageStream = async (userMessage: ChatMessageVO) => {
+//    // await scrollToBottom() // 底部
-
+//
-  // 创建 AbortController 实例，以便中止请求
+//     // 1.3 开始滚动
-  conversationInAbortController.value = new AbortController()
+//     //textRoll()
-  // 标记对话进行中
+//
-  conversationInProgress.value = true
+//     // 2. 发送 event stream
-  // 设置为空
+//     // let isFirstChunk = true // 是否是第一个 chunk 消息段
-  receiveMessageFullText.value = ''
+//     // await ChatMessageApi.sendChatMessageStream(
-
+//     //     userMessage.conversationId,
-  try {
+//     //     userMessage.content,
-    // 1.1 先添加两个假数据，等 stream 返回再替换
+//     //
-    activeMessageList.value.push({
+//     // )
-      id: -1,
+//   } catch {}
-      conversationId: activeConversationId.value,
+// }
-      type: 'user',
-      content: userMessage.content,
-      createTime: new Date()
-    } as ChatMessageVO)
-    activeMessageList.value.push({
-      id: -2,
-      conversationId: activeConversationId.value,
-      type: 'assistant',
-      content: '思考中...',
-      createTime: new Date()
-    } as ChatMessageVO)
-
-    // 1.2 滚动到最下面
-    //await nextTick()
-
-   // await scrollToBottom() // 底部
-
-    // 1.3 开始滚动
-    //textRoll()
-
-    // 2. 发送 event stream
-    let isFirstChunk = true // 是否是第一个 chunk 消息段
-    await ChatMessageApi.sendChatMessageStream(
-        userMessage.conversationId,
-        userMessage.content,
-
-    )
-  } catch {}
-}
 
 /** 停止 stream 流式调用 */
-const stopStream = async () => {
+// const stopStream = async () => {
-  // tip：如果 stream 进行中的 message，就需要调用 controller 结束
+//   // tip：如果 stream 进行中的 message，就需要调用 controller 结束
-  if (conversationInAbortController.value) {
+//   if (conversationInAbortController.value) {
-    conversationInAbortController.value.abort()
+//     conversationInAbortController.value.abort()
-  }
+//   }
-  // 设置为 false
+//   // 设置为 false
-  conversationInProgress.value = false
+//   conversationInProgress.value = false
-}
+// }
 
 /** 编辑 message：设置为 prompt，可以再次编辑 */
 const handleMessageEdit = (message: ChatMessageVO) => {
@@ -496,59 +490,59 @@ const scrollToBottom = async (isIgnore?: boolean) => {
 }
 
 /** 自提滚动效果 */
-const textRoll = async () => {
+// const textRoll = async () => {
-  let index = 0
+//   let index = 0
-  try {
+//   try {
-    // 只能执行一次
+//     // 只能执行一次
-    if (textRoleRunning.value) {
+//     if (textRoleRunning.value) {
-      return
+//       return
-    }
+//     }
-    // 设置状态
+//     // 设置状态
-    textRoleRunning.value = true
+//     textRoleRunning.value = true
-    receiveMessageDisplayedText.value = ''
+//     receiveMessageDisplayedText.value = ''
-    const task = async () => {
+//     const task = async () => {
-      // 调整速度
+//       // 调整速度
-      const diff =
+//       const diff =
-        (receiveMessageFullText.value.length - receiveMessageDisplayedText.value.length) / 10
+//         (receiveMessageFullText.value.length - receiveMessageDisplayedText.value.length) / 10
-      if (diff > 5) {
+//       if (diff > 5) {
-        textSpeed.value = 10
+//         textSpeed.value = 10
-      } else if (diff > 2) {
+//       } else if (diff > 2) {
-        textSpeed.value = 30
+//         textSpeed.value = 30
-      } else if (diff > 1.5) {
+//       } else if (diff > 1.5) {
-        textSpeed.value = 50
+//         textSpeed.value = 50
-      } else {
+//       } else {
-        textSpeed.value = 100
+//         textSpeed.value = 100
-      }
+//       }
-      // 对话结束，就按 30 的速度
+//       // 对话结束，就按 30 的速度
-      if (!conversationInProgress.value) {
+//       if (!conversationInProgress.value) {
-        textSpeed.value = 10
+//         textSpeed.value = 10
-      }
+//       }
-
+//
-      if (index < receiveMessageFullText.value.length) {
+//       if (index < receiveMessageFullText.value.length) {
-        receiveMessageDisplayedText.value += receiveMessageFullText.value[index]
+//         receiveMessageDisplayedText.value += receiveMessageFullText.value[index]
-        index++
+//         index++
-
+//
-        // 更新 message
+//         // 更新 message
-        const lastMessage = activeMessageList.value[activeMessageList.value.length - 1]
+//         const lastMessage = activeMessageList.value[activeMessageList.value.length - 1]
-        lastMessage.content = receiveMessageDisplayedText.value
+//         lastMessage.content = receiveMessageDisplayedText.value
-        // 滚动到住下面
+//         // 滚动到住下面
-        await scrollToBottom()
+//         await scrollToBottom()
-        // 重新设置任务
+//         // 重新设置任务
-        timer = setTimeout(task, textSpeed.value)
+//         timer = setTimeout(task, textSpeed.value)
-      } else {
+//       } else {
-        // 不是对话中可以结束
+//         // 不是对话中可以结束
-        if (!conversationInProgress.value) {
+//         if (!conversationInProgress.value) {
-          textRoleRunning.value = false
+//           textRoleRunning.value = false
-          clearTimeout(timer)
+//           clearTimeout(timer)
-        } else {
+//         } else {
-          // 重新设置任务
+//           // 重新设置任务
-          timer = setTimeout(task, textSpeed.value)
+//           timer = setTimeout(task, textSpeed.value)
-        }
+//         }
-      }
+//       }
-    }
+//     }
-    let timer = setTimeout(task, textSpeed.value)
+//     let timer = setTimeout(task, textSpeed.value)
-  } catch {}
+//   } catch {}
-}
+// }
 /*得到当前访问的用户信息pch add*/
 const getUserInfo = async () => {