refactor: components/kit 0.4.0

docs/.vitepress/themeConfig.ts

@@ -36,13 +36,15 @@ const sharedSidebarItems = [
       { text: 'AI模型交互工具类', link: 'ai-client' },
       { text: '消息数据管理', link: 'message' },
       { text: '会话数据管理', link: 'conversation' },
+      { text: '工具函数', link: 'utils' },
     ],
   },
 ]
 
 const nav = [
   { text: '指南', link: '/guide/quick-start', activeMatch: '/guide/' },
   { text: '演示', link: '/examples/assistant', activeMatch: '/examples/' },
+  { text: '迁移指南', link: '/migration/bubble-migration', activeMatch: '/migration/' },
 ]
 
 const sidebar = {
@@ -56,6 +58,17 @@ const sidebar = {
       items: [{ text: '综合示例', link: 'assistant' }],
     },
   ],
+  '/migration/': [
+    {
+      text: '迁移指南',
+      base: '/migration/',
+      items: [
+        { text: 'Bubble 气泡', link: 'bubble-migration' },
+        { text: 'useMessage 迁移', link: 'use-message-migration' },
+        { text: 'useConversation 迁移', link: 'use-conversation-migration' },
+      ],
+    },
+  ],
 }
 
 export const themeConfig = { nav, sidebar }

docs/demos/bubble/avatar-and-placement.vue

@@ -1,16 +1,12 @@
 <template>
   <div style="display: flex; flex-direction: column; gap: 16px">
     <tr-bubble
-      content="简单介绍 TinyVue"
+      content="用户消息"
       :avatar="userAvatar"
       placement="end"
-      style="--tr-bubble-content-bg: var(--tr-color-primary-light)"
-    ></tr-bubble>
-    <tr-bubble
-      content="TinyVue 是一个轻量级、高性能的 Vue 3 组件库，专为企业级应用设计，由 OpenTiny 开源团队开发维护。"
-      :avatar="aiAvatar"
-      placement="start"
+      style="--tr-bubble-box-bg: var(--tr-color-primary-light)"
     ></tr-bubble>
+    <tr-bubble content="AI 回复消息" :avatar="aiAvatar" placement="start"></tr-bubble>
   </div>
 </template>
 

docs/demos/bubble/basic.vue

@@ -1,7 +1,7 @@
 <template>
   <tr-bubble
     content="TinyVue 是一个轻量级、高性能的 Vue 3 组件库，专为企业级应用设计，由 OpenTiny 开源团队开发维护。"
-    style="--tr-bubble-content-bg: var(--tr-color-primary-light)"
+    style="--tr-bubble-box-bg: var(--tr-color-primary-light); --tr-bubble-text-font-size: 16px"
   ></tr-bubble>
 </template>
 

docs/demos/bubble/content-render-mode.vue

@@ -0,0 +1,31 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 24px">
+    <div>
+      <p style="font-size: 12px; color: #666; margin-bottom: 8px">
+        <strong>single 模式（默认）</strong>：所有内容在一个 box 中渲染
+      </p>
+      <tr-bubble :content="arrayContent" :avatar="aiAvatar" content-render-mode="single"></tr-bubble>
+    </div>
+
+    <div>
+      <p style="font-size: 12px; color: #666; margin-bottom: 8px">
+        <strong>split 模式</strong>：每个内容项单独一个 box
+      </p>
+      <tr-bubble :content="arrayContent" :avatar="aiAvatar" content-render-mode="split"></tr-bubble>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TrBubble } from '@opentiny/tiny-robot'
+import { IconAi } from '@opentiny/tiny-robot-svgs'
+import { h } from 'vue'
+
+const aiAvatar = h(IconAi, { style: { fontSize: '32px' } })
+
+const arrayContent = [
+  { type: 'text', text: '第一条内容' },
+  { type: 'text', text: '第二条内容' },
+  { type: 'text', text: '第三条内容' },
+]
+</script>

docs/demos/bubble/content-resolver.vue

@@ -0,0 +1,50 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 24px">
+    <div>
+      <p><strong>默认内容解析（使用 message.content）</strong></p>
+      <tr-bubble :content="message.content" :avatar="aiAvatar"></tr-bubble>
+    </div>
+
+    <div>
+      <p><strong>自定义内容解析（从 message.state 字段提取）</strong></p>
+      <tr-bubble v-bind="message" :avatar="aiAvatar" :content-resolver="customResolver"></tr-bubble>
+    </div>
+
+    <div>
+      <p><strong>自定义内容解析（组合多个字段）</strong></p>
+      <tr-bubble v-bind="message" :avatar="aiAvatar" :content-resolver="combinedResolver"></tr-bubble>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TrBubble } from '@opentiny/tiny-robot'
+import { IconAi } from '@opentiny/tiny-robot-svgs'
+import type { BubbleMessage, ChatMessageContent } from '@opentiny/tiny-robot'
+import { h } from 'vue'
+
+const aiAvatar = h(IconAi, { style: { fontSize: '32px' } })
+
+// 示例消息，将额外数据存储在 state 中
+// state 用于存储 UI 相关的数据，不会影响消息内容
+const message: BubbleMessage<ChatMessageContent, { text?: string; extra?: string }> = {
+  role: 'ai',
+  content: '这是默认的 content 字段',
+  state: {
+    text: '这是从 state.text 字段提取的内容',
+    extra: '这是存储在 state.extra 中的自定义数据',
+  },
+}
+
+// 自定义解析器：从 state.text 字段提取内容
+const customResolver = (msg: BubbleMessage): ChatMessageContent | undefined => {
+  return msg.state?.text as string | undefined
+}
+
+// 组合解析器：组合 content 和 state.extra
+const combinedResolver = (msg: BubbleMessage): ChatMessageContent | undefined => {
+  const content = (msg.content as string) || ''
+  const extra = (msg.state?.extra as string) || ''
+  return `${content}\n\n状态数据：${extra}`
+}
+</script>

