dev 分支暂存

frontend/web/src/components/chat/MessageBubble.tsx

@@ -4,35 +4,51 @@ interface MessageBubbleProps {
   role: 'user' | 'assistant';
   content: string;
   timestamp: number;
+  isStreaming?: boolean;
 }
 
-export function MessageBubble({ role, content, timestamp }: MessageBubbleProps) {
-  if (role === 'user') {
-    return (
-      <div className="flex justify-end px-4 py-2">
-        <div className="max-w-[70%] bg-pink-400 text-white rounded-2xl rounded-br-md px-4 py-2 shadow-sm">
-          <p className="text-sm leading-relaxed">{content}</p>
-          <span className="text-xs text-pink-100 mt-1 block">
-            {new Date(timestamp).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}
-          </span>
-        </div>
-      </div>
-    );
-  }
+export function MessageBubble({ role, content, timestamp, isStreaming }: MessageBubbleProps) {
+  const isUser = role === 'user';
+  const time = new Date(timestamp).toLocaleTimeString('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
 
   return (
-    <div className="flex px-4 py-2 gap-3">
-      <CyreneAvatar size="sm" className="flex-shrink-0 mt-1" />
-      <div className="max-w-[70%]">
-        <div className="bg-white dark:bg-gray-800 rounded-2xl rounded-bl-md px-4 py-2 shadow-sm border border-pink-100 dark:border-pink-900">
-          <p className="text-sm leading-relaxed text-gray-700 dark:text-gray-200">
-            {content}
-          </p>
-        </div>
-        <span className="text-xs text-gray-400 mt-1 block ml-1">
-          {new Date(timestamp).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}
-        </span>
+    <div className={`flex px-4 py-2 gap-3 ${isUser ? 'flex-row-reverse' : ''}`}>
+      {/* 头像 */}
+      {!isUser && (
+        <CyreneAvatar size="sm" className="flex-shrink-0 mt-1" />
+      )}
+
+      {/* 消息气泡 */}
+      <div
+        className={`
+          max-w-[75%] px-4 py-2.5 rounded-2xl text-sm leading-relaxed shadow-sm
+          ${
+            isUser
+              ? 'bg-pink-400 text-white rounded-br-md'
+              : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-bl-md border border-pink-100 dark:border-pink-900'
+          }
+          ${isStreaming ? 'animate-pulse' : ''}
+        `}
+      >
+        <p className="whitespace-pre-wrap break-words">{content}</p>
+        <p
+          className={`text-xs mt-1 ${
+            isUser ? 'text-pink-100' : 'text-gray-400'
+          }`}
+        >
+          {time}
+        </p>
       </div>
+
+      {/* 用户头像占位 */}
+      {isUser && (
+        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-pink-300 to-pink-500 flex items-center justify-center flex-shrink-0 mt-1 shadow-sm">
+          <span className="text-white text-sm">开拓者</span>
+        </div>
+      )}
     </div>
   );
 }