feat: 添加LLM信息填写对话框及相关逻辑，更新依赖版本

Author: zzcr

examples/sites/env/.env

@@ -6,3 +6,6 @@ VITE_APP_MODE='pc'
 
 VITE_APP_BUILD_BASE_URL='/'
 VITE_PLAYGROUND_URL=/playground.html
+
+VITE_LLM_API_KEY=
+VITE_LLM_URL=https://api.deepseek.com/v1

examples/sites/package.json

@@ -27,7 +27,7 @@
     "@docsearch/css": "^3.8.0",
     "@docsearch/js": "^3.8.0",
     "@docsearch/react": "npm:@docsearch/css",
-    "@opentiny/next-sdk": "0.0.1-alpha.4",
+    "@opentiny/next-sdk": "0.0.1-alpha.5",
     "@opentiny/tiny-robot": "0.3.0-alpha.3",
     "@opentiny/tiny-robot-kit": "0.3.0-alpha.3",
     "@opentiny/tiny-robot-svgs": "0.3.0-alpha.3",

examples/sites/src/App.vue

@@ -10,20 +10,68 @@
     <div class="right-panel" :class="{ collapsed: !showTinyRobot }">
       <tiny-robot-chat />
     </div>
-    <IconAi @click="showTinyRobot = !showTinyRobot" class="style-settings-icon"></IconAi>
+    <IconAi @click="handleShowTinyRobot" class="style-settings-icon"></IconAi>
+    <tiny-dialog-box
+      v-model:visible="boxVisibility"
+      :close-on-click-modal="false"
+      title="请填写您的LLM信息, 否则无法体验智能化能力"
+      width="30%"
+    >
+      <div>
+        <tiny-form ref="formRef" :model="createData" label-width="120px">
+          <tiny-form-item label="LLM URL" prop="llmUrl" :rules="{ required: true, messages: '必填', trigger: 'blur' }">
+            <tiny-input v-model="createData.llmUrl"></tiny-input>
+          </tiny-form-item>
+          <tiny-form-item
+            label="API Key"
+            prop="llmApiKey"
+            :rules="{ required: true, messages: '必填', trigger: 'blur' }"
+          >
+            <tiny-input v-model="createData.llmApiKey"></tiny-input>
+          </tiny-form-item>
+          <tiny-form-item>
+            <tiny-button @click="submit" type="primary">保存</tiny-button>
+          </tiny-form-item>
+        </tiny-form>
+      </div>
+    </tiny-dialog-box>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, provide, ref } from 'vue'
-import { TinyConfigProvider, TinyModal } from '@opentiny/vue'
+import { onMounted, provide, ref, reactive } from 'vue'
+import {
+  TinyConfigProvider,
+  TinyModal,
+  TinyDialogBox,
+  TinyForm,
+  TinyFormItem,
+  TinyInput,
+  TinyButton
+} from '@opentiny/vue'
 import useTheme from './tools/useTheme'
 import TinyRobotChat from './components/tiny-robot-chat.vue'
 import { IconAi } from '@opentiny/tiny-robot-svgs'
 import { showTinyRobot } from './composable/utils'
 import { createServer, createInMemoryTransport } from '@opentiny/next-sdk'
-
 import { createGlobalMcpTool } from './tools/globalMcpTool'
+import { $local, isEnvLLMDefined, isLocalLLMDefined } from './composable/utils'
+
+const boxVisibility = ref(false)
+const formRef = ref()
+const createData = reactive({
+  llmUrl: $local.llmUrl || import.meta.env.VITE_LLM_URL,
+  llmApiKey: $local.llmApiKey || import.meta.env.VITE_LLM_API_KEY
+})
+
+const submit = () => {
+  formRef.value.validate().then(() => {
+    $local.llmUrl = createData.llmUrl
+    $local.llmApiKey = createData.llmApiKey
+    boxVisibility.value = false
+    window.location.reload()
+  })
+}
 
 const previewUrl = ref(import.meta.env.VITE_PLAYGROUND_URL)
 const modalSHow = ref(false)
@@ -65,6 +113,14 @@ provide('showPreview', (url) => {
   previewUrl.value = url
   modalSHow.value = true
 })
+
+const handleShowTinyRobot = () => {
+  if (!isEnvLLMDefined && !isLocalLLMDefined) {
+    boxVisibility.value = true
+  } else {
+    showTinyRobot.value = !showTinyRobot.value
+  }
+}
 </script>
 
 <style scoped lang="less">

examples/sites/src/composable/agentModelProvider.ts

@@ -5,6 +5,7 @@ import type { StreamHandler } from '@opentiny/tiny-robot-kit'
 import { BaseModelProvider } from '@opentiny/tiny-robot-kit'
 import type { AIModelConfig } from '@opentiny/tiny-robot-kit'
 import { reactive } from 'vue'
+import { $local, isEnvLLMDefined } from './utils'
 
 // 创建nextClient
 const nextClient = createClient(
@@ -57,8 +58,8 @@ const onToolCallChain = (extra: any, handler: StreamHandler) => {
 
 const mcpHost = createMCPHost({
   llmOption: {
-    url: 'https://api.deepseek.com/v1',
-    apiKey: 'xxx',
+    url: isEnvLLMDefined ? import.meta.env.VITE_LLM_URL : $local.llmUrl || '',
+    apiKey: isEnvLLMDefined ? import.meta.env.VITE_LLM_API_KEY : $local.llmApiKey || '',
     dangerouslyAllowBrowser: true,
     model: 'deepseek-chat',
     llm: 'deepseek'

examples/sites/src/composable/utils.ts

@@ -5,6 +5,12 @@
 
 import { ref } from 'vue'
 
-export { $local, $session } from './storage'
+import { $local, $session } from './storage'
 
-export const showTinyRobot = ref(true)
+export { $local, $session }
+
+export const showTinyRobot = ref(false)
+
+// 如果环境变量和本地变量都未定义，则提示用户填写
+export const isEnvLLMDefined = Boolean(import.meta.env.VITE_LLM_API_KEY && import.meta.env.VITE_LLM_URL)
+export const isLocalLLMDefined = Boolean($local.llmUrl && $local.llmApiKey)