@opentiny/tiny-robot-cli 0.5.2-alpha.13 → 0.5.2-alpha.15

package/templates/basic/src/App.vue

@@ -1,130 +1,123 @@
-<template>
-  <TrTheme>
-    <main class="app chat-card">
-      <ConversationHistory />
-
-      <section class="chat-panel">
-        <div class="chat-panel-content">
-          <p v-if="!hasApiConfig" class="config-warning">
-            缺少 API 配置，请在 <code>.env</code> 中设置当前模型服务商对应的 Key。
-          </p>
-          <header class="chat-header">
-            <HistoryDrawerButton @click="historyDrawerOpen = true" />
-            <h3 v-if="currentConversationTitle">{{ currentConversationTitle }}</h3>
-            <ThemeToggleButton v-if="isWelcomePage" />
-          </header>
-
-          <ChatList />
-
-          <ChatSender />
-        </div>
-      </section>
-    </main>
-  </TrTheme>
-</template>
-
 <script setup lang="ts">
+import {
+  TrChat,
+  useLocalChatRuntime,
+  type ChatMcpServers,
+  type ChatProviderConfig,
+  type ChatUIOptions,
+} from '@opentiny/tiny-robot-chat'
 import { TrThemeProvider as TrTheme } from '@opentiny/tiny-robot'
