feat(bubble): refactor content rendering logic for improved flexibility

- Introduced `getContentItems` function to streamline content extraction from messages, enhancing the rendering process.
- Updated `useBubbleBoxRenderer` and `useBubbleContentRenderer` to utilize the new content handling approach, ensuring consistent content structure.
- Refactored rendering logic in `Bubble.vue` and related components to support unified content item format, improving compatibility with various content types.
- Enhanced type definitions in `index.type.ts` to reflect changes in content handling, ensuring better type safety and clarity.

Author: gene9831

packages/components/src/bubble/Bubble.vue

@@ -44,6 +44,14 @@ const messages = computed(() => {
   return [{ role, content, reasoning_content, tool_calls, tool_call_id, name, id, loading, state }]
 })
 
+const getContentItems = (message: BubbleMessage) => {
+  const content = contentResolver(message)
+  if (Array.isArray(content)) {
+    return content
+  }
+  return [{ type: 'text', text: content || '' }]
+}
+
 // Setup prop-level fallback renderers for responsive tracking
 setupBubblePropBoxRenderer({ fallbackBoxRenderer: () => props.fallbackBoxRenderer })
 setupBubblePropContentRenderer({ fallbackContentRenderer: () => props.fallbackContentRenderer })
@@ -88,6 +96,7 @@ if (!isInBubbleList) {
         :class="$style['tr-bubble__avatar']"
       />
       <div class="tr-bubble__content">
+        <!-- 在 contentRenderMode 为 split 情况下，如果一个气泡内只有一条消息，且 content 为数组，对每个 content 数组的项都渲染一个 box -->
         <template v-if="shouldSplitedContent">
           <BubbleBoxWrapper
             v-for="(_, index) in shouldSplitedContent"
@@ -110,21 +119,13 @@ if (!isInBubbleList) {
         <template v-else>
           <BubbleBoxWrapper :role="props.role" :placement="props.placement" :shape="props.shape" :messages="messages">
             <template v-for="(message, msgIndex) in messages" :key="`message-${msgIndex}`">
-              <template v-if="Array.isArray(contentResolver(message))">
-                <BubbleContentWrapper
-                  v-for="(_, contentIndex) in contentResolver(message)"
-                  :key="`content-${contentIndex}`"
-                  :message="message"
-                  :content-index="contentIndex"
-                  @state-change="emit('state-change', { ...$event, messageIndex: msgIndex })"
-                ></BubbleContentWrapper>
-              </template>
-              <template v-else>
-                <BubbleContentWrapper
-                  :message="message"
-                  @state-change="emit('state-change', { ...$event, messageIndex: msgIndex })"
-                ></BubbleContentWrapper>
-              </template>
+              <BubbleContentWrapper
+                v-for="(_, contentIndex) in getContentItems(message)"
+                :key="`content-${contentIndex}`"
+                :message="message"
+                :content-index="contentIndex"
+                @state-change="emit('state-change', { ...$event, messageIndex: msgIndex })"
+              ></BubbleContentWrapper>
             </template>
             <slot name="content-footer" :messages="messages" :role="props.role"></slot>
           </BubbleBoxWrapper>

packages/components/src/bubble/composables/useBubbleBoxRenderer.ts

@@ -5,7 +5,7 @@ import {
   BUBBLE_BOX_PROP_FALLBACK_RENDERER_KEY,
   BUBBLE_BOX_RENDERER_MATCHES_KEY,
 } from '../constants'
-import type { BubbleBoxRendererMatch, BubbleMessage } from '../index.type'
+import type { BubbleBoxRendererMatch, BubbleMessage, ChatMessageContentItem } from '../index.type'
 import { defaultBoxRendererMatches, defaultFallbackBoxRenderer } from '../renderers/defaultRenderers'
 import { useContentResolver } from './useContentResolver'
 
@@ -47,15 +47,23 @@ export function useBubbleBoxRenderer(
   const propFallbackBoxRenderer = inject(BUBBLE_BOX_PROP_FALLBACK_RENDERER_KEY, undefined)
   const contentResolver = useContentResolver()
 
+  // 如果 contentIndex 为数字，说明是 split 模式，当前 messages 数组长度为 1
+  if (typeof contentIndex === 'number') {
+    if (toValue(messages).length !== 1) {
+      throw new Error('[BubbleBoxRenderer] When contentIndex is a number, messages array length must be 1')
+    }
+  }
+
   return computed(() => {
     const msgs = toValue(messages)
 
+    const resolvedContent = typeof contentIndex === 'number' ? contentResolver(msgs.at(0)!) : undefined
+    const content = Array.isArray(resolvedContent)
+      ? (resolvedContent.at(contentIndex ?? 0) as ChatMessageContentItem)
+      : { type: 'text', text: resolvedContent || '' }
+
     const match = toValue(boxRendererMatches).find((match) =>
-      match.find(
-        msgs,
-        msgs.map((msg) => contentResolver(msg)),
-        contentIndex,
-      ),
+      match.find(msgs, typeof contentIndex === 'number' ? content : undefined, contentIndex),
     )
 
     if (match) {

packages/components/src/bubble/composables/useBubbleContentRenderer.ts

@@ -5,7 +5,7 @@ import {
   BUBBLE_CONTENT_PROP_FALLBACK_RENDERER_KEY,
   BUBBLE_CONTENT_RENDERER_MATCHES_KEY,
 } from '../constants'
-import type { BubbleContentRendererMatch, BubbleMessage } from '../index.type'
+import type { BubbleContentRendererMatch, BubbleMessage, ChatMessageContentItem } from '../index.type'
 import { defaultContentRendererMatches, defaultFallbackContentRenderer } from '../renderers/defaultRenderers'
 import { useContentResolver } from './useContentResolver'
 
@@ -46,8 +46,11 @@ export function useBubbleContentRenderer(
 
   return computed(() => {
     const msg = toValue(message)
-
-    const match = toValue(contentRendererMatches).find((match) => match.find(msg, contentResolver(msg), contentIndex))
+    const resolvedContent = contentResolver(msg)
+    const content = Array.isArray(resolvedContent)
+      ? (resolvedContent.at(contentIndex ?? 0) as ChatMessageContentItem)
+      : { type: 'text', text: resolvedContent || '' }
+    const match = toValue(contentRendererMatches).find((match) => match.find(msg, content, contentIndex))
     if (match) {
       return match.renderer
     }

packages/components/src/bubble/composables/useMessageContent.ts

@@ -7,21 +7,19 @@ export const useMessageContent = <T extends ChatMessageContent = ChatMessageCont
 ) => {
   const contentResolver = useContentResolver()
 
-  const content = computed(() => contentResolver(props.message))
-
-  const contentItem = computed(() => {
-    const c = content.value
-    return Array.isArray(c) ? (c.at(props.contentIndex ?? 0) as ChatMessageContentItem | undefined) : undefined
+  const content = computed(() => {
+    const resolvedContent = contentResolver(props.message)
+    return Array.isArray(resolvedContent)
+      ? (resolvedContent.at(props.contentIndex ?? 0) as ChatMessageContentItem)
+      : { type: 'text', text: resolvedContent || '' }
   })
 
   const contentText = computed(() => {
-    const c = content.value
-    return Array.isArray(c) ? String(c.at(props.contentIndex ?? 0)?.text || '') : c || ''
+    return content.value.type === 'text' ? String(content.value.text) : ''
   })
 
   return {
     content,
-    contentItem,
     contentText,
   }
 }

packages/components/src/bubble/index.type.ts

@@ -66,13 +66,13 @@ export type BubbleBoxRendererMatch = {
   /**
    * 匹配函数，用于判断是否应该使用此渲染器
    * @param messages - 消息数组
-   * @param resolvedContents - 每个消息经过 contentResolver 解析后的内容数组，与 messages 一一对应
-   * @param contentIndex - 内容索引，用于指定要渲染的内容项（当 content 为数组时）
+   * @param content - 要渲染的内容项。仅在 `split` 模式下（contentIndex 为数字）才会传入；为当前消息（messages[0]）经过 `contentResolver` 解析后的内容；`messages[0].content` 一定是一个数组，`content` 则为对应索引的内容项，即 `messages[0].content[contentIndex]`；当 contentIndex 为 undefined 时，content 也为 undefined
+   * @param contentIndex - 内容索引，用于指定要渲染的内容项。仅在 split 模式下才会传入（为数字），此时 messages 数组长度为 1
    * @returns 如果匹配则返回 true，否则返回 false
    */
   find: (
     messages: BubbleMessage[],
-    resolvedContents: BubbleMessage['content'][],
+    content: ChatMessageContentItem | undefined,
     contentIndex: number | undefined,
   ) => boolean
   renderer: Component<BubbleBoxRendererProps>
@@ -84,11 +84,11 @@ export type BubbleContentRendererMatch = {
   /**
    * 匹配函数，用于判断是否应该使用此渲染器
    * @param message - 消息对象
-   * @param resolvedContent - 消息经过 contentResolver 解析后的内容
-   * @param contentIndex - 内容索引，用于指定要渲染的内容项（当 content 为数组时）
+   * @param content - 要渲染的内容项。为当前消息经过 contentResolver 解析并统一化后的内容项：若解析结果为数组，则取对应索引的内容项（由 contentIndex 指定）；若为字符串，则转为 { type: 'text', text: string }。统一化为 ChatMessageContentItem 对象格式
+   * @param contentIndex - 内容索引。由 contentResolver 的解析结果为数组时使用
    * @returns 如果匹配则返回 true，否则返回 false
    */
-  find: (message: BubbleMessage, resolvedContent: BubbleMessage['content'], contentIndex: number | undefined) => boolean
+  find: (message: BubbleMessage, content: ChatMessageContentItem, contentIndex: number | undefined) => boolean
   renderer: Component<BubbleContentRendererProps>
   priority?: number
   attributes?: Record<string, string>

packages/components/src/bubble/renderers/Image.vue

@@ -8,7 +8,7 @@ const props = defineProps<BubbleContentRendererProps<ChatMessageContentItem[]>>(
 const isLoaded = ref(false)
 const hasError = ref(false)
 
-const { contentItem: content } = useMessageContent(props)
+const { content } = useMessageContent(props)
 
 const imageUrl = computed(() => {
   if (!content.value) {

packages/components/src/bubble/renderers/defaultRenderers.ts

@@ -11,15 +11,7 @@ import Tools from './Tools.vue'
 
 export const defaultBoxRendererMatches: Array<BubbleBoxRendererMatch> = [
   {
-    find: (_, contents, contentIndex) => {
-      const content = contents.at(0)
-      return (
-        contents.length === 1 &&
-        Array.isArray(content) &&
-        typeof contentIndex === 'number' &&
-        content[contentIndex].type === 'image_url'
-      )
-    },
+    find: (_, content) => content?.type === 'image_url',
     renderer: markRaw(Box),
     priority: BubbleRendererMatchPriority.NORMAL,
     attributes: { 'data-box-type': 'image' },
@@ -43,9 +35,7 @@ export const defaultContentRendererMatches: Array<BubbleContentRendererMatch> =
     priority: BubbleRendererMatchPriority.NORMAL,
   },
   {
-    find: (_, content, contentIndex) => {
-      return Array.isArray(content) && typeof contentIndex === 'number' && content[contentIndex].type === 'image_url'
-    },
+    find: (_, content) => content.type === 'image_url',
     renderer: markRaw(Image),
     priority: BubbleRendererMatchPriority.CONTENT,
   },