works with tab resize now

Author: RomneyDa

gui/src/components/TabBar/TabBar.tsx

@@ -35,6 +35,8 @@ const TabBarContainer = styled.div`
   border-bottom: none;
   position: relative;
   margin-top: 2px;
+  max-height: 100px;
+  overflow: auto;
 
   /* Hide scrollbar but keep functionality */
   scrollbar-width: none;
@@ -223,10 +225,13 @@ export const TabBar = React.forwardRef<HTMLDivElement>((_, ref) => {
     }
   };
 
-  return tabs.length === 1 ? (
-    <></>
-  ) : (
-    <TabBarContainer ref={ref}>
+  return (
+    <TabBarContainer
+      ref={ref}
+      style={{
+        display: tabs.length === 1 ? "none" : "flex",
+      }}
+    >
       {tabs.map((tab) => (
         <Tab
           key={tab.id}

gui/src/components/find/FindWidget.tsx

@@ -3,16 +3,23 @@ import {
   ArrowUpIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
-import { RefObject, useCallback, useEffect, useMemo, useState } from "react";
+import {
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { HeaderButton, Input } from "..";
 import HeaderButtonWithToolTip from "../gui/HeaderButtonWithToolTip";
 import {
   Rectangle,
   SearchMatch,
   searchWithinContainer,
 } from "./findWidgetSearch";
-import { useDebouncedInput } from "./useDebouncedInput";
-import { useElementSize } from "./useElementDims";
+import useDebounceValue from "./useDebounce";
+import { useElementSize } from "./useElementSize";
 
 interface HighlightOverlayProps {
   rectangle: Rectangle;
@@ -51,15 +58,12 @@ type ScrollToMatchOption = "closest" | "first" | "none";
 export const useFindWidget = (
   searchRef: RefObject<HTMLDivElement>,
   headerRef: RefObject<HTMLDivElement>,
-  refreshDependencies: React.DependencyList,
   disabled: boolean,
 ) => {
   // Search input, debounced
-  const {
-    inputRef,
-    debouncedValue: searchTerm,
-    currentValue,
-  } = useDebouncedInput();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [currentValue, setCurrentValue] = useState<string>("");
+  const searchTerm = useDebounceValue(currentValue, 300);
 
   // Widget open/closed state
   const [open, setOpen] = useState<boolean>(false);
@@ -134,14 +138,12 @@ export const useFindWidget = (
   }, [inputRef, matches, nextMatch]);
 
   // Handle container resize changes - highlight positions must adjust
-  const headerSize = useElementSize(headerRef);
-  const containerSize = useElementSize(searchRef);
+  const { clientHeight: headerHeight, isResizing: headerResizing } =
+    useElementSize(headerRef);
+  const { isResizing: containerResizing } = useElementSize(searchRef);
   const isResizing = useMemo(() => {
-    return containerSize.isResizing || headerSize.isResizing;
-  }, [containerSize, headerSize]);
-  const headerHeight = useMemo(() => {
-    return headerSize.size.height;
-  }, [headerSize]);
+    return containerResizing || headerResizing;
+  }, [containerResizing, headerResizing]);
 
   // Main function for finding matches and generating highlight overlays
   const refreshSearch = useCallback(
@@ -192,7 +194,7 @@ export const useFindWidget = (
     } else {
       refreshSearch("closest");
     }
-  }, [refreshSearch, open, disabled, isResizing, ...refreshDependencies]);
+  }, [refreshSearch, open, disabled, isResizing]);
 
   // Clicks in search div can cause content changes that for some reason don't trigger resize
   // Refresh clicking within container
@@ -220,6 +222,9 @@ export const useFindWidget = (
         type="text"
         ref={inputRef}
         value={currentValue}
+        onChange={(e) => {
+          setCurrentValue(e.target.value);
+        }}
         placeholder="Search..."
       />
       <p className="xs:block hidden min-w-12 whitespace-nowrap px-1 text-center text-xs">

gui/src/components/find/findWidgetSearch.ts

@@ -87,9 +87,10 @@ export const searchWithinContainer = (
       startIndex = endIndex;
 
       const top =
-        rect.top + searchContainer.clientTop + searchContainer.scrollTop;
-      //  -
-      // options.offsetHeight;
+        rect.top +
+        searchContainer.clientTop +
+        searchContainer.scrollTop -
+        options.offsetHeight;
 
       const left =
         rect.left + searchContainer.clientLeft + searchContainer.scrollLeft;

gui/src/components/find/useDebounce.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+
+function useDebounceValue<T>(value: T, delay: number = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export default useDebounceValue;

gui/src/components/find/useDebouncedInput.ts

@@ -0,0 +1,81 @@
+import { RefObject, useCallback, useEffect, useState } from "react";
+
+interface ElementSize {
+  clientWidth: number;
+  clientHeight: number;
+  scrollWidth: number;
+  scrollHeight: number;
+  isResizing: boolean;
+}
+
+interface UseElementSizeOptions {
+  debounceMs?: number;
+}
+
+export const useElementSize = (
+  ref: RefObject<HTMLElement>,
+  debounceMs = 250,
+): ElementSize => {
+  const [size, setSize] = useState<ElementSize>({
+    clientWidth: 0,
+    clientHeight: 0,
+    scrollWidth: 0,
+    scrollHeight: 0,
+    isResizing: false,
+  });
+
+  // Debounced update function
+  const debouncedSetSize = useCallback(
+    (measurements: Omit<ElementSize, "isResizing">) => {
+      let timeoutId: NodeJS.Timeout;
+
+      setSize((prev) => ({ ...prev, isResizing: true }));
+
+      timeoutId = setTimeout(() => {
+        setSize({
+          ...measurements,
+          isResizing: false,
+        });
+      }, debounceMs);
+
+      return () => clearTimeout(timeoutId);
+    },
+    [debounceMs],
+  );
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const updateSize = () => {
+      const element = ref.current;
+      if (!element) return;
+
+      const measurements = {
+        clientWidth: element.clientWidth,
+        clientHeight: element.clientHeight,
+        scrollWidth: element.scrollWidth,
+        scrollHeight: element.scrollHeight,
+      };
+
+      debouncedSetSize(measurements);
+    };
+
+    // Create ResizeObserver instance
+    const resizeObserver = new ResizeObserver(() => {
+      updateSize();
+    });
+
+    // Start observing the element
+    resizeObserver.observe(ref.current);
+
+    // Initial size calculation
+    updateSize();
+
+    // Cleanup
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [ref, debouncedSetSize]);
+
+  return size;
+};

gui/src/components/find/useElementDims.ts

@@ -156,7 +156,6 @@ export function Chat() {
   const { widget, highlights } = useFindWidget(
     stepsDivRef,
     tabsRef,
-    [history],
     isStreaming,
   );