docs/demos/bubble/custom-renderer.vue

@@ -0,0 +1,100 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <tr-bubble :content="codeMessage" :avatar="aiAvatar" :fallback-content-renderer="CodeBlockRenderer"></tr-bubble>
+    <tr-bubble :content="normalMessage" :avatar="aiAvatar"></tr-bubble>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { BubbleContentRendererProps, TrBubble } from '@opentiny/tiny-robot'
+import { IconAi } from '@opentiny/tiny-robot-svgs'
+import { defineComponent, h } from 'vue'
+import { useMessageContent } from '@opentiny/tiny-robot'
+
+const aiAvatar = h(IconAi, { style: { fontSize: '32px' } })
+
+// 定义代码消息类型
+interface CodeMessage {
+  type: 'code'
+  language: string
+  code: string
+}
+
+const codeMessage: CodeMessage[] = [
+  {
+    type: 'code',
+    language: 'javascript',
+    code: `function hello() {
+  console.log('Hello, World!')
+}`,
+  },
+]
+
+const normalMessage = '这是一条普通消息'
+
+// 自定义代码块渲染器
+const CodeBlockRenderer = defineComponent({
+  props: {
+    message: {
+      type: Object,
+      required: true,
+    },
+    contentIndex: Number,
+  },
+  setup(props: BubbleContentRendererProps) {
+    // 使用 useMessageContent 来正确处理数组内容和 contentIndex
+    const { content: contentItem } = useMessageContent(props)
+
+    return () => {
+      const content = contentItem.value as unknown as CodeMessage
+
+      if (!content || content.type !== 'code') {
+        return h('div', '无效的代码内容')
+      }
+
+      return h('div', { class: 'code-block-wrapper' }, [
+        h(
+          'div',
+          {
+            class: 'code-block-header',
+            style: {
+              padding: '8px 12px',
+              background: '#2d2d2d',
+              color: '#fff',
+              fontSize: '12px',
+              borderTopLeftRadius: '6px',
+              borderTopRightRadius: '6px',
+            },
+          },
+          content.language || 'code',
+        ),
+        h(
+          'pre',
+          {
+            class: 'code-block-content',
+            style: {
+              margin: 0,
+              padding: '12px',
+              background: '#1e1e1e',
+              color: '#d4d4d4',
+              fontSize: '14px',
+              fontFamily: 'monospace',
+              borderBottomLeftRadius: '6px',
+              borderBottomRightRadius: '6px',
+              overflow: 'auto',
+            },
+          },
+          h('code', {}, content.code),
+        ),
+      ])
+    }
+  },
+})
+</script>
+
+<style scoped>
+.code-block-wrapper {
+  width: 100%;
+  max-width: 100%;
+}
+</style>

docs/demos/bubble/image.vue

@@ -0,0 +1,53 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <div>
+      <p><strong>单张图片</strong></p>
+      <tr-bubble
+        :content="[{ type: 'image_url', image_url: { url: 'https://picsum.photos/400/300?random=1' } }]"
+        :avatar="aiAvatar"
+      ></tr-bubble>
+    </div>
+
+    <div>
+      <p><strong>多张图片</strong></p>
+      <tr-bubble :content="multipleImages" :avatar="aiAvatar"></tr-bubble>
+    </div>
+
+    <div>
+      <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px">
+        <p style="margin: 0"><strong>图片与文本混合</strong></p>
+        <label style="display: flex; align-items: center; gap: 4px; font-size: 12px; color: #666">
+          <input type="checkbox" v-model="useSplitMode" />
+          split 模式
+        </label>
+      </div>
+      <tr-bubble
+        :content="mixedContent"
+        :avatar="aiAvatar"
+        :content-render-mode="useSplitMode ? 'split' : 'single'"
+      ></tr-bubble>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TrBubble } from '@opentiny/tiny-robot'
+import { IconAi } from '@opentiny/tiny-robot-svgs'
+import { h, ref } from 'vue'
+
+const aiAvatar = h(IconAi, { style: { fontSize: '32px' } })
+
+const multipleImages = [
+  { type: 'image_url', image_url: { url: 'https://picsum.photos/400/300?random=2' } },
+  { type: 'image_url', image_url: { url: 'https://picsum.photos/400/300?random=3' } },
+  { type: 'image_url', image_url: { url: 'https://picsum.photos/400/300?random=4' } },
+]
+
+const mixedContent = [
+  { type: 'text', text: '这是一张示例图片：' },
+  { type: 'image_url', image_url: { url: 'https://picsum.photos/400/300?random=5' } },
+  { type: 'text', text: '图片下方可以继续显示文本内容。' },
+]
+
+const useSplitMode = ref(false)
+</script>