feat: chat panel UE done

app/hooks/useRelativePosition.ts

@@ -0,0 +1,103 @@
+import { RefObject, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+
+export interface Options {
+  containerRef: RefObject<HTMLDivElement | null>;
+  delay?: number;
+  offsetDistance?: number;
+}
+
+export enum Orientation {
+  left,
+  right,
+  bottom,
+  top,
+}
+
+export type X = Orientation.left | Orientation.right;
+export type Y = Orientation.top | Orientation.bottom;
+
+interface Position {
+  id: string;
+  poi: {
+    targetH: number;
+    targetW: number;
+    distanceToRightBoundary: number;
+    distanceToLeftBoundary: number;
+    distanceToTopBoundary: number;
+    distanceToBottomBoundary: number;
+    overlapPositions: Record<Orientation, boolean>;
+    relativePosition: [X, Y];
+  };
+}
+
+export default function useRelativePosition({
+  containerRef,
+  delay = 100,
+  offsetDistance = 0,
+}: Options) {
+  const [position, setPosition] = useState<Position | undefined>();
+
+  const getRelativePosition = useDebouncedCallback(
+    (target: HTMLDivElement, id: string) => {
+      if (!containerRef.current) {
+        return;
+      }
+      const {
+        x: targetX,
+        y: targetY,
+        width: targetW,
+        height: targetH,
+      } = target.getBoundingClientRect();
+      const {
+        x: containerX,
+        y: containerY,
+        width: containerWidth,
+        height: containerHeight,
+      } = containerRef.current.getBoundingClientRect();
+
+      const distanceToRightBoundary =
+        containerX + containerWidth - (targetX + targetW) - offsetDistance;
+      const distanceToLeftBoundary = targetX - containerX - offsetDistance;
+      const distanceToTopBoundary = targetY - containerY - offsetDistance;
+      const distanceToBottomBoundary =
+        containerY + containerHeight - (targetY + targetH) - offsetDistance;
+
+      setPosition({
+        id,
+        poi: {
+          targetW: targetW + 2 * offsetDistance,
+          targetH: targetH + 2 * offsetDistance,
+          distanceToRightBoundary,
+          distanceToLeftBoundary,
+          distanceToTopBoundary,
+          distanceToBottomBoundary,
+          overlapPositions: {
+            [Orientation.left]: distanceToLeftBoundary <= 0,
+            [Orientation.top]: distanceToTopBoundary <= 0,
+            [Orientation.right]: distanceToRightBoundary <= 0,
+            [Orientation.bottom]: distanceToBottomBoundary <= 0,
+          },
+          relativePosition: [
+            distanceToLeftBoundary <= distanceToRightBoundary
+              ? Orientation.left
+              : Orientation.right,
+            distanceToTopBoundary <= distanceToBottomBoundary
+              ? Orientation.top
+              : Orientation.bottom,
+          ],
+        },
+      });
+    },
+    delay,
+    {
+      leading: true,
+      trailing: true,
+    },
+  );
+
+  return {
+    getRelativePosition,
+    position,
+  };
+}