Merge pull request #126 from nlxai/highlights-follow-u-around-👻

highlights follow u around 👻
nlxai · Jul 11, 2024 · a926b92 · a926b92
2 parents 5f89128 + 9d91b24
commit a926b92
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 26 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/journey-manager/package.json b/packages/journey-manager/package.json
@@ -39,7 +39,7 @@
     "typescript": "^5.2.2"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.5",
+    "@floating-ui/dom": "^1.6.7",
     "@nlxai/multimodal": "^0.1.35",
     "@testing-library/dom": "^10.1.0",
     "preact": "^10.22.0",

diff --git a/packages/journey-manager/src/ui.tsx b/packages/journey-manager/src/ui.tsx
@@ -1,7 +1,7 @@
-/* eslint-disable accessor-pairs */
-/* eslint-disable react/prop-types */
+/* eslint-disable accessor-pairs,  react/prop-types */
+
 import { type Client } from "@nlxai/multimodal";
-import { computePosition } from "@floating-ui/dom";
+import { autoUpdate, computePosition } from "@floating-ui/dom";
 import { render, type FunctionComponent } from "preact";
 import { useEffect, useState, useRef } from "preact/hooks";
 
@@ -133,7 +133,7 @@ button {
 @keyframes fadein {
   0% {
     opacity: 0%;
-  } 
+  }
   100% {
     opacity: 100%;
   }
@@ -142,7 +142,7 @@ button {
 @keyframes slideup {
   0% {
     transform: translateY(8px);
-  } 
+  }
   100% {
     transform: translateY(0px);
   }
@@ -220,7 +220,7 @@ button {
   font-size: 18px;
   font-weight: 500;
 }
- 
+
 .drawer-header p {
   font-size: 14px;
   color: #777;
@@ -384,18 +384,43 @@ const Highlight: FunctionComponent<{ element: HTMLElement }> = ({
 }) => {
   const ref = useRef<HTMLDivElement | null>(null);
   const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
+
+  const ancestors: Element[] = ((element: HTMLElement) => {
+    const ancestors: Element[] = [];
+    while (element.parentNode instanceof HTMLElement) {
+      ancestors.push(element.parentNode);
+      element = element.parentNode;
+    }
+    return ancestors;
+  })(element);
+
   useEffect(() => {
     if (ref.current != null) {
-      computePosition(element, ref.current, {
-        placement: "top-end",
-      })
-        .then((pos) => {
-          setPos(pos);
+      const highlight = ref.current;
+      const moveHighlight = (): void => {
+        computePosition(element, highlight, {
+          placement: "top-end",
         })
-        .catch((err) => {
-          // eslint-disable-next-line no-console
-          console.warn(err);
-        });
+          .then((pos) => {
+            setPos(pos);
+          })
+          .catch((err) => {
+            // eslint-disable-next-line no-console
+            console.warn(err);
+          });
+      };
+
+      const cleanupAutoUpdate = autoUpdate(element, highlight, moveHighlight);
+      const resizeObserver = new ResizeObserver(moveHighlight);
+
+      ancestors.forEach((ancestor) => {
+        resizeObserver.observe(ancestor);
+      });
+
+      return () => {
+        resizeObserver.disconnect();
+        cleanupAutoUpdate();
+      };
     }
   }, [element]);
   return (

diff --git a/packages/website/src/components/Prototyping.tsx b/packages/website/src/components/Prototyping.tsx
@@ -115,7 +115,7 @@ const runJourneyManager = async (): Promise<unknown> => {
     ui: {
       title: "Call Control Center",
       subtitle: "Manage your call experience with us",
-      highlights: false,
+      highlights: true,
       theme: {
         fontFamily: "'Neue Haas Grotesk'",
       },