extracted chat component to widgets

2026-02-17 19:52:41 +00:00
parent 21213c281d
commit 74e98e95e1
37 changed files with 44 additions and 327 deletions
@@ -0,0 +1,52 @@
+import type { RefObject } from 'react';
+import { ArrowDown } from 'lucide-react';
+import type { ChatMessage } from './types';
+import { MessageBubble, StreamingBubble } from './MessageBubble';
+
+type MessageListProps = {
+  messages: ChatMessage[];
+  streamingText: string;
+  isGenerating: boolean;
+  showJumpToBottom: boolean;
+  onJumpToBottom: () => void;
+  onQuestionAnswer?: (text: string) => void;
+  scrollViewportRef: RefObject<HTMLDivElement | null>;
+  bottomRef: RefObject<HTMLDivElement | null>;
+};
+
+export const MessageList = ({
+  messages,
+  streamingText,
+  isGenerating,
+  showJumpToBottom,
+  onJumpToBottom,
+  onQuestionAnswer,
+  scrollViewportRef,
+  bottomRef,
+}: MessageListProps) => (
+  <div className="flex-1 min-h-0 relative">
+    <div ref={scrollViewportRef} className="h-full overflow-y-auto">
+      <div className="p-4 space-y-3">
+        {messages.length === 0 && !isGenerating && (
+          <div className="flex items-center justify-center h-full min-h-[200px] text-duck-dark/30 text-sm">
+            Send a message to start
+          </div>
+        )}
+        {messages.map((msg, i) => (
+          <MessageBubble key={i} message={msg} onAnswer={onQuestionAnswer} />
+        ))}
+        {isGenerating && <StreamingBubble text={streamingText} />}
+        <div ref={bottomRef} />
+      </div>
+    </div>
+
+    {showJumpToBottom && (
+      <button
+        onClick={onJumpToBottom}
+        className="absolute bottom-2 left-1/2 -translate-x-1/2 bg-duck-teal text-white rounded-full p-1.5 shadow-lg hover:bg-duck-teal/90 transition-colors cursor-pointer"
+      >
+        <ArrowDown className="h-4 w-4" />
+      </button>
+    )}
+  </div>
+);