feat: chatMode and switchConversation

hexqi · hexqi · commit d2ed82f74fba · 2025-10-21T16:41:20.000+08:00
diff --git a/packages/plugins/robot/src/Home.vue b/packages/plugins/robot/src/Home.vue
@@ -13,9 +13,11 @@
           ref="robotChatRef"
           :prompt-items="promptItems"
           :bubbleRenderers="
-            aiMode === CHAT_MODE.Agent ? { markdown: BuildLoadingRenderer, loading: BuildLoadingRenderer } : {}
+            robotSettingState.chatMode === CHAT_MODE.Agent
+              ? { markdown: BuildLoadingRenderer, loading: BuildLoadingRenderer }
+              : {}
           "
-          :allowFiles="isVisualModel() && aiMode === CHAT_MODE.Agent"
+          :allowFiles="isVisualModel() && robotSettingState.chatMode === CHAT_MODE.Agent"
           @fileSelected="handleFileSelected"
         >
           <template #operations>
@@ -28,7 +30,7 @@
             >
               <robot-setting-popover
                 v-if="showSettingPopover"
-                @changeType="handleChatModeChange"
+                @changeType="saveSettingState"
                 @close="closePanel"
               ></robot-setting-popover>
               <template #reference>
@@ -39,8 +41,11 @@
             </tiny-popover>
           </template>
           <template #footer-left>
-            <robot-type-select :aiMode="aiMode" @typeChange="typeChange"></robot-type-select>
-            <mcp-server :position="mcpDrawerPosition" v-if="aiMode === CHAT_MODE.Chat"></mcp-server>
+            <robot-type-select
+              :chatMode="robotSettingState.chatMode"
+              @typeChange="handleChatModeChange"
+            ></robot-type-select>
+            <mcp-server :position="mcpDrawerPosition" v-if="robotSettingState.chatMode === CHAT_MODE.Chat"></mcp-server>
           </template>
         </robot-chat>
       </div>
@@ -62,7 +67,6 @@ import type { PromptProps } from '@opentiny/tiny-robot'
 import RobotTypeSelect from './components/RobotTypeSelect.vue'
 import McpServer from './mcp/McpServer.vue'
 import BuildLoadingRenderer from './BuildLoadingRenderer.vue'
