Browse Source

feat(msg): 初始化模型列表并优化聊天功能

- 新增 getModalList API 调用,用于获取模型列表
- 在 msg store 中添加 modelList 和 selectModal 状态
- 修改 AI 模型选择逻辑,支持动态加载的模型列表
- 优化聊天组件,根据选中的模型发送消息
- 调整工具栏组件,使用新的模型列表进行选择
chd 3 months ago
parent
commit
9a3f017a3b

+ 9 - 0
src/api/index.js

@@ -120,3 +120,12 @@ export function getDomainList(data) {
         data
     })
 }
+
+export function getModalList(data) {
+    return request({
+        url: `/ai/model/pageList`,
+        method: 'get',
+        data
+    })
+}
+

+ 18 - 19
src/entrypoints/sidepanel/Chat.vue

@@ -47,7 +47,7 @@
       <ScrollToBottom :target="scrollbar" ref="scrollToBottomRef" />
     </div>
 
-    <Tools :disHistory="sendLoading" :upload="type === FunctionList.File_Operation || !!formInfo" @read-click="readClick" @upload-file="(file) => createFileObj(file)" @handle-capture="handleCapture" @his-records="hisRecords"
+    <Tools v-if="selectModal" :disHistory="sendLoading" :upload="type === FunctionList.File_Operation || !!formInfo" @read-click="readClick" @upload-file="(file) => createFileObj(file)" @handle-capture="handleCapture" @his-records="hisRecords"
       @add-new-dialogue="addNewDialogue" @handle-current-change="handleCurrentChange"
       @handel-intelligent-filling-click="handelIntelligentFillingClick" />
 
@@ -114,7 +114,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick, inject, useTemplateRef, reactive } from 'vue'
+import { ref, onMounted, nextTick, inject, useTemplateRef, reactive,onBeforeMount } from 'vue'
 import { ElScrollbar, ElAvatar, ElInput, ElButton } from 'element-plus'
 import moment from 'moment'
 import fileLogo from '@/assets/svg/file.svg'
@@ -162,7 +162,7 @@ const disSend = computed(() => {
 })
 // 获取父组件提供的 Hook 实例
 const msgStore = useMsgStore()
