2023-06-04 04:28:07 +02:00
|
|
|
import { Frown } from "react-feather";
|
|
|
|
import HistoricalMessage from "./HistoricalMessage";
|
|
|
|
import PromptReply from "./PromptReply";
|
2023-08-22 00:46:31 +02:00
|
|
|
import { useEffect, useRef } from "react";
|
2023-06-04 04:28:07 +02:00
|
|
|
|
|
|
|
export default function ChatHistory({ history = [], workspace }) {
|
2023-08-22 00:46:31 +02:00
|
|
|
const replyRef = useRef(null);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (replyRef.current) {
|
|
|
|
setTimeout(() => {
|
|
|
|
replyRef.current.scrollIntoView({ behavior: "smooth", block: "end" });
|
|
|
|
}, 700);
|
|
|
|
}
|
|
|
|
}, [history]);
|
|
|
|
|
2023-06-04 04:28:07 +02:00
|
|
|
if (history.length === 0) {
|
|
|
|
return (
|
|
|
|
<div className="flex flex-col h-[89%] md:mt-0 pb-5 w-full justify-center items-center">
|
|
|
|
<div className="w-fit flex items-center gap-x-2">
|
|
|
|
<Frown className="h-4 w-4 text-slate-400" />
|
|
|
|
<p className="text-slate-400">No chat history found.</p>
|
|
|
|
</div>
|
|
|
|
<p className="text-slate-400 text-xs">
|
|
|
|
Send your first message to get started.
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
2023-06-17 08:50:56 +02:00
|
|
|
className="h-[89%] pb-[100px] md:pt-[50px] md:pt-0 md:pb-5 mx-2 md:mx-0 overflow-y-scroll flex flex-col justify-start no-scroll"
|
2023-06-04 04:28:07 +02:00
|
|
|
id="chat-history"
|
|
|
|
>
|
2023-08-22 00:46:31 +02:00
|
|
|
{history.map((props, index) => {
|
|
|
|
const isLastMessage = index === history.length - 1;
|
|
|
|
|
|
|
|
if (props.role === "assistant" && props.animate) {
|
2023-06-04 04:28:07 +02:00
|
|
|
return (
|
2023-08-22 00:46:31 +02:00
|
|
|
<PromptReply
|
|
|
|
key={props.uuid}
|
|
|
|
ref={isLastMessage ? replyRef : null}
|
|
|
|
uuid={props.uuid}
|
|
|
|
reply={props.content}
|
|
|
|
pending={props.pending}
|
|
|
|
sources={props.sources}
|
|
|
|
error={props.error}
|
2023-06-04 04:28:07 +02:00
|
|
|
workspace={workspace}
|
2023-08-22 00:46:31 +02:00
|
|
|
closed={props.closed}
|
2023-06-04 04:28:07 +02:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
2023-08-22 00:46:31 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<HistoricalMessage
|
|
|
|
key={index}
|
|
|
|
ref={isLastMessage ? replyRef : null}
|
|
|
|
message={props.content}
|
|
|
|
role={props.role}
|
|
|
|
workspace={workspace}
|
|
|
|
sources={props.sources}
|
|
|
|
error={props.error}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
})}
|
2023-06-04 04:28:07 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|