radiant-docs 0.1.41 → 0.1.42

package/template/src/lib/assistant-embed-script.ts

@@ -11,7 +11,7 @@ import {
   getDocsBaseColorShade,
   getThemeForegroundColor,
 } from "./theme-css";
-import { type DocsConfig } from "./validation";
+import { type DocsConfig, type ThemeColorByMode } from "./validation";
 
 type AssistantColorByMode = {
   light: string;
@@ -115,35 +115,33 @@ function resolveLauncherIcon(
 }
 
 function getConfiguredColorForMode(
-  value: DocsConfig["theme"]["themeColor"] | undefined,
+  value: string | ThemeColorByMode | undefined,
   mode: "light" | "dark",
 ): string | undefined {
   if (typeof value === "string") return value;
   return value?.[mode];
 }
 
-function getDefaultAssistantThemeColor(
+function getDefaultAssistantButtonColor(
   config: DocsConfig,
   mode: "light" | "dark",
 ): string {
-  const configuredThemeColor = getConfiguredColorForMode(
-    config.theme?.themeColor,
+  return getDocsBaseColorShade(
+    config.theme,
     mode,
+    mode === "light" ? "900" : "100",
   );
-  if (configuredThemeColor) return configuredThemeColor;
-
-  return getDocsBaseColorShade(config.theme, mode, mode === "light" ? "900" : "100");
 }
 
-function getAssistantThemeColor(
+function getAssistantButtonColor(
   config: DocsConfig,
   mode: "light" | "dark",
 ): string {
   const configuredAssistantColor = getConfiguredColorForMode(
-    config.assistant?.themeColor,
+    config.assistant?.button?.color,
     mode,
   );
-  return configuredAssistantColor ?? getDefaultAssistantThemeColor(config, mode);
+  return configuredAssistantColor ?? getDefaultAssistantButtonColor(config, mode);
 }
 
 export function getAssistantLauncherIconConfig(
@@ -151,8 +149,8 @@ export function getAssistantLauncherIconConfig(
 ): ResolvedAssistantLauncherIcon {
   const assistantConfig = config.assistant;
   const themeColors = {
-    light: getAssistantThemeColor(config, "light"),
-    dark: getAssistantThemeColor(config, "dark"),
+    light: getAssistantButtonColor(config, "light"),
+    dark: getAssistantButtonColor(config, "dark"),
   };
   const iconColors = {
     light:
@@ -318,6 +316,9 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
   var mobileOffsetY = chrome.mobileOffsetY || "16px";
   var panelWidth = scriptDataset.panelWidth || chrome.panelWidth || "420px";
   var panelHeight = scriptDataset.panelHeight || chrome.panelHeight || "640px";
+  var panelExpandedWidth = chrome.panelExpandedWidth || "640px";
+  var panelExpandedHeight = chrome.panelExpandedHeight || "760px";
+  var panelViewportMargin = chrome.panelViewportMargin || "16px";
   var panelGap = chrome.panelGap || "12px";
   var panelRadius = chrome.panelRadius || "16px";
   var panelBorder = chrome.panelBorder || "1px solid rgb(9 14 21 / 8%)";
@@ -334,9 +335,13 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
   var panelOpenScale = chrome.panelOpenScale || ".9";
   var panelOpenDuration = chrome.panelOpenDuration || ".5s";
   var panelOpenTiming = chrome.panelOpenTiming || "cubic-bezier(.34,1.56,.64,1)";
+  var panelSizeDuration = chrome.panelSizeDuration || ".42s";
+  var panelSizeTiming = chrome.panelSizeTiming || "cubic-bezier(.22,1.18,.36,1)";
   var panelCloseDuration = chrome.panelCloseDuration || ".2s";
   var panelCloseTiming = chrome.panelCloseTiming || "cubic-bezier(.25,1,.5,1)";
   var mobileBreakpoint = chrome.mobileBreakpoint || "640px";
+  var panelFullscreenHeightBreakpoint =
+    chrome.panelFullscreenHeightBreakpoint || "560px";
   var launcherSize = scriptDataset.launcherSize || chrome.launcherSize || "48px";
   var launcherIconSize = chrome.launcherIconSize || "20px";
   var launcherShadow =
@@ -354,10 +359,14 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
   var themeColor = "";
   var iconColor = "";
   var styleId = "assistant-embed-style";
+  var panelSizeStorageKey = "docs:assistant-embed-panel-size:v1";
   var launcherButton;
   var panelShell;
   var panelFrame;
   var isOpen = false;
+  var panelSize = readPanelSize();
+  var panelSizeTransitionTimeout;
+  var isPanelFullscreen = false;
   var systemThemeMediaQuery =
     typeof window.matchMedia === "function"
       ? window.matchMedia("(prefers-color-scheme: dark)")
@@ -376,6 +385,26 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
     return "";
   }
 
+  function normalizePanelSize(value) {
+    return value === "expanded" ? "expanded" : "default";
+  }
+
+  function readPanelSize() {
+    try {
+      return normalizePanelSize(window.localStorage.getItem(panelSizeStorageKey));
+    } catch {
+      return "default";
+    }
+  }
+
+  function writePanelSize() {
+    try {
+      window.localStorage.setItem(panelSizeStorageKey, panelSize);
+    } catch {
+      // Ignore storage failures in constrained embeds.
+    }
+  }
+
   function getSystemTheme() {
     if (systemThemeMediaQuery && systemThemeMediaQuery.matches) {
       return "dark";
@@ -507,11 +536,19 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
       ".assistant-embed-launcher-chevron{opacity:0;transform:scale(.55);}",
       ".assistant-embed-launcher[data-open='true'] .assistant-embed-launcher-mark{opacity:0;transform:scale(.55);}",
       ".assistant-embed-launcher[data-open='true'] .assistant-embed-launcher-chevron{opacity:1;transform:scale(1);}",
-      ".assistant-embed-panel-shell{position:fixed;width:min(" +
+      ".assistant-embed-panel-shell{--assistant-embed-panel-available-height:calc(100dvh - " +
+        offsetY +
+        " - " +
+        launcherSize +
+        " - " +
+        panelGap +
+        " - " +
+        panelViewportMargin +
+        ");position:fixed;width:min(" +
         panelWidth +
         ",calc(100vw - 32px));height:min(" +
         panelHeight +
-        ",calc(100dvh - 32px));bottom:calc(" +
+        ",var(--assistant-embed-panel-available-height));bottom:calc(" +
         offsetY +
         " + " +
         launcherSize +
@@ -537,11 +574,32 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
         panelBackdropBlur +
         ");overflow:hidden;opacity:1;pointer-events:auto;transform:scale(1);transform-origin:bottom " +
         side +
-        ";transition-property:transform,opacity,display;transition-duration:" +
+        ";transition-property:width,height,transform,opacity,display;transition-duration:" +
+        panelSizeDuration +
+        "," +
+        panelSizeDuration +
+        "," +
+        panelOpenDuration +
+        "," +
+        panelOpenDuration +
+        "," +
         panelOpenDuration +
         ";transition-timing-function:" +
+        panelSizeTiming +
+        "," +
+        panelSizeTiming +
+        "," +
+        panelOpenTiming +
+        "," +
+        panelOpenTiming +
+        "," +
         panelOpenTiming +
         ";transition-behavior:allow-discrete;}",
+      ".assistant-embed-panel-shell[data-size='expanded']{width:min(" +
+        panelExpandedWidth +
+        ",calc(100vw - 32px));height:min(" +
+        panelExpandedHeight +
+        ",var(--assistant-embed-panel-available-height));}",
       ".assistant-embed-panel-shell[data-theme='dark']{border:" +
         panelDarkBorder +
         ";background:" +
@@ -554,13 +612,15 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
         ");}}",
       ".assistant-embed-panel-shell[data-state='closed']{display:none;opacity:0;pointer-events:none;transform:scale(" +
         panelOpenScale +
-        ");transition-property:transform,opacity,display;transition-duration:" +
+        ");transition-property:width,height,transform,opacity,display;transition-duration:" +
         panelCloseDuration +
         ";transition-timing-function:" +
         panelCloseTiming +
         ";transition-behavior:allow-discrete;}",
       "@media (max-width:" +
         mobileBreakpoint +
+        "),(max-height:" +
+        panelFullscreenHeightBreakpoint +
         "){.assistant-embed-panel-shell{inset:0!important;width:100vw!important;height:100dvh!important;border:0!important;border-radius:0!important;z-index:" +
         (numericZIndex + 2) +
         "!important;}}",
@@ -573,7 +633,7 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
         ":" +
         mobileOffsetX +
         "!important;}}",
-      "@media (prefers-reduced-motion:reduce){.assistant-embed-launcher{animation:none!important;}.assistant-embed-launcher,.assistant-embed-launcher-icon,.assistant-embed-panel-shell{transition:none!important;}}",
+      "@media (prefers-reduced-motion:reduce){.assistant-embed-launcher,.assistant-embed-panel-shell{animation:none!important;}.assistant-embed-launcher,.assistant-embed-launcher-icon,.assistant-embed-panel-shell{transition:none!important;}}",
     ].join("");
     document.head.appendChild(style);
   }
@@ -603,6 +663,8 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
       return;
     }
 
+    updatePanelLayout();
+
     try {
       panelFrame.contentWindow.postMessage(
         { type: "assistant-embed:panel-opened" },
@@ -643,6 +705,103 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
     }
   }
 
+  function postPanelSizeMessage() {
+    if (!panelFrame || !panelFrame.contentWindow) {
+      return;
+    }
+
+    try {
+      panelFrame.contentWindow.postMessage(
+        {
+          type: "assistant-embed:set-panel-size",
+          size: panelSize,
+        },
+        getPanelTargetOrigin(),
+      );
+    } catch {
+      // Ignore cross-window messaging failures.
+    }
+  }
+
+  function postPanelLayoutMessage() {
+    if (!panelFrame || !panelFrame.contentWindow) {
+      return;
+    }
+
+    try {
+      panelFrame.contentWindow.postMessage(
+        {
+          type: "assistant-embed:set-panel-layout",
+          isFullscreen: isPanelFullscreen,
+        },
+        getPanelTargetOrigin(),
+      );
+    } catch {
+      // Ignore cross-window messaging failures.
+    }
+  }
+
+  function startPanelSizeTransition(nextPanelSize) {
+    if (
+      !panelShell ||
+      panelShell.dataset.state === "closed" ||
+      isPanelFullscreen
+    ) {
+      return;
+    }
+
+    if (panelSizeTransitionTimeout) {
+      window.clearTimeout(panelSizeTransitionTimeout);
+    }
+
+    panelShell.dataset.sizeTransition =
+      nextPanelSize === "expanded" ? "expand" : "collapse";
+    panelSizeTransitionTimeout = window.setTimeout(function () {
+      if (panelShell) {
+        delete panelShell.dataset.sizeTransition;
+      }
+      panelSizeTransitionTimeout = undefined;
+    }, 480);
+  }
+
+  function updatePanelLayout() {
+    var nextIsPanelFullscreen =
+      window.innerWidth <= Number.parseFloat(mobileBreakpoint) ||
+      window.innerHeight <= Number.parseFloat(panelFullscreenHeightBreakpoint);
+
+    if (nextIsPanelFullscreen === isPanelFullscreen) {
+      return;
+    }
+
+    isPanelFullscreen = nextIsPanelFullscreen;
+    if (panelShell) {
+      panelShell.dataset.fullscreen = String(isPanelFullscreen);
+    }
+    postPanelLayoutMessage();
+  }
+
+  function setPanelSize(nextPanelSize, shouldNotifyPanel) {
+    var normalizedPanelSize = normalizePanelSize(nextPanelSize);
+    var didChange = normalizedPanelSize !== panelSize;
+    if (didChange) {
+      startPanelSizeTransition(normalizedPanelSize);
+    }
+
+    panelSize = normalizedPanelSize;
+    if (panelShell) {
+      panelShell.dataset.size = panelSize;
+    }
+    writePanelSize();
+
+    if (shouldNotifyPanel) {
+      postPanelSizeMessage();
+    }
+  }
+
+  function togglePanelSize() {
+    setPanelSize(panelSize === "expanded" ? "default" : "expanded", true);
+  }
+
   function applyResolvedTheme(shouldNotifyPanel) {
     if (panelShell) {
       panelShell.dataset.theme = resolvedTheme;
@@ -749,6 +908,7 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
     frame.setAttribute("data-assistant-embed-frame", "true");
     frame.addEventListener("load", function () {
       postPanelThemeMessage();
+      postPanelLayoutMessage();
       if (isOpen) {
         notifyPanelOpened();
       }
@@ -761,6 +921,8 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
     shell.className = "assistant-embed-panel-shell";
     shell.dataset.state = "closed";
     shell.dataset.theme = resolvedTheme;
+    shell.dataset.size = panelSize;
+    shell.dataset.fullscreen = String(isPanelFullscreen);
     shell.setAttribute("data-assistant-embed-panel", "true");
     shell.appendChild(frame);
     return shell;
@@ -811,6 +973,7 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
     }
 
     ensureStyle();
+    updatePanelLayout();
 
     panelFrame = createFrame(
       "assistant-embed-panel-frame",
@@ -824,6 +987,8 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
     document.body.appendChild(launcherButton);
   }
 
+  window.addEventListener("resize", updatePanelLayout);
+
   window.addEventListener("message", function (event) {
     if (
       !event.data ||
@@ -849,6 +1014,21 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
 
     if (event.data.type === "assistant-embed:toggle") {
       setOpen(!isOpen);
+      return;
+    }
+
+    if (event.data.type === "assistant-embed:toggle-panel-size") {
+      togglePanelSize();
+      return;
+    }
+
+    if (event.data.type === "assistant-embed:set-panel-size") {
+      setPanelSize(event.data.size, false);
+      return;
+    }
+
+    if (event.data.type === "assistant-embed:get-panel-layout") {
+      postPanelLayoutMessage();
     }
   });
 
@@ -867,6 +1047,13 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
     toggle: function () {
       setOpen(!isOpen);
     },
+    setPanelSize: function (nextPanelSize) {
+      setPanelSize(nextPanelSize, true);
+    },
+    getPanelSize: function () {
+      return panelSize;
+    },
+    togglePanelSize: togglePanelSize,
     setTheme: setTheme,
     getTheme: function () {
       return {
@@ -876,6 +1063,10 @@ export function renderAssistantEmbedScript(config: DocsConfig): string {
     },
     destroy: function () {
       setSystemThemeListener(false);
+      window.removeEventListener("resize", updatePanelLayout);
+      if (panelSizeTransitionTimeout) {
+        window.clearTimeout(panelSizeTransitionTimeout);
+      }
       if (launcherButton) {
         launcherButton.remove();
       }