big uplift

raggr-frontend/src/components/ConversationList.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect } from "react";
+
+import { conversationService } from "../api/conversationService";
+type Conversation = {
+  title: string;
+  id: string;
+};
+
+type ConversationProps = {
+  conversations: Conversation[];
+  onSelectConversation: (conversation: Conversation) => void;
+  onCreateNewConversation: () => void;
+};
+
+export const ConversationList = ({
+  conversations,
+  onSelectConversation,
+  onCreateNewConversation,
+}: ConversationProps) => {
+  const [conservations, setConversations] = useState(conversations);
+
+  useEffect(() => {
+    const loadConversations = async () => {
+      try {
+        const fetchedConversations =
+          await conversationService.getAllConversations();
+        setConversations(
+          fetchedConversations.map((conversation) => ({
+            id: conversation.id,
+            title: conversation.name,
+          })),
+        );
+      } catch (error) {
+        console.error("Failed to load messages:", error);
+      }
+    };
+    loadConversations();
+  }, []);
+
+  return (
+    <div className="bg-indigo-300 rounded-md p-3 flex flex-col">
+      {conservations.map((conversation) => {
+        return (
+          <div
+            className="border-blue-400 bg-indigo-300 hover:bg-indigo-200 cursor-pointer rounded-md p-2"
+            onClick={() => onSelectConversation(conversation)}
+          >
+            <p>{conversation.title}</p>
+          </div>
+        );
+      })}
+      <div
+        className="border-blue-400 bg-indigo-300 hover:bg-indigo-200 cursor-pointer rounded-md p-2"
+        onClick={() => onCreateNewConversation()}
+      >
+        <p> + Start a new thread</p>
+      </div>
+    </div>
+  );
+};