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

package/README.md

@@ -15,14 +15,14 @@ npx @opentiny/tiny-robot-cli add chat
 - `-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`:
+`add chat` adds a self-contained floating Chat component, including its runtime, UI configuration, composables, component-scoped styles, and supporting components. It updates these OpenTiny 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.
+It also adds `@vueuse/core@13.9.0`. The command does not modify the application entry file or create `src/index.css`. Configure a private environment file from the generated `.env.example` before starting the project; the generated example only includes the Qwen and DeepSeek API key variables. Their API URL variables remain optional overrides for proxies, private gateways, or other regions. The CLI never creates or modifies `.env`.
 
 ## Template Documentation
 

package/bin/commands/add.js

@@ -1,4 +1,4 @@
-import { checkbox, select } from '@inquirer/prompts'
+import { confirm, select } from '@inquirer/prompts'
 import { Argument } from 'commander'
 import fs from 'node:fs'
 import path from 'node:path'
@@ -21,23 +21,13 @@ import {
 } from '../utils.js'
 
 const TARGET_VERSION = '0.5.2-alpha.10'
+const VUEUSE_VERSION = '13.9.0'
 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`)
-}
-
-function logSkippedSelection(label) {
-  logSkip(`${label} change was not selected`)
+  '@vueuse/core': VUEUSE_VERSION,
 }
 
 async function resolveTargetPackage(cwd) {
@@ -51,7 +41,6 @@ async function resolveTargetPackage(cwd) {
     }
 
     const workspacePatterns = findWorkspacePackages(workspaceRoot)
-
     const packageDirs = listPackages(workspaceRoot, workspacePatterns)
 
     invariant(packageDirs.length > 0, 'no packages found in workspace.')
@@ -72,7 +61,6 @@ async function resolveTargetPackage(cwd) {
   }
 
   console.error('Error: no package.json found.')
-
   process.exit(1)
 }
 
@@ -88,62 +76,8 @@ function writePackageJson(pkgPath, pkg) {
   fs.writeFileSync(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`)
 }
 
