fix:fix review

Author: lichunn

packages/plugins/robot/src/Main.vue

@@ -93,6 +93,16 @@ import { AgentRenderer } from './components/renderers'
 import useChat from './composables/useChat'
 import useModelConfig from './composables/core/useConfig'
 import { ChatMode } from './types/mode.types'
+import { STATUS } from './constants/status'
+import {
+  AgentMessageStatus,
+  RobotMessageContentType,
+  RobotMessageRole,
+  isAgentFinalStatus,
+  type MessageResolverContext,
+  type RobotMessage,
+  type RobotRenderContentItem
+} from './types'
 import apiService from './services/api'
 
 const props = defineProps({
@@ -224,9 +234,9 @@ const promptClickHandler = (item: PromptProps & { mode?: 'chat' | 'agent' }) =>
     changeChatMode(item.mode)
   }
   messages.value.push({
-    role: 'user',
+    role: RobotMessageRole.User,
     content: item.description || '',
-    renderContent: [{ type: 'text', content: item.description }]
+    renderContent: [{ type: RobotMessageContentType.Text, content: item.description }]
   })
   sendUserMessage()
 }
@@ -245,51 +255,61 @@ const openAIRobot = () => {
   useLayout().closeSetting(true)
 }
 
-// 当前Robot的bubbleRenderers无法做到响应式更新，因此Agent模式的type要与Chat模式不同
-const bubbleRenderers = { 'agent-content': AgentRenderer, 'agent-loading': AgentRenderer }
+// 当前 Robot 的 bubbleRenderers 无法做到响应式更新，因此 Agent 模式需要独立的内容类型。
+// `agent-content` 表示 Agent 的最终内容片段；`agent-loading` 表示 Agent 处理中间态占位片段。
+const bubbleRenderers = {
+  [RobotMessageContentType.AgentContent]: AgentRenderer,
+  [RobotMessageContentType.AgentLoading]: AgentRenderer
+}
 
