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

package/templates/basic/src/App.vue

@@ -1,123 +1,130 @@
+<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 { 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,
+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
 })
 
-const chatUi = {
-  layout: {
-    rightAside: {
-      mode: 'dock',
-      width: 400,
-      defaultOpen: false,
-    },
-  },
-} satisfies ChatUIOptions
+const currentConversationTitle = computed(() => {
+  return activeConversation.value?.title
+})
 </script>
 
-<template>
-  <TrTheme>
-    <div class="chat-basic">
-      <TrChat :runtime="runtime" :ui="chatUi" />
-    </div>
-  </TrTheme>
-</template>
-
 <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;
+}
+
 @media (max-width: 959px) {
-  .chat-basic :deep(.tr-bubble__avatar) {
-    display: none;
+  .chat-header {
+    position: relative;
+    justify-content: center;
+    min-height: 32px;
+  }
+
+  .chat-header h3 {
+    width: 100%;
+    text-align: center;
+    padding: 0 48px;
+    flex: none;
   }
 }
 </style>

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

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

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

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

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