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

package/templates/chat/src/index.css

@@ -0,0 +1,109 @@
+.chat-add-app,
+.chat-add-window {
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  color: #1f2329;
+}
+.chat-add-app,
+.chat-add-app *,
+.chat-add-window,
+.chat-add-window * {
+  box-sizing: border-box;
+}
+.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-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;
+}
+.chat-add-window {
+  container-type: inline-size;
+  --tr-layout-bg-default: var(--tr-container-bg-default);
+  --tr-chat-ui-header-bg: var(--tr-container-bg-default);
+  --tr-chat-ui-main-bg: var(--tr-page-bg-default);
+  --tr-chat-ui-footer-bg: var(--tr-page-bg-default);
+  --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;
+  }
+}

package/templates/chat/src/main.ts

@@ -0,0 +1,7 @@
+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/tsconfig.app.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

package/templates/chat/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/templates/chat/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/chat/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    proxy: {
+      '/modelcontextprotocol-mcp': {
+        target: 'https://modelcontextprotocol.io/mcp',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/modelcontextprotocol-mcp/, ''),
+      },
+    },
+  },
+})

package/templates/basic/src/components/ChatList.vue

@@ -1,82 +0,0 @@
-<template>
-  <tr-bubble-provider :fallback-content-renderer="BubbleRenderers.Markdown">
-    <tr-welcome
-      v-if="visibleMessages.length === 0"
-      title="TinyRobot AI 助手"
-      description="您好，我是TinyRobot，您专属的 AI 智能专家"
-      :icon="welcomeIcon"
-      class="chat-list chat-welcome"
-    />
-    <tr-bubble-list
-      v-else
-      :messages="messages"
-      :role-configs="roles"
-      :auto-scroll="true"
-      class="chat-list"
-    ></tr-bubble-list>
-  </tr-bubble-provider>
-</template>
-
-<script setup lang="ts">
-import { BubbleRenderers, TrBubbleList, TrBubbleProvider, TrWelcome, type BubbleRoleConfig } from '@opentiny/tiny-robot'
-import { IconAi, IconUser } from '@opentiny/tiny-robot-svgs'
-import { computed, h } from 'vue'
-import { useChat } from '../composables/useChat'
-
-const { messages } = useChat()
-
-const aiAvatar = h(IconAi, { style: { fontSize: '28px' } })
-const userAvatar = h(IconUser, { style: { fontSize: '28px' } })
-const welcomeIcon = h(IconAi, { style: { fontSize: '40px' } })
-const visibleMessages = computed(() => messages.value.filter((item) => item.role !== 'system'))
-
-const roles: Record<string, BubbleRoleConfig> = {
-  assistant: {
-    placement: 'start',
-    avatar: aiAvatar,
-  },
-  user: {
-    placement: 'end',
-    avatar: userAvatar,
-  },
-  system: {
-    hidden: true,
-  },
-}
-</script>
-
-<style scoped>
-.chat-list {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  border-radius: 10px;
-  padding: 8px;
-}
-
-.chat-welcome {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 10%;
-
-  &.tr-welcome {
-    --title-color: var(--tr-text-primary);
-    --description-color: var(--tr-text-secondary);
-  }
-}
-
-:deep() {
-  [data-box-type='box'][data-role='user'] {
-    --tr-bubble-box-bg: var(--tr-color-primary-light);
-  }
-
-  [data-box-type='box']:not([data-role='user']) {
-    --tr-bubble-box-bg: transparent;
-  }
-
-  [data-type='markdown'] p {
-    margin: 0;
-  }
-}
-</style>

package/templates/basic/src/components/ChatSender.vue