-const resolveChatMessageContent = (message: any, context: { messages: any[]; status: string }) => {
-  const hasAgentContent = message.renderContent?.some((item: any) => {
-    return item.type === 'agent-content' || item.type === 'agent-loading'
+const resolveChatMessageContent = (message: RobotMessage, context: MessageResolverContext) => {
+  const renderContent = Array.isArray(message.renderContent) ? message.renderContent : []
+  const hasAgentContent = renderContent.some((item) => {
+    return item.type === RobotMessageContentType.AgentContent || item.type === RobotMessageContentType.AgentLoading
   })
-  const isAgentMessage = message.metadata?.chatMode === 'agent' || hasAgentContent
+  const isAgentMessage = message.metadata?.chatMode === ChatMode.Agent || hasAgentContent
 
-  if (!isAgentMessage || message.role !== 'assistant') {
+  if (!isAgentMessage || message.role !== RobotMessageRole.Assistant) {
     return Array.isArray(message.renderContent) && message.renderContent.length > 0
       ? message.renderContent
       : message.content
   }
 
+  // context.status 是当前整轮对话请求的运行状态，不是单条渲染片段状态。
   const isLastMessage = context.messages.at(-1) === message
-  const isGenerating = Boolean(message.loading) || (isLastMessage && context.status !== 'finished')
-  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
+  const isGenerating = Boolean(message.loading) || (isLastMessage && context.status !== STATUS.FINISHED)
+  const resolvedRenderContent = isGenerating
+    ? renderContent
+    : renderContent.filter((item) => item.type !== RobotMessageContentType.AgentLoading)
+  const agentContents = resolvedRenderContent.filter(
+    (item): item is RobotRenderContentItem =>
+      item.type === RobotMessageContentType.AgentContent || item.type === RobotMessageContentType.AgentLoading
+  )
+  // item.status 是单个 agent 片段的业务结果，例如 success/failed/fix/loading。
+  const finalStatus = agentContents.findLast((item) => isAgentFinalStatus(item.status))?.status
 
   if (!Array.isArray(message.renderContent) || message.renderContent.length === 0) {
-    const agentStatus = ['success', 'failed', 'fix'].includes(message.metadata?.agentStatus)
+    const agentStatus = isAgentFinalStatus(message.metadata?.agentStatus)
       ? message.metadata.agentStatus
-      : 'failed'
+      : AgentMessageStatus.Failed
     return [
       {
-        type: 'agent-content',
+        type: RobotMessageContentType.AgentContent,
         status: agentStatus,
         content: message.content
       }
     ]
   }
 
-  return renderContent.map((item: any) => {
-    if (item.type !== 'agent-content' || isGenerating) {
+  return resolvedRenderContent.map((item) => {
+    if (item.type !== RobotMessageContentType.AgentContent || isGenerating) {
       return item
     }
 
-    if (!item.status || item.status === 'loading') {
+    if (!item.status || item.status === AgentMessageStatus.Loading) {
       return {
         ...item,
-        status: finalStatus || message.metadata?.agentStatus || 'failed'
+        status: finalStatus || message.metadata?.agentStatus || AgentMessageStatus.Failed
       }
     }
 

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

@@ -11,7 +11,7 @@
     </template>
 
     <div class="robot-chat-container-content" ref="chatContainerRef">
-      <div v-if="messages.filter((item) => item.role !== 'system').length === 0">
+      <div v-if="messages.filter((item) => item.role !== RobotMessageRole.System).length === 0">
         <tr-welcome title="AI助手" description="您好，我是您的开发小助手" :icon="welcomeIcon" class="robot-welcome">
         </tr-welcome>
         <tr-prompts
@@ -99,10 +99,18 @@ import {
   type RawFileAttachment,
   type BubbleContentRendererMatch
 } from '@opentiny/tiny-robot'
-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'
+import {
+  RobotMessageContentType,
+  RobotMessageRole,
+  type MessageContentResolver,
+  type RobotInputContentPart,
+  type RobotMessage,
+  type RobotRenderContentItem
+} from '../../types'
+import { extractMessageText } from '../../utils'
 
 const props = defineProps({
   promptItems: {
@@ -114,7 +122,7 @@ const props = defineProps({
   },
   status: { type: String },
   messageContentResolver: {
-    type: Function
+    type: Function as PropType<MessageContentResolver>
   },
   allowFiles: {
     type: Boolean,
@@ -141,7 +149,7 @@ const selectedAttachments = ref([])
 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 messages = defineModel<RobotMessage[]>('messages', { required: true })
 const senderRef = ref<InstanceType<typeof TrSender> | null>(null)
 
 watch(
@@ -161,47 +169,29 @@ const contentRendererMatches = computed<BubbleContentRendererMatch[]>(() => [
   },
   ...Object.entries(props.bubbleRenderers).map(([type, renderer]) => ({
     priority: BubbleRendererMatchPriority.NORMAL,
-    find: (_message: any, content: any) => content?.type === type,
+    find: (_message: RobotMessage, content: RobotRenderContentItem) => content?.type === type,
     renderer
   })),
   {
     priority: BubbleRendererMatchPriority.NORMAL,
-    find: (message: any, content: any) => content?.type === 'tool' && message.tool_calls?.length,
+    find: (message: RobotMessage, content: RobotRenderContentItem) =>
+      content?.type === RobotMessageContentType.Tool && Boolean(message.tool_calls?.length),
     renderer: BubbleRenderers.Tools
   },
   {
     priority: BubbleRendererMatchPriority.NORMAL,
-    find: (_message: any, content: any) => !content?.type || ['markdown', 'text'].includes(content.type),
+    find: (_message: RobotMessage, content: RobotRenderContentItem) =>
+      !content?.type || [RobotMessageContentType.Markdown, RobotMessageContentType.Text].includes(content.type as any),
     renderer: MarkdownRenderer
   },
   {
     priority: BubbleRendererMatchPriority.NORMAL,
-    find: (_message: any, content: any) => ['img', 'image'].includes(content?.type),
+    find: (_message: RobotMessage, content: RobotRenderContentItem) =>
+      [RobotMessageContentType.Img, RobotMessageContentType.Image].includes(content?.type as any),
     renderer: ImgRenderer
   }
 ])
 
-const getTextContent = (content: any) => {
-  if (typeof content === 'string') {
-    return content
-  }
-  if (Array.isArray(content)) {
-    return content
-      .map((item) => {
-        if (typeof item === 'string') {
-          return item
-        }
-        if (item?.type === 'text') {
-          return item.text ?? item.content ?? ''
-        }
-        return ''
-      })
-      .filter(Boolean)
-      .join('\n')
-  }
-  return ''
-}
-
 // 处理文件选择事件
 const handleSingleFilesSelected = (files: File[] | null, retry = false) => {
   if (!files?.length) return
@@ -257,7 +247,7 @@ const getSvgIcon = (name: string, style?: CSSProperties) => {
 const aiAvatar = getSvgIcon('AI')
 const welcomeIcon = getSvgIcon('AI', { fontSize: '44px' })
 
-const resolveMessageContent = (message: any) => {
+const resolveMessageContent = (message: RobotMessage) => {
   if (props.messageContentResolver) {
     return props.messageContentResolver(message, {
       messages: messages.value,
@@ -266,16 +256,16 @@ const resolveMessageContent = (message: any) => {
   }
 
   if (Array.isArray(message.renderContent) && message.renderContent.length > 0) {
-    return message.renderContent.map((item: any) => {
-      if (item?.type === 'img' || item?.type === 'image') {
+    return message.renderContent.map((item) => {
+      if (item?.type === RobotMessageContentType.Img || item?.type === RobotMessageContentType.Image) {
         return {
-          type: 'img',
+          type: RobotMessageContentType.Img,
           content: item.content || item.url || item.image_url?.url || ''
         }
       }
-      if (item?.type === 'text') {
+      if (item?.type === RobotMessageContentType.Text) {
         return {
-          type: 'text',
+          type: RobotMessageContentType.Text,
           content: item.content ?? item.text ?? ''
         }
       }
@@ -284,15 +274,13 @@ const resolveMessageContent = (message: any) => {
   }
 
   if (Array.isArray(message.content) && message.content.length > 0) {
-    const textContent = getTextContent(
-      message.content.map((item: any) => item?.text ?? item?.content ?? item?.image_url?.url ?? '')
-    )
+    const textContent = extractMessageText(message.content)
     if (textContent) {
       return textContent
     }
   }
 
-  const textContent = getTextContent(message.content)
+  const textContent = extractMessageText(message.content)
   if (textContent) {
     return textContent
   }
@@ -301,14 +289,14 @@ const resolveMessageContent = (message: any) => {
 }
 
 const roleConfigs: Record<string, BubbleRoleConfig> = {
-  assistant: {
+  [RobotMessageRole.Assistant]: {
     placement: 'start',
     avatar: aiAvatar
   },
-  user: {
+  [RobotMessageRole.User]: {
     placement: 'end'
   },
-  system: {
+  [RobotMessageRole.System]: {
     hidden: true
   }
 }
@@ -328,38 +316,38 @@ const handleSendMessage = async (content: string) => {
     return
   }
 
-  const userMessage: ChatMessage = {
-    role: 'user',
+  const userMessage: RobotMessage = {
+    role: RobotMessageRole.User,
     content: messageContent
   }
   const files = selectedAttachments.value.filter((item) => item.status === 'success')
   if (files.length > 0) {
     userMessage.content = [
       {
-        type: 'text',
+        type: RobotMessageContentType.Text,
         text: messageContent
       },
       ...files.map((item) => ({
-        type: 'image_url',
+        type: RobotMessageContentType.ImageUrl,
         image_url: {
           url: item.url
         }
       }))
-    ] as any
+    ] as RobotInputContentPart[]
     userMessage.renderContent = [
       {
-        type: 'text',
+        type: RobotMessageContentType.Text,
         content: messageContent
       },
       ...files.map((item) => ({
-        type: 'img',
+        type: RobotMessageContentType.Img,
         content: item.url
       }))
     ]
   } else {
     userMessage.renderContent = [
       {
-        type: 'text',
+        type: RobotMessageContentType.Text,
         content: messageContent
       }
     ]

packages/plugins/robot/src/components/renderers/MarkdownRenderer.vue

@@ -8,6 +8,7 @@ import DOMPurify from 'dompurify'
 import MarkdownIt from 'markdown-it'
 import type { Options } from 'markdown-it'
 import hljs from 'highlight.js/lib/core'
+import { extractMessageText } from '../../utils'
 import 'highlight.js/styles/github.css'
 
 // 按需加载语言
@@ -29,7 +30,7 @@ hljs.registerLanguage('xml', xml)
 hljs.registerLanguage('shell', shell)
 
 interface MarkdownMessage {
-  content: string | string[] | Record<string, unknown>[]
+  content: unknown
 }
 
 const props = defineProps({
@@ -71,14 +72,14 @@ const markdownIt = new MarkdownIt({
 })
 
 const renderContent = computed(() => {
-  const content = Array.isArray(props.message.content)
-    ? props.message.content
-        .map((item: any) => item?.text ?? item?.content ?? '')
-        .filter(Boolean)
-        .join('\n')
-    : typeof props.message.content === 'string'
-    ? props.message.content
-    : ''
+  let content = ''
+
+  if (typeof props.message.content === 'string') {
+    content = props.message.content
+  } else if (Array.isArray(props.message.content)) {
+    content = extractMessageText(props.message.content)
+  }
+
   return DOMPurify.sanitize(markdownIt.render(content))
 })
 </script>