Bladeren bron

【新增】AI:聊天对话的删除功能

YunaiV 1 jaar geleden
bovenliggende
commit
83b9332125
2 gewijzigde bestanden met toevoegingen van 26 en 31 verwijderingen
  1. 10 3
      src/api/ai/chat/conversation/index.ts
  2. 16 28
      src/views/ai/chat/index.vue

+ 10 - 3
src/api/ai/chat/conversation/index.ts

@@ -13,6 +13,7 @@ export interface ChatConversationVO {
   maxTokens: number // 单条回复的最大 Token 数量
   maxContexts: number // 上下文的最大 Message 数量
   // 额外字段
+  modelName?: string // 模型名字
   roleAvatar?: string // 角色头像
   modelMaxTokens?: string // 模型的单条回复的最大 Token 数量
   modelMaxContexts?: string // 模型的上下文的最大 Message 数量
@@ -24,14 +25,20 @@ export const ChatConversationApi = {
   getChatConversationMy: async (id: number) => {
     return await request.get({ url: `/ai/chat/conversation/get-my?id=${id}` })
   },
+
+  // 新增【我的】聊天会话
+  createChatConversationMy: async (data?: ChatConversationVO) => {
+    return await request.post({ url: `/ai/chat/conversation/create-my`, data })
+  },
+
   // 更新【我的】聊天会话
   updateChatConversationMy: async (data: ChatConversationVO) => {
     return await request.put({ url: `/ai/chat/conversation/update-my`, data })
   },
 
-  // 新增【我的】聊天会话
-  createChatConversationMy: async (data?: ChatConversationVO) => {
-    return await request.post({ url: `/ai/chat/conversation/create-my`, data })
+  // 删除【我的】聊天会话
+  deleteChatConversationMy: async (id: number) => {
+    return await request.delete({ url: `/ai/chat/conversation/delete-my?id=${id}` })
   },
 
   // 获得【我的】聊天会话列表

+ 16 - 28
src/views/ai/chat/index.vue

@@ -22,7 +22,7 @@
         </el-input>
         <!-- 左中间:对话列表 -->
         <div class="conversation-list">
-          <!-- TODO @芋艿,置顶、聊天记录、一星期钱、30天前,前端对数据重新做一下分组,或者后端接口改一下 -->
+          <!-- TODO @fain:置顶、聊天记录、一星期钱、30天前,前端对数据重新做一下分组,或者后端接口改一下 -->
           <div>
             <el-text class="mx-1" size="small" tag="b">置顶</el-text>
           </div>
@@ -35,11 +35,12 @@
                 <img class="avatar" :src="conversation.roleAvatar" />
                 <span class="title">{{ conversation.title }}</span>
               </div>
+              <!-- TODO @fan:缺一个【置顶】按钮,效果改成 hover 上去展示 -->
               <div class="button-wrapper">
                 <el-icon title="编辑" @click="updateConversationTitle(conversation)">
                   <Icon icon="ep:edit" />
                 </el-icon>
-                <el-icon title="删除会话" @click="deleteConversationTitle(conversation)">
+                <el-icon title="删除会话" @click="deleteChatConversation(conversation)">
                   <Icon icon="ep:delete" />
                 </el-icon>
               </div>
@@ -69,7 +70,7 @@
         <div>
           <!-- TODO @fan:样式改下;这里我已经改成点击后,弹出了 -->
           <el-button type="primary" @click="openChatConversationUpdateForm">
-            <span v-html="useModal?.name"></span>
+            <span v-html="useConversation?.modelName"></span>
             <Icon icon="ep:setting" style="margin-left: 10px" />
           </el-button>
           <el-button>
@@ -190,7 +191,6 @@
 import { ChatMessageApi, ChatMessageSendVO, ChatMessageVO } from '@/api/ai/chat/message'
 import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
 import ChatConversationUpdateForm from './components/ChatConversationUpdateForm.vue'
-import { ChatModelApi, ChatModelVO } from '@/api/ai/model/chatModel'
 import { formatDate } from '@/utils/formatTime'
 import { useClipboard } from '@vueuse/core'
 // 转换 markdown
@@ -199,7 +199,6 @@ import { marked } from 'marked'
 import 'highlight.js/styles/vs2015.min.css'
 import hljs from 'highlight.js'
 
-const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 // 自定义渲染器
@@ -221,8 +220,7 @@ const { copy } = useClipboard()
 const searchName = ref('') // 查询的内容
 const inputTimeout = ref<any>() // 处理输入中回车的定时器
 const conversationId = ref(0) // 选中的对话编号
-const conversationInProgress = ref<Boolean>() // 对话进行中
-conversationInProgress.value = false
+const conversationInProgress = ref(false) // 对话进行中
 const conversationInAbortController = ref<any>() // 对话进行中 abort 控制器(控制 stream 对话)
 
 const prompt = ref<string>() // prompt
@@ -235,9 +233,7 @@ const isComposing = ref(false) // 判断用户是否在输入
 /** chat message 列表 */
 // defineOptions({ name: 'chatMessageList' })
 const list = ref<ChatMessageVO[]>([]) // 列表的数据
-const useModal = ref<ChatModelVO>() // 使用的modal
 const useConversation = ref<ChatConversationVO>() // 使用的 Conversation
-const modalList = ref<ChatModelVO[]>([]) // 列表的数据
 
 /** 新建对话 */
 const createConversation = async () => {
@@ -274,13 +270,20 @@ const updateConversationTitle = async (conversation: ChatConversationVO) => {
 }
 
 /** 删除聊天会话 */
-const deleteConversationTitle = async (conversation: ChatConversationVO) => {
-  console.log(conversation)
-  // TODO 芋艿:待实现
+const deleteChatConversation = async (conversation: ChatConversationVO) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm(`是否确认删除会话 - ${conversation.title}?`)
+    // 发起删除
+    await ChatConversationApi.deleteChatConversationMy(conversation.id)
+    message.success('会话已删除')
+    // 刷新列表
+    await getChatConversationList()
+  } catch {}
 }
 
 const searchConversation = () => {
-  // TODO 芋艿:待实现
+  // TODO fan:待实现
 }
 
 /** send */
@@ -456,11 +459,6 @@ const openChatConversationUpdateForm = async () => {
   chatConversationUpdateFormRef.value.open(conversationId.value)
 }
 
-const getModalList = async () => {
-  // 获取模型  as unknown as ChatModelVO
-  modalList.value = (await ChatModelApi.getChatModelSimpleList(0)) as unknown as ChatModelVO[]
-}
-
 // 输入
 const onCompositionstart = () => {
   console.log('onCompositionstart。。。.')
@@ -500,14 +498,6 @@ const getConversation = async (conversationId: string) => {
   // 获取对话信息
   useConversation.value = await ChatConversationApi.getChatConversationMy(conversationId)
   console.log('useConversation.value', useConversation.value)
-  // 选中 modal
-  if (useConversation.value) {
-    modalList.value.forEach((item) => {
-      if (useConversation.value?.modelId === item.id) {
-        useModal.value = item
-      }
-    })
-  }
 }
 
 /** 获得聊天会话列表 */
@@ -529,8 +519,6 @@ const getChatConversationList = async () => {
 onMounted(async () => {
   // 获得聊天会话列表
   await getChatConversationList()
-  // 获取模型
-  getModalList()
   // 获取对话信息
   getConversation(conversationId.value)
   // 获取列表数据