[#130] Fix chat window view when expand the suggestion window

akvo · Nov 4, 2024 · 4de4013 · 4de4013
1 parent 97394fe
commit 4de4013
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/frontend/src/components/chats/ChatWindow.js b/frontend/src/components/chats/ChatWindow.js
@@ -144,15 +144,16 @@ const ChatWindow = ({
   const [loading, setLoading] = useState(true);
   const [isDropdownOpen, setDropdownOpen] = useState(false);
   const [isEdit, setIsEdit] = useState(false);
+  const [maxHeight, setMaxHeight] = useState(0);
 
   const firstUnreadMessage = useMemo(() => {
     return chatHistory.find((ch) => ch.status === ChatStatusEnum.UNREAD);
   }, [chatHistory]);
 
-  const scrollToLastMessage = useCallback(() => {
+  const scrollToLastMessage = useCallback((currentHeight = 0) => {
     if (messagesContainerRef.current) {
       messagesContainerRef.current.scrollTop =
-        messagesContainerRef.current.scrollHeight;
+        messagesContainerRef.current.scrollHeight + currentHeight;
     }
   }, []);
 
@@ -539,7 +540,9 @@ const ChatWindow = ({
             className={`flex flex-col flex-grow pt-20 w-full h-full ${
               isWhisperVisible ? "pb-40" : "pb-0"
             }`}
-            style={{ maxHeight: "calc(100vh - 80px)" }} // Adjust for header and textarea
+            style={{
+              maxHeight: `calc(100vh - ${maxHeight ? maxHeight / 2 : 80}px)`,
+            }} // Adjust for header and textarea
           >
             {loading ? (
               <Loading />
@@ -563,6 +566,9 @@ const ChatWindow = ({
                   setUseWhisperAsTemplate={setUseWhisperAsTemplate}
                   clients={clients}
                   lastChatHistory={lastChatHistory}
+                  maxHeight={maxHeight}
+                  setMaxHeight={setMaxHeight}
+                  scrollToLastMessage={scrollToLastMessage}
                 />
               </>
             )}

diff --git a/frontend/src/components/chats/Whisper.js b/frontend/src/components/chats/Whisper.js
@@ -22,6 +22,9 @@ const Whisper = ({
   setUseWhisperAsTemplate,
   clients,
   lastChatHistory,
+  maxHeight,
+  setMaxHeight,
+  scrollToLastMessage,
 }) => {
   const whisperMessageRef = useRef(null);
   const chatContext = useChatContext();
@@ -30,7 +33,12 @@ const Whisper = ({
   const [copied, setCopied] = useState(false);
   const [expanded, setExpanded] = useState(false);
   const [whisperHeight, setWhisperHeight] = useState(0);
-  const [maxHeight, setMaxHeight] = useState("0px");
+
+  useEffect(() => {
+    if (expanded) {
+      scrollToLastMessage(maxHeight / 2);
+    }
+  }, [expanded, scrollToLastMessage, maxHeight]);
 
   // handle whisper deduplication here
   const whispers = useMemo(() => {
@@ -86,9 +94,13 @@ const Whisper = ({
   }, []);
 
   useEffect(() => {
+    if (!expanded) {
+      setMaxHeight(0);
+      return;
+    }
     const calculateMaxHeight = () => {
       // Calculate 2/3 of the viewport height
-      const calculatedMaxHeight = (window.innerHeight * 2) / 3 + "px";
+      const calculatedMaxHeight = (window.innerHeight * 2) / 3;
       setMaxHeight(calculatedMaxHeight);
     };
 
@@ -106,7 +118,7 @@ const Whisper = ({
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, []);
+  }, [expanded]);
 
   useEffect(() => {
     if (whisperMessageRef.current) {
@@ -122,15 +134,13 @@ const Whisper = ({
     <div
       className={`fixed bottom-16 w-full flex mt-12 px-4 pt-4 pb-6 overflow-auto bg-gray-100`}
       style={{
-        height: expanded
-          ? Math.min(whisperHeight, parseFloat(maxHeight))
-          : "11.625rem",
+        height: expanded ? Math.min(whisperHeight, maxHeight) : "11.625rem",
       }}
     >
       <div
         className={`w-full relative bg-white border-white border-2 border-solid rounded-lg shadow-inner overflow-auto`}
         style={{
-          maxHeight: expanded ? maxHeight : "11.625rem",
+          maxHeight: expanded ? `${maxHeight}px` : "11.625rem",
         }}
       >
         <div className="flex justify-between sticky top-0 pt-4 pb-2 bg-white z-10 px-4">