2023-06-04 04:28:07 +02:00
|
|
|
import HistoricalMessage from "./HistoricalMessage";
|
|
|
|
import PromptReply from "./PromptReply";
|
2023-12-04 22:27:07 +01:00
|
|
|
import { useEffect, useRef, useState } from "react";
|
2023-10-23 22:10:34 +02:00
|
|
|
import { useManageWorkspaceModal } from "../../../Modals/MangeWorkspace";
|
|
|
|
import ManageWorkspace from "../../../Modals/MangeWorkspace";
|
2023-12-04 22:27:07 +01:00
|
|
|
import { ArrowDown } from "@phosphor-icons/react";
|
|
|
|
import debounce from "lodash.debounce";
|
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);
|
2023-10-23 22:10:34 +02:00
|
|
|
const { showing, showModal, hideModal } = useManageWorkspaceModal();
|
2023-12-04 22:27:07 +01:00
|
|
|
const [isAtBottom, setIsAtBottom] = useState(true);
|
|
|
|
const chatHistoryRef = useRef(null);
|
2023-08-22 00:46:31 +02:00
|
|
|
|
|
|
|
useEffect(() => {
|
2023-12-04 22:27:07 +01:00
|
|
|
scrollToBottom();
|
2023-08-22 00:46:31 +02:00
|
|
|
}, [history]);
|
|
|
|
|
2023-12-04 22:27:07 +01:00
|
|
|
const handleScroll = () => {
|
|
|
|
const isBottom =
|
|
|
|
chatHistoryRef.current.scrollHeight - chatHistoryRef.current.scrollTop ===
|
|
|
|
chatHistoryRef.current.clientHeight;
|
|
|
|
setIsAtBottom(isBottom);
|
|
|
|
};
|
|
|
|
|
|
|
|
const debouncedScroll = debounce(handleScroll, 100);
|
|
|
|
|
|
|
|
useEffect(() => {
|
2023-12-06 00:58:57 +01:00
|
|
|
if (!chatHistoryRef.current) return null;
|
2023-12-04 22:27:07 +01:00
|
|
|
const chatHistoryElement = chatHistoryRef.current;
|
|
|
|
chatHistoryElement.addEventListener("scroll", debouncedScroll);
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
chatHistoryElement.removeEventListener("scroll", debouncedScroll);
|
|
|
|
debouncedScroll.cancel();
|
|
|
|
};
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const scrollToBottom = () => {
|
|
|
|
if (chatHistoryRef.current) {
|
|
|
|
chatHistoryRef.current.scrollTo({
|
|
|
|
top: chatHistoryRef.current.scrollHeight,
|
|
|
|
behavior: "smooth",
|
|
|
|
});
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2023-06-04 04:28:07 +02:00
|
|
|
if (history.length === 0) {
|
|
|
|
return (
|
2023-10-23 22:10:34 +02:00
|
|
|
<div className="flex flex-col h-full md:mt-0 pb-48 w-full justify-end items-center">
|
|
|
|
<div className="flex flex-col items-start">
|
|
|
|
<p className="text-white/60 text-lg font-base -ml-6 py-4">
|
|
|
|
Welcome to your new workspace.
|
|
|
|
</p>
|
|
|
|
<div className="w-full text-center">
|
|
|
|
<p className="text-white/60 text-lg font-base inline-flex items-center gap-x-2">
|
|
|
|
To get started either{" "}
|
|
|
|
<span
|
|
|
|
className="underline font-medium cursor-pointer"
|
|
|
|
onClick={showModal}
|
|
|
|
>
|
|
|
|
upload a document
|
|
|
|
</span>
|
|
|
|
or <b className="font-medium italic">send a chat.</b>
|
|
|
|
</p>
|
|
|
|
</div>
|
2023-06-04 04:28:07 +02:00
|
|
|
</div>
|
2023-10-23 22:10:34 +02:00
|
|
|
{showing && (
|
|
|
|
<ManageWorkspace
|
|
|
|
hideModal={hideModal}
|
|
|
|
providedSlug={workspace.slug}
|
|
|
|
/>
|
|
|
|
)}
|
2023-06-04 04:28:07 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
2023-10-26 00:23:55 +02:00
|
|
|
className="h-full md:h-[83%] pb-[100px] pt-6 md:pt-0 md:pb-20 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-12-04 22:27:07 +01:00
|
|
|
ref={chatHistoryRef}
|
2023-06-04 04:28:07 +02:00
|
|
|
>
|
2023-08-22 00:46:31 +02:00
|
|
|
{history.map((props, index) => {
|
|
|
|
const isLastMessage = index === history.length - 1;
|
2023-11-14 00:07:30 +01:00
|
|
|
const isLastBotReply =
|
|
|
|
index === history.length - 1 && props.role === "assistant";
|
2023-08-22 00:46:31 +02:00
|
|
|
|
2023-11-14 00:07:30 +01:00
|
|
|
if (isLastBotReply && 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-10-23 22:10:34 +02:00
|
|
|
|
|
|
|
{showing && (
|
|
|
|
<ManageWorkspace hideModal={hideModal} providedSlug={workspace.slug} />
|
|
|
|
)}
|
2023-12-04 22:27:07 +01:00
|
|
|
{!isAtBottom && (
|
|
|
|
<div className="fixed bottom-40 right-10 md:right-20 z-50 cursor-pointer animate-pulse">
|
|
|
|
<div className="flex flex-col items-center">
|
|
|
|
<div className="p-1 rounded-full border border-white/10 bg-white/10 hover:bg-white/20 hover:text-white">
|
|
|
|
<ArrowDown
|
|
|
|
weight="bold"
|
|
|
|
className="text-white/60 w-5 h-5"
|
|
|
|
onClick={scrollToBottom}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
2023-06-04 04:28:07 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|