@@ -1,125 +0,0 @@
-<template>
-  <tr-sender
-    v-model="inputMessage"
-    mode="multiple"
-    :placeholder="isProcessing ? '思考中...' : '请输入你的问题...'"
-    :clearable="true"
-    :loading="isProcessing"
-    :show-word-limit="true"
-    :max-length="1000"
-    @submit="sendMessage"
-    @cancel="abortActiveRequest"
-  >
-    <template #footer>
-      <div class="model-actions">
-        <button
-          class="sender-action-btn sender-capability-btn"
-          :class="{ 'sender-capability-btn--active': thinkingEnabled }"
-          type="button"
-          :disabled="!supportsThinking"
-          @click="thinkingEnabled = !thinkingEnabled"
-        >
-          <IconDeepThink :size="16" class="sender-action-btn__icon" />
-          深度思考
-        </button>
-        <button
-          class="sender-action-btn sender-capability-btn"
-          :class="{ 'sender-capability-btn--active': searchEnabled }"
-          type="button"
-          :disabled="!supportsSearch"
-          @click="searchEnabled = !searchEnabled"
-        >
-          <IconWebSearch :size="16" class="sender-action-btn__icon" />
-          联网搜索
-        </button>
-        <McpServerPickerButton />
-        <tr-dropdown-menu :items="modelMenuItems" trigger="click" @item-click="handleModelSelect">
-          <template #trigger>
-            <button class="sender-action-btn sender-model-btn" type="button">
-              <component :is="selectedModel?.icon" :size="16" class="sender-action-btn__icon" />
-              <span>{{ selectedModel?.name || '选择模型' }}</span>
-            </button>
-          </template>
-        </tr-dropdown-menu>
-      </div>
-    </template>
-  </tr-sender>
-</template>
-
-<script setup lang="ts">
-import { TrDropdownMenu, TrSender } from '@opentiny/tiny-robot'
-import { computed } from 'vue'
-import { useChat } from '../composables/useChat'
-import { useModel } from '../composables/useModel'
-import McpServerPickerButton from './McpServerPickerButton.vue'
-import { IconDeepThink, IconWebSearch } from './icons'
-
-const { inputMessage, isProcessing, sendMessage, abortActiveRequest } = useChat()
-const {
-  modelOptions,
-  selectedModel,
-  selectedModelId,
-  thinkingEnabled,
-  searchEnabled,
-  supportsThinking,
-  supportsSearch,
-} = useModel()
-
-const modelMenuItems = computed(() =>
-  modelOptions.map((item) => ({
-    id: item.id,
-    text: item.name,
-  })),
-)
-
-function handleModelSelect(item: { id?: string }) {
-  if (!item.id) {
-    return
-  }
-  selectedModelId.value = item.id
-}
-</script>
-
-<style scoped>
-.model-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.sender-action-btn {
-  border: 1px solid var(--tr-border-color-disabled);
-  border-radius: var(--tr-radius-full);
-  background: var(--tr-container-bg-default);
-  color: var(--tr-text-secondary);
-  font-size: var(--tr-font-size-sm);
-  height: 32px;
-  padding: 0 10px;
-  line-height: 1;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.sender-action-btn__icon {
-  flex-shrink: 0;
-}
-
-.sender-action-btn:hover:not(:disabled) {
-  border-color: var(--tr-border-color-hover);
-  color: var(--tr-text-primary);
-  background: var(--tr-container-bg-hover);
-}
-
-.sender-action-btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.sender-capability-btn--active {
-  border-color: var(--tr-border-color-hover);
-  color: var(--tr-text-primary);
-  background: var(--tr-container-bg-default-2);
-}
-</style>

package/templates/basic/src/components/ConversationHistory.vue

@@ -1,136 +0,0 @@
-<template>
-  <div v-if="historyDrawerOpen" class="history-drawer-backdrop" @click="historyDrawerOpen = false"></div>
-  <aside class="history-panel" :class="{ 'history-panel--open': historyDrawerOpen }">
-    <div class="history-panel__header">
-      <h2>历史会话</h2>
-      <button class="new-chat-btn" type="button" @click="activeConversationId = null">新会话</button>
-    </div>
-    <tr-history
-      class="history-panel__list"
-      :data="historyData"
-      :selected="activeConversationId ?? undefined"
-      @item-click="handleItemClick"
-      @item-title-change="handleItemTitleChange"
-      @item-action="handleItemAction"
-    ></tr-history>
-  </aside>
-</template>
-
-<script setup lang="ts">
-import { TrHistory } from '@opentiny/tiny-robot'
-import { inject, ref, type Ref, watch } from 'vue'
-import { useChat } from '../composables/useChat'
-
-type HistoryAction = {
-  id: string
-}
-
-const { activeConversationId, switchConversation, updateConversationTitle, deleteConversation, conversations } =
-  useChat()
-const historyDrawerOpen = inject<Ref<boolean>>('historyDrawerOpen', ref(false))
-
-const historyData = ref<Array<{ id: string; title: string }>>([])
-
-watch(
-  () => conversations.value.length,
-  () => {
-    const list = conversations.value
-    historyData.value = list.map((item) => ({
-      id: item.id,
-      title: item.title || 'New Chat',
-    }))
-  },
-  { immediate: true },
-)
-
-function handleItemClick(item: { id: string }) {
-  switchConversation(item.id)
-  historyDrawerOpen.value = false
-}
-
-function handleItemTitleChange(newTitle: string, item: { id: string }) {
-  // Keep local list writable for TrHistory inline editing.
-  const target = historyData.value.find((historyItem) => historyItem.id === item.id)
-  if (target) {
-    target.title = newTitle
-  }
-  updateConversationTitle(item.id, newTitle)
-}
-
-function handleItemAction(action: HistoryAction, item: { id: string }) {
-  if (action.id === 'delete') {
-    deleteConversation(item.id)
-  }
-}
-</script>
-
-<style scoped>
-.history-panel {
-  width: 300px;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--tr-border-color-disabled);
-}
-
-.history-panel__header {
-  padding: 12px 24px 0 24px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.history-panel__header h2 {
-  margin: 0;
-  font-size: var(--tr-font-size-md);
-}
-
-.new-chat-btn {
-  border: none;
-  border-radius: 6px;
-  background: var(--tr-color-primary);
-  color: #fff;
-  font-size: 12px;
-  padding: 6px 10px;
-  cursor: pointer;
-}
-
-.history-panel__list {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding: 12px;
-  --tr-history-item-selected-bg: var(--tr-history-item-hover-bg);
-  --tr-history-item-space-y: 4px;
-}
-
-.history-drawer-backdrop {
-  display: none;
-}
-
-@media (max-width: 959px) {
-  .history-drawer-backdrop {
-    display: block;
-    position: fixed;
-    inset: 0;
-    z-index: var(--tr-z-index-drawer);
-    background: rgba(0, 0, 0, 0.4);
-  }
-
-  .history-panel {
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: min(300px, 80vw);
-    z-index: calc(var(--tr-z-index-drawer) + 1);
-    background: var(--tr-container-bg-default);
-    transform: translateX(-100%);
-    transition: transform 0.2s ease;
-  }
-
-  .history-panel--open {
-    transform: translateX(0);
-  }
-}
-</style>

package/templates/basic/src/components/HistoryDrawerButton.vue

@@ -1,43 +0,0 @@
-<template>
-  <button class="history-trigger-btn" type="button" aria-label="打开历史会话抽屉" @click="emit('click')">
-    <IconHistory style="font-size: 20px" />
-  </button>
-</template>
-
-<script setup lang="ts">
-import { IconHistory } from '@opentiny/tiny-robot-svgs'
-
-const emit = defineEmits<{
-  (event: 'click'): void
-}>()
-</script>
-
-<style scoped>
-.history-trigger-btn {
-  display: none;
-}
-
-@media (max-width: 959px) {
-  .history-trigger-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 32px;
-    height: 32px;
-    border: none;
-    border-radius: var(--tr-radius-full);
-    background: var(--tr-container-bg-default);
-    color: var(--tr-text-secondary);
-    cursor: pointer;
-  }
-
-  .history-trigger-btn:hover {
-    color: var(--tr-icon-color-hover);
-    background: var(--tr-container-bg-hover);
-  }
-}
-</style>