84 lines
3.4 KiB
TypeScript
84 lines
3.4 KiB
TypeScript
import {faRobot} from '@fortawesome/free-solid-svg-icons';
|
|
import React, {useContext, useEffect, useState} from 'react';
|
|
import {SessionContext} from "@/context/SessionContext";
|
|
import {ConversationProps} from "@/lib/models/QuillSense";
|
|
import System from "@/lib/models/System";
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {BookContext, BookContextProps} from "@/context/BookContext";
|
|
import {LangContext} from "@/context/LangContext";
|
|
|
|
interface QuillListProps {
|
|
handleSelectConversation: (itemId: string) => void;
|
|
}
|
|
|
|
export default function QuillList({handleSelectConversation}: QuillListProps) {
|
|
const {session} = useContext(SessionContext);
|
|
const {book} = useContext<BookContextProps>(BookContext);
|
|
const {lang} = useContext(LangContext);
|
|
|
|
const [conversations, setConversations] = useState<ConversationProps[]>([]);
|
|
|
|
useEffect((): void => {
|
|
getConversations().then();
|
|
}, []);
|
|
|
|
async function getConversations(): Promise<void> {
|
|
try {
|
|
const response: ConversationProps[] = await System.authGetQueryToServer<ConversationProps[]>(
|
|
`quillsense/conversations`,
|
|
session.accessToken,
|
|
lang,
|
|
{
|
|
id: book?.bookId,
|
|
}
|
|
);
|
|
if (response.length > 0) {
|
|
setConversations(response);
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
function getStatusColorClass(status: number): string {
|
|
switch (status) {
|
|
case 1:
|
|
return 'bg-muted';
|
|
case 2:
|
|
return 'bg-blue-500';
|
|
case 3:
|
|
return 'bg-primary';
|
|
case 4:
|
|
return 'bg-error';
|
|
default:
|
|
return 'bg-muted';
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex-1 overflow-y-auto p-2">
|
|
{conversations.map((conversation: ConversationProps) => (
|
|
<div key={conversation.id}
|
|
className="flex items-center justify-between p-3 mb-2 rounded-xl bg-secondary/30 hover:bg-secondary hover:shadow-md cursor-pointer transition-all duration-200 border border-secondary/50 hover:border-secondary hover:scale-102"
|
|
onClick={(): void => handleSelectConversation(conversation.id)}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div
|
|
className={`w-2.5 h-2.5 rounded-full ${getStatusColorClass(conversation.status)} shadow-sm`}></div>
|
|
<FontAwesomeIcon icon={faRobot} className="text-primary w-5 h-5"/>
|
|
<div>
|
|
<span className="text-text-primary font-medium">{conversation.title || "Sans titre"}</span>
|
|
{conversation.startDate && (
|
|
<p className="text-xs text-muted mt-0.5">{conversation.startDate}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{conversation.mode && (
|
|
<span
|
|
className="text-xs bg-primary/20 text-primary px-2.5 py-1 rounded-lg font-medium border border-primary/30">{conversation.mode}</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
} |