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,41 @@
+"use client";
+/**
+ * MessageContent 消息内容容器
+ *
+ * 原始 Dart: lib/ui/chat/widgets/message_content.dart（43 行）
+ *
+ * 决定渲染 ImageBubble 还是 TextBubble：
+ *   - 有 imageUrl：渲染 ImageBubble（图片）
+ *   - 有 content 且非 "[图片]" 占位符：渲染 TextBubble（文字）
+ *   - 两者都有：图片在上，文字在下
+ */
+import { ImageBubble } from "./image-bubble";
+import { TextBubble } from "./text-bubble";
+
+export interface MessageContentProps {
+  content: string;
+  imageUrl?: string | null;
+  isFromAI: boolean;
+}
+
+const IMAGE_PLACEHOLDER = "[图片]";
+
+export function MessageContent({ content, imageUrl, isFromAI }: MessageContentProps) {
+  const hasImage = imageUrl != null && imageUrl.length > 0;
+  const hasText = content.length > 0 && content !== IMAGE_PLACEHOLDER;
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: isFromAI ? "flex-start" : "flex-end",
+        gap: 8,
+        maxWidth: "100%",
+      }}
+    >
+      {hasImage && imageUrl && <ImageBubble imageUrl={imageUrl} />}
+      {hasText && <TextBubble content={content} isFromAI={isFromAI} />}
+    </div>
+  );
+}