radiant-docs 0.1.40 → 0.1.42

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

@@ -0,0 +1,615 @@
+import type { JSX } from "preact";
+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,
+} from "../../lib/assistant-chrome-defaults";
+
+type AssistantDocsWidgetProps = {
+  apiPath: string;
+  docsTitle: string;
+  isChatAvailable: boolean;
+  canSendChatRequest: boolean;
+  launcherThemeColor?: string;
+  launcherThemeColors?: {
+    light: string;
+    dark: string;
+  };
+  launcherIconColor?: string;
+  launcherIconColors?: {
+    light: string;
+    dark: string;
+  };
+  launcherIconImageSrc?: string;
+  emptyStateHeading?: string;
+  emptyStateQuestions?: string[];
+  devProxyToken?: string;
+  chrome?: AssistantChromeConfig;
+};
+
+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,
+  isChatAvailable,
+  canSendChatRequest,
+  launcherThemeColor,
+  launcherThemeColors,
+  launcherIconColor,
+  launcherIconColors,
+  launcherIconImageSrc,
+  emptyStateHeading,
+  emptyStateQuestions,
+  devProxyToken,
+  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) ||
+    Number.parseInt(DEFAULT_ASSISTANT_CHROME_CONFIG.zIndex, 10);
+  const launcherThemeColorLight =
+    launcherThemeColors?.light ?? launcherThemeColor ?? "#171717";
+  const launcherThemeColorDark =
+    launcherThemeColors?.dark ?? launcherThemeColor ?? "#171717";
+  const launcherIconColorLight =
+    launcherIconColors?.light ?? launcherIconColor ?? "#ffffff";
+  const launcherIconColorDark =
+    launcherIconColors?.dark ?? launcherIconColor ?? "#ffffff";
+  const rootStyle = {
+    "--assistant-docs-theme-light": launcherThemeColorLight,
+    "--assistant-docs-theme-dark": launcherThemeColorDark,
+    "--assistant-docs-icon-color-light": launcherIconColorLight,
+    "--assistant-docs-icon-color-dark": launcherIconColorDark,
+    "--assistant-docs-z-index": String(numericZIndex),
+    "--assistant-docs-launcher-z-index": String(numericZIndex + 1),
+    "--assistant-docs-mobile-panel-z-index": String(numericZIndex + 2),
+    "--assistant-docs-offset-x": chromeConfig.offsetX,
+    "--assistant-docs-offset-y": chromeConfig.offsetY,
+    "--assistant-docs-mobile-offset-x": chromeConfig.mobileOffsetX,
+    "--assistant-docs-mobile-offset-y": chromeConfig.mobileOffsetY,
+    "--assistant-docs-launcher-size": chromeConfig.launcherSize,
+    "--assistant-docs-launcher-icon-size": chromeConfig.launcherIconSize,
+    "--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,
+    "--assistant-docs-panel-background": chromeConfig.panelBackground,
+    "--assistant-docs-panel-dark-border": chromeConfig.panelDarkBorder,
+    "--assistant-docs-panel-dark-background": chromeConfig.panelDarkBackground,
+    "--assistant-docs-panel-backdrop-blur": chromeConfig.panelBackdropBlur,
+    "--assistant-docs-panel-shadow": chromeConfig.panelShadow,
+    "--assistant-docs-panel-dark-shadow": chromeConfig.panelDarkShadow,
+    "--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;
+
+  const openPanel = () => {
+    setIsOpen((wasOpen) => {
+      if (!wasOpen) {
+        setOpenSignal((previous) => previous + 1);
+      }
+      return true;
+    });
+  };
+
+  const closePanel = () => {
+    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}
+          docsTitle={docsTitle}
+          isChatAvailable={isChatAvailable}
+          canSendChatRequest={canSendChatRequest}
+          launcherThemeColor={launcherThemeColor}
+          launcherThemeColors={launcherThemeColors}
+          launcherIconColor={launcherIconColor}
+          launcherIconColors={launcherIconColors}
+          launcherIconImageSrc={launcherIconImageSrc}
+          emptyStateHeading={emptyStateHeading}
+          emptyStateQuestions={emptyStateQuestions}
+          devProxyToken={devProxyToken}
+          panelSurface="inline"
+          linkTarget="current"
+          allowApiPathQueryOverride={false}
+          openSignal={openSignal}
+          onRequestOpen={openPanel}
+          onRequestClose={closePanel}
+          onRequestPanelSizeToggle={handlePanelSizeChange}
+          onCurrentLinkNavigate={handleCurrentLinkNavigate}
+        />
+      </div>
+
+      <button
+        type="button"
+        className="assistant-docs-launcher"
+        data-open={String(isOpen)}
+        onClick={() => {
+          if (isOpen) {
+            closePanel();
+            return;
+          }
+          openPanel();
+        }}
+        aria-label={isOpen ? "Close chat" : "Open chat"}
+        title={isOpen ? "Close chat" : "Open chat"}
+      >
+        <AssistantPanelIcon
+          color={launcherIconColor}
+          imageSrc={launcherIconImageSrc}
+          className="assistant-docs-launcher-icon assistant-docs-launcher-mark"
+        />
+        <svg
+          className="assistant-docs-launcher-icon assistant-docs-launcher-chevron"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+
+      <style>{`
+        @keyframes assistant-docs-launcher-enter {
+          0% {
+            opacity: 0;
+            transform: translateY(3px) scale(.96);
+          }
+          46% {
+            opacity: 1;
+            transform: translateY(0) scale(1.012);
+          }
+          72% {
+            opacity: 1;
+            transform: translateY(0) scale(.998);
+          }
+          100% {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+          }
+        }
+
+        .assistant-docs-launcher {
+          --assistant-docs-theme: var(--assistant-docs-theme-light);
+          --assistant-docs-icon-color: var(--assistant-docs-icon-color-light);
+          position: fixed;
+          bottom: var(--assistant-docs-offset-y);
+          z-index: var(--assistant-docs-launcher-z-index);
+          display: inline-flex;
+          width: var(--assistant-docs-launcher-size);
+          height: var(--assistant-docs-launcher-size);
+          align-items: center;
+          justify-content: center;
+          padding: 0;
+          border: 0;
+          border-radius: 999px;
+          color: var(--assistant-docs-icon-color);
+          background: linear-gradient(
+            to bottom,
+            color-mix(in oklab, var(--assistant-docs-theme) 88%, white),
+            color-mix(in oklab, var(--assistant-docs-theme) 90%, black)
+          );
+          box-shadow: var(--assistant-docs-launcher-shadow);
+          cursor: pointer;
+          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);
+          --assistant-docs-icon-color: var(--assistant-docs-icon-color-dark);
+        }
+
+        .assistant-docs-widget[data-side="right"] .assistant-docs-launcher {
+          right: var(--assistant-docs-offset-x);
+        }
+
+        .assistant-docs-widget[data-side="left"] .assistant-docs-launcher {
+          left: var(--assistant-docs-offset-x);
+        }
+
+        .assistant-docs-launcher:hover {
+          opacity: .96;
+          transform: translateY(-1px) scale(1.03);
+        }
+
+        .assistant-docs-launcher:active {
+          transform: translateY(0) scale(.96);
+        }
+
+        .assistant-docs-launcher-icon {
+          position: absolute;
+          width: var(--assistant-docs-launcher-icon-size);
+          height: var(--assistant-docs-launcher-icon-size);
+          pointer-events: none;
+          transform-origin: center;
+          transition: opacity 150ms ease,
+            transform 180ms cubic-bezier(.2, .8, .2, 1);
+        }
+
+        .assistant-docs-launcher-icon img,
+        .assistant-docs-launcher-icon svg {
+          display: block;
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+
+        .assistant-docs-launcher-mark {
+          opacity: 1;
+          transform: scale(1);
+        }
+
+        .assistant-docs-launcher-chevron {
+          opacity: 0;
+          transform: scale(.55);
+        }
+
+        .assistant-docs-launcher[data-open="true"] .assistant-docs-launcher-mark {
+          opacity: 0;
+          transform: scale(.55);
+        }
+
+        .assistant-docs-launcher[data-open="true"] .assistant-docs-launcher-chevron {
+          opacity: 1;
+          transform: scale(1);
+        }
+
+        .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) +
+            var(--assistant-docs-launcher-size) +
+            var(--assistant-docs-panel-gap)
+          );
+          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),
+            var(--assistant-docs-panel-available-height)
+          );
+          overflow: hidden;
+          border: var(--assistant-docs-panel-border);
+          border-radius: var(--assistant-docs-panel-radius);
+          background: var(--assistant-docs-panel-background);
+          box-shadow: var(--assistant-docs-panel-shadow);
+          -webkit-backdrop-filter: blur(var(--assistant-docs-panel-backdrop-blur));
+          backdrop-filter: blur(var(--assistant-docs-panel-backdrop-blur));
+          opacity: 1;
+          pointer-events: auto;
+          transform: scale(1);
+          transform-origin: bottom right;
+          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);
+          box-shadow: var(--assistant-docs-panel-dark-shadow);
+        }
+
+        .assistant-docs-widget[data-side="right"] .assistant-docs-panel-shell {
+          right: var(--assistant-docs-offset-x);
+          transform-origin: bottom right;
+        }
+
+        .assistant-docs-widget[data-side="left"] .assistant-docs-panel-shell {
+          left: var(--assistant-docs-offset-x);
+          transform-origin: bottom left;
+        }
+
+        @starting-style {
+          .assistant-docs-panel-shell[data-state="open"] {
+            opacity: 0;
+            transform: scale(var(--assistant-docs-panel-open-scale));
+          }
+        }
+
+        .assistant-docs-panel-shell[data-state="closed"] {
+          display: none;
+          opacity: 0;
+          pointer-events: none;
+          transform: scale(var(--assistant-docs-panel-open-scale));
+          transition-property: transform, opacity, display;
+          transition-duration: var(--assistant-docs-panel-close-duration);
+          transition-timing-function: var(--assistant-docs-panel-close-timing);
+          transition-behavior: allow-discrete;
+        }
+
+        .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;
+            width: 100vw !important;
+            height: 100dvh !important;
+            border: 0 !important;
+            border-radius: 0 !important;
+          }
+
+          .assistant-docs-panel-shell > div {
+            border-radius: 0;
+          }
+        }
+
+        @media (max-width: ${chromeConfig.mobileBreakpoint}) {
+          .assistant-docs-launcher {
+            bottom: var(--assistant-docs-mobile-offset-y) !important;
+          }
+
+          .assistant-docs-widget[data-side="right"] .assistant-docs-launcher {
+            right: var(--assistant-docs-mobile-offset-x) !important;
+          }
+
+          .assistant-docs-widget[data-side="left"] .assistant-docs-launcher {
+            left: var(--assistant-docs-mobile-offset-x) !important;
+          }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .assistant-docs-launcher {
+            animation: none !important;
+          }
+
+          .assistant-docs-launcher,
+          .assistant-docs-launcher-icon,
+          .assistant-docs-panel-shell {
+            transition: none !important;
+          }
+        }
+      `}</style>
+    </div>
+  );
+}