61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
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>
|
|
);
|
|
};
|