From b18277a3a0218720f466f1ff4ac7b6aa1476a520 Mon Sep 17 00:00:00 2001
From: huangjianwu <huangjianwu@ynyuc.com>
Date: Mon, 23 Mar 2026 15:29:09 +0800
Subject: [PATCH] =?UTF-8?q?fix(chat):=20=E4=BF=AE=E5=A4=8D=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E6=B0=94=E6=B3=A1=E5=B7=A6=E5=8F=B3=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E4=B8=8D=E7=94=9F=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Bubble.List 的角色配置属性名是 role（单数）而非 roles
- 用户消息：右侧蓝色填充气泡 + 蓝色头像
- AI 回复：左侧描边气泡 + 灰色头像

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/pages/HomePage/components/ChatPanel.tsx     | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/BillNote_frontend/src/pages/HomePage/components/ChatPanel.tsx b/BillNote_frontend/src/pages/HomePage/components/ChatPanel.tsx
index 83dd8c7..43fb10c 100644
--- a/BillNote_frontend/src/pages/HomePage/components/ChatPanel.tsx
+++ b/BillNote_frontend/src/pages/HomePage/components/ChatPanel.tsx
@@ -1,6 +1,5 @@
 import { useState, useEffect, useCallback, useMemo } from 'react'
 import { Bubble, Sender } from '@ant-design/x'
-import type { BubbleProps } from '@ant-design/x'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Loader2, Trash2, ChevronDown, ChevronUp, BookOpen, UserRound, Bot, Maximize2, Minimize2 } from 'lucide-react'
@@ -161,22 +160,24 @@ export default function ChatPanel({ taskId, mode, onModeChange }: ChatPanelProps
   }, [messages, loading])
 
   // Bubble 角色配置
-  const roles: BubbleProps['roles'] = useMemo(
+  const roles = useMemo(
     () => ({
       user: {
-        placement: 'end',
+        placement: 'end' as const,
         avatar: {
           icon: <UserRound className="h-4 w-4" />,
           style: { background: '#3b82f6' },
         },
+        variant: 'filled' as const,
+        styles: { content: { background: '#3b82f6', color: '#fff' } },
       },
       ai: {
-        placement: 'start',
+        placement: 'start' as const,
         avatar: {
           icon: <Bot className="h-4 w-4" />,
           style: { background: '#6b7280' },
         },
-        typing: { step: 5, interval: 50 },
+        variant: 'outlined' as const,
       },
     }),
     [],
@@ -261,7 +262,7 @@ export default function ChatPanel({ taskId, mode, onModeChange }: ChatPanelProps
         ) : (
           <Bubble.List
             items={bubbleItems}
-            roles={roles}
+            role={roles}
             style={{ height: '100%' }}
           />
         )}