refactor(bubble): improve content handling and cleanup logic

- Simplified the content extraction in `useBubbleBoxRenderer` by removing unnecessary type imports and ensuring consistent content resolution.
- Enhanced `useCopyCleanup` to utilize `onCleanup` for better event listener management, improving performance and preventing memory leaks.
- Updated `Markdown.vue` to sanitize rendered content after processing, ensuring security against XSS attacks.
- Added HTML escaping in `Tool.vue` to prevent XSS vulnerabilities when rendering JSON content.
- Refined `unwrapProxy` function in `utils.ts` to use a `WeakMap` for better handling of circular references and shared objects.
- Improved error handling in `useMessage` by ensuring `onError` is only called if defined, enhancing plugin robustness.
- Adjusted `fallbackRolePlugin` to correctly map messages, ensuring fallback roles are applied consistently.

Author: gene9831

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, ChatMessageContentItem } from '../index.type'
+import type { BubbleBoxRendererMatch, BubbleMessage } from '../index.type'
 import { defaultBoxRendererMatches, defaultFallbackBoxRenderer } from '../renderers/defaultRenderers'
 import { useContentResolver } from './useContentResolver'
 
@@ -61,7 +61,7 @@ export function useBubbleBoxRenderer(
     const resolvedContent = contentResolver(msgs.at(0)!)
     return {
       content: Array.isArray(resolvedContent)
-        ? (resolvedContent.at(contentIndex ?? 0) as ChatMessageContentItem)
+        ? resolvedContent.at(contentIndex ?? 0)!
         : { type: 'text', text: resolvedContent || '' },
       index: contentIndex ?? 0,
     }

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

@@ -1,25 +1,17 @@
-import { watch, type Ref, type WatchHandle } from 'vue'
+import { watch, type Ref } from 'vue'
 
 /**
  * 设置复制事件处理器，清理复制文本中的多余换行
  * @param elementRef - 需要处理复制事件的元素引用
  */
 export function useCopyCleanup(elementRef: Ref<HTMLElement | null>) {
-  let stopWatch: WatchHandle | null = null
-
-  stopWatch = watch(
+  watch(
     elementRef,
-    (elem) => {
-      // 清理之前的 watch 和事件监听器
-      if (stopWatch) {
-        stopWatch()
-        stopWatch = null
-      }
-
+    (elem, _prev, onCleanup) => {
       if (!elem) return
 
       // 添加复制事件监听器
-      elem.addEventListener('copy', (e) => {
+      const handler = (e: ClipboardEvent) => {
         // 获取用户选中的内容
         const selection = window.getSelection()
         // 判断选区是否在当前元素内
@@ -30,7 +22,10 @@ export function useCopyCleanup(elementRef: Ref<HTMLElement | null>) {
         const cleaned = selection?.toString().replace(/\n{2,}/g, '\n') || ''
         // 写入剪贴板
         e.clipboardData?.setData('text/plain', cleaned)
-      })
+      }
+      elem.addEventListener('copy', handler)
+      // 使用 onCleanup 在元素变化或 watcher 停止时移除事件监听器
+      onCleanup(() => elem.removeEventListener('copy', handler))
     },
     { immediate: true, flush: 'post' },
   )

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

@@ -27,8 +27,8 @@ const markdownContent = ref('')
 watchEffect(() => {
   if (markdownItAndDompurify.value) {
     const { markdown, dompurify } = markdownItAndDompurify.value
-    markdownContent.value = markdown(mdConfig || {}).render(content.value)
-    dompurify.sanitize(markdownContent.value, dompurifyConfig)
+    const rendered = markdown(mdConfig || {}).render(content.value)
+    markdownContent.value = dompurify.sanitize(rendered, dompurifyConfig)
   }
 })
 </script>

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

@@ -42,12 +42,22 @@ const prettyJSON = (json: unknown, space = 2) => {
 
 const classes = useCssModule()
 
+// Escape HTML entities to prevent XSS attacks when rendering with v-html
+const escapeHtml = (value: string) =>
+  value
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+
 const highlightJSON = (json: string): string => {
   if (!json) {
     return ''
   }
 
-  let jsonStr = json
+  // Escape HTML entities first to prevent XSS attacks
+  let jsonStr = escapeHtml(json)
 
   jsonStr = jsonStr.replace(
     /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g,

packages/kit/src/storage/utils.ts

@@ -7,10 +7,10 @@ import { ChatMessage } from '../types'
  * 同时移除不可序列化的内容（函数、Symbol 等）
  *
  * @param value - 要解包的值
- * @param visited - 用于检测循环引用的 WeakSet
+ * @param visited - 用于检测循环引用和共享引用的 WeakMap，映射原始对象到其克隆对象
  * @returns 解包后的普通对象
  */
-export function unwrapProxy<T>(value: T, visited: WeakSet<object> = new WeakSet()): T {
+export function unwrapProxy<T>(value: T, visited: WeakMap<object, any> = new WeakMap()): T {
   // 处理 null 和 undefined
   if (value === null || value === undefined) {
     return value
@@ -21,22 +21,23 @@ export function unwrapProxy<T>(value: T, visited: WeakSet<object> = new WeakSet(
     return value
   }
 
-  // 处理循环引用
-  if (visited.has(value as object)) {
-    // 遇到循环引用时返回空对象或空数组
-    return (Array.isArray(value) ? [] : {}) as T
-  }
-
-  // 标记为已访问
-  visited.add(value as object)
-
   try {
     // 使用 Vue 的 toRaw 解包响应式对象
     const rawValue: any = toRaw(value)
 
+    // 如果已经处理过该对象，返回之前创建的克隆对象（处理循环引用和共享引用）
+    if (visited.has(rawValue)) {
+      return visited.get(rawValue)
+    }
+
     // 处理数组
     if (Array.isArray(rawValue)) {
-      return rawValue.map((item) => unwrapProxy(item, visited)) as T
+      // 先创建空数组并存储到 visited，避免循环引用问题
+      const arr: any[] = []
+      visited.set(rawValue, arr)
+      // 然后填充数组内容
+      arr.push(...rawValue.map((item: any) => unwrapProxy(item, visited)))
+      return arr as T
     }
 
     // 处理 Date 对象
@@ -55,13 +56,12 @@ export function unwrapProxy<T>(value: T, visited: WeakSet<object> = new WeakSet(
     }
 
     // 处理普通对象
+    // 先创建空对象并存储到 visited，避免循环引用问题
     const result: any = {}
-    for (const key in rawValue) {
-      // 跳过 Symbol 键
-      if (typeof key === 'symbol') {
-        continue
-      }
+    visited.set(rawValue, result)
 
+    // 使用 Object.keys 而不是 for...in，确保只处理自有属性
+    for (const key of Object.keys(rawValue)) {
       const descriptor = Object.getOwnPropertyDescriptor(rawValue, key)
       if (!descriptor) {
         continue

packages/kit/src/vue/message/plugins/fallbackRolePlugin.ts

@@ -7,9 +7,9 @@ export const fallbackRolePlugin = (options: UseMessagePlugin & { fallbackRole?:
     name: 'fallbackRole',
     ...restOptions,
     onBeforeRequest(context) {
-      const { requestBody, messages } = context
+      const { requestBody } = context
       // 如果消息的 role 为空，则使用 fallbackRole
-      requestBody.messages = messages.map((message) => {
+      requestBody.messages = requestBody.messages.map((message) => {
         return {
           ...message,
           role: message.role || fallbackRole,

packages/kit/src/vue/message/useMessage.ts

@@ -276,8 +276,10 @@ export const useMessage = (options: UseMessageOptions): UseMessageReturn => {
 
       const context = getBaseContext(ac.signal)
       for (const plugin of plugins.filter((plugin) => !isPluginDisabled(plugin, context))) {
-        hasOnError = true
-        plugin.onError?.({ ...context, error: err })
+        if (plugin.onError) {
+          hasOnError = true
+          plugin.onError({ ...context, error: err })
+        }
       }
 
       // 如果没有任何插件实现了 onError 钩子，则抛出错误