-import { computed, provide, ref } from 'vue'
-import ChatList from './components/ChatList.vue'
-import ChatSender from './components/ChatSender.vue'
-import ConversationHistory from './components/ConversationHistory.vue'
-import HistoryDrawerButton from './components/HistoryDrawerButton.vue'
-import ThemeToggleButton from './components/ThemeToggleButton.vue'
-import { useChat } from './composables/useChat'
-import { useModel } from './composables/useModel'
-
-const { activeConversation, messages } = useChat()
-const { hasApiConfig } = useModel()
-const historyDrawerOpen = ref(false)
-provide('historyDrawerOpen', historyDrawerOpen)
-
-const isWelcomePage = computed(() => {
-  return messages.value.filter((item) => item.role !== 'system').length === 0
+import { IconBailian, IconDeepseek } from '@opentiny/tiny-robot-svgs'
+
+const modelProviders: ChatProviderConfig[] = [
+  {
+    type: 'qwen',
+    label: 'DashScope',
+    apiUrl: import.meta.env.VITE_QWEN_API_URL?.trim() || undefined,
+    apiKey: import.meta.env.VITE_ALIYUN_DASHSCOPE_KEY?.trim(),
+    models: [
+      {
+        id: 'qwen3.7-flash',
+        label: 'Qwen3.7 Flash',
+        icon: IconBailian,
+        capabilities: {
+          thinking: true,
+          search: true,
+        },
+      },
+      {
+        id: 'qwen3.7-plus',
+        label: 'Qwen3.7 Plus',
+        icon: IconBailian,
+        capabilities: {
+          thinking: true,
+          search: true,
+        },
+      },
+      {
+        id: 'qwen3.7-max',
+        label: 'Qwen3.7 Max',
+        icon: IconBailian,
+        capabilities: {
+          thinking: true,
+          search: true,
+        },
+      },
+    ],
+  },
+  {
+    type: 'deepseek',
+    apiUrl: import.meta.env.VITE_DEEPSEEK_API_URL?.trim() || undefined,
+    apiKey: import.meta.env.VITE_DEEPSEEK_API_KEY?.trim(),
+    models: [
+      {
+        id: 'deepseek-v4-flash',
+        label: 'DeepSeek V4 Flash',
+        icon: IconDeepseek,
+        capabilities: {
+          thinking: true,
+        },
+      },
+      {
+        id: 'deepseek-v4-pro',
+        label: 'DeepSeek V4 Pro',
+        icon: IconDeepseek,
+        capabilities: {
+          thinking: true,
+        },
+      },
+    ],
+  },
+]
+
+const amapMcpApiKey = import.meta.env.VITE_ALIYUN_DASHSCOPE_KEY?.trim()
+
+const mcpServers = [
+  {
+    id: 'amap-maps',
+    name: '高德地图',
+    description: '覆盖地图、导航、地理编码、天气、路径规划、距离测量、关键词搜索和周边搜索等地理信息服务。',
+    baseUrl: import.meta.env.VITE_AMAP_MCP_URL?.trim() || 'https://dashscope.aliyuncs.com/api/v1/mcps/amap-maps/mcp',
+    icon: 'https://img.alicdn.com/imgextra/i4/O1CN01iPPabT1EGRN6uatHP_!!6000000000324-0-tps-512-512.jpg',
+    headers: amapMcpApiKey ? { Authorization: `Bearer ${amapMcpApiKey}` } : undefined,
+  },
+  {
+    id: 'model-context-protocol-mcp',
+    name: 'Model Context Protocol MCP',
+    description: 'MCP Server',
+    baseUrl: '/modelcontextprotocol-mcp',
+    installed: true,
+  },
+] satisfies ChatMcpServers
+
+const runtime = useLocalChatRuntime({
+  mcpServers,
+  modelProviders,
 })
 
-const currentConversationTitle = computed(() => {
-  return activeConversation.value?.title
-})
+const chatUi = {
+  layout: {
+    rightAside: {
+      mode: 'dock',
+      width: 400,
+      defaultOpen: false,
+    },
+  },
+} satisfies ChatUIOptions
 </script>
 
-<style scoped>
-.app {
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: stretch;
-  padding: 0;
-}
-
-.chat-card {
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  gap: 0;
-  overflow: hidden;
-  align-items: stretch;
-  flex-direction: row;
-  padding: 0;
-  margin: 0;
-  border-radius: 0;
-  background: var(--tr-container-bg-default);
-  box-shadow: none;
-}
-
-.chat-panel {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  padding: 12px;
-}
-
-.chat-panel-content {
-  width: 100%;
-  max-width: 980px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  min-height: 0;
-}
-
-.chat-header h3 {
-  margin: 0;
-  flex: 1;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.chat-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.config-warning {
-  margin: 0;
-  padding: 10px 12px;
-  border-radius: 8px;
-  background: var(--tr-color-warning-light);
-  color: var(--tr-color-warning);
-  font-size: 14px;
-}
+<template>
+  <TrTheme>
+    <div class="chat-basic">
+      <TrChat :runtime="runtime" :ui="chatUi" />
+    </div>
+  </TrTheme>
+</template>
 
+<style scoped>
 @media (max-width: 959px) {
-  .chat-header {
-    position: relative;
-    justify-content: center;
-    min-height: 32px;
-  }
-
-  .chat-header h3 {
-    width: 100%;
-    text-align: center;
-    padding: 0 48px;
-    flex: none;
+  .chat-basic :deep(.tr-bubble__avatar) {
+    display: none;
   }
 }
 </style>

package/templates/basic/src/main.ts

@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
-import App from './App.vue'
-
+import '@opentiny/tiny-robot-chat/dist/style.css'
 import '@opentiny/tiny-robot/dist/style.css'
 import './style.css'
+import App from './App.vue'
 
 createApp(App).mount('#app')

package/templates/basic/tsconfig.app.json

@@ -3,14 +3,11 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "types": ["vite/client"],
-
-    /* Linting */
-    "strict": true,
+    "allowArbitraryExtensions": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
 }

package/templates/basic/tsconfig.node.json

@@ -1,26 +1,23 @@
 {
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
+    "target": "es2023",
     "lib": ["ES2023"],
-    "module": "ESNext",
     "types": ["node"],
     "skipLibCheck": true,
 
     /* Bundler mode */
-    "moduleResolution": "bundler",
+    "module": "nodenext",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
     "moduleDetection": "force",
     "noEmit": true,
 
     /* Linting */
-    "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["vite.config.ts"]
 }

package/templates/basic/vite.config.ts

@@ -1,10 +1,15 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { resolve } from 'node:path'
+
+const workspaceRoot = resolve(import.meta.dirname, '..')
 
-// https://vite.dev/config/
 export default defineConfig({
   plugins: [vue()],
   server: {
+    fs: {
+      allow: [workspaceRoot],
+    },
     proxy: {
       '/modelcontextprotocol-mcp': {
         target: 'https://modelcontextprotocol.io/mcp',

package/templates/chat/.env.example

@@ -1,2 +1,10 @@
+# Optional custom model endpoints. Leave blank to use official Provider defaults.
+VITE_QWEN_API_URL=
+VITE_DEEPSEEK_API_URL=
+
+# Optional custom MCP endpoint. Leave blank to use the official endpoint.
+VITE_AMAP_MCP_URL=
+
+# Optional local direct-connection credentials.
 VITE_ALIYUN_DASHSCOPE_KEY=
 VITE_DEEPSEEK_API_KEY=

package/templates/chat/README.md

@@ -1,37 +1,45 @@
-# chat-add
+# TinyRobot Chat Add
 
-`chat-add` 是一个可嵌入现有 Vue 应用的 Chat 扩展模板，提供通用工作助手场景的最小工程结构。
+这是一个独立的 Chat 扩展模板，提供通用工作助手场景的最小工程结构。
 
 ## 启动
 
 ```powershell
-pnpm --filter chat-add dev
+pnpm dev
 ```
 
 ## 构建
 
 ```powershell
-pnpm --filter chat-add type-check
-pnpm --filter chat-add build
+pnpm type-check
+pnpm build
 ```
 
 ## 接入真实模型
 
-将生成的 `.env.example` 复制为 `.env.local`，按需配置 `VITE_ALIYUN_DASHSCOPE_KEY` 和 `VITE_DEEPSEEK_API_KEY`，重启 Vite 后即可使用模型选择器中的真实模型。
+复制项目根目录的 `.env.example` 为 `.env.local`，配置 `VITE_QWEN_API_URL`、`VITE_ALIYUN_DASHSCOPE_KEY`、`VITE_DEEPSEEK_API_URL` 和 `VITE_DEEPSEEK_API_KEY`，重启 Vite 后即可使用模型选择器中的真实模型。模板只提供 `.env.example`，不会自动创建 `.env`。配置读取逻辑位于 `src/config/chat-runtime.ts`；使用 `add chat` 注入后，对应文件位于 `src/tiny-robot-chat/config/chat-runtime.ts`。
 
-Qwen 和 DeepSeek 默认使用 `@opentiny/tiny-robot-chat` 内置的官方接口地址。仅在使用代理、私有网关或其他地域接口时，才需要在 `.env.local` 中额外配置 `VITE_QWEN_API_URL` 或 `VITE_DEEPSEEK_API_URL`。配置读取逻辑位于 `src/tiny-robot-chat/config/chat-runtime.ts`。
+## 模型配置
+
+模型配置中的 `icon` 用于模型选择器触发器；在窄容器中，带图标的模型会只显示图标。Qwen 模型支持深度思考和联网搜索，DeepSeek 模型支持深度思考。
+
+DeepSeek 模型默认继承 `low`、`high`、`max` 三档思考强度，默认值为 `high`。开启 `深度思考` 后，模型选择器才会显示思考等级。业务侧可以在模型对象中通过 `efforts` 和 `defaultEffort` 覆盖选项；只有必须始终思考的模型才配置 `thinkingRequired: true`。
+
+## MCP 代理
+
+独立模板的 `vite.config.ts` 已配置 `/modelcontextprotocol-mcp` 代理。使用 `add chat` 时，CLI 不会复制或修改业务项目的 `vite.config.*`，需要手动把该代理配置添加到业务项目的 `server.proxy` 下，并重启 Vite。
 
 ## 目录职责
 
-- `src/TinyRobotChat.vue`: 悬浮入口、Chat 主体以及组件作用域样式。
-- `src/tiny-robot-chat/config/chat-ui.ts`: Chat UI、提示词和模板配置。
-- `src/tiny-robot-chat/config/chat-runtime.ts`: 模型配置和留给后续集成的空 MCP Server 列表。
-- `src/tiny-robot-chat/components`: 窗口头部和输入区工具。
-- `src/tiny-robot-chat/composables/useWindow.ts`: floating、fullscreen 窗口状态。
+- `src/config/chat-ui.ts`: Chat UI、提示词、模板和菜单配置。
+- `src/config/chat-runtime.ts`: MCP 示例和模型配置。
+- `src/components`: 窗口头部和输入区工具。
+- `src/composables/useWindow.ts`: floating、fullscreen 窗口状态。
+- `src/index.css`: 模板公共样式和 Surface 样式变量。
 
 ## 替换数据
 
-直接修改 `src/tiny-robot-chat/config/chat-ui.ts` 和 `src/tiny-robot-chat/config/chat-runtime.ts` 中导出的数据；组件通过 props 使用这些配置。
+直接修改 `src/config/chat-ui.ts` 和 `src/config/chat-runtime.ts` 中导出的数据；组件通过 props 使用这些配置。
 
 ## 切换窗口模式
 

package/templates/chat/package.json

@@ -10,11 +10,11 @@
     "type-check": "vue-tsc -b"
   },
   "dependencies": {
-    "@opentiny/tiny-robot": "0.5.2-alpha.10",
-    "@opentiny/tiny-robot-chat": "0.5.2-alpha.10",
-    "@opentiny/tiny-robot-kit": "0.5.2-alpha.10",
-    "@opentiny/tiny-robot-svgs": "0.5.2-alpha.10",
-    "@vueuse/core": "13.9.0",
+    "@opentiny/tiny-robot": "0.5.2-alpha.15",
+    "@opentiny/tiny-robot-chat": "0.5.2-alpha.15",
+    "@opentiny/tiny-robot-kit": "0.5.2-alpha.15",
+    "@opentiny/tiny-robot-svgs": "0.5.2-alpha.15",
+    "@vueuse/core": "13.1.0",
     "vue": "^3.5.40"
   },
   "devDependencies": {

package/templates/chat/src/TinyRobotChat.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
 import type { HistoryMenuItem, PromptProps, TemplateItem } from '@opentiny/tiny-robot'
 import { TrSender, TrThemeProvider as TrTheme } from '@opentiny/tiny-robot'
-import '@opentiny/tiny-robot/dist/style.css'
 import { TrChat, useChatHistoryItems, useLocalChatRuntime, type ChatHistoryItem } from '@opentiny/tiny-robot-chat'
-import '@opentiny/tiny-robot-chat/dist/style.css'
 import { IconAi } from '@opentiny/tiny-robot-svgs'
 import { computed, reactive, ref } from 'vue'
-import ComposerTools from './tiny-robot-chat/components/ComposerTools.vue'
-import WindowHeader from './tiny-robot-chat/components/WindowHeader.vue'
-import { createChatUi, templateCategories } from './tiny-robot-chat/config/chat-ui'
-import { mcpServers, modelProviders } from './tiny-robot-chat/config/chat-runtime'
-import { useWindow } from './tiny-robot-chat/composables/useWindow'
+import ComposerTools from './components/ComposerTools.vue'
+import WindowHeader from './components/WindowHeader.vue'
+import { composerMenus, createChatUi, templateCategories } from './config/chat-ui'
+import { mcpExamples, mcpServers, modelProviders } from './config/chat-runtime'
+import { useWindow } from './composables/useWindow'
 
 const runtime = useLocalChatRuntime({ modelProviders, mcpServers })
 const window = reactive(useWindow())
@@ -47,130 +45,52 @@ function handleHistoryAction(action: HistoryMenuItem, item: ChatHistoryItem): vo
 
 <template>
   <TrTheme>
-    <button
-      v-if="!window.show"
-      class="chat-add-launcher"
-      type="button"
-      title="打开 TinyRobot"
-      aria-label="打开 TinyRobot"
-      @click="window.open"
-    >
-      <IconAi style="font-size: 32px" />
-    </button>
-    <TrChat
-      v-if="window.show"
-      ref="chatRef"
-      :class="['chat-add-window', `chat-add-window--${window.displayMode}`]"
-      :style="window.layoutStyle"
-      :runtime="runtime"
-      :ui="chatUi"
-      v-model:floating-state="window.floatingState"
-      @prompt-click="handlePromptClick"
-    >
-      <template #layout-header>
-        <WindowHeader
-          :display-mode="window.displayMode"
-          :show-history="showHistory"
-          :history-data="historyData"
-          :active-conversation-id="activeConversationId"
-          @new-session="handleNewSession"
-          @select-history="handleHistorySelect"
-          @rename-history="handleHistoryRename"
-          @history-action="handleHistoryAction"
-          @update:show-history="showHistory = $event"
-          @change-mode="window.setDisplayMode"
-          @close="window.close"
-        />
-      </template>
-      <template #composer-before>
-        <ComposerTools v-model:current-template="currentTemplate" :template-categories="templateCategories" />
-      </template>
-    </TrChat>
+    <main class="chat-add-app">
+      <button
+        v-if="!window.show"
+        class="chat-add-launcher"
+        type="button"
+        title="打开 TinyRobot"
+        aria-label="打开 TinyRobot"
+        @click="window.open"
+      >
+        <IconAi style="font-size: 32px" />
+      </button>
+      <TrChat
+        v-if="window.show"
+        ref="chatRef"
+        :class="['chat-add-window', `chat-add-window--${window.displayMode}`]"
+        :style="window.layoutStyle"
+        :runtime="runtime"
+        :ui="chatUi"
+        v-model:floating-state="window.floatingState"
+        @prompt-click="handlePromptClick"
+      >
+        <template #layout-header>
+          <WindowHeader
+            :display-mode="window.displayMode"
+            :show-history="showHistory"
+            :history-data="historyData"
+            :active-conversation-id="activeConversationId"
+            @new-session="handleNewSession"
+            @select-history="handleHistorySelect"
+            @rename-history="handleHistoryRename"
+            @history-action="handleHistoryAction"
+            @update:show-history="showHistory = $event"
+            @change-mode="window.setDisplayMode"
+            @close="window.close"
+          />
+        </template>
+        <template #composer-before="{ submit }">
+          <ComposerTools
+            v-model:current-template="currentTemplate"
+            :template-categories="templateCategories"
+            :mcp-examples="mcpExamples"
+            :menus="composerMenus"
+            :submit="submit"
+          />
+        </template>
+      </TrChat>
+    </main>
   </TrTheme>
 </template>
-
-<style scoped>
-.chat-add-launcher {
-  position: fixed;
-  right: 24px;
-  bottom: 24px;
-  z-index: var(--tr-z-index-popover, 1000);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 56px;
-  height: 56px;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: var(--tr-container-bg-default);
-  color: var(--tr-color-primary);
-  box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
-  cursor: pointer;
-}
-.chat-add-launcher:hover {
-  background: var(--tr-color-primary-light);
-}
-.chat-add-launcher:focus-visible {
-  outline: 2px solid var(--tr-color-primary);
-  outline-offset: 3px;
-}
-@media (max-width: 519px) {
-  .chat-add-launcher {
-    right: 16px;
-    bottom: 16px;
-  }
-}
-</style>
-
-<style>
-.chat-add-window {
-  --chat-prompt-min-width: 280px;
-  --tr-layout-bg-default: #f5f5f7;
-  --tr-chat-ui-header-bg: #f5f5f7;
-  --tr-chat-ui-main-bg: #f5f5f7;
-  --tr-chat-ui-footer-bg: #f5f5f7;
-  min-width: 0;
-}
-.chat-add-window .tr-welcome {
-  box-sizing: border-box;
-  width: 100%;
-  padding: 24px 24px 0;
-}
-.chat-add-window .tr-welcome__title-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.chat-add-window .tr-prompts {
-  --tr-prompts-gap: 16px;
-  box-sizing: border-box;
-  width: 100%;
-  padding: 16px 24px;
-}
-.chat-add-window .tr-prompts .tr-prompts__list-container.wrap {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(var(--chat-prompt-min-width), 1fr));
-}
-.chat-add-window .tr-prompts__list-container > .prompt-item {
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-}
-@container (max-width: 623px) {
-  .chat-add-window .tr-prompts .tr-prompts__list-container.wrap {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-@container (max-width: 519px) {
-  .chat-add-window .tr-welcome {
-    padding-inline: 12px;
-  }
-  .chat-add-window .tr-prompts {
-    padding-inline: 12px;
-  }
-  .chat-add-window .tr-bubble__avatar {
-    display: none;
-  }
-}
-</style>