radiant-docs 0.1.41 → 0.1.43

package/template/src/components/chat/AssistantDocsWidget.tsx

@@ -1,6 +1,11 @@
 import type { JSX } from "preact";
-import { useEffect, useState } from "preact/hooks";
-import AssistantEmbedPanel, { AssistantPanelIcon } from "./AssistantEmbedPanel";
+import { navigate } from "astro:transitions/client";
+import { useEffect, useRef, useState } from "preact/hooks";
+import AssistantEmbedPanel, {
+  ASSISTANT_PANEL_STORAGE_KEY,
+  AssistantPanelIcon,
+  type AssistantPanelSize,
+} from "./AssistantEmbedPanel";
 import {
   DEFAULT_ASSISTANT_CHROME_CONFIG,
   type AssistantChromeConfig,
@@ -30,8 +35,32 @@ type AssistantDocsWidgetProps = {
 
 type AssistantOpenRequestWindow = Window & {
   __assistantOpenRequested?: boolean;
+  __assistantToggleRequested?: boolean;
+  __assistantDocsLauncherEntered?: boolean;
 };
 
+function normalizePanelSize(value: unknown): AssistantPanelSize {
+  return value === "expanded" ? "expanded" : "default";
+}
+
+function readPersistedPanelSize(): AssistantPanelSize {
+  if (typeof window === "undefined") {
+    return "default";
+  }
+
+  try {
+    const rawState = window.localStorage.getItem(ASSISTANT_PANEL_STORAGE_KEY);
+    if (!rawState) {
+      return "default";
+    }
+
+    const parsed = JSON.parse(rawState) as { panelSize?: unknown };
+    return normalizePanelSize(parsed.panelSize);
+  } catch {
+    return "default";
+  }
+}
+
 export default function AssistantDocsWidget({
   apiPath,
   docsTitle,
@@ -48,7 +77,28 @@ export default function AssistantDocsWidget({
   chrome,
 }: AssistantDocsWidgetProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const [panelSize, setPanelSize] = useState<AssistantPanelSize>(() =>
+    readPersistedPanelSize(),
+  );
+  const [panelSizeTransition, setPanelSizeTransition] = useState<
+    "expand" | "collapse" | ""
+  >("");
   const [openSignal, setOpenSignal] = useState(0);
+  const [isNavigationTransitionSuppressed, setIsNavigationTransitionSuppressed] =
+    useState(false);
+  const [hasLauncherEntered, setHasLauncherEntered] = useState(() => {
+    if (typeof window === "undefined") {
+      return false;
+    }
+
+    return Boolean(
+      (window as AssistantOpenRequestWindow).__assistantDocsLauncherEntered,
+    );
+  });
+  const widgetRef = useRef<HTMLDivElement | null>(null);
+  const navigationTransitionCleanupRef = useRef<(() => void) | null>(null);
+  const navigationTransitionTimeoutRef = useRef<number | null>(null);
+  const panelSizeTransitionTimeoutRef = useRef<number | null>(null);
   const chromeConfig = chrome ?? DEFAULT_ASSISTANT_CHROME_CONFIG;
   const numericZIndex =
     Number.parseInt(chromeConfig.zIndex, 10) ||
@@ -78,6 +128,9 @@ export default function AssistantDocsWidget({
     "--assistant-docs-launcher-shadow": chromeConfig.launcherShadow,
     "--assistant-docs-panel-width": chromeConfig.panelWidth,
     "--assistant-docs-panel-height": chromeConfig.panelHeight,
+    "--assistant-docs-panel-expanded-width": chromeConfig.panelExpandedWidth,
+    "--assistant-docs-panel-expanded-height": chromeConfig.panelExpandedHeight,
+    "--assistant-docs-panel-viewport-margin": chromeConfig.panelViewportMargin,
     "--assistant-docs-panel-gap": chromeConfig.panelGap,
     "--assistant-docs-panel-radius": chromeConfig.panelRadius,
     "--assistant-docs-panel-border": chromeConfig.panelBorder,
@@ -90,6 +143,8 @@ export default function AssistantDocsWidget({
     "--assistant-docs-panel-open-scale": chromeConfig.panelOpenScale,
     "--assistant-docs-panel-open-duration": chromeConfig.panelOpenDuration,
     "--assistant-docs-panel-open-timing": chromeConfig.panelOpenTiming,
+    "--assistant-docs-panel-size-duration": chromeConfig.panelSizeDuration,
+    "--assistant-docs-panel-size-timing": chromeConfig.panelSizeTiming,
     "--assistant-docs-panel-close-duration": chromeConfig.panelCloseDuration,
     "--assistant-docs-panel-close-timing": chromeConfig.panelCloseTiming,
   } as JSX.CSSProperties;
@@ -107,32 +162,150 @@ export default function AssistantDocsWidget({
     setIsOpen(false);
   };
 
+  const togglePanel = () => {
+    setIsOpen((wasOpen) => {
+      if (!wasOpen) {
+        setOpenSignal((previous) => previous + 1);
+      }
+      return !wasOpen;
+    });
+  };
+
+  const handlePanelSizeChange = (nextPanelSize: AssistantPanelSize) => {
+    setPanelSize((previousSize) => {
+      if (previousSize === nextPanelSize) {
+        return previousSize;
+      }
+
+      if (panelSizeTransitionTimeoutRef.current !== null) {
+        window.clearTimeout(panelSizeTransitionTimeoutRef.current);
+      }
+
+      setPanelSizeTransition(
+        nextPanelSize === "expanded" ? "expand" : "collapse",
+      );
+      panelSizeTransitionTimeoutRef.current = window.setTimeout(() => {
+        panelSizeTransitionTimeoutRef.current = null;
+        setPanelSizeTransition("");
+      }, 480);
+
+      return nextPanelSize;
+    });
+  };
+
+  const setPanelTransitionSuppressed = (isSuppressed: boolean) => {
+    setIsNavigationTransitionSuppressed(isSuppressed);
+    if (widgetRef.current) {
+      widgetRef.current.dataset.suppressTransition = String(isSuppressed);
+    }
+  };
+
+  const handleCurrentLinkNavigate = (href: string, sourceElement?: Element) => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    navigationTransitionCleanupRef.current?.();
+    setPanelTransitionSuppressed(true);
+
+    const finishTransitionSuppression = () => {
+      document.removeEventListener(
+        "astro:after-swap",
+        finishTransitionSuppression,
+      );
+      if (navigationTransitionTimeoutRef.current !== null) {
+        window.clearTimeout(navigationTransitionTimeoutRef.current);
+        navigationTransitionTimeoutRef.current = null;
+      }
+      navigationTransitionCleanupRef.current = null;
+
+      window.requestAnimationFrame(() => {
+        setPanelTransitionSuppressed(false);
+      });
+    };
+
+    document.addEventListener("astro:after-swap", finishTransitionSuppression, {
+      once: true,
+    });
+    navigationTransitionTimeoutRef.current = window.setTimeout(
+      finishTransitionSuppression,
+      1200,
+    );
+    navigationTransitionCleanupRef.current = finishTransitionSuppression;
+
+    void navigate(
+      href,
+      sourceElement ? { sourceElement } : undefined,
+    ).catch(() => {
+      finishTransitionSuppression();
+      window.location.assign(href);
+    });
+  };
+
   useEffect(() => {
     const handleOpen = () => {
       (window as AssistantOpenRequestWindow).__assistantOpenRequested = false;
       openPanel();
     };
+    const handleToggle = () => {
+      (window as AssistantOpenRequestWindow).__assistantToggleRequested = false;
+      togglePanel();
+    };
 
     window.addEventListener("ask-ai:open", handleOpen);
+    window.addEventListener("ask-ai:toggle", handleToggle);
     if ((window as AssistantOpenRequestWindow).__assistantOpenRequested) {
       handleOpen();
     }
+    if ((window as AssistantOpenRequestWindow).__assistantToggleRequested) {
+      handleToggle();
+    }
 
     return () => {
       window.removeEventListener("ask-ai:open", handleOpen);
+      window.removeEventListener("ask-ai:toggle", handleToggle);
     };
   }, []);
 
+  useEffect(() => {
+    return () => {
+      navigationTransitionCleanupRef.current?.();
+      if (panelSizeTransitionTimeoutRef.current !== null) {
+        window.clearTimeout(panelSizeTransitionTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || hasLauncherEntered) {
+      return;
+    }
+
+    (window as AssistantOpenRequestWindow).__assistantDocsLauncherEntered = true;
+    const launcherEntranceTimeout = window.setTimeout(() => {
+      setHasLauncherEntered(true);
+    }, 520);
+
+    return () => {
+      window.clearTimeout(launcherEntranceTimeout);
+    };
+  }, [hasLauncherEntered]);
+
   return (
     <div
+      ref={widgetRef}
       data-pagefind-ignore
       className="assistant-docs-widget"
       data-side={chromeConfig.side}
+      data-launcher-entered={String(hasLauncherEntered)}
+      data-suppress-transition={String(isNavigationTransitionSuppressed)}
       style={rootStyle}
     >
       <div
         className="assistant-docs-panel-shell"
         data-state={isOpen ? "open" : "closed"}
+        data-size={panelSize}
+        data-size-transition={panelSizeTransition}
       >
         <AssistantEmbedPanel
           apiPath={apiPath}
@@ -151,7 +324,10 @@ export default function AssistantDocsWidget({
           linkTarget="current"
           allowApiPathQueryOverride={false}
           openSignal={openSignal}
+          onRequestOpen={openPanel}
           onRequestClose={closePanel}
+          onRequestPanelSizeToggle={handlePanelSizeChange}
+          onCurrentLinkNavigate={handleCurrentLinkNavigate}
         />
       </div>
 
@@ -230,11 +406,14 @@ export default function AssistantDocsWidget({
           );
           box-shadow: var(--assistant-docs-launcher-shadow);
           cursor: pointer;
-          animation: assistant-docs-launcher-enter 460ms linear backwards;
           transition: transform 180ms ease, opacity 160ms ease;
           transform-origin: center center;
         }
 
+        .assistant-docs-widget[data-launcher-entered="false"] .assistant-docs-launcher {
+          animation: assistant-docs-launcher-enter 460ms linear backwards;
+        }
+
         html.dark .assistant-docs-launcher,
         html[data-theme="dark"] .assistant-docs-launcher {
           --assistant-docs-theme: var(--assistant-docs-theme-dark);
@@ -297,6 +476,13 @@ export default function AssistantDocsWidget({
         }
 
         .assistant-docs-panel-shell {
+          --assistant-docs-panel-available-height: calc(
+            100dvh -
+            var(--assistant-docs-offset-y) -
+            var(--assistant-docs-launcher-size) -
+            var(--assistant-docs-panel-gap) -
+            var(--assistant-docs-panel-viewport-margin)
+          );
           position: fixed;
           bottom: calc(
             var(--assistant-docs-offset-y) +
@@ -306,7 +492,10 @@ export default function AssistantDocsWidget({
           z-index: var(--assistant-docs-z-index);
           box-sizing: border-box;
           width: min(var(--assistant-docs-panel-width), calc(100vw - 32px));
-          height: min(var(--assistant-docs-panel-height), calc(100dvh - 32px));
+          height: min(
+            var(--assistant-docs-panel-height),
+            var(--assistant-docs-panel-available-height)
+          );
           overflow: hidden;
           border: var(--assistant-docs-panel-border);
           border-radius: var(--assistant-docs-panel-radius);
@@ -318,12 +507,30 @@ export default function AssistantDocsWidget({
           pointer-events: auto;
           transform: scale(1);
           transform-origin: bottom right;
-          transition-property: transform, opacity, display;
-          transition-duration: var(--assistant-docs-panel-open-duration);
-          transition-timing-function: var(--assistant-docs-panel-open-timing);
+          transition-property: width, height, transform, opacity, display;
+          transition-duration:
+            var(--assistant-docs-panel-size-duration),
+            var(--assistant-docs-panel-size-duration),
+            var(--assistant-docs-panel-open-duration),
+            var(--assistant-docs-panel-open-duration),
+            var(--assistant-docs-panel-open-duration);
+          transition-timing-function:
+            var(--assistant-docs-panel-size-timing),
+            var(--assistant-docs-panel-size-timing),
+            var(--assistant-docs-panel-open-timing),
+            var(--assistant-docs-panel-open-timing),
+            var(--assistant-docs-panel-open-timing);
           transition-behavior: allow-discrete;
         }
 
+        .assistant-docs-panel-shell[data-size="expanded"] {
+          width: min(var(--assistant-docs-panel-expanded-width), calc(100vw - 32px));
+          height: min(
+            var(--assistant-docs-panel-expanded-height),
+            var(--assistant-docs-panel-available-height)
+          );
+        }
+
         .dark .assistant-docs-panel-shell {
           border: var(--assistant-docs-panel-dark-border);
           background: var(--assistant-docs-panel-dark-background);
@@ -358,7 +565,11 @@ export default function AssistantDocsWidget({
           transition-behavior: allow-discrete;
         }
 
-        @media (max-width: ${chromeConfig.mobileBreakpoint}) {
+        .assistant-docs-widget[data-suppress-transition="true"] .assistant-docs-panel-shell {
+          transition: none !important;
+        }
+
+        @media (max-width: ${chromeConfig.mobileBreakpoint}), (max-height: ${chromeConfig.panelFullscreenHeightBreakpoint}) {
           .assistant-docs-panel-shell {
             inset: 0 !important;
             z-index: var(--assistant-docs-mobile-panel-z-index) !important;
@@ -371,7 +582,9 @@ export default function AssistantDocsWidget({
           .assistant-docs-panel-shell > div {
             border-radius: 0;
           }
+        }
 
+        @media (max-width: ${chromeConfig.mobileBreakpoint}) {
           .assistant-docs-launcher {
             bottom: var(--assistant-docs-mobile-offset-y) !important;
           }