fix: chat height

Author: drew-harris

clients/search-component/src/TrieveModal/ModeSwitch.tsx

@@ -3,6 +3,7 @@ import { useModalState } from "../utils/hooks/modal-context";
 import { SparklesIcon } from "./icons";
 import { useChatState } from "../utils/hooks/chat-context";
 import { cn } from "../utils/styles";
+import { useChatHeight } from "../utils/hooks/useChatHeight";
 
 export const ChatModeSwitch = () => {
   const { props, mode, query, setOpen } = useModalState();
@@ -55,20 +56,26 @@ export const ModeSwitch = () => {
 
 export const PopupChatCloseButton = () => {
   const { props, setOpen } = useModalState();
+  const { resetHeight } = useChatHeight();
 
   const { messages, isDoneReading, stopGeneratingMessage, clearConversation } =
     useChatState();
 
   if (props.inline) return null;
 
+  const clear = () => {
+    clearConversation();
+    resetHeight();
+  };
+
   return (
     <div
       className={`tv-text-xs tv-rounded-md !tv-bg-transparent tv-flex !hover:bg-tv-zinc-200 tv-px-2 tv-justify-end tv-items-center tv-p-2 tv-gap-0.5 tv-cursor-pointer ${props.type}`}
       onClick={() =>
         messages.length < 1
           ? setOpen(false)
           : isDoneReading
-            ? clearConversation()
+            ? clear()
             : stopGeneratingMessage()
       }
     >

clients/search-component/src/utils/hooks/useChatHeight.ts

@@ -1,14 +1,22 @@
-import { useEffect, useState } from "react";
+import { atom, useAtom } from "jotai";
+import { useEffect } from "react";
+
+const chatHeightAtom = atom<number>(0);
+const enabledAtom = atom<boolean>(true);
+const minHeightAtom = atom<number>(0);
 
 export const useChatHeight = (
-  modalRef: React.RefObject<HTMLDivElement>,
-  absoluteMinimum: number = 0
+  modalRef?: React.RefObject<HTMLDivElement>,
+  absoluteMinimum: number = 0,
 ) => {
-  const [chatHeight, setChatHeight] = useState(absoluteMinimum);
-  const [minHeight, setMinHeight] = useState(absoluteMinimum);
-  const [enabled, setEnabled] = useState(true);
+  const [minHeight, setMinHeight] = useAtom(minHeightAtom);
+  const [chatHeight, setChatHeight] = useAtom(chatHeightAtom);
+  const [enabled, setEnabled] = useAtom(enabledAtom);
 
   useEffect(() => {
+    if (!modalRef) {
+      return;
+    }
     const ref = modalRef.current;
     if (ref) {
       const observer = new ResizeObserver((entries) => {