-function findMainEntry(targetDir) {
-  for (const file of ['src/main.ts', 'src/main.js']) {
-    const fullPath = path.join(targetDir, file)
-
-    if (fs.existsSync(fullPath)) {
-      return fullPath
-    }
-  }
-
-  return null
-}
-
-function ensureStyleImport(mainFile) {
-  const content = fs.readFileSync(mainFile, 'utf-8')
-  const lines = content.split('\n')
-  let inserted = false
-
-  for (const styleImport of STYLE_IMPORTS) {
-    if (lines.some((line) => line.trim() === styleImport)) {
-      continue
-    }
-
-    let lastImportIndex = -1
-
-    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) {
-      lines.unshift(styleImport)
-    } else {
-      lines.splice(lastImportIndex + 1, 0, styleImport)
-    }
-
-    inserted = true
-  }
-
-  if (inserted) {
-    fs.writeFileSync(mainFile, lines.join('\n'))
-  }
-
-  return {
-    type: inserted ? 'inserted' : 'skipped',
-  }
-}
-
 function insertDependencyOrdered(dependencies, name, version) {
   const next = {}
-
   let inserted = false
 
   for (const [key, value] of Object.entries(dependencies)) {
@@ -167,7 +101,6 @@ function ensureDependency(pkg, name, targetVersion) {
 
   const currentVersion = pkg.dependencies[name]
 
-  // 1. 不存在 => 新增（使用 ordered insert）
   if (!currentVersion) {
     pkg.dependencies = insertDependencyOrdered(pkg.dependencies, name, targetVersion)
 
@@ -177,22 +110,19 @@ function ensureDependency(pkg, name, targetVersion) {
     }
   }
 
-  // 2. 已存在 => 只更新版本，不调整顺序
-  const current = semver.valid(currentVersion)
-
-  if (current !== targetVersion) {
-    pkg.dependencies[name] = targetVersion
-
+  if (
+    currentVersion.startsWith('workspace:') ||
+    semver.satisfies(targetVersion, currentVersion, { includePrerelease: true })
+  ) {
     return {
-      type: 'updated',
-      from: currentVersion,
-      to: targetVersion,
+      type: 'skipped',
     }
   }
 
-  // 3. 完全一致 => 跳过
   return {
-    type: 'skipped',
+    type: 'conflict',
+    from: currentVersion,
+    to: targetVersion,
   }
 }
 
@@ -202,278 +132,168 @@ function printDependencyResult(result, name) {
       logSuccess(`Added ${name}@${result.to}`)
       break
 
-    case 'updated':
-      logSuccess(`Updated ${name} from ${result.from} to ${result.to}`)
-      break
-
     case 'skipped':
       logSkip(`${name} already satisfies required version`)
       break
   }
 }
 
-function getChatFeatureFiles(targetDir) {
-  const mainEntry = findMainEntry(targetDir)
+function getGeneratedFiles(targetDir) {
   const templateSource = getTemplateFile('src')
+  const supportTarget = path.join(targetDir, 'src/tiny-robot-chat')
 
   return [
     {
       label: 'TinyRobotChat.vue',
+      source: path.join(templateSource, 'TinyRobotChat.vue'),
       target: path.join(targetDir, 'src/TinyRobotChat.vue'),
-      template: getTemplateFile('src', 'TinyRobotChat.vue'),
-      action(fileExists) {
-        return fileExists ? 'overwrite' : 'create'
-      },
-    },
-    {
-      label: 'main entry style imports',
-      target: mainEntry,
-      action() {
-        return 'modify'
-      },
+      type: 'file',
     },
     {
       label: 'Chat UI components',
-      target: path.join(targetDir, 'src/components'),
-      template: path.join(templateSource, 'components'),
-      action() {
-        return 'merge'
-      },
+      source: path.join(templateSource, 'tiny-robot-chat/components'),
+      target: path.join(supportTarget, 'components'),
+      type: 'directory',
     },
     {
       label: 'Chat composables',
-      target: path.join(targetDir, 'src/composables'),
-      template: path.join(templateSource, 'composables'),
-      action() {
-        return 'merge'
-      },
+      source: path.join(templateSource, 'tiny-robot-chat/composables'),
+      target: path.join(supportTarget, 'composables'),
+      type: 'directory',
     },
     {
       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'),
-      template: getTemplateFile('.env.example'),
-      action(fileExists) {
-        return fileExists ? 'modify' : 'create'
-      },
-    },
-
-    {
-      label: 'package.json',
-      target: path.join(targetDir, 'package.json'),
-      action() {
-        return 'modify'
-      },
+      source: path.join(templateSource, 'tiny-robot-chat/config'),
+      target: path.join(supportTarget, 'config'),
+      type: 'directory',
     },
   ]
 }
 
-async function selectFileChanges(files) {
-  return checkbox({
-    message: 'Select which file changes to apply (all selected by default):',
-    choices: files.map((file) => {
-      const exists = file.target ? fs.existsSync(file.target) : false
-
-      const disabled = !file.target
-
-      const descriptions = {
-        'TinyRobotChat.vue': 'integrate TinyRobot chat component',
-        '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',
-      }
-
-      const description = descriptions[file.label]
+function findCopyConflicts(source, target) {
+  if (!fs.existsSync(target)) {
+    return []
+  }
 
-      return {
-        name: disabled
-          ? `${file.action(false)} ${file.label} — ${description} (main.ts/js not found)`
-          : `${file.action(exists)} ${file.label} — ${description}`,
+  const sourceStat = fs.statSync(source)
+  const targetStat = fs.statSync(target)
 
-        value: file.label,
+  if (!sourceStat.isDirectory()) {
+    return [target]
+  }
 
-        checked: !disabled,
+  if (!targetStat.isDirectory()) {
+    return [target]
+  }
 
-        disabled,
-      }
-    }),
+  return fs.readdirSync(source, { withFileTypes: true }).flatMap((entry) => {
+    return findCopyConflicts(path.join(source, entry.name), path.join(target, entry.name))
   })
 }
 
-function isSelected(selectedFiles, label) {
-  return selectedFiles.includes(label)
-}
+export function applyChatFeature(targetDir) {
+  const pkgPath = path.join(targetDir, 'package.json')
 
-async function addFeature(targetDir, type) {
-  invariant(type === 'chat', `unsupported feature: ${type}`)
+  invariant(fs.existsSync(pkgPath), 'package.json not found.')
 
-  const files = getChatFeatureFiles(targetDir)
+  const generatedFiles = getGeneratedFiles(targetDir)
+  const conflicts = generatedFiles.flatMap((file) => findCopyConflicts(file.source, file.target))
 
-  const selectedFiles = await selectFileChanges(files)
+  if (conflicts.length > 0) {
+    const conflictPaths = conflicts.map((file) => path.relative(targetDir, file)).join(', ')
 
-  if (selectedFiles.length === 0) {
-    logSkip('No changes selected.')
-    return
+    throw new Error(`Chat feature files already exist: ${conflictPaths}`)
   }
 
-  const componentFile = files.find((f) => {
-    return f.label === 'TinyRobotChat.vue'
-  })
-
-  const envFile = files.find((f) => {
-    return f.label === '.env'
-  })
-
-  invariant(componentFile, 'TinyRobotChat.vue config missing.')
-
-  invariant(envFile, '.env config missing.')
-
-  console.log('\nChange Results\n')
-
-  let needsManualStyleImport = false
-  let envChanged = false
-  let dependencyChanged = false
+  const pkg = readPackageJson(pkgPath)
+  const dependencyResults = []
 
-  if (isSelected(selectedFiles, 'TinyRobotChat.vue')) {
-    copyFile(componentFile.template, componentFile.target)
-    logSuccess(`Copied ${componentFile.label}`)
-  } else {
-    logSkippedSelection(componentFile.label)
+  for (const [name, version] of Object.entries(DEPENDENCIES)) {
+    dependencyResults.push({ name, result: ensureDependency(pkg, name, version) })
   }
 
-  for (const file of files.filter((item) => item.label.startsWith('Chat '))) {
-    if (!isSelected(selectedFiles, file.label)) {
-      logSkippedSelection(file.label)
-      continue
-    }
+  const dependencyConflicts = dependencyResults.filter(({ result }) => result.type === 'conflict')
 
-    if (file.target.endsWith('.css')) {
-      copyFile(file.template, file.target)
-    } else {
-      copyDirectory(file.template, file.target)
-    }
+  if (dependencyConflicts.length > 0) {
+    const conflictDetails = dependencyConflicts
+      .map(({ name, result }) => `${name}: found ${result.from}, required ${result.to}`)
+      .join('; ')
 
-    logSuccess(`Copied ${file.label}`)
+    throw new Error(`Dependency version conflict: ${conflictDetails}`)
   }
 
-  const mainFile = files.find((f) => {
-    return f.label === 'main entry style imports'
-  })
-
-  if (!mainFile?.target) {
-    needsManualStyleImport = true
-
-    logUnavailable('main entry style imports (main.ts/js not found)')
-  } else {
-    if (isSelected(selectedFiles, mainFile.label)) {
-      const result = ensureStyleImport(mainFile.target)
-
-      switch (result.type) {
-        case 'inserted':
-          logSuccess('Inserted TinyRobot style import')
-          break
-
-        case 'skipped':
-          logSkip('TinyRobot style import already exists')
-          break
-      }
+  for (const file of generatedFiles) {
+    if (file.type === 'file') {
+      copyFile(file.source, file.target)
     } else {
-      needsManualStyleImport = true
-
-      logSkippedSelection(mainFile.label)
+      copyDirectory(file.source, file.target)
     }
   }
 
-  if (isSelected(selectedFiles, '.env')) {
-    const envResult = mergeEnvFile(envFile.template, envFile.target)
+  const envResult = mergeEnvFile(getTemplateFile('.env.example'), path.join(targetDir, '.env.example'))
 
-    switch (envResult.type) {
-      case 'created':
-        envChanged = true
+  if (dependencyResults.some(({ result }) => result.type !== 'skipped')) {
+    writePackageJson(pkgPath, pkg)
+  }
 
-        logSuccess('Created .env')
-        break
+  return {
+    generatedFiles,
+    envResult,
+    dependencyResults,
+  }
+}
 
-      case 'merged':
-        envChanged = true
+async function addFeature(targetDir, type) {
+  invariant(type === 'chat', `unsupported feature: ${type}`)
 
-        logSuccess(`Added ${envResult.added} env variables`)
-        break
+  const shouldApply = await confirm({
+    message: `Add the complete TinyRobot chat feature to ${targetDir}?`,
+    default: true,
+  })
 
-      case 'skipped':
-        logSkip('.env already contains required variables')
-        break
-    }
-  } else {
-    logSkippedSelection('.env')
+  if (!shouldApply) {
+    logSkip('No changes applied.')
+    return
   }
 
-  const pkgPath = path.join(targetDir, 'package.json')
+  const result = applyChatFeature(targetDir)
 
-  invariant(fs.existsSync(pkgPath), 'package.json not found.')
+  console.log('\nChange Results\n')
 
-  const pkg = readPackageJson(pkgPath)
+  for (const file of result.generatedFiles) {
+    logSuccess(`Copied ${file.label}`)
+  }
 
-  if (isSelected(selectedFiles, 'package.json')) {
-    for (const [name, version] of Object.entries(DEPENDENCIES)) {
-      const result = ensureDependency(pkg, name, version)
+  switch (result.envResult.type) {
+    case 'created':
+      logSuccess('Created .env.example')
+      break
 
-      if (result.type !== 'skipped') {
-        dependencyChanged = true
-      }
+    case 'merged':
+      logSuccess(`Added ${result.envResult.added} variables to .env.example`)
+      break
 
-      printDependencyResult(result, name)
-    }
+    case 'skipped':
+      logSkip('.env.example already contains required variables')
+      break
+  }
 
-    writePackageJson(pkgPath, pkg)
-  } else {
-    logSkippedSelection('package.json')
+  for (const { name, result: dependencyResult } of result.dependencyResults) {
+    printDependencyResult(dependencyResult, name)
   }
 
   console.log(`\nSuccessfully added "${type}" feature to ${targetDir}`)
 
   printNextSteps({
-    needsManualStyleImport,
-    envChanged,
-    dependencyChanged,
+    envChanged: result.envResult.type !== 'skipped',
+    dependencyChanged: result.dependencyResults.some(({ result: dependencyResult }) => {
+      return dependencyResult.type !== 'skipped'
+    }),
   })
 }
 
-function printNextSteps({ needsManualStyleImport, envChanged, dependencyChanged }) {
-  const steps = []
-
-  if (needsManualStyleImport) {
-    steps.push(
-      [
-        'Import TinyRobot styles in your application entry file.',
-        '',
-        'Example:',
-        '',
-        ...STYLE_IMPORTS.map((styleImport) => `  ${styleImport}`),
-      ].join('\n'),
-    )
-  }
-
-  steps.push(
+function printNextSteps({ envChanged, dependencyChanged }) {
+  const steps = [
     [
       'Render <TinyRobotChat /> near your main application component.',
       '',
@@ -488,12 +308,12 @@ function printNextSteps({ needsManualStyleImport, envChanged, dependencyChanged
       '    <TinyRobotChat />',
       '  </template>',
     ].join('\n'),
-  )
+  ]
 
   if (envChanged) {
     steps.push(
       [
-        'Configure your AI provider API key in the .env file.',
+        'Copy the required variables from .env.example to your private environment file and configure a provider key.',
         '',
         'Example:',
         '',
@@ -506,10 +326,6 @@ function printNextSteps({ needsManualStyleImport, envChanged, dependencyChanged
     steps.push(['Install or update project dependencies.', '', 'Example:', '', '  pnpm install'].join('\n'))
   }
 
-  if (steps.length === 0) {
-    return
-  }
-
   console.log('\nNext Steps\n')
 
   for (const [index, step] of steps.entries()) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-robot-cli",
-  "version": "0.5.2-alpha.11",
+  "version": "0.5.2-alpha.12",
   "description": "CLI to scaffold TinyRobot product projects",
   "repository": {
     "type": "git",
@@ -19,7 +19,8 @@
     "README.md"
   ],
   "scripts": {
-    "start": "node ./bin/cli.js"
+    "start": "node ./bin/cli.js",
+    "test": "node --test ./test/*.test.js"
   },
   "license": "MIT",
   "engines": {
@@ -32,5 +33,5 @@
     "semver": "^7.8.1",
     "yaml": "^2.9.0"
   },
-  "gitHead": "09317e7ea1f51d2b8b6a97ebb7b2ceee9be4a963"
+  "gitHead": "dc033027731d2d5b863529cc65b5314a1daa33ff"
 }

package/templates/chat/.env.example

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

package/templates/chat/README.md

@@ -1,6 +1,6 @@
 # chat-add
 
-`chat-add` 是一个独立的 Chat 扩展模板，提供通用工作助手场景的最小工程结构。
+`chat-add` 是一个可嵌入现有 Vue 应用的 Chat 扩展模板，提供通用工作助手场景的最小工程结构。
 
 ## 启动
 
@@ -17,19 +17,21 @@ 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`。
+将生成的 `.env.example` 复制为 `.env.local`，按需配置 `VITE_ALIYUN_DASHSCOPE_KEY` 和 `VITE_DEEPSEEK_API_KEY`，重启 Vite 后即可使用模型选择器中的真实模型。
+
+Qwen 和 DeepSeek 默认使用 `@opentiny/tiny-robot-chat` 内置的官方接口地址。仅在使用代理、私有网关或其他地域接口时，才需要在 `.env.local` 中额外配置 `VITE_QWEN_API_URL` 或 `VITE_DEEPSEEK_API_URL`。配置读取逻辑位于 `src/tiny-robot-chat/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/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` 和 `src/config/chat-runtime.ts` 中导出的数据；组件通过 props 使用这些配置。
+直接修改 `src/tiny-robot-chat/config/chat-ui.ts` 和 `src/tiny-robot-chat/config/chat-runtime.ts` 中导出的数据；组件通过 props 使用这些配置。
 
 ## 切换窗口模式
 

package/templates/chat/package.json

@@ -14,7 +14,7 @@
     "@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",
+    "@vueuse/core": "13.9.0",
     "vue": "^3.5.40"
   },
   "devDependencies": {

package/templates/chat/src/TinyRobotChat.vue

@@ -1,14 +1,16 @@
 <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 './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'
+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'
 
 const runtime = useLocalChatRuntime({ modelProviders, mcpServers })
 const window = reactive(useWindow())
@@ -45,52 +47,130 @@ function handleHistoryAction(action: HistoryMenuItem, item: ChatHistoryItem): vo
 
 <template>
   <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>
+    <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>
   </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>

package/templates/chat/src/main.ts

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

package/templates/chat/src/tiny-robot-chat/components/ComposerTools.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { TemplateItem } from '@opentiny/tiny-robot'
+import { TrDropdownMenu, TrSuggestionPillButton, TrSuggestionPills } from '@opentiny/tiny-robot'
+import type { TemplateCategory, TemplateSuggestionItem } from '../config/chat-ui'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  templateCategories: readonly TemplateCategory[]
+}>()
+
+const currentTemplate = defineModel<TemplateItem[]>('currentTemplate', { required: true })
+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 handleTemplateSelect(item: unknown): void {
+  fillTemplate((item as { template: TemplateSuggestionItem }).template)
+}
+</script>
+
+<template>
+  <div class="chat-add-tools">
+    <TrSuggestionPills class="chat-add-tools__pills">
+      <TrDropdownMenu
+        v-for="category in templateMenus"
+        :key="category.id"
+        :append-to="overlayTarget"
+        :items="category.items as never"
+        trigger="click"
+        @item-click="handleTemplateSelect"
+      >
+        <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>

package/templates/chat/src/{composables → tiny-robot-chat/composables}/useWindow.ts

@@ -4,24 +4,34 @@ import { computed, shallowRef, watch } from 'vue'
 
 export type DisplayMode = 'floating' | 'fullscreen'
 
+const FLOATING_GAP = 24
+const FLOATING_MIN_WIDTH = 360
+const FLOATING_MIN_HEIGHT = 480
+
 export function useWindow() {
   const show = shallowRef(false)
   const displayMode = shallowRef<DisplayMode>('floating')
+  const { width, height } = useWindowSize()
   const floatingState = shallowRef<LayoutFloatingState>({
-    placement: 'center',
-    offsetX: 24,
-    offsetY: 24,
-    width: 640,
-    height: 760,
+    placement: 'top-right',
+    offsetX: FLOATING_GAP,
+    offsetY: FLOATING_GAP,
+    width: 500,
+    height: Math.max(1, height.value - FLOATING_GAP * 2),
   })
   const restoreFloatingState = shallowRef<LayoutFloatingState | null>(null)
-  const { width, height } = useWindowSize()
 
   const floatingOptions = computed<LayoutFloatingOptions>(() => ({
     draggable: displayMode.value === 'floating',
     resizable: displayMode.value === 'floating',
-    minWidth: displayMode.value === 'floating' ? 360 : undefined,
-    minHeight: displayMode.value === 'floating' ? 480 : undefined,
+    minWidth:
+      displayMode.value === 'floating'
+        ? Math.min(FLOATING_MIN_WIDTH, Math.max(1, width.value - FLOATING_GAP * 2))
+        : undefined,
+    minHeight:
+      displayMode.value === 'floating'
+        ? Math.min(FLOATING_MIN_HEIGHT, Math.max(1, height.value - FLOATING_GAP * 2))
+        : undefined,
   }))
 
   const layoutStyle = computed(() => ({

package/templates/chat/src/tiny-robot-chat/config/chat-runtime.ts

@@ -0,0 +1,26 @@
+import type { ChatMcpServers, ChatProviderConfig } from '@opentiny/tiny-robot-chat'
+
+export const mcpServers: ChatMcpServers = []
+
+export 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', capabilities: { thinking: true, search: true } },
+      { id: 'qwen3.7-plus', label: 'Qwen3.7 Plus', capabilities: { thinking: true, search: true } },
+      { id: 'qwen3.7-max', label: 'Qwen3.7 Max', 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', capabilities: { thinking: true } },
+      { id: 'deepseek-v4-pro', label: 'DeepSeek V4 Pro', capabilities: { thinking: true } },
+    ],
+  },
+]

package/templates/chat/src/{config → tiny-robot-chat/config}/chat-ui.ts

@@ -1,7 +1,7 @@
 import type { LayoutFloatingOptions } from '@opentiny/tiny-robot'
 import type { ChatSenderOptions, ChatUIOptions } from '@opentiny/tiny-robot-chat'
 import type { TemplateItem } from '@opentiny/tiny-robot'
-import { IconAi, IconEdit, IconHistory, IconNewSession, IconSparkles, IconUser } from '@opentiny/tiny-robot-svgs'
+import { IconAi, IconUser } from '@opentiny/tiny-robot-svgs'
 import { h, type CSSProperties } from 'vue'
 
 export interface ChatUiConfigOptions {
@@ -9,24 +9,6 @@ export interface ChatUiConfigOptions {
   templateExtensions: NonNullable<ChatSenderOptions['extensions']>
 }
 
-export interface ChatMenuItem {
-  id: string
-  title: string
-  icon: unknown
-  action: 'mcp' | 'template' | 'history' | 'new-session' | 'mode'
-}
-
-export const composerMenus: ChatMenuItem[] = [
-  { id: 'quick-query', title: '常用查询', icon: IconSparkles, action: 'mcp' },
-  { id: 'templates', title: '模板', icon: IconEdit, action: 'template' },
-]
-
-export const windowMenus: ChatMenuItem[] = [
-  { id: 'new-session', title: '新会话', icon: IconNewSession, action: 'new-session' },
-  { id: 'history', title: '历史会话', icon: IconHistory, action: 'history' },
-  { id: 'mode', title: '窗口模式', icon: IconSparkles, action: 'mode' },
-]
-
 export interface PromptItemData {
   label: string
   description: string
@@ -52,9 +34,9 @@ export const PROMPT_ITEMS_DATA: PromptItemData[] = [
     emoji: '✨',
   },
   {
-    label: 'MCP 工具调用',
-    description: '搜索：北京天气（输入「搜索」「MCP」「工具」等关键词可触发模拟 MCP 工具调用）',
-    emoji: '🔧',
+    label: '工作效率场景',
+    description: '需要我帮你总结内容、拆解任务，还是整理一份行动清单？',
+    emoji: '⚡',
   },
 ]
 

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

@@ -1,99 +0,0 @@
-<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>

package/templates/chat/src/config/chat-runtime.ts

@@ -1,57 +0,0 @@
-import type { ChatMcpServers, ChatProviderConfig } from '@opentiny/tiny-robot-chat'
-
-export interface McpExample {
-  id: string
-  title: string
-  request: string
-}
-
-export const mcpExamples: McpExample[] = [
-  { id: 'weather', title: '查询北京天气', request: '查询北京今天的天气，并给出出行建议' },
-  { id: 'coffee', title: '查询附近咖啡店', request: '查询我附近的咖啡店，并按距离排序' },
-  { id: 'exchange-rate', title: '获取当前汇率', request: '查询人民币兑美元的当前汇率' },
-]
-
-export const mcpServers: ChatMcpServers = [
-  {
-    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: import.meta.env.VITE_ALIYUN_DASHSCOPE_KEY?.trim()
-      ? { Authorization: `Bearer ${import.meta.env.VITE_ALIYUN_DASHSCOPE_KEY.trim()}` }
-      : undefined,
-  },
-  {
-    id: 'model-context-protocol-mcp',
-    name: 'Model Context Protocol MCP',
-    description: 'MCP Server',
-    baseUrl: '/modelcontextprotocol-mcp',
-    icon: '/modelcontextprotocol.png',
-    installed: true,
-  },
-]
-
-export 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', capabilities: { thinking: true, search: true } },
-      { id: 'qwen3.7-plus', label: 'Qwen3.7 Plus', capabilities: { thinking: true, search: true } },
-      { id: 'qwen3.7-max', label: 'Qwen3.7 Max', 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', capabilities: { thinking: true } },
-      { id: 'deepseek-v4-pro', label: 'DeepSeek V4 Pro', capabilities: { thinking: true } },
-    ],
-  },
-]

package/templates/chat/src/index.css

@@ -1,116 +0,0 @@
-:root {
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    sans-serif;
-  color: #1f2329;
-}
-* {
-  box-sizing: border-box;
-}
-html,
-body,
-#app {
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  margin: 0;
-}
-body {
-  overflow: hidden;
-}
-.chat-add-app {
-  position: relative;
-  container-type: inline-size;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-}
-.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-color-primary);
-  color: #fff;
-  box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
-  cursor: pointer;
-}
-.chat-add-launcher:hover {
-  background: var(--tr-color-primary-hover);
-}
-.chat-add-launcher:focus-visible {
-  outline: 2px solid var(--tr-color-primary);
-  outline-offset: 3px;
-}
-.chat-add-window {
-  container-type: inline-size;
-  --tr-layout-bg-default: #f5f5f7;
-  --tr-chat-ui-header-bg: #f5f5f7;
-  --tr-chat-ui-main-bg: #f5f5f7;
-  --tr-chat-ui-footer-bg: #f5f5f7;
-  --tr-suggestion-popover-width: min(440px, calc(100cqw - 16px));
-  width: 100%;
-  min-width: 0;
-  min-height: 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 .prompt-item {
-  flex: 0 0 calc((100% - 16px) / 2);
-  box-sizing: border-box;
-  min-width: 0;
-}
-.chat-add-window--floating {
-  border-radius: var(--tr-layout-floating-radius);
-  box-shadow: var(--tr-layout-floating-shadow);
-  overflow: hidden;
-}
-.chat-add-window--fullscreen {
-  border-radius: 0;
-  box-shadow: none;
-}
-@container (max-width: 519px) {
-  .chat-add-launcher {
-    right: 16px;
-    bottom: 16px;
-  }
-  .chat-add-window .prompt-item {
-    flex-basis: 100%;
-  }
-  .chat-add-window .tr-welcome {
-    padding-inline: 12px;
-  }
-  .chat-add-window .tr-prompts {
-    padding-inline: 12px;
-  }
-  .chat-add-window .tr-bubble__avatar {
-    display: none;
-  }
-}