-const { pageInfoList, messages, msgUuid, AIModel,page,hasNext,msgLoading } = storeToRefs(useMsgStore())
+const { pageInfoList, messages, msgUuid, AIModel,page,hasNext,msgLoading,selectModal } = storeToRefs(useMsgStore())
 const formInfo = ref('')
 const {
   taklToHtml,
@@ -316,18 +316,12 @@ async function handelIntelligentFillingClick() {
 }
 
 function handleCurrentChange(e) {
-  options.forEach((item) => {
-    item.options.forEach((item2) => {
-      if (item2.value === e) {
-        msgStore.updateAIModel(item2)
-      }
-    })
-  })
-  if (AIModel.value.file === true) {
-    isShowPage.value = false
-    taklToHtml.value = false
-    pageInfoList.value = []
-  }
+  msgStore.updateAIModel(e)
+  // if (AIModel.value.file === true) {
+  //   isShowPage.value = false
+  //   taklToHtml.value = false
+  //   pageInfoList.value = []
+  // }
 }
 
 async function handleCurrentData(e) {
@@ -493,12 +487,14 @@ async function createWS(msg) {
   const websocketId= uuidv4()
    const wsUrl = `${import.meta.env.VITE_API_WS_URL}/webSocket/clue/${websocketId}`;
     const socket = new WebSocket(wsUrl);
+    console.log(selectModal.value);
+    
      askQues({
        conversationId: msgUuid.value,
     websocketId,
-    modelName: '通义千问-Max',
+    modelName: selectModal.value.modelName,
     question: type.value === FunctionList.File_Operation ? msg.rawContent : buildObjPrompt(xlsxData.value,formInfo.value),
-    id: '699637194561691650',
+    id: selectModal.value.id,
     redisKey:msg.redisKey
      }).catch(res => {
        obj.rawContent = '接口出错,请重试。'
@@ -684,9 +680,12 @@ async function getFileValue(file) {
 }
 let a = null
 // 组件挂载时滚动到底部
-onMounted(async () => {
-  msgStore.updateAIModel(options[0].options[0])
+onBeforeMount(async () => {
   await msgStore.initMsg()
+  await msgStore.initModal()
+})
+onMounted(async () => {
+  // msgStore.updateAIModel(options[0].options[0])
   useAutoResizeTextarea(tareRef, inputMessage)
   chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     if (message.type === 'TO_SIDE_PANEL_PAGE_INFO') {

+ 12 - 8
src/entrypoints/sidepanel/component/tools.vue

@@ -1,24 +1,28 @@
 <script setup lang="ts">
-import { ref, watch, watchEffect } from 'vue'
+import { ref, watch, watchEffect ,onMounted} from 'vue'
 import { storeToRefs } from 'pinia'
 import { options } from '@/entrypoints/sidepanel/mock'
 import { Reading, Upload, Paperclip, Scissor, AlarmClock, CirclePlus, Edit } from '@element-plus/icons-vue'
 import { useMsgStore } from '@/store/modules/msg'
-import { ElMessage } from 'element-plus'
+import { ElMessage, makeList } from 'element-plus'
+
+const { modelList } = storeToRefs(useMsgStore())
+console.log(modelList,5563);
 
-const { AIModel } = storeToRefs(useMsgStore())
 const selectInput = ref(null)
 const emit = defineEmits(['readClick', 'uploadFile', 'handleCapture', 'addNewDialogue', 'hisRecords', 'handleCurrentChange', 'handelIntelligentFillingClick'])
 
 watchEffect(() => {
-  selectInput.value = AIModel.value?.value
+  // selectInput.value = AIModel.value?.value
+})
+onMounted(() => {
+  selectInput.value = modelList.value[0].id
 })
 const handleUpload = (e) => {
   if (!props.upload) {
    e.stopPropagation()
     ElMessage.warning('智能填表需要先发送指令,再上传文件')
   }
-  
 }
 const props = defineProps({
   upload: {
@@ -33,9 +37,9 @@ const props = defineProps({
     <div class="flex items-center">
       <el-select placement="top" v-model="selectInput" placeholder="选择"
         @change="(e: any) => emit('handleCurrentChange', e)" style="width: 120px;margin-right: 2px">
-        <el-option-group v-for="group in options" :key="group.label" :label="group.label">
-          <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-option-group>
+        <!-- <el-option-group v-for="group in options" :key="group.label" :label="group.label"> -->
+          <el-option v-for="item in modelList" :key="item.id" :label="item.modelName" :value="item.id" />
+        <!-- </el-option-group> -->
       </el-select>
       <el-tooltip effect="dark" content="阅读此页,开启后将会根据左侧网页中的内容做出回答" placement="top">
         <el-button class="tools_btn" link :icon="Reading" @click="emit('readClick')" />

+ 10 - 11
src/store/modules/msg.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import OpenAI from 'openai'
-import { getChatDetail } from '@/api/index'
+import { getChatDetail, getModalList } from '@/api/index'
 import {
   formatMessage,
 } from '@/entrypoints/sidepanel/utils/ai-service.js'
@@ -14,6 +14,7 @@ export const useMsgStore = defineStore('msg', {
     msgLoading:false,
     pageInfoList: [],
     modelList: <any>[],
+    selectModal: <any>null,
     openai: <any>null
   }),
   actions: {
@@ -60,21 +61,19 @@ export const useMsgStore = defineStore('msg', {
         this.msgLoading = false
       }
     },
-
+    async initModal() {
+      const res = await getModalList()
+      this.modelList = res.data.list
+      this.selectModal = this.modelList[0]
+    },
     async changePage() {
       if (this.hasNext) {
         await this.initMsg()
+
       }
     },
-    updateAIModel(model: any) {
-      this.AIModel = model
-      this.openai = new OpenAI({
-        // apiKey: import.meta.env.VITE_OPENAI_API_KEY_TONG,
-        apiKey: import.meta.env.VITE_OPENAI_API_KEY_TONG,
-          baseURL: this.AIModel.url,
-        // timeout: 5000,
-        dangerouslyAllowBrowser: true
-      })
+    updateAIModel(id) {
+     this.selectModal = this.modelList.find(_ => _.id === id)
     }
   }
 })

+ 1 - 4
src/store/modules/user.ts

@@ -85,15 +85,12 @@ export const useUserStore = defineStore('user', {
       }
     },
     async initSetting() {
-      
+
       const res = await getDomainList()
       setTimeout(() => {
         console.log(res, 999);
       }, 1000);  
       if (res.code === '0') {
-setTimeout(() => {
-  console.log(res.data,999);
-}, 1000);        
         return true
       } else {