radiant-docs 0.1.39 → 0.1.41

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

@@ -0,0 +1,402 @@
+import type { JSX } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import AssistantEmbedPanel, { AssistantPanelIcon } 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;
+};
+
+export default function AssistantDocsWidget({
+  apiPath,
+  docsTitle,
+  isChatAvailable,
+  canSendChatRequest,
+  launcherThemeColor,
+  launcherThemeColors,
+  launcherIconColor,
+  launcherIconColors,
+  launcherIconImageSrc,
+  emptyStateHeading,
+  emptyStateQuestions,
+  devProxyToken,
+  chrome,
+}: AssistantDocsWidgetProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [openSignal, setOpenSignal] = useState(0);
+  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-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-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);
+  };
+
+  useEffect(() => {
+    const handleOpen = () => {
+      (window as AssistantOpenRequestWindow).__assistantOpenRequested = false;
+      openPanel();
+    };
+
+    window.addEventListener("ask-ai:open", handleOpen);
+    if ((window as AssistantOpenRequestWindow).__assistantOpenRequested) {
+      handleOpen();
+    }
+
+    return () => {
+      window.removeEventListener("ask-ai:open", handleOpen);
+    };
+  }, []);
+
+  return (
+    <div
+      data-pagefind-ignore
+      className="assistant-docs-widget"
+      data-side={chromeConfig.side}
+      style={rootStyle}
+    >
+      <div
+        className="assistant-docs-panel-shell"
+        data-state={isOpen ? "open" : "closed"}
+      >
+        <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}
+          onRequestClose={closePanel}
+        />
+      </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;
+          animation: assistant-docs-launcher-enter 460ms linear backwards;
+          transition: transform 180ms ease, opacity 160ms ease;
+          transform-origin: center center;
+        }
+
+        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 {
+          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), calc(100dvh - 32px));
+          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: transform, opacity, display;
+          transition-duration: var(--assistant-docs-panel-open-duration);
+          transition-timing-function: var(--assistant-docs-panel-open-timing);
+          transition-behavior: allow-discrete;
+        }
+
+        .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;
+        }
+
+        @media (max-width: ${chromeConfig.mobileBreakpoint}) {
+          .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;
+          }
+
+          .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>
+  );
+}