@opentiny/tiny-robot-cli 0.5.2-alpha.3 → 1.0.0-beta.1

package/templates/basic/src/App.vue

@@ -1,130 +1,122 @@
-<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,
+    },
+  },
+} 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 +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

@@ -0,0 +1,46 @@
+# TinyRobot Chat Add
+
+这是一个独立的 Chat 扩展模板，提供通用工作助手场景的最小工程结构。
+
+## 启动
+
+```powershell
+pnpm dev
+```
+
+## 构建
+
+```powershell
+pnpm type-check
+pnpm build
+```
+
+## 接入真实模型
+
+复制项目根目录的 `.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`。
+
+## 模型配置
+
+模型配置中的 `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/config/chat-ui.ts`: Chat UI、提示词、模板和菜单配置。
+- `src/config/chat-runtime.ts`: MCP 示例和模型配置。
+- `src/components`: 窗口头部和输入区工具。
+- `src/composables/useWindow.ts`: floating、fullscreen 窗口状态。
+- `src/index.css`: 仅作用于 Chat 容器的组件样式和 Surface 样式变量，不重置宿主页面的全局样式。
+
+## 替换数据
+
+直接修改 `src/config/chat-ui.ts` 和 `src/config/chat-runtime.ts` 中导出的数据；组件通过 props 使用这些配置。
+
+## 切换窗口模式
+
+默认显示 AI 头像按钮，点击后展开 Chat。窗口头部提供 floating、fullscreen 两种模式。floating 支持拖拽、缩放和位置恢复；fullscreen 铺满对应区域，可使用 Escape 返回悬浮窗口。点击关闭后返回 AI 头像按钮。

package/templates/chat/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chat Add Template</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/chat/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "__PROJECT_NAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "type-check": "vue-tsc -b"
+  },
+  "dependencies": {
+    "@opentiny/tiny-robot": "__TINY_ROBOT_VERSION__",
+    "@opentiny/tiny-robot-chat": "__TINY_ROBOT_VERSION__",
+    "@opentiny/tiny-robot-kit": "__TINY_ROBOT_VERSION__",
+    "@opentiny/tiny-robot-svgs": "__TINY_ROBOT_VERSION__",
+    "@vueuse/core": "13.9.0",
+    "vue": "^3.5.40"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/tsconfig": "^0.9.1",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.0",
+    "vue-tsc": "^3.3.8"
+  }
+}

package/templates/chat/src/TinyRobotChat.vue

@@ -1,35 +1,96 @@
 <script setup lang="ts">
-import type { ChatMcpServerConfig, ChatModelOption } from '@opentiny/tiny-robot/experimental'
-import { TrThemeProvider } from '@opentiny/tiny-robot'
-import { TrChat } from '@opentiny/tiny-robot/experimental'
-import { ref } from 'vue'
+import type { HistoryMenuItem, PromptProps, TemplateItem } from '@opentiny/tiny-robot'
+import { TrSender, TrThemeProvider as TrTheme } from '@opentiny/tiny-robot'
+import { TrChat, useChatHistoryItems, useLocalChatRuntime, type ChatHistoryItem } from '@opentiny/tiny-robot-chat'
+import { IconAi } from '@opentiny/tiny-robot-svgs'
+import { computed, reactive, ref } from 'vue'
+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 show = ref(false)
-const fullscreen = ref(false)
+const runtime = useLocalChatRuntime({ modelProviders, mcpServers })
+const window = reactive(useWindow())
+const chatRef = ref<{ send: (payload: { text: string }) => Promise<boolean> } | null>(null)
+const currentTemplate = ref<TemplateItem[]>([])
+const showHistory = ref(false)
+const historyData = useChatHistoryItems({ conversations: () => runtime.conversations.value, defaultTitle: '' })
+const activeConversationId = computed(() => runtime.activeConversation.value?.id)
+const templateExtensions = [TrSender.template(currentTemplate as never, { appendTo: '.chat-add-window' })]
+const chatUi = computed(() => createChatUi({ floatingOptions: window.floatingOptions, templateExtensions }))
 
-const chatModelOptions: ChatModelOption[] = [
-  {
-    id: 'deepseek-chat',
-    provider: 'deepseek',
-    name: 'DeepSeek V4 Flash',
-    model: 'deepseek-v4-flash',
-    apiUrl: 'https://api.deepseek.com/chat/completions',
-    apiKey: import.meta.env.VITE_DEEPSEEK_API_KEY || '',
-  },
-]
+function handlePromptClick({ item }: { item: PromptProps }): void {
+  if (item.description) void chatRef.value?.send({ text: item.description })
+}
 
