From 186ca686e3e060d41f5cbd1b77e959172f9b5484 Mon Sep 17 00:00:00 2001
From: Red J Adaya <red.adaya@gmail.com>
Date: Sat, 6 Jul 2024 11:02:49 +0800
Subject: [PATCH] use useParentHeight hook in waveai (#97)

---
 frontend/app/hook/useParentHeight.tsx | 14 ++++++++------
 frontend/app/view/waveai.tsx          | 26 ++++----------------------
 2 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/frontend/app/hook/useParentHeight.tsx b/frontend/app/hook/useParentHeight.tsx
index 08c2c6f84..09483b741 100644
--- a/frontend/app/hook/useParentHeight.tsx
+++ b/frontend/app/hook/useParentHeight.tsx
@@ -4,7 +4,7 @@
 import debounce from "lodash.debounce";
 import { useCallback, useEffect, useState } from "react";
 
-const useParentHeight = (ref: React.RefObject<HTMLElement>) => {
+const useParentHeight = (ref: React.RefObject<HTMLElement>, delay = 0) => {
     const [height, setHeight] = useState<number | null>(null);
 
     const updateHeight = useCallback(() => {
@@ -14,25 +14,27 @@ const useParentHeight = (ref: React.RefObject<HTMLElement>) => {
         }
     }, []);
 
-    const debouncedUpdateHeight = useCallback(debounce(updateHeight, 100), [updateHeight]);
+    const fUpdateHeight = useCallback(delay > 0 ? debounce(updateHeight, delay) : updateHeight, [updateHeight, delay]);
 
     useEffect(() => {
         const resizeObserver = new ResizeObserver(() => {
-            debouncedUpdateHeight();
+            fUpdateHeight();
         });
 
         if (ref.current) {
             resizeObserver.observe(ref.current);
-            updateHeight();
+            fUpdateHeight();
         }
 
         return () => {
             if (ref.current) {
                 resizeObserver.unobserve(ref.current);
             }
-            debouncedUpdateHeight.cancel();
+            if (delay > 0) {
+                fUpdateHeight.cancel();
+            }
         };
-    }, [debouncedUpdateHeight, updateHeight]);
+    }, [fUpdateHeight]);
 
     return height;
 };
diff --git a/frontend/app/view/waveai.tsx b/frontend/app/view/waveai.tsx
index 86e3601ff..8a3b4a902 100644
--- a/frontend/app/view/waveai.tsx
+++ b/frontend/app/view/waveai.tsx
@@ -3,6 +3,7 @@
 
 import { Markdown } from "@/app/element/markdown";
 import { TypingIndicator } from "@/app/element/typingindicator";
+import { useParentHeight } from "@/app/hook/useParentHeight";
 import { getApi } from "@/app/store/global";
 import { ChatMessageType, useWaveAi } from "@/app/store/waveai";
 import type { OverlayScrollbars } from "overlayscrollbars";
@@ -222,34 +223,15 @@ const WaveAi = React.memo(({ parentRef }: WaveAiProps) => {
     const submitTimeoutRef = useRef<NodeJS.Timeout>(null);
 
     const [value, setValue] = useState("");
-    const [waveAiHeight, setWaveAiHeight] = useState(0);
     const [selectedBlockIdx, setSelectedBlockIdx] = useState<number | null>(null);
     const [isSubmitting, setIsSubmitting] = useState(false);
 
     const termFontSize: number = 14;
+    const parentHeight = useParentHeight(parentRef);
+    const waveAiHeight = parentHeight - 27;
 
     useEffect(() => {
-        const parentElement = parentRef.current;
-        setWaveAiHeight(parentElement?.getBoundingClientRect().height);
-
-        // Use ResizeObserver to observe changes in the height of parentRef
-        const handleResize = () => {
-            const webviewHeight = parentElement?.getBoundingClientRect().height;
-            setWaveAiHeight(webviewHeight);
-        };
-
-        const resizeObserver = new ResizeObserver((entries) => {
-            for (let entry of entries) {
-                if (entry.target === parentElement) {
-                    handleResize();
-                }
-            }
-        });
-
-        resizeObserver.observe(parentElement);
-
         return () => {
-            resizeObserver.disconnect();
             if (submitTimeoutRef.current) {
                 clearTimeout(submitTimeoutRef.current);
             }
@@ -417,7 +399,7 @@ const WaveAi = React.memo(({ parentRef }: WaveAiProps) => {
     };
 
     return (
-        <div ref={waveaiRef} className="waveai" onClick={handleContainerClick} style={{ height: waveAiHeight - 27 }}>
+        <div ref={waveaiRef} className="waveai" onClick={handleContainerClick} style={{ height: waveAiHeight }}>
             <ChatWindow ref={osRef} chatWindowRef={chatWindowRef} messages={messages} />
             <div className="waveai-input-wrapper">
                 <ChatInput