@opentiny/tiny-robot-cli 0.5.0 → 0.5.2-alpha.11

package/README.md

@@ -7,6 +7,7 @@ A lightweight CLI for scaffolding TinyRobot-based product projects.
 ```bash
 npx @opentiny/tiny-robot-cli create my-app
 pnpm dlx @opentiny/tiny-robot-cli create my-app
+npx @opentiny/tiny-robot-cli add chat
 ```
 
 ## Options
@@ -14,6 +15,15 @@ pnpm dlx @opentiny/tiny-robot-cli create my-app
 - `-t, --template <name>`: template name, currently supports `basic`
 - `-h, --help`: show help
 
+`add chat` copies the complete Chat example from the `chat-add` template, including its runtime, UI configuration, composables, components, and styles. It updates these dependencies to `0.5.2-alpha.10`:
+
+- `@opentiny/tiny-robot`
+- `@opentiny/tiny-robot-chat`
+- `@opentiny/tiny-robot-kit`
+- `@opentiny/tiny-robot-svgs`
+
+Configure the generated `.env` file with the provider API URL and API key before starting the project.
+
 ## Template Documentation
 
 Template-specific features and environment variables are documented in each template directory, for example:

package/bin/commands/add.js

@@ -7,6 +7,7 @@ import semver from 'semver'
 
 import {
   copyFile,
+  copyDirectory,
   findProjectRoot,
   findSubPackageRoot,
   findWorkspacePackages,
@@ -19,9 +20,17 @@ import {
   mergeEnvFile,
 } from '../utils.js'
 
-const DEP_NAME = '@opentiny/tiny-robot'
-const TARGET_VERSION = '0.5.1-alpha.2'
-const STYLE_IMPORT = "import '@opentiny/tiny-robot/dist/style.css'"
+const TARGET_VERSION = '0.5.2-alpha.10'
+const DEPENDENCIES = {
+  '@opentiny/tiny-robot': TARGET_VERSION,
+  '@opentiny/tiny-robot-chat': TARGET_VERSION,
+  '@opentiny/tiny-robot-kit': TARGET_VERSION,
+  '@opentiny/tiny-robot-svgs': TARGET_VERSION,
+}
+const STYLE_IMPORTS = [
+  "import '@opentiny/tiny-robot/dist/style.css'",
+  "import '@opentiny/tiny-robot-chat/dist/style.css'",
+]
 
 function logUnavailable(label) {
   logSkip(`${label} could not be applied`)
@@ -93,38 +102,42 @@ function findMainEntry(targetDir) {
 
 function ensureStyleImport(mainFile) {
   const content = fs.readFileSync(mainFile, 'utf-8')
+  const lines = content.split('\n')
+  let inserted = false
 
-  if (content.includes(STYLE_IMPORT)) {
-    return {
-      type: 'skipped',
+  for (const styleImport of STYLE_IMPORTS) {
+    if (lines.some((line) => line.trim() === styleImport)) {
+      continue
     }
-  }
 
-  const lines = content.split('\n')
+    let lastImportIndex = -1
 
-  let lastImportIndex = -1
+    for (let i = 0; i < lines.length; i++) {
+      if (/^\s*import\s/.test(lines[i])) {
+        lastImportIndex = i
+        continue
+      }
 
-  for (let i = 0; i < lines.length; i++) {
-    if (/^\s*import\s/.test(lines[i])) {
-      lastImportIndex = i
-      continue
+      if (lastImportIndex !== -1) {
+        break
+      }
     }
 
-    if (lastImportIndex !== -1) {
-      break
+    if (lastImportIndex === -1) {
+      lines.unshift(styleImport)
+    } else {
+      lines.splice(lastImportIndex + 1, 0, styleImport)
     }
-  }
 
-  if (lastImportIndex === -1) {
-    lines.unshift(STYLE_IMPORT)
-  } else {
-    lines.splice(lastImportIndex + 1, 0, STYLE_IMPORT)
+    inserted = true
   }
 
-  fs.writeFileSync(mainFile, lines.join('\n'))
+  if (inserted) {
+    fs.writeFileSync(mainFile, lines.join('\n'))
+  }
 
   return {
-    type: 'inserted',
+    type: inserted ? 'inserted' : 'skipped',
   }
 }
 
@@ -186,7 +199,7 @@ function ensureDependency(pkg, name, targetVersion) {
 function printDependencyResult(result, name) {
   switch (result.type) {
     case 'added':
-      logSuccess(`Added ${name}@${TARGET_VERSION}`)
+      logSuccess(`Added ${name}@${result.to}`)
       break
 
     case 'updated':
@@ -201,6 +214,7 @@ function printDependencyResult(result, name) {
 
 function getChatFeatureFiles(targetDir) {
   const mainEntry = findMainEntry(targetDir)
+  const templateSource = getTemplateFile('src')
 
   return [
     {
@@ -212,12 +226,44 @@ function getChatFeatureFiles(targetDir) {
       },
     },
     {
-      label: 'main entry style import',
+      label: 'main entry style imports',
       target: mainEntry,
       action() {
         return 'modify'
       },
     },
+    {
+      label: 'Chat UI components',
+      target: path.join(targetDir, 'src/components'),
+      template: path.join(templateSource, 'components'),
+      action() {
+        return 'merge'
+      },
+    },
+    {
+      label: 'Chat composables',
+      target: path.join(targetDir, 'src/composables'),
+      template: path.join(templateSource, 'composables'),
+      action() {
+        return 'merge'
+      },
+    },
+    {
+      label: 'Chat configuration',
+      target: path.join(targetDir, 'src/config'),
+      template: path.join(templateSource, 'config'),
+      action() {
+        return 'merge'
+      },
+    },
+    {
+      label: 'Chat app styles',
+      target: path.join(targetDir, 'src/index.css'),
+      template: path.join(templateSource, 'index.css'),
+      action(fileExists) {
+        return fileExists ? 'overwrite' : 'create'
+      },
+    },
     {
       label: '.env',
       target: path.join(targetDir, '.env'),
@@ -247,7 +293,11 @@ async function selectFileChanges(files) {
 
       const descriptions = {
         'TinyRobotChat.vue': 'integrate TinyRobot chat component',
-        'main entry style import': 'import TinyRobot styles',
+        'main entry style imports': 'import TinyRobot styles',
+        'Chat UI components': 'copy Chat UI components',
+        'Chat composables': 'copy Chat composables',
+        'Chat configuration': 'copy Chat runtime and UI configuration',
+        'Chat app styles': 'copy Chat application styles',
         '.env': 'add environment variables',
         'package.json': 'add TinyRobot dependencies',
       }
@@ -310,14 +360,29 @@ async function addFeature(targetDir, type) {
     logSkippedSelection(componentFile.label)
   }
 
+  for (const file of files.filter((item) => item.label.startsWith('Chat '))) {
+    if (!isSelected(selectedFiles, file.label)) {
+      logSkippedSelection(file.label)
+      continue
+    }
+
+    if (file.target.endsWith('.css')) {
+      copyFile(file.template, file.target)
+    } else {
+      copyDirectory(file.template, file.target)
+    }
+
+    logSuccess(`Copied ${file.label}`)
+  }
+
   const mainFile = files.find((f) => {
-    return f.label === 'main entry style import'
+    return f.label === 'main entry style imports'
   })
 
   if (!mainFile?.target) {
     needsManualStyleImport = true
 
-    logUnavailable('main entry style import (main.ts/js not found)')
+    logUnavailable('main entry style imports (main.ts/js not found)')
   } else {
     if (isSelected(selectedFiles, mainFile.label)) {
       const result = ensureStyleImport(mainFile.target)
@@ -369,15 +434,17 @@ async function addFeature(targetDir, type) {
   const pkg = readPackageJson(pkgPath)
 
   if (isSelected(selectedFiles, 'package.json')) {
-    const result = ensureDependency(pkg, DEP_NAME, TARGET_VERSION)
+    for (const [name, version] of Object.entries(DEPENDENCIES)) {
+      const result = ensureDependency(pkg, name, version)
+
+      if (result.type !== 'skipped') {
+        dependencyChanged = true
+      }
 
-    if (result.type !== 'skipped') {
-      dependencyChanged = true
+      printDependencyResult(result, name)
     }
 
     writePackageJson(pkgPath, pkg)
-
-    printDependencyResult(result, DEP_NAME)
   } else {
     logSkippedSelection('package.json')
   }
@@ -396,7 +463,13 @@ function printNextSteps({ needsManualStyleImport, envChanged, dependencyChanged
 
   if (needsManualStyleImport) {
     steps.push(
-      ['Import TinyRobot styles in your application entry file.', '', 'Example:', '', `  ${STYLE_IMPORT}`].join('\n'),
+      [
+        'Import TinyRobot styles in your application entry file.',
+        '',
+        'Example:',
+        '',
+        ...STYLE_IMPORTS.map((styleImport) => `  ${styleImport}`),
+      ].join('\n'),
     )
   }
 

package/bin/utils.js

@@ -88,6 +88,10 @@ export function validateProjectName(name) {
 }
 
 export function copyTemplate(sourceDir, targetDir) {
+  copyDirectory(sourceDir, targetDir)
+}
+
+export function copyDirectory(sourceDir, targetDir) {
   fs.cpSync(sourceDir, targetDir, {
     recursive: true,
     filter: (source) => {

package/package.json

@@ -1,7 +1,14 @@
 {
   "name": "@opentiny/tiny-robot-cli",
-  "version": "0.5.0",
+  "version": "0.5.2-alpha.11",
   "description": "CLI to scaffold TinyRobot product projects",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/opentiny/tiny-robot.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
   "type": "module",
   "bin": {
     "tiny-robot-cli": "./bin/cli.js"
@@ -25,5 +32,5 @@
     "semver": "^7.8.1",
     "yaml": "^2.9.0"
   },
-  "gitHead": "47f98d6b156e80289b8b7b5b213b9575dd230210"
+  "gitHead": "09317e7ea1f51d2b8b6a97ebb7b2ceee9be4a963"
 }

package/templates/chat/.env.example

@@ -1 +1,5 @@
 VITE_DEEPSEEK_API_KEY=
+VITE_DEEPSEEK_API_URL=
+VITE_QWEN_API_URL=
+VITE_ALIYUN_DASHSCOPE_KEY=
+VITE_AMAP_MCP_URL=

package/templates/chat/README.md

@@ -0,0 +1,36 @@
+# chat-add
+
+`chat-add` 是一个独立的 Chat 扩展模板，提供通用工作助手场景的最小工程结构。
+
+## 启动
+
+```powershell
+pnpm --filter chat-add dev
+```
+
+## 构建
+
+```powershell
+pnpm --filter chat-add type-check
+pnpm --filter chat-add build
+```
+
+## 接入真实模型
+
+在 `packages/chat-add/.env.local` 中配置 `VITE_QWEN_API_URL`、`VITE_ALIYUN_DASHSCOPE_KEY`、`VITE_DEEPSEEK_API_URL` 和 `VITE_DEEPSEEK_API_KEY`，重启 Vite 后即可使用模型选择器中的真实模型。配置读取逻辑位于 `src/config/chat-runtime.ts`。
+
+## 目录职责
+
+- `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/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": "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.1.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>