-const chatMcpServers: Record<string, ChatMcpServerConfig> = {}
+function handleNewSession(): void {
+  void runtime.actions.createConversation()
+  showHistory.value = false
+}
+
+function handleHistorySelect(item: ChatHistoryItem): void {
+  void runtime.actions.switchConversation(item.raw.id)
+  showHistory.value = false
+}
+
+function handleHistoryRename(title: string, item: ChatHistoryItem): void {
+  void runtime.actions.renameConversation(item.raw.id, title)
+}
+
+function handleHistoryAction(action: HistoryMenuItem, item: ChatHistoryItem): void {
+  if (action.id === 'delete') void runtime.actions.deleteConversation(item.raw.id)
+}
 </script>
 
 <template>
-  <TrThemeProvider>
-    <TrChat
-      v-model:show="show"
-      v-model:fullscreen="fullscreen"
-      title="TrChat Preview"
-      system-prompt="You are a helpful assistant."
-      :model-options="chatModelOptions"
-      :mcp-servers="chatMcpServers"
-    />
-  </TrThemeProvider>
+  <TrTheme>
+    <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>

package/templates/chat/src/components/ComposerTools.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { SuggestionData, SuggestionItem, TemplateItem } from '@opentiny/tiny-robot'
+import { TrDropdownMenu, TrSuggestionPillButton, TrSuggestionPills, TrSuggestionPopover } from '@opentiny/tiny-robot'
+import type { ChatSenderSlotProps } from '@opentiny/tiny-robot-chat'
+import { IconSparkles } from '@opentiny/tiny-robot-svgs'
+import type { ChatMenuItem, TemplateCategory, TemplateSuggestionItem } from '../config/chat-ui'
+import type { McpExample } from '../config/chat-runtime'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  templateCategories: readonly TemplateCategory[]
+  mcpExamples: readonly McpExample[]
+  menus: readonly ChatMenuItem[]
+  submit: ChatSenderSlotProps['submit']
+}>()
+
+const currentTemplate = defineModel<TemplateItem[]>('currentTemplate', { required: true })
+const suggestionData: SuggestionData = props.mcpExamples.map((item) => ({ id: item.id, text: item.request }))
+const mcpMenuItems = props.mcpExamples.map((item) => ({ id: item.id, text: item.request }))
+const mcpMenu = computed(() => props.menus.find((menu) => menu.action === 'mcp'))
+const templateMenus = computed(() =>
+  props.templateCategories.map((category) => ({
+    ...category,
+    items: category.items.map((item) => ({ id: item.id, text: item.text, template: item })),
+  })),
+)
+const overlayTarget = '.chat-add-window'
+
+function fillTemplate(template: TemplateSuggestionItem): void {
+  currentTemplate.value = template.template.map((item) => ({ ...item }))
+}
+
+function submitSuggestion(item: SuggestionItem): void {
+  props.submit({ text: item.text })
+}
+</script>
+
+<template>
+  <div class="chat-add-tools">
+    <TrSuggestionPopover :append-to="overlayTarget" :data="suggestionData" @item-click="submitSuggestion">
+      <template #trigger>
+        <TrSuggestionPillButton title="常用查询"
+          ><IconSparkles style="font-size: 16px; color: #1476ff"
+        /></TrSuggestionPillButton>
+      </template>
+    </TrSuggestionPopover>
+    <TrSuggestionPills class="chat-add-tools__pills">
+      <TrDropdownMenu
+        v-if="mcpMenu"
+        :append-to="overlayTarget"
+        :items="mcpMenuItems"
+        trigger="click"
+        @item-click="(item) => submitSuggestion(item as SuggestionItem)"
+      >
+        <template #trigger
+          ><TrSuggestionPillButton>{{ mcpMenu.title }}</TrSuggestionPillButton></template
+        >
+      </TrDropdownMenu>
+      <TrDropdownMenu
+        v-for="category in templateMenus"
+        :key="category.id"
+        :append-to="overlayTarget"
+        :items="category.items as never"
+        trigger="click"
+        @item-click="(item) => fillTemplate((item as unknown as { template: TemplateSuggestionItem }).template)"
+      >
+        <template #trigger
+          ><TrSuggestionPillButton>{{ category.title }}</TrSuggestionPillButton></template
+        >
+      </TrDropdownMenu>
+    </TrSuggestionPills>
+  </div>
+</template>
+
+<style scoped>
+.chat-add-tools {
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+}
+.chat-add-tools__pills {
+  min-width: 0;
+  flex: 1;
+}
+.chat-add-tools__pills :deep(.tr-suggestion-pills__container) {
+  min-width: 0;
+  mask: linear-gradient(to right, rgb(0 0 0 / 100%) 80%, rgb(0 0 0 / 0%) 100%);
+}
+@container (max-width: 519px) {
+  .chat-add-tools {
+    padding: 8px;
+  }
+}
+</style>