feat(chat): port chat widget components from Dart to React

2026-06-09 20:19:52 +08:00
parent 199a14650e
commit 109a3e3855
48 changed files with 2463 additions and 382 deletions
@@ -0,0 +1,55 @@
+"use client";
+/**
+ * MessageAvatar 消息头像
+ *
+ * 原始 Dart: lib/ui/chat/widgets/message_avatar.dart（85 行）
+ *
+ * 显示规则：
+ *   - AI 消息：Elio 头像（`/images/chat/pic-chat-elio.png`）
+ *   - 用户消息（有 avatarUrl）：用户头像
+ *   - 用户消息（无 avatarUrl）：游客头像（`/images/chat/pic-chat-guest.png`）
+ */
+import Image from "next/image";
+
+import styles from "./message-avatar.module.css";
+
+export interface MessageAvatarProps {
+  isFromAI: boolean;
+  userAvatarUrl?: string | null;
+}
+
+export function MessageAvatar({ isFromAI, userAvatarUrl }: MessageAvatarProps) {
+  if (isFromAI) {
+    return (
+      <div className={styles.avatar} aria-label="AI avatar">
+        <Image
+          src="/images/chat/pic-chat-elio.png"
+          alt="Elio"
+          width={43}
+          height={43}
+          priority
+        />
+      </div>
+    );
+  }
+
+  if (userAvatarUrl && userAvatarUrl.length > 0) {
+    return (
+      <div className={styles.avatar} aria-label="User avatar">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={userAvatarUrl} alt="" />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.avatar} aria-label="Guest avatar">
+      <Image
+        src="/images/chat/pic-chat-guest.png"
+        alt="Guest"
+        width={43}
+        height={43}
+      />
+    </div>
+  );
+}