-import { updateLLMConfig } from './client'
 import useChat from './composables/useChat'
 
 const { options } = defineProps({
@@ -112,29 +116,23 @@ const promptItems: PromptProps[] = [
 const showTeleport = ref(false)
 const showSettingPopover = ref(false)
 
-const { robotSettingState, CHAT_MODE, AIModelOptions, aiMode } = useRobot()
-const { inputMessage } = useChat()
+const { robotSettingState, CHAT_MODE, AIModelOptions } = useRobot()
+const { inputMessage, changeChatMode } = useChat()
 
 const isVisualModel = () => {
   const platform = AIModelOptions.find((option) => option.value === robotSettingState.selectedModel.baseUrl)
   const modelAbility = platform?.model.find((item) => item.value === robotSettingState.selectedModel.model)
   return modelAbility?.ability?.includes('visual') || false
 }
 
-const typeChange = (type: string) => {
-  aiMode.value = type
-  robotChatRef.value?.createConversation()
-  updateLLMConfig({
-    apiUrl: type === CHAT_MODE.Agent ? '/app-center/api/ai/chat' : '/app-center/api/chat/completions'
-  })
-}
-
-const handleChatModeChange = () => {
+const handleChatModeChange = (type: string) => {
+  changeChatMode(type)
   // singleAttachmentItems.value = []
   // imageUrl.value = ''
-  // endContent()
 }
 
+const saveSettingState = () => {}
+
 const closePanel = () => {
   showSettingPopover.value = false
 }
diff --git a/packages/plugins/robot/src/Main.vue b/packages/plugins/robot/src/Main.vue
@@ -93,7 +93,7 @@
                 </div>
               </template>
               <template #footer-left>
-                <robot-type-select :aiType="aiType" @typeChange="typeChange"></robot-type-select>
+                <robot-type-select :chatMode="aiType" @typeChange="typeChange"></robot-type-select>
                 <mcp-server :position="mcpDrawerPosition" v-if="aiType === CHAT_MODE.Chat"></mcp-server>
               </template>
             </tr-sender>
diff --git a/packages/plugins/robot/src/client/index.ts b/packages/plugins/robot/src/client/index.ts
@@ -1,88 +1,20 @@
 import { AIClient, type AIModelConfig } from '@opentiny/tiny-robot-kit'
 import { OpenAICompatibleProvider } from './OpenAICompatibleProvider'
-import useMcp from '../composables/useMcp'
-import useRobot from '../js/useRobot'
-import type { LLMMessage } from '../types/mcp-types'
-import { getAgentSystemPrompt } from '../js/prompts'
-import { utils } from '@opentiny/tiny-engine-utils'
-import { getMetaApi, META_SERVICE, useCanvas } from '@opentiny/tiny-engine-meta-register'
-
-const { deepClone } = utils
-const { loadRobotSettingState, EXISTING_MODELS, aiMode, CHAT_MODE } = useRobot()
-const { activeName, existModel, customizeModel } = loadRobotSettingState() || {}
-
-const storageSettingState = (activeName === EXISTING_MODELS ? existModel : customizeModel) || {}
-
-const config: Omit<AIModelConfig, 'provider' | 'providerImplementation'> = {
-  apiKey: storageSettingState.apiKey || '',
-  apiUrl: aiMode.value === CHAT_MODE.Agent ? '/app-center/api/ai/chat' : '/app-center/api/chat/completions',
-  defaultModel: storageSettingState.model || 'deepseek-v3'
-}
-
-let provider: OpenAICompatibleProvider | null = null
-
-const addSystemPrompt = (messages: LLMMessage[], prompt: string = '') => {
-  if (!messages.length || messages[0].role !== 'system') {
-    messages.unshift({ role: 'system', content: prompt })
-  } else if (messages[0].role === 'system' && messages[0].content !== prompt) {
-    messages[0].content = prompt
-  }
-}
-
-export const search = async (content: string) => {
-  let result = ''
-  const MAX_SEARCH_LENGTH = 8000
-  try {
-    const res = await getMetaApi(META_SERVICE.Http).post('/app-center/api/ai/search', { content })
-
-    res.forEach((item: { content: string }) => {
-      if (result.length + item.content.length > MAX_SEARCH_LENGTH) {
-        return
-      }
-      result += item.content
-    })
-  } catch (error) {
-    // error
-  }
-  return result
-}
-
-const beforeRequest = async (requestParams: any) => {
-  const { aiMode, CHAT_MODE, robotSettingState } = useRobot()
-  const pageSchema = deepClone(useCanvas().pageState.pageSchema)
-  const isAgentMode = aiMode.value === CHAT_MODE.Agent
-  const tools = await useMcp().getLLMTools()
-  if (!requestParams.tools && tools?.length && !isAgentMode) {
-    Object.assign(requestParams, { tools })
-  }
-  if (isAgentMode) {
-    requestParams.apiKey = robotSettingState.selectedModel.apiKey
-    // let referenceContext = ''
-    // if (requestParams.messages?.[0].role && requestParams.messages?.[0].role !== 'system') {
-    //   referenceContext = await search(requestParams.messages?.at(-1)?.content)
-    // }
-    addSystemPrompt(requestParams.messages, getAgentSystemPrompt(pageSchema, ''))
-  }
-  requestParams.baseUrl = robotSettingState.selectedModel.baseUrl
-  requestParams.model = robotSettingState.selectedModel.model
-  if (config.apiKey !== robotSettingState.selectedModel.apiKey) {
-    provider?.updateConfig({ apiKey: robotSettingState.selectedModel.apiKey })
-    config.apiKey = robotSettingState.selectedModel.apiKey
-  }
-  return requestParams
+interface ClientOptions {
+  config: Omit<AIModelConfig, 'provider' | 'providerImplementation'>
+  beforeRequest: () => object
 }
 
-provider = new OpenAICompatibleProvider(config, { beforeRequest })
+const createClient = ({ config, beforeRequest }: ClientOptions) => {
+  const provider: OpenAICompatibleProvider = new OpenAICompatibleProvider(config, { beforeRequest })
 
-const client = new AIClient({
-  ...config,
-  provider: 'custom',
-  providerImplementation: provider
-})
+  const client = new AIClient({
+    ...config,
+    provider: 'custom',
+    providerImplementation: provider
+  })
 
-const updateLLMConfig = (newConfig: Omit<AIModelConfig, 'provider' | 'providerImplementation'>) => {
-  provider?.updateConfig(newConfig)
-  Object.assign(config, newConfig)
+  return { client, provider }
 }
 
-export { client, updateLLMConfig }
+export { createClient }
diff --git a/packages/plugins/robot/src/components/RobotTypeSelect.vue b/packages/plugins/robot/src/components/RobotTypeSelect.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="button-wrapper">
-    <tiny-tabs v-model="state.activeNameTabs" tab-style="button-card">
-      <tiny-tab-item :name="CHAT_MODE.Agent">
+    <tiny-tabs v-model="aiChatMode" tab-style="button-card">
+      <tiny-tab-item name="agent">
         <template #title>
           <tiny-tooltip effect="light">
             <template #content>
@@ -19,7 +19,7 @@
           </tiny-tooltip>
         </template>
       </tiny-tab-item>
-      <tiny-tab-item class="json-tab" :name="CHAT_MODE.Chat">
+      <tiny-tab-item class="json-tab" name="chat">
         <template #title>
           <tiny-tooltip effect="light">
             <template #content>
@@ -42,10 +42,8 @@
 </template>
 
 <script lang="ts">
-import { reactive, watch } from 'vue'
-import type { Component } from 'vue'
+import { computed, type Component } from 'vue'
 import { Tabs, TabItem, Tooltip } from '@opentiny/vue'
-import { useRobot } from '@opentiny/tiny-engine-meta-register'
 
 export default {
   components: {
@@ -54,33 +52,23 @@ export default {
     TinyTooltip: Tooltip as Component
   },
   props: {
-    aiType: {
-      type: String
+    chatMode: {
+      type: String,
+      default: 'agent'
     }
   },
   emits: ['typeChange'],
   setup(props, { emit }) {
-    const { CHAT_MODE } = useRobot()
-    const state = reactive({
-      activeNameTabs: props.aiType || CHAT_MODE.Agent
-    })
-
-    const handleTabChange = (value) => {
-      emit('typeChange', value)
-    }
-
-    // TODO: 这里不需要watch监听，直接用modelChange方法监听activeNameTabs的变化
-    // 使用watch监听activeNameTabs的变化
-    watch(
-      () => state.activeNameTabs,
-      (newValue) => {
-        handleTabChange(newValue)
+    const aiChatMode = computed<string>({
+      get: () => props.chatMode,
+      set: (value: string) => {
+        if (value === props.chatMode) return
+        emit('typeChange', value)
       }
-    )
+    })
 
     return {
-      state,
-      CHAT_MODE
+      aiChatMode
     }
   }
 }
diff --git a/packages/plugins/robot/src/composables/useAgent.ts b/packages/plugins/robot/src/composables/useAgent.ts
@@ -1,7 +1,7 @@
 import { jsonrepair } from 'jsonrepair'
 import * as jsonpatch from 'fast-json-patch'
 import { utils } from '@opentiny/tiny-engine-utils'
-import { useCanvas, useHistory } from '@opentiny/tiny-engine-meta-register'
+import { getMetaApi, META_SERVICE, useCanvas, useHistory } from '@opentiny/tiny-engine-meta-register'
 import useRobot from '../js/useRobot'
 import SvgICons from '@opentiny/vue-icon'
 
@@ -44,8 +44,8 @@ const schemaAutoFix = (data: object | object[]) => {
 }
 
 const _updatePageSchema = (streamContent: string, currentPageSchema: object, isFinial: boolean = false) => {
-  const { aiMode, CHAT_MODE, isValidFastJsonPatch } = useRobot()
-  if (aiMode.value !== CHAT_MODE.Agent) {
+  const { robotSettingState, CHAT_MODE, isValidFastJsonPatch } = useRobot()
+  if (robotSettingState.chatMode !== CHAT_MODE.Agent) {
     return
   }
 
@@ -98,3 +98,21 @@ const _updatePageSchema = (streamContent: string, currentPageSchema: object, isF
 }
 
 export const updatePageSchema = useThrottleFn(_updatePageSchema, 200, true)
+
+export const search = async (content: string) => {
+  let result = ''
+  const MAX_SEARCH_LENGTH = 8000
+  try {
+    const res = await getMetaApi(META_SERVICE.Http).post('/app-center/api/ai/search', { content })
+
+    res.forEach((item: { content: string }) => {
+      if (result.length + item.content.length > MAX_SEARCH_LENGTH) {
+        return
+      }
+      result += item.content
+    })
+  } catch (error) {
+    // error
+  }
+  return result
+}
diff --git a/packages/plugins/robot/src/composables/useChat.ts b/packages/plugins/robot/src/composables/useChat.ts
diff --git a/packages/plugins/robot/src/js/useRobot.ts b/packages/plugins/robot/src/js/useRobot.ts
