feat：Migration of tiny robot version to 0.4.0 (opentiny#1804)

Author: lichunn

lint-staged.config.js

@@ -1,4 +1,4 @@
 module.exports = {
-  './packages/**/**.{js,mjs,jsx,ts,mts,tsx,vue}': 'eslint',
+  './packages/**/**.{js,mjs,jsx,ts,mts,tsx,vue}': 'eslint --no-warn-ignored',
   './packages/**/**.{js,mjs,jsx,ts,mts,tsx,vue,html,json,less}': 'prettier --write'
 }

packages/plugins/robot/package.json

@@ -5,7 +5,9 @@
     "access": "public"
   },
   "scripts": {
-    "build": "vite build"
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "type": "module",
   "main": "dist/index.js",
@@ -29,9 +31,9 @@
     "@opentiny/tiny-engine-common": "workspace:*",
     "@opentiny/tiny-engine-meta-register": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
-    "@opentiny/tiny-robot": "0.3.1",
-    "@opentiny/tiny-robot-kit": "0.3.1",
-    "@opentiny/tiny-robot-svgs": "0.3.1",
+    "@opentiny/tiny-robot": "0.4.0",
+    "@opentiny/tiny-robot-kit": "0.4.0",
+    "@opentiny/tiny-robot-svgs": "0.4.0",
     "@opentiny/tiny-schema-renderer": "1.0.0-beta.6",
     "@vueuse/core": "^9.13.0",
     "dompurify": "^3.0.1",
@@ -45,7 +47,8 @@
     "@types/markdown-it": "^14.1.2",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
-    "vite": "^5.4.2"
+    "vite": "^5.4.2",
+    "vitest": "^1.6.1"
   },
   "peerDependencies": {
     "@opentiny/vue": "^3.20.0",

packages/plugins/robot/src/Main.vue

@@ -18,10 +18,12 @@
           v-model:fullscreen="fullscreen"
           v-model:show="robotVisible"
           v-model:input="inputMessage"
-          :status="chatStatus"
+          :status="mappedStatus"
+          :chat-mode="robotSettingState.chatMode"
           :prompt-items="promptItems"
           :bubble-renderers="bubbleRenderers"
           :allowFiles="isVisualModel && robotSettingState.chatMode === ChatMode.Agent"
+          :show-aborted="robotSettingState.chatMode !== ChatMode.Agent"
           :beforeSubmit="checkApiKey"
           :promptClickHandler="promptClickHandler"
           @fileSelected="handleFileSelected"
@@ -147,7 +149,7 @@ const showTeleport = ref(false)
 const showSetting = ref(false)
 
 const {
-  chatStatus,
+  mappedStatus,
   inputMessage,
   messages,
   changeChatMode,

packages/plugins/robot/src/components/chat/RobotChat.vue

@@ -22,8 +22,18 @@
           @item-click="handlePromptItemClick"
         ></tr-prompts>
       </div>
-      <tr-bubble-provider v-else :content-renderers="contentRenderers">
-        <tr-bubble-list :items="messages" :roles="roles" auto-scroll class="robot-bubble-list"> </tr-bubble-list>
+      <tr-bubble-provider v-else :content-renderer-matches="contentRendererMatches">
+        <tr-bubble-list
+          :messages="messages"
+          :role-configs="roleConfigs"
+          :content-resolver="resolveMessageContent"
+          auto-scroll
+          class="robot-bubble-list"
+        >
+          <template #content-footer="{ messages }">
+            <div v-if="showAborted && messages[0]?.aborted" class="aborted">已中止</div>
+          </template>
+        </tr-bubble-list>
       </tr-bubble-provider>
     </div>
 
@@ -39,9 +49,6 @@
           :showWordLimit="false"
           @submit="handleSendMessage"
           @cancel="handleAbortRequest"
-          :allowFiles="selectedAttachments.length < 1 && props.allowFiles"
-          uploadTooltip="支持上传1张图片"
-          @files-selected="handleSingleFilesSelected"
         >
           <template #header v-if="selectedAttachments.length > 0">
             <div>
@@ -55,9 +62,18 @@
               </tr-attachments>
             </div>
           </template>
-          <template #footer-left>
+          <template #footer>
             <slot name="footer-left"></slot>
           </template>
+          <template #footer-right>
+            <VoiceButton :speech-config="{ lang: 'zh-CN', continuous: false }" />
+            <UploadButton
+              v-if="selectedAttachments.length < 1 && props.allowFiles"
+              accept="image/*"
+              :multiple="false"
+              @select="handleSingleFilesSelected"
+            />
+          </template>
         </tr-sender>
       </div>
     </template>
@@ -74,11 +90,17 @@ import {
   TrSender,
   TrWelcome,
   TrAttachments,
+  UploadButton,
+  VoiceButton,
+  BubbleRenderers,
+  BubbleRendererMatchPriority,
   type BubbleRoleConfig,
   type PromptProps,
-  type RawFileAttachment
+  type RawFileAttachment,
+  type BubbleContentRendererMatch
 } from '@opentiny/tiny-robot'
-import { type ChatMessage, GeneratingStatus } from '@opentiny/tiny-robot-kit'
+import { type ChatMessage } from '@opentiny/tiny-robot-kit'
+import { GeneratingStatus } from '../../constants/status'
 import { LoadingRenderer, MarkdownRenderer, ImgRenderer } from '../renderers'
 import { useNotify } from '@opentiny/tiny-engine-meta-register'
 
@@ -91,10 +113,15 @@ const props = defineProps({
     type: Function
   },
   status: { type: String },
+  chatMode: { type: String },
   allowFiles: {
     type: Boolean,
     default: false
   },
+  showAborted: {
+    type: Boolean,
+    default: true
+  },
   bubbleRenderers: {
     type: Object as PropType<Record<string, Component>>,
     default: () => ({})
@@ -113,6 +140,7 @@ const robotVisible = defineModel<boolean>('show', { required: true })
 const fullscreen = defineModel<boolean>('fullscreen')
 const inputMessage = defineModel<string>('input', { required: true })
 const messages = defineModel<ChatMessage[]>('messages', { required: true })
+const senderRef = ref<InstanceType<typeof TrSender> | null>(null)
 
 watch(
   () => props.allowFiles,
@@ -123,6 +151,71 @@ watch(
   }
 )
 
+const contentRendererMatches = computed<BubbleContentRendererMatch[]>(() => [
+  {
+    priority: BubbleRendererMatchPriority.LOADING,
+    find: (message) => Boolean(message.loading),
+    renderer: LoadingRenderer
+  },
+  ...Object.entries(props.bubbleRenderers).map(([type, renderer]) => ({
+    priority: BubbleRendererMatchPriority.NORMAL,
+    find: (_message: any, content: any) => content?.type === type,
+    renderer
+  })),
+  {
+    priority: BubbleRendererMatchPriority.NORMAL,
+    find: (message: any, content: any) => content?.type === 'tool' && message.tool_calls?.length,
+    renderer: BubbleRenderers.Tools
+  },
+  {
+    priority: BubbleRendererMatchPriority.NORMAL,
+    find: (message: any, content: any) =>
+      !message.loading && message.content && (!content?.type || ['markdown', 'text'].includes(content.type)),
+    renderer: MarkdownRenderer
+  },
+  {
+    priority: BubbleRendererMatchPriority.NORMAL,
+    find: (message: any) => message?.content?.[0]?.type === 'img' || message?.content?.[0]?.type === 'image',
+    renderer: ImgRenderer
+  }
+])
+
+const isAgentMessage = (message: any) => {
+  const hasAgentContent = message.renderContent?.some((item: any) => {
+    return item.type === 'agent-content' || item.type === 'agent-loading'
+  })
+  return message.metadata?.chatMode === 'agent' || hasAgentContent
+}
+
+const resolveAgentRenderContent = (message: any) => {
+  if (!isAgentMessage(message) || message.role !== 'assistant') {
+    return message.renderContent
+  }
+
+  const isLastMessage = messages.value.at(-1) === message
+  const isGenerating = Boolean(message.loading) || (isLastMessage && GeneratingStatus.includes(props.status as any))
+  const renderContent = isGenerating
+    ? message.renderContent
+    : message.renderContent.filter((item: any) => item.type !== 'agent-loading')
+  const agentContents = renderContent.filter((item: any) => item.type === 'agent-content')
+  const finalStatus = agentContents.findLast((item: any) => ['success', 'failed', 'fix'].includes(item.status))?.status
+
+  return renderContent.map((item: any) => {
+    if (item.type !== 'agent-content' || isGenerating) {
+      return item
+    }
+
+    if (!item.status || item.status === 'loading') {
+      return {
+        ...item,
+        status: finalStatus || message.metadata?.agentStatus || 'failed'
+      }
+    }
+
+    return item
+  })
+}
+
 // 处理文件选择事件
 const handleSingleFilesSelected = (files: File[] | null, retry = false) => {
   if (!files?.length) return
@@ -178,32 +271,40 @@ const getSvgIcon = (name: string, style?: CSSProperties) => {
 const aiAvatar = getSvgIcon('AI')
 const welcomeIcon = getSvgIcon('AI', { fontSize: '44px' })
 
-const contentRenderers = computed(() => ({
-  markdown: MarkdownRenderer,
-  loading: LoadingRenderer,
-  img: ImgRenderer,
-  ...props.bubbleRenderers
-}))
+const resolveMessageContent = (message: any) => {
+  if (Array.isArray(message.renderContent) && message.renderContent.length > 0) {
+    return resolveAgentRenderContent(message)
+  }
 
-const roles: Record<string, BubbleRoleConfig> = {
+  if (isAgentMessage(message) && message.role === 'assistant' && message.content) {
+    const agentStatus = ['success', 'failed', 'fix'].includes(message.metadata?.agentStatus)
+      ? message.metadata.agentStatus
+      : 'failed'
+    return [
+      {
+        type: 'agent-content',
+        status: agentStatus,
+        content: message.content
+      }
+    ]
+  }
+
+  return message.content
+}
+
+const roleConfigs: Record<string, BubbleRoleConfig> = {
   assistant: {
     placement: 'start',
-    avatar: aiAvatar,
-    contentRenderer: MarkdownRenderer,
-    customContentField: 'renderContent'
+    avatar: aiAvatar
   },
   user: {
-    placement: 'end',
-    contentRenderer: MarkdownRenderer,
-    customContentField: 'renderContent'
+    placement: 'end'
   },
   system: {
     hidden: true
   }
 }
 
-const senderRef = ref<InstanceType<typeof TrSender> | null>(null)
-
 // 发送消息
 const handleSendMessage = async (content: string) => {
   const messageContent = content || inputMessage.value
@@ -256,6 +357,7 @@ const handleSendMessage = async (content: string) => {
   }
   messages.value.push(userMessage)
   inputMessage.value = ''
+  senderRef.value?.clear()
   selectedAttachments.value = []
   emit('sendMessage')
 }
@@ -371,13 +473,13 @@ const handlePromptItemClick = (ev: unknown, item: { description?: string }) => {
       }
     }
     :deep([data-role='user']) {
-      --tr-bubble-content-bg: var(--tr-color-primary-light);
+      --tr-bubble-box-bg: var(--tr-color-primary-light);
     }
   }
 
   &.fullscreen {
     :deep([data-role='assistant']) {
-      --tr-bubble-content-bg: transparent;
+      --tr-bubble-box-bg: transparent;
       .tr-bubble__content {
         padding: 8px 0 0;
       }
@@ -491,4 +593,10 @@ const handlePromptItemClick = (ev: unknown, item: { description?: string }) => {
 .robot-bubble-list {
   height: 100%;
 }
+
+.aborted {
+  margin-top: 6px;
+  font-size: 12px;
+  opacity: 0.7;
+}
 </style>

packages/plugins/robot/src/components/header-extension/History.vue

@@ -28,7 +28,7 @@
 
 <script setup lang="ts">
 import { IconHistory, IconClose } from '@opentiny/tiny-robot-svgs'
-import type { Conversation } from '@opentiny/tiny-robot-kit'
+import type { ConversationInfo } from '@opentiny/tiny-robot-kit'
 import { TrHistory, TrIconButton, type HistoryItem, type HistoryMenuItem } from '@opentiny/tiny-robot'
 import { computed, ref } from 'vue'
 
@@ -37,7 +37,7 @@ const showHistory = ref(false)
 interface HistoryProps {
   conversationState: {
     currentId?: string | null
-    conversations: Conversation[]
+    conversations: ConversationInfo[]
   }
   onItemClick?: (item: HistoryItem) => void
   onItemAction?: (action: HistoryMenuItem, item: HistoryItem) => void
@@ -47,7 +47,7 @@ interface HistoryProps {
 const props = defineProps<HistoryProps>()
 
 // 将平铺格式的历史会话数据转换为分组格式（基于createdAt时间戳）
-const convertFlatToGrouped = (flatData: Conversation[]): Array<{ group: string; items: Conversation[] }> => {
+const convertFlatToGrouped = (flatData: ConversationInfo[]): Array<{ group: string; items: ConversationInfo[] }> => {
   const now = new Date()
   const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
   const getDate = (days: number) => {
@@ -64,7 +64,7 @@ const convertFlatToGrouped = (flatData: Conversation[]): Array<{ group: string;
     { group: '更早', threshold: new Date(0) }
   ]
 
-  const groups = groupConfigs.map((config) => ({ ...config, items: [] as Conversation[] }))
+  const groups = groupConfigs.map((config) => ({ ...config, items: [] as ConversationInfo[] }))
 
   flatData.forEach((item) => {
     const itemDate = new Date(item.createdAt)