Initial open-source release

src/components/chat/MessagesList.tsx

@@ -0,0 +1,71 @@
+import type React from "react";
+import type { Message } from "ai";
+import { forwardRef } from "react";
+import ChatMessage from "./ChatMessage";
+import { SetupBanner } from "../SetupBanner";
+import { useSettings } from "@/hooks/useSettings";
+import { useStreamChat } from "@/hooks/useStreamChat";
+import { selectedChatIdAtom } from "@/atoms/chatAtoms";
+import { useAtom, useAtomValue } from "jotai";
+import { RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface MessagesListProps {
+  messages: Message[];
+  messagesEndRef: React.RefObject<HTMLDivElement | null>;
+}
+
+export const MessagesList = forwardRef<HTMLDivElement, MessagesListProps>(
+  function MessagesList({ messages, messagesEndRef }, ref) {
+    const { streamMessage, isStreaming, error, setError } = useStreamChat();
+    const { isAnyProviderSetup } = useSettings();
+    const selectedChatId = useAtomValue(selectedChatIdAtom);
+    return (
+      <div className="flex-1 overflow-y-auto p-4" ref={ref}>
+        {messages.length > 0 ? (
+          messages.map((message, index) => (
+            <ChatMessage key={index} message={message} />
+          ))
+        ) : (
+          <div className="flex flex-col items-center justify-center h-full max-w-2xl mx-auto">
+            <div className="flex items-center justify-center h-full text-gray-500">
+              No messages yet
+            </div>
+            {!isAnyProviderSetup() && <SetupBanner />}
+          </div>
+        )}
+        {messages.length > 0 && !isStreaming && (
+          <div className="flex max-w-3xl mx-auto">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                if (!selectedChatId) {
+                  console.error("No chat selected");
+                  return;
+                }
+                // Find the last user message
+                const lastUserMessage = [...messages]
+                  .reverse()
+                  .find((message) => message.role === "user");
+                if (!lastUserMessage) {
+                  console.error("No user message found");
+                  return;
+                }
+                streamMessage({
+                  prompt: lastUserMessage.content,
+                  chatId: selectedChatId,
+                  redo: true,
+                });
+              }}
+            >
+              <RefreshCw size={16} />
+              Retry
+            </Button>
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+    );
+  }
+);