feat: check apikey

Author: hexqi

packages/plugins/robot/src/Main.vue

@@ -14,6 +14,7 @@
           :prompt-items="promptItems"
           :bubble-renderers="bubbleRenderers"
           :allowFiles="isVisualModel && robotSettingState.chatMode === CHAT_MODE.Agent"
+          :beforeSubmit="checkApiKey"
           @fileSelected="handleFileSelected"
         >
           <template #operations>
@@ -63,9 +64,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, h, onMounted, ref } from 'vue'
+import { computed, h, onMounted, ref, type Component } from 'vue'
 import { ToolbarBase } from '@opentiny/tiny-engine-common'
-import { TinyPopover } from '@opentiny/vue'
+import { TinyNotify, TinyPopover } from '@opentiny/vue'
 import { getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import type { PromptProps } from '@opentiny/tiny-robot'
 import { IconThink } from '@opentiny/tiny-robot-svgs'
@@ -88,7 +89,8 @@ const { options } = defineProps({
   }
 })
 
-const { robotSettingState, CHAT_MODE, getModelCapabilities, saveRobotSettingState } = useModelConfig()
+const { robotSettingState, CHAT_MODE, getModelCapabilities, saveRobotSettingState, getAIModelOptions } =
+  useModelConfig()
 
 const robotChatRef = ref(null)
 
@@ -169,10 +171,10 @@ const openAIRobot = () => {
   robotChatRef.value?.openAIRobot()
 }
 
-const bubbleRenderers = computed(() => {
+const bubbleRenderers = computed<Record<string, Component>>(() => {
   return robotSettingState.chatMode === CHAT_MODE.Agent
-    ? { markdown: AgentRenderer, loading: AgentRenderer, 'collapsible-text': AgentRenderer }
-    : {}
+    ? { markdown: AgentRenderer, loading: AgentRenderer }
+    : ({} as Record<string, Component>)
 })
 
 const handleFileSelected = (formData: unknown, updateAttachment: (resourceUrl: string) => void) => {
@@ -196,6 +198,28 @@ const handleFileSelected = (formData: unknown, updateAttachment: (resourceUrl: s
   }
 }
 
+const checkApiKey = () => {
+  const provider = getAIModelOptions().find((option) => option.baseUrl === robotSettingState.selectedModel.baseUrl)
+  if (
+    !robotSettingState.selectedModel.baseUrl ||
+    (!robotSettingState.selectedModel.apiKey && provider && !provider.allowEmptyApiKey)
+  ) {
+    TinyNotify({
+      type: 'warning',
+      title: '未设置API Key，请检查设置',
+      message: '请先设置大模型API Key后重试。',
+      position: 'top-right',
+      duration: 5000
+    })
+    setTimeout(() => {
+      showSettingPopover.value = true
+    }, 1000)
+    return false
+  }
+
+  return true
+}
+
 onMounted(async () => {
   setTimeout(() => {
     showTeleport.value = true

packages/plugins/robot/src/components/chat/RobotChat.vue

@@ -121,7 +121,7 @@ import MarkdownRenderer from '../renderers/MarkdownRenderer.vue'
 import ImgRenderer from '../renderers/ImgRenderer.vue'
 import { serializeError } from '../../utils'
 
-const { promptItems, allowFiles, bubbleRenderers } = defineProps({
+const { promptItems, allowFiles, bubbleRenderers, beforeSubmit } = defineProps({
   promptItems: {
     type: Array as PropType<PromptProps[]>,
     default: () => []
@@ -133,6 +133,10 @@ const { promptItems, allowFiles, bubbleRenderers } = defineProps({
   bubbleRenderers: {
     type: Object as PropType<Record<string, Component>>,
     default: () => ({})
+  },
+  beforeSubmit: {
+    type: Function,
+    default: () => true
   }
 })
 
@@ -275,6 +279,15 @@ const handleSendMessage = async (content: string) => {
   if (!messageContent || (typeof messageContent === 'string' && !messageContent.trim())) {
     return
   }
+
+  let result = beforeSubmit?.()
+  if (result && typeof result.then === 'function') {
+    result = await result
+  }
+  if (result !== true) {
+    return
+  }
+
   const userMessage: ChatMessage = {
     role: 'user',
     content: messageContent

packages/plugins/robot/src/components/header-extension/RobotSettingPopover.vue

@@ -1,7 +1,12 @@
 <template>
   <div ref="robotSetting" class="robot-setting">
     <div class="header">设置</div>
-    <tiny-tabs tab-style="button-card" class="full-width-tabs" v-model="state.activeName">
+    <tiny-tabs
+      tab-style="button-card"
+      class="full-width-tabs"
+      v-model="state.activeName"
+      :before-leave="handleChangeTab"
+    >
       <tiny-tab-item title="可选模型" :name="EXISTING_MODELS">
         <tiny-form
           :rules="existFormRules"
@@ -116,7 +121,7 @@
 </template>
 <script lang="ts">
 /* metaService: engine.plugins.robot.RobotSettingPopover */
-import { ref, reactive, computed } from 'vue'
+import { ref, reactive, computed, onMounted, nextTick } from 'vue'
 import type { Component } from 'vue'
 import {
   TinyForm,
@@ -199,12 +204,21 @@ export default {
     })
 
     const customizeFormRules = {
-      baseUrl: [{ required: true, message: '必填', trigger: 'blur' }]
+      baseUrl: [{ required: true, message: '必填', trigger: 'blur' }],
+      model: [{ required: true, message: '必填', trigger: 'blur' }]
     }
 
-    const existFormRules = {
-      apiKey: [{ required: true, message: '必填', trigger: 'blur' }]
-    }
+    const existFormRules = computed(() => {
+      const rules = {
+        baseUrl: [{ required: true, message: '必填', trigger: 'change' }],
+        model: [{ required: true, message: '必填', trigger: 'change' }]
+      }
+      const provider = getProviderByBaseUrl(state.existFormData.baseUrl)
+      if (provider && !provider.allowEmptyApiKey) {
+        rules.apiKey = [{ required: true, message: '必填', trigger: 'blur' }]
+      }
+      return rules
+    })
 
     const closePanel = () => {
       emit('close')
@@ -216,7 +230,7 @@ export default {
       const models = provider?.models.map(modelTransformer) || []
 
       state.existFormData.label = provider?.label || ''
-      state.existFormData.model = models[0]?.name || ''
+      state.existFormData.model = models[0]?.value || ''
       state.existFormData.completeModel = ''
 
       saveRobotSettingState({
@@ -258,6 +272,19 @@ export default {
       })
     }
 
+    const validate = () => {
+      const form = state.activeName === EXISTING_MODELS ? robotSettingExistForm : robotSettingCustomizeForm
+      form.value?.validate().catch((_error) => {})
+    }
+
+    onMounted(validate)
+
+    const handleChangeTab = (activeName, usedActiveName) => {
+      if (activeName !== usedActiveName) {
+        nextTick(validate)
+      }
+    }
+
     const initFormData = () => {
       const { activeName, existModel, customizeModel } = loadRobotSettingState() || {}
       const initModel = robotSettingState.selectedModel
@@ -285,6 +312,7 @@ export default {
     initFormData()
 
     return {
+      handleChangeTab,
       baseUrlOptions,
       modelOptions,
       compactModelOptions,

packages/plugins/robot/src/composables/useChat.ts

@@ -106,16 +106,11 @@ const updateLLMConfig = (newConfig: Omit<AIModelConfig, 'provider' | 'providerIm
 }
 
 const removeLoading = (messages: ChatMessage[], name?: string) => {
-  const lastMessage = messages.at(-1)
-  if (name === 'latest' && lastMessage.renderContent?.at(-1)?.type === 'loading') {
-    lastMessage.renderContent.pop()
-    return
-  }
-  const index = lastMessage.renderContent?.findIndex(
-    (item) => item.type === 'loading' && (name ? item.content === name : true)
-  )
+  const renderContent = messages.at(-1)?.renderContent
+  if (!renderContent || !renderContent.length) return
+  const index = renderContent.findLastIndex((item) => item.type === 'loading' && (name ? item.content === name : true))
   if (index !== -1) {
-    lastMessage.renderContent?.splice(index, 1)
+    renderContent?.splice(index, 1)
   }
 }
 
@@ -136,7 +131,7 @@ const events: UseMessageOptions['events'] = {
     }
     const lastMessage = messages.value.at(-1)
     if (choice.delta.reasoning_content || choice.delta.content || choice.delta.tool_calls?.length) {
-      removeLoading(messages.value, 'latest')
+      removeLoading(messages.value)
     }
     handleDeltaReasoning(choice, lastMessage) // eslint-disable-line
     handleDeltaContent(choice, lastMessage) // eslint-disable-line
@@ -326,7 +321,7 @@ const handleToolCall = async (
           data.choices[0].delta.content ||
           data.choices[0].delta.tool_calls?.length
         ) {
-          removeLoading(messages, 'latest')
+          removeLoading(messages)
         }
         if (data.choices[0].delta.reasoning_content) {
           handleDeltaReasoning(data.choices[0], currentMessage)
@@ -346,7 +341,7 @@ const handleToolCall = async (
         getMessageManager().messageState.status = STATUS.ERROR
       },
       onDone: async () => {
-        removeLoading(messages, 'latest')
+        removeLoading(messages)
         const toolCalls = messages.at(-1)!.tool_calls
         if (toolCalls?.length) {
           await handleToolCall(toolCalls, messages, toolMessages)
@@ -382,7 +377,7 @@ export default function () {
       chatAbortController?.abort()
       messageManager.abortRequest()
       messageManager.messageState.status = STATUS.ABORTED
-      removeLoading(messageManager.messages.value, 'latest')
+      removeLoading(messageManager.messages.value)
     },
     ...rest,
     switchConversation: (conversationId: string) => {
@@ -392,12 +387,21 @@ export default function () {
       rest.switchConversation(conversationId)
       // 切换会话后跟随切换对话模式
       if (conversation.metadata?.chatMode) {
-        robotSettingState.chatMode = conversation.metadata.chatMode as string
+        robotSettingState.chatMode = robotSettingState.chatMode as string
       } else {
         robotSettingState.chatMode = CHAT_MODE.Agent
         rest.updateMetadata(conversationId, { chatMode: CHAT_MODE.Agent })
         rest.saveConversations()
       }
+      if (robotSettingState.chatMode === CHAT_MODE.Agent) {
+        messageManager.messages.value.at(-1)?.renderContent?.forEach((item) => {
+          if (item.type === 'loading') {
+            item.status = 'failed'
+          }
+        })
+      } else {
+        removeLoading(messageManager.messages.value)
+      }
     },
     createConversation: (title?: string) => {
       createConversation(title, { chatMode: robotSettingState.chatMode })

packages/plugins/robot/src/constants/model-config.ts

@@ -13,6 +13,7 @@ export const DEFAULT_LLM_MODELS = [
     provider: 'bailian',
     label: '阿里云百炼',
     baseUrl: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+    allowEmptyApiKey: false,
     models: [
       // Agent/chat
       {
@@ -71,6 +72,7 @@ export const DEFAULT_LLM_MODELS = [
     provider: 'deepseek',
     label: 'DeepSeek',
     baseUrl: 'https://api.deepseek.com/v1',
+    allowEmptyApiKey: false,
     models: [
       {
         label: 'DeepSeek',