import HistoricalMessage from "./HistoricalMessage"; import PromptReply from "./PromptReply"; import { useEffect, useRef, useState } from "react"; import { useManageWorkspaceModal } from "../../../Modals/MangeWorkspace"; import ManageWorkspace from "../../../Modals/MangeWorkspace"; import { ArrowDown } from "@phosphor-icons/react"; import debounce from "lodash.debounce"; export default function ChatHistory({ history = [], workspace, sendCommand }) { const { showing, showModal, hideModal } = useManageWorkspaceModal(); const [isAtBottom, setIsAtBottom] = useState(true); const chatHistoryRef = useRef(null); useEffect(() => { scrollToBottom(); }, [history]); const handleScroll = () => { const diff = chatHistoryRef.current.scrollHeight - chatHistoryRef.current.scrollTop - chatHistoryRef.current.clientHeight; // Fuzzy margin for what qualifies as "bottom". Stronger than straight comparison since that may change over time. const isBottom = diff <= 10; setIsAtBottom(isBottom); }; const debouncedScroll = debounce(handleScroll, 100); useEffect(() => { function watchScrollEvent() { if (!chatHistoryRef.current) return null; const chatHistoryElement = chatHistoryRef.current; if (!chatHistoryElement) return null; chatHistoryElement.addEventListener("scroll", debouncedScroll); } watchScrollEvent(); }, []); const scrollToBottom = () => { if (chatHistoryRef.current) { chatHistoryRef.current.scrollTo({ top: chatHistoryRef.current.scrollHeight, behavior: "smooth", }); } }; const handleSendSuggestedMessage = (heading, message) => { sendCommand(`${heading} ${message}`, true); }; if (history.length === 0) { return (
Welcome to your new workspace.
To get started either{" "} upload a document or send a chat.