radiant-docs 0.1.28 → 0.1.31

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

@@ -0,0 +1,1771 @@
+import type { JSX } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { Icon } from "@iconify/react";
+import Prism from "prismjs";
+import "prismjs/components/prism-markup.js";
+import "prismjs/components/prism-clike.js";
+import "prismjs/components/prism-javascript.js";
+import "prismjs/components/prism-typescript.js";
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-tsx.js";
+import "prismjs/components/prism-json.js";
+import "prismjs/components/prism-markdown.js";
+import "prismjs/components/prism-bash.js";
+import "prismjs/components/prism-python.js";
+import "prismjs/components/prism-yaml.js";
+import "prismjs/components/prism-sql.js";
+import "prismjs/components/prism-rust.js";
+import "prismjs/components/prism-go.js";
+import "prismjs/components/prism-java.js";
+import "prismjs/components/prism-markup-templating.js";
+import "prismjs/components/prism-php.js";
+import "prismjs/components/prism-ruby.js";
+import "prismjs/components/prism-css.js";
+import "prismjs/components/prism-diff.js";
+// import "prismjs/themes/prism.css";
+import "prism-themes/themes/prism-one-light.css";
+// import "@jongwooo/prism-theme-github/themes/prism-github-default-light.css";
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkGfm from "remark-gfm";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+import { Drawer } from "vaul";
+import rehypeExternalLinks from "../../lib/mdx/rehype-external-links";
+import sparkleIcon from "../../assets/icons/sparkle.svg?url";
+
+type AskAiWidgetProps = {
+  apiPath: string;
+  isChatAvailable: boolean;
+  unavailableMessage?: string;
+  devProxyToken?: string;
+};
+
+type ChatMessage = {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+};
+
+type AskAiStreamEvent = {
+  type?: string;
+  delta?: string;
+};
+
+type ResizeHandlePointerEvent = JSX.TargetedPointerEvent<HTMLDivElement>;
+type DesktopWidgetWheelEvent = JSX.TargetedWheelEvent<HTMLDivElement>;
+type ChatInputKeyEvent = JSX.TargetedKeyboardEvent<HTMLTextAreaElement>;
+
+type DesktopSize = {
+  width: number;
+  height: number;
+};
+
+type InlineStyleSnapshot = {
+  transform: string;
+  transformOrigin: string;
+  transitionProperty: string;
+  transitionDuration: string;
+  transitionTimingFunction: string;
+  overflow: string;
+};
+
+type PersistedWidgetState = {
+  isOpen: boolean;
+  messages: ChatMessage[];
+  input: string;
+  desktopWidth: number;
+  desktopHeight: number;
+  threadScrollTop: number;
+};
+
+const STORAGE_KEY = "radiant-docs:ask-ai-widget:v1";
+const DESKTOP_MIN_WIDTH_PX = 320;
+const DESKTOP_MAX_WIDTH_PX = 768 + 12 + 12;
+const DESKTOP_DEFAULT_WIDTH_PX = 384;
+const DESKTOP_MIN_HEIGHT_PX = 320;
+const DESKTOP_DEFAULT_HEIGHT_PX = 448;
+const DESKTOP_MAX_HEIGHT_OFFSET_PX = 20 + 4 + 8;
+const MOBILE_DRAWER_TRANSITION_MS = 500;
+const VAUL_SCALE_WINDOW_TOP_OFFSET_PX = 26;
+const VAUL_SCALE_TRANSLATE_TOP_OFFSET_PX = 14;
+const VAUL_SCALE_TRANSITION_EASE = "cubic-bezier(0.32, 0.72, 0, 1)";
+const MARKDOWN_HTML_CACHE_LIMIT = 300;
+const markdownHtmlCache = new Map<string, string>();
+const PRISM_LANGUAGE_ALIAS: Record<string, string> = {
+  js: "javascript",
+  ts: "typescript",
+  yml: "yaml",
+  sh: "bash",
+  shell: "bash",
+  shellscript: "bash",
+  md: "markdown",
+  mdx: "markdown",
+};
+
+const PRISM_LANGUAGE_LABEL: Record<string, string> = {
+  javascript: "JavaScript",
+  typescript: "TypeScript",
+  jsx: "JSX",
+  tsx: "TSX",
+  json: "JSON",
+  markdown: "Markdown",
+  bash: "Bash",
+  shell: "Shell",
+  python: "Python",
+  yaml: "YAML",
+  sql: "SQL",
+  rust: "Rust",
+  go: "Go",
+  java: "Java",
+  css: "CSS",
+  html: "HTML",
+  diff: "Diff",
+  mdx: "MDX",
+};
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}
+
+function getViewportHeightPx() {
+  if (typeof window === "undefined") {
+    return DESKTOP_DEFAULT_HEIGHT_PX + DESKTOP_MAX_HEIGHT_OFFSET_PX;
+  }
+  return window.visualViewport?.height ?? window.innerHeight;
+}
+
+function getDesktopMaxHeightPx() {
+  return Math.max(
+    DESKTOP_MIN_HEIGHT_PX,
+    getViewportHeightPx() - DESKTOP_MAX_HEIGHT_OFFSET_PX,
+  );
+}
+
+function getDefaultPersistedState(): PersistedWidgetState {
+  return {
+    isOpen: false,
+    messages: [],
+    input: "",
+    desktopWidth: DESKTOP_DEFAULT_WIDTH_PX,
+    desktopHeight: DESKTOP_DEFAULT_HEIGHT_PX,
+    threadScrollTop: 0,
+  };
+}
+
+function readPersistedState(): PersistedWidgetState {
+  if (typeof window === "undefined") {
+    return getDefaultPersistedState();
+  }
+
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) {
+      return getDefaultPersistedState();
+    }
+
+    const parsed = JSON.parse(raw) as Partial<PersistedWidgetState>;
+    const parsedMessages = Array.isArray(parsed.messages)
+      ? parsed.messages
+          .filter((message) => {
+            if (!message || typeof message !== "object") {
+              return false;
+            }
+            const candidate = message as Partial<ChatMessage>;
+            return (
+              (candidate.role === "user" || candidate.role === "assistant") &&
+              typeof candidate.id === "string" &&
+              typeof candidate.content === "string"
+            );
+          })
+          .map((message) => {
+            const candidate = message as ChatMessage;
+            return {
+              id: candidate.id,
+              role: candidate.role,
+              content: candidate.content,
+            };
+          })
+      : [];
+
+    return {
+      isOpen: parsed.isOpen === true,
+      messages: parsedMessages,
+      input: typeof parsed.input === "string" ? parsed.input : "",
+      desktopWidth:
+        typeof parsed.desktopWidth === "number" &&
+        Number.isFinite(parsed.desktopWidth)
+          ? parsed.desktopWidth
+          : DESKTOP_DEFAULT_WIDTH_PX,
+      desktopHeight:
+        typeof parsed.desktopHeight === "number" &&
+        Number.isFinite(parsed.desktopHeight)
+          ? parsed.desktopHeight
+          : DESKTOP_DEFAULT_HEIGHT_PX,
+      threadScrollTop:
+        typeof parsed.threadScrollTop === "number" &&
+        Number.isFinite(parsed.threadScrollTop) &&
+        parsed.threadScrollTop >= 0
+          ? parsed.threadScrollTop
+          : 0,
+    };
+  } catch {
+    return getDefaultPersistedState();
+  }
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+function resolvePrismLanguage(rawLanguage: string): string {
+  const normalized = rawLanguage.trim().toLowerCase();
+  return PRISM_LANGUAGE_ALIAS[normalized] ?? normalized;
+}
+
+function resolvePrismLanguageLabel(language: string): string {
+  const normalized = language.trim().toLowerCase();
+  if (!normalized) {
+    return "";
+  }
+
+  return (
+    PRISM_LANGUAGE_LABEL[normalized] ??
+    normalized
+      .replace(/[-_]+/g, " ")
+      .replace(/\b\w/g, (char) => char.toUpperCase())
+  );
+}
+
+function resolvePrismGrammar(language: string) {
+  return (
+    Prism.languages[language] ??
+    Prism.languages[PRISM_LANGUAGE_ALIAS[language] ?? ""]
+  );
+}
+
+function ensureCodeBlockCopyButton(preElement: HTMLPreElement): void {
+  const existingButton = Array.from(preElement.children).find(
+    (child) =>
+      child instanceof HTMLButtonElement &&
+      child.classList.contains("ask-ai-copy-code-button"),
+  );
+
+  if (existingButton instanceof HTMLButtonElement) {
+    return;
+  }
+
+  const copyButton = document.createElement("button");
+  copyButton.type = "button";
+  copyButton.className = "ask-ai-copy-code-button";
+  copyButton.setAttribute("data-copy-code", "true");
+  copyButton.setAttribute("aria-label", "Copy code to clipboard");
+  copyButton.setAttribute("title", "Copy code");
+
+  const copyIcon = document.createElement("span");
+  copyIcon.className = "ask-ai-copy-icon";
+  copyIcon.setAttribute("aria-hidden", "true");
+
+  const checkIcon = document.createElement("span");
+  checkIcon.className = "ask-ai-copy-check-icon";
+  checkIcon.setAttribute("aria-hidden", "true");
+
+  copyButton.append(copyIcon, checkIcon);
+  preElement.append(copyButton);
+}
+
+async function copyToClipboard(text: string): Promise<boolean> {
+  if (
+    typeof navigator !== "undefined" &&
+    navigator.clipboard &&
+    typeof navigator.clipboard.writeText === "function"
+  ) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+      // Fall through to legacy copy fallback.
+    }
+  }
+
+  if (typeof document === "undefined") {
+    return false;
+  }
+
+  try {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "true");
+    textarea.style.position = "fixed";
+    textarea.style.top = "-9999px";
+    textarea.style.opacity = "0";
+    document.body.append(textarea);
+    textarea.select();
+    const didCopy = document.execCommand("copy");
+    textarea.remove();
+    return didCopy;
+  } catch {
+    return false;
+  }
+}
+
+function unwrapEscapedFenceCodeBlock(rawCode: string): {
+  language: string;
+  code: string;
+} | null {
+  const normalizedCode = rawCode.replaceAll("\r\n", "\n").trim();
+  if (!normalizedCode) {
+    return null;
+  }
+
+  const lines = normalizedCode.split("\n");
+  if (lines.length < 2) {
+    return null;
+  }
+
+  const openingLine = lines[0]?.trim() ?? "";
+  const openingMatch = openingLine.match(/^(`{3,})([^\s`]*)?(?:\s+[\s\S]*)?$/);
+  if (!openingMatch) {
+    return null;
+  }
+
+  const fenceToken = openingMatch[1];
+  const closingLine = lines.at(-1)?.trim() ?? "";
+  if (closingLine !== fenceToken) {
+    return null;
+  }
+
+  const languageToken = (openingMatch[2] ?? "").trim();
+  if (!languageToken) {
+    return null;
+  }
+
+  return {
+    language: resolvePrismLanguage(languageToken),
+    code: lines.slice(1, -1).join("\n"),
+  };
+}
+
+function highlightCodeBlocksInHtml(html: string): string {
+  if (typeof document === "undefined" || !html.trim()) {
+    return html;
+  }
+
+  try {
+    const container = document.createElement("div");
+    container.innerHTML = html;
+
+    const codeNodes = container.querySelectorAll("pre > code");
+    codeNodes.forEach((codeNode) => {
+      const getLanguageClassName = (element: Element | null) =>
+        Array.from(element?.classList ?? []).find(
+          (className) =>
+            className.startsWith("language-") || className.startsWith("lang-"),
+        );
+
+      const setLanguageClass = (language: string) => {
+        Array.from(codeNode.classList).forEach((className) => {
+          if (
+            className.startsWith("language-") ||
+            className.startsWith("lang-")
+          ) {
+            codeNode.classList.remove(className);
+          }
+        });
+        codeNode.classList.add(`language-${language}`);
+
+        const preParent = codeNode.parentElement;
+        if (preParent instanceof HTMLPreElement) {
+          Array.from(preParent.classList).forEach((className) => {
+            if (
+              className.startsWith("language-") ||
+              className.startsWith("lang-")
+            ) {
+              preParent.classList.remove(className);
+            }
+          });
+          preParent.classList.add(`language-${language}`);
+          const languageLabel = resolvePrismLanguageLabel(language);
+          if (languageLabel) {
+            preParent.setAttribute("data-language", languageLabel);
+          } else {
+            preParent.removeAttribute("data-language");
+          }
+
+          ensureCodeBlockCopyButton(preParent);
+        }
+      };
+
+      const codeLanguageClassName = getLanguageClassName(codeNode);
+      const preLanguageClassName = getLanguageClassName(codeNode.parentElement);
+      let rawLanguage =
+        codeLanguageClassName?.replace(/^(language-|lang-)/, "") ??
+        preLanguageClassName?.replace(/^(language-|lang-)/, "") ??
+        "";
+
+      let rawCode = codeNode.textContent ?? "";
+      if (!rawLanguage) {
+        const unwrappedFence = unwrapEscapedFenceCodeBlock(rawCode);
+        if (unwrappedFence) {
+          rawLanguage = unwrappedFence.language || rawLanguage;
+          rawCode = unwrappedFence.code;
+        }
+      }
+
+      if (!rawLanguage) {
+        return;
+      }
+
+      const resolvedLanguage = resolvePrismLanguage(rawLanguage);
+
+      const grammar =
+        resolvePrismGrammar(resolvedLanguage) ??
+        resolvePrismGrammar(rawLanguage);
+      if (!grammar) {
+        return;
+      }
+
+      setLanguageClass(resolvedLanguage);
+      try {
+        const highlighted = Prism.highlight(rawCode, grammar, resolvedLanguage);
+        codeNode.innerHTML = highlighted;
+      } catch (error) {
+        console.error("Ask AI code highlighting failed", {
+          language: resolvedLanguage,
+          error,
+        });
+      }
+    });
+
+    return container.innerHTML;
+  } catch (error) {
+    console.error("Ask AI markdown highlighting pipeline failed", error);
+    return html;
+  }
+}
+
+function renderMarkdownToHtml(markdown: string): string {
+  const normalizedMarkdown = markdown.replaceAll("\r\n", "\n");
+  const cached = markdownHtmlCache.get(normalizedMarkdown);
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  let html = "";
+
+  try {
+    html = String(
+      unified()
+        .use(remarkParse)
+        .use(remarkGfm)
+        .use(remarkRehype, { allowDangerousHtml: false })
+        .use(rehypeExternalLinks)
+        .use(rehypeStringify)
+        .processSync(normalizedMarkdown),
+    );
+  } catch {
+    html = escapeHtml(normalizedMarkdown).replaceAll("\n", "<br/>");
+  }
+
+  html = highlightCodeBlocksInHtml(html);
+
+  markdownHtmlCache.set(normalizedMarkdown, html);
+  if (markdownHtmlCache.size > MARKDOWN_HTML_CACHE_LIMIT) {
+    const oldestKey = markdownHtmlCache.keys().next().value;
+    if (oldestKey) {
+      markdownHtmlCache.delete(oldestKey);
+    }
+  }
+
+  return html;
+}
+
+function createMessageId() {
+  if (
+    typeof crypto !== "undefined" &&
+    typeof crypto.randomUUID === "function"
+  ) {
+    return crypto.randomUUID();
+  }
+  return `msg_${Date.now()}_${Math.random().toString(36).slice(2, 10)}`;
+}
+
+function extractErrorMessage(rawBody: string) {
+  if (!rawBody.trim()) {
+    return "";
+  }
+
+  try {
+    const parsed = JSON.parse(rawBody) as { error?: unknown; detail?: unknown };
+    if (typeof parsed.error === "string" && parsed.error.trim()) {
+      if (typeof parsed.detail === "string" && parsed.detail.trim()) {
+        return `${parsed.error}: ${parsed.detail}`;
+      }
+      return parsed.error;
+    }
+  } catch {
+    // Ignore JSON parse errors and fall back to raw text.
+  }
+
+  return rawBody.trim();
+}
+
+export default function AskAiWidget({
+  apiPath,
+  isChatAvailable,
+  unavailableMessage = "This feature is available on production sites for Pro tier organizations.",
+  devProxyToken,
+}: AskAiWidgetProps) {
+  const [initialPersistedState] = useState(readPersistedState);
+  const [isOpen, setIsOpen] = useState(initialPersistedState.isOpen);
+  const [isMobile, setIsMobile] = useState(false);
+  const [desktopSize, setDesktopSize] = useState<DesktopSize>({
+    width: clamp(
+      initialPersistedState.desktopWidth,
+      DESKTOP_MIN_WIDTH_PX,
+      DESKTOP_MAX_WIDTH_PX,
+    ),
+    height: initialPersistedState.desktopHeight,
+  });
+  const [messages, setMessages] = useState<ChatMessage[]>(
+    initialPersistedState.messages,
+  );
+  const [input, setInput] = useState(initialPersistedState.input);
+  const [threadScrollTop, setThreadScrollTop] = useState(
+    initialPersistedState.threadScrollTop,
+  );
+  const [isBusy, setIsBusy] = useState(false);
+  const [isAwaitingFirstToken, setIsAwaitingFirstToken] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+  const activeRequestAbortRef = useRef<AbortController | null>(null);
+  const resizeModeRef = useRef<"left" | "top" | "corner" | null>(null);
+  const resizeStartPointerRef = useRef<{ x: number; y: number } | null>(null);
+  const resizeStartSizeRef = useRef<DesktopSize | null>(null);
+  const desktopScrollViewportRef = useRef<HTMLDivElement | null>(null);
+  const chatInputTextareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const bodyBackgroundBeforeMobileDrawerRef = useRef<string | null>(null);
+  const bodyBackgroundResetTimeoutRef = useRef<number | null>(null);
+  const chromeScaleOriginalStylesRef = useRef<
+    Map<HTMLElement, InlineStyleSnapshot>
+  >(new Map());
+  const chromeScaleResetTimeoutRef = useRef<number | null>(null);
+  const threadScrollTopRef = useRef(initialPersistedState.threadScrollTop);
+  const hasRestoredThreadScrollRef = useRef(false);
+
+  const readCurrentThreadScrollTop = () => {
+    const viewport = desktopScrollViewportRef.current;
+    if (!viewport) {
+      return threadScrollTopRef.current;
+    }
+
+    const maxScrollTop = Math.max(
+      0,
+      viewport.scrollHeight - viewport.clientHeight,
+    );
+    return clamp(viewport.scrollTop, 0, maxScrollTop);
+  };
+
+  const captureThreadScrollTop = () => {
+    const nextThreadScrollTop = readCurrentThreadScrollTop();
+    threadScrollTopRef.current = nextThreadScrollTop;
+    setThreadScrollTop((previous) =>
+      Math.abs(previous - nextThreadScrollTop) < 0.5
+        ? previous
+        : nextThreadScrollTop,
+    );
+  };
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!nextOpen) {
+      captureThreadScrollTop();
+      hasRestoredThreadScrollRef.current = false;
+    } else {
+      hasRestoredThreadScrollRef.current = false;
+    }
+    setIsOpen(nextOpen);
+  };
+
+  const handleThreadViewportScroll = () => {
+    threadScrollTopRef.current = readCurrentThreadScrollTop();
+  };
+
+  useEffect(() => {
+    return () => {
+      activeRequestAbortRef.current?.abort();
+      activeRequestAbortRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(max-width: 1023px)");
+    const update = () => {
+      setIsMobile(mediaQuery.matches);
+    };
+
+    update();
+
+    if (typeof mediaQuery.addEventListener === "function") {
+      mediaQuery.addEventListener("change", update);
+      return () => mediaQuery.removeEventListener("change", update);
+    }
+
+    mediaQuery.addListener(update);
+    return () => mediaQuery.removeListener(update);
+  }, []);
+
+  useEffect(() => {
+    const clampDesktopSizeToViewport = () => {
+      setDesktopSize((previous) => {
+        const maxHeight = getDesktopMaxHeightPx();
+        const nextWidth = clamp(
+          previous.width,
+          DESKTOP_MIN_WIDTH_PX,
+          DESKTOP_MAX_WIDTH_PX,
+        );
+        const nextHeight = clamp(
+          previous.height,
+          DESKTOP_MIN_HEIGHT_PX,
+          maxHeight,
+        );
+
+        if (nextWidth === previous.width && nextHeight === previous.height) {
+          return previous;
+        }
+
+        return {
+          width: nextWidth,
+          height: nextHeight,
+        };
+      });
+    };
+
+    clampDesktopSizeToViewport();
+    window.addEventListener("resize", clampDesktopSizeToViewport);
+    window.visualViewport?.addEventListener(
+      "resize",
+      clampDesktopSizeToViewport,
+    );
+    return () => {
+      window.removeEventListener("resize", clampDesktopSizeToViewport);
+      window.visualViewport?.removeEventListener(
+        "resize",
+        clampDesktopSizeToViewport,
+      );
+    };
+  }, []);
+
+  useEffect(() => {
+    const openFromHeader = () => {
+      handleOpenChange(true);
+    };
+
+    window.addEventListener("ask-ai:open", openFromHeader);
+    return () => {
+      window.removeEventListener("ask-ai:open", openFromHeader);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !isOpen) {
+      return;
+    }
+
+    if (hasRestoredThreadScrollRef.current) {
+      return;
+    }
+
+    const viewport = desktopScrollViewportRef.current;
+    if (!viewport) {
+      return;
+    }
+
+    const restoreFrame = window.requestAnimationFrame(() => {
+      const maxScrollTop = Math.max(
+        0,
+        viewport.scrollHeight - viewport.clientHeight,
+      );
+      const nextScrollTop = clamp(threadScrollTopRef.current, 0, maxScrollTop);
+      viewport.scrollTop = nextScrollTop;
+      threadScrollTopRef.current = nextScrollTop;
+      hasRestoredThreadScrollRef.current = true;
+    });
+
+    return () => {
+      window.cancelAnimationFrame(restoreFrame);
+    };
+  }, [isOpen, isMobile, messages.length]);
+
+  useEffect(() => {
+    if (typeof document === "undefined" || typeof window === "undefined") {
+      return;
+    }
+
+    if (chromeScaleResetTimeoutRef.current !== null) {
+      window.clearTimeout(chromeScaleResetTimeoutRef.current);
+      chromeScaleResetTimeoutRef.current = null;
+    }
+
+    const chromeElements = Array.from(
+      document.querySelectorAll<HTMLElement>("[data-vaul-scale-chrome]"),
+    );
+    const sharedChromePivotX = window.innerWidth / 2;
+    const sharedChromePivotY = 0;
+    const resolveSharedChromeTransformOrigin = (element: HTMLElement) => {
+      const rect = element.getBoundingClientRect();
+      return `${sharedChromePivotX - rect.left}px ${sharedChromePivotY - rect.top}px`;
+    };
+
+    const hasConnectedSnapshotElement = Array.from(
+      chromeScaleOriginalStylesRef.current.keys(),
+    ).some((element) => element.isConnected);
+
+    if (isMobile && isOpen) {
+      if (
+        chromeScaleOriginalStylesRef.current.size === 0 ||
+        !hasConnectedSnapshotElement
+      ) {
+        chromeScaleOriginalStylesRef.current = new Map(
+          chromeElements.map((element) => [
+            element,
+            {
+              transform: element.style.transform,
+              transformOrigin: element.style.transformOrigin,
+              transitionProperty: element.style.transitionProperty,
+              transitionDuration: element.style.transitionDuration,
+              transitionTimingFunction: element.style.transitionTimingFunction,
+              overflow: element.style.overflow,
+            },
+          ]),
+        );
+      }
+
+      const wrapperScale =
+        (window.innerWidth - VAUL_SCALE_WINDOW_TOP_OFFSET_PX) /
+        window.innerWidth;
+      const nextTransform = `scale(${wrapperScale}) translate3d(0, calc(env(safe-area-inset-top) + ${VAUL_SCALE_TRANSLATE_TOP_OFFSET_PX}px), 0)`;
+
+      for (const element of chromeElements) {
+        element.style.transformOrigin =
+          resolveSharedChromeTransformOrigin(element);
+        element.style.transitionProperty = "transform";
+        element.style.transitionDuration = `${MOBILE_DRAWER_TRANSITION_MS}ms`;
+        element.style.transitionTimingFunction = VAUL_SCALE_TRANSITION_EASE;
+        element.style.transform = nextTransform;
+        element.style.overflow = "hidden";
+      }
+      return;
+    }
+
+    if (chromeScaleOriginalStylesRef.current.size === 0) {
+      return;
+    }
+
+    const snapshots = chromeScaleOriginalStylesRef.current;
+    for (const [element, snapshot] of snapshots) {
+      if (!element.isConnected) {
+        continue;
+      }
+
+      element.style.transitionProperty = "transform";
+      element.style.transitionDuration = `${MOBILE_DRAWER_TRANSITION_MS}ms`;
+      element.style.transitionTimingFunction = VAUL_SCALE_TRANSITION_EASE;
+      element.style.transform = snapshot.transform;
+      element.style.overflow = snapshot.overflow;
+    }
+
+    chromeScaleResetTimeoutRef.current = window.setTimeout(() => {
+      for (const [element, snapshot] of snapshots) {
+        if (!element.isConnected) {
+          continue;
+        }
+        element.style.transform = snapshot.transform;
+        element.style.transformOrigin = snapshot.transformOrigin;
+        element.style.transitionProperty = snapshot.transitionProperty;
+        element.style.transitionDuration = snapshot.transitionDuration;
+        element.style.transitionTimingFunction =
+          snapshot.transitionTimingFunction;
+        element.style.overflow = snapshot.overflow;
+      }
+      chromeScaleOriginalStylesRef.current = new Map();
+      chromeScaleResetTimeoutRef.current = null;
+    }, MOBILE_DRAWER_TRANSITION_MS);
+  }, [isMobile, isOpen]);
+
+  useEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    if (bodyBackgroundResetTimeoutRef.current !== null) {
+      window.clearTimeout(bodyBackgroundResetTimeoutRef.current);
+      bodyBackgroundResetTimeoutRef.current = null;
+    }
+
+    if (isMobile && isOpen) {
+      if (bodyBackgroundBeforeMobileDrawerRef.current === null) {
+        bodyBackgroundBeforeMobileDrawerRef.current =
+          document.body.style.backgroundColor;
+      }
+      document.body.style.backgroundColor = "var(--color-neutral-100)";
+      return;
+    }
+
+    if (bodyBackgroundBeforeMobileDrawerRef.current === null) {
+      return;
+    }
+
+    const previousBodyBackgroundColor =
+      bodyBackgroundBeforeMobileDrawerRef.current;
+    bodyBackgroundResetTimeoutRef.current = window.setTimeout(() => {
+      document.body.style.backgroundColor = previousBodyBackgroundColor;
+      bodyBackgroundBeforeMobileDrawerRef.current = null;
+      bodyBackgroundResetTimeoutRef.current = null;
+    }, MOBILE_DRAWER_TRANSITION_MS);
+  }, [isMobile, isOpen]);
+
+  useEffect(() => {
+    return () => {
+      if (
+        typeof window !== "undefined" &&
+        bodyBackgroundResetTimeoutRef.current !== null
+      ) {
+        window.clearTimeout(bodyBackgroundResetTimeoutRef.current);
+        bodyBackgroundResetTimeoutRef.current = null;
+      }
+
+      if (
+        typeof window !== "undefined" &&
+        chromeScaleResetTimeoutRef.current !== null
+      ) {
+        window.clearTimeout(chromeScaleResetTimeoutRef.current);
+        chromeScaleResetTimeoutRef.current = null;
+      }
+
+      if (
+        typeof document !== "undefined" &&
+        bodyBackgroundBeforeMobileDrawerRef.current !== null
+      ) {
+        document.body.style.backgroundColor =
+          bodyBackgroundBeforeMobileDrawerRef.current;
+        bodyBackgroundBeforeMobileDrawerRef.current = null;
+      }
+
+      for (const [element, snapshot] of chromeScaleOriginalStylesRef.current) {
+        if (!element.isConnected) {
+          continue;
+        }
+        element.style.transform = snapshot.transform;
+        element.style.transformOrigin = snapshot.transformOrigin;
+        element.style.transitionProperty = snapshot.transitionProperty;
+        element.style.transitionDuration = snapshot.transitionDuration;
+        element.style.transitionTimingFunction =
+          snapshot.transitionTimingFunction;
+        element.style.overflow = snapshot.overflow;
+      }
+      chromeScaleOriginalStylesRef.current = new Map();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      try {
+        const persistedState: PersistedWidgetState = {
+          isOpen,
+          messages,
+          input,
+          desktopWidth: desktopSize.width,
+          desktopHeight: desktopSize.height,
+          threadScrollTop,
+        };
+        window.localStorage.setItem(
+          STORAGE_KEY,
+          JSON.stringify(persistedState),
+        );
+      } catch {
+        // Ignore storage write errors (quota/private mode).
+      }
+    }, 120);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [
+    isOpen,
+    messages,
+    input,
+    desktopSize.width,
+    desktopSize.height,
+    threadScrollTop,
+  ]);
+
+  useEffect(() => {
+    const finishResize = () => {
+      if (resizeModeRef.current) {
+        resizeModeRef.current = null;
+        resizeStartPointerRef.current = null;
+        resizeStartSizeRef.current = null;
+        document.body.style.userSelect = "";
+        document.body.style.cursor = "";
+      }
+    };
+
+    const handlePointerMove = (event: PointerEvent) => {
+      if (
+        !resizeModeRef.current ||
+        !resizeStartPointerRef.current ||
+        !resizeStartSizeRef.current
+      ) {
+        return;
+      }
+
+      const deltaX = event.clientX - resizeStartPointerRef.current.x;
+      const deltaY = event.clientY - resizeStartPointerRef.current.y;
+      const mode = resizeModeRef.current;
+      const maxHeight = getDesktopMaxHeightPx();
+
+      let nextWidth = resizeStartSizeRef.current.width;
+      let nextHeight = resizeStartSizeRef.current.height;
+
+      if (mode === "left" || mode === "corner") {
+        nextWidth = clamp(
+          resizeStartSizeRef.current.width - deltaX,
+          DESKTOP_MIN_WIDTH_PX,
+          DESKTOP_MAX_WIDTH_PX,
+        );
+      }
+
+      if (mode === "top" || mode === "corner") {
+        nextHeight = clamp(
+          resizeStartSizeRef.current.height - deltaY,
+          DESKTOP_MIN_HEIGHT_PX,
+          maxHeight,
+        );
+      }
+
+      setDesktopSize((previous) => {
+        if (previous.width === nextWidth && previous.height === nextHeight) {
+          return previous;
+        }
+
+        return {
+          width: nextWidth,
+          height: nextHeight,
+        };
+      });
+    };
+
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", finishResize);
+    window.addEventListener("pointercancel", finishResize);
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", finishResize);
+      window.removeEventListener("pointercancel", finishResize);
+    };
+  }, []);
+
+  const beginDesktopResize =
+    (mode: "left" | "top" | "corner") => (event: ResizeHandlePointerEvent) => {
+      if (isMobile) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      resizeModeRef.current = mode;
+      resizeStartPointerRef.current = {
+        x: event.clientX,
+        y: event.clientY,
+      };
+      resizeStartSizeRef.current = {
+        width: desktopSize.width,
+        height: desktopSize.height,
+      };
+
+      document.body.style.userSelect = "none";
+      document.body.style.cursor =
+        mode === "left"
+          ? "ew-resize"
+          : mode === "top"
+            ? "ns-resize"
+            : "nwse-resize";
+    };
+
+  const handleDesktopWheelCapture = (event: DesktopWidgetWheelEvent) => {
+    if (isMobile || !isOpen) {
+      return;
+    }
+
+    const inputTextarea = chatInputTextareaRef.current;
+    let remainingDeltaY = event.deltaY;
+    const eventTargetElement =
+      event.target instanceof Element ? event.target : null;
+
+    if (
+      inputTextarea &&
+      event.target instanceof Node &&
+      inputTextarea.contains(event.target)
+    ) {
+      const inputMaxScrollTop =
+        inputTextarea.scrollHeight - inputTextarea.clientHeight;
+
+      event.preventDefault();
+
+      if (inputMaxScrollTop > 0) {
+        const previousInputScrollTop = inputTextarea.scrollTop;
+        const nextInputScrollTop = clamp(
+          previousInputScrollTop + remainingDeltaY,
+          0,
+          inputMaxScrollTop,
+        );
+
+        inputTextarea.scrollTop = nextInputScrollTop;
+        remainingDeltaY -= nextInputScrollTop - previousInputScrollTop;
+
+        if (Math.abs(remainingDeltaY) < 0.5) {
+          return;
+        }
+      }
+    }
+
+    const codeBlockPre = eventTargetElement?.closest(
+      ".ask-ai-markdown pre",
+    ) as HTMLPreElement | null;
+
+    if (codeBlockPre) {
+      const maxScrollLeft = Math.max(
+        0,
+        codeBlockPre.scrollWidth - codeBlockPre.clientWidth,
+      );
+      const horizontalIntentDelta =
+        Math.abs(event.deltaX) > 0.01
+          ? event.deltaX
+          : event.shiftKey
+            ? event.deltaY
+            : 0;
+
+      if (Math.abs(horizontalIntentDelta) > 0.01) {
+        event.preventDefault();
+
+        if (maxScrollLeft > 0) {
+          codeBlockPre.scrollLeft = clamp(
+            codeBlockPre.scrollLeft + horizontalIntentDelta,
+            0,
+            maxScrollLeft,
+          );
+        }
+
+        // Shift+wheel maps to horizontal intent; don't also move chat vertically.
+        if (event.shiftKey && Math.abs(event.deltaX) <= 0.01) {
+          return;
+        }
+      }
+    }
+
+    const scrollViewport = desktopScrollViewportRef.current;
+    if (!scrollViewport) {
+      event.preventDefault();
+      return;
+    }
+
+    event.preventDefault();
+
+    const maxScrollTop =
+      scrollViewport.scrollHeight - scrollViewport.clientHeight;
+    if (maxScrollTop <= 0) {
+      return;
+    }
+
+    const nextDeltaY =
+      Math.abs(remainingDeltaY) < 0.5 ? event.deltaY : remainingDeltaY;
+
+    scrollViewport.scrollTop = clamp(
+      scrollViewport.scrollTop + nextDeltaY,
+      0,
+      maxScrollTop,
+    );
+  };
+
+  const resizeChatInputTextarea = () => {
+    const textarea = chatInputTextareaRef.current;
+    if (!textarea || typeof window === "undefined") {
+      return;
+    }
+
+    textarea.style.height = "auto";
+
+    const computedStyle = window.getComputedStyle(textarea);
+    const lineHeightRaw = Number.parseFloat(computedStyle.lineHeight);
+    const paddingTopRaw = Number.parseFloat(computedStyle.paddingTop);
+    const paddingBottomRaw = Number.parseFloat(computedStyle.paddingBottom);
+
+    const lineHeight = Number.isFinite(lineHeightRaw) ? lineHeightRaw : 20;
+    const paddingTop = Number.isFinite(paddingTopRaw) ? paddingTopRaw : 0;
+    const paddingBottom = Number.isFinite(paddingBottomRaw)
+      ? paddingBottomRaw
+      : 0;
+
+    const maxHeight = lineHeight * 11.2 + paddingTop + paddingBottom;
+    const nextHeight = Math.min(textarea.scrollHeight, maxHeight);
+
+    textarea.style.height = `${nextHeight}px`;
+    textarea.style.overflowY =
+      textarea.scrollHeight > maxHeight ? "auto" : "hidden";
+  };
+
+  useEffect(() => {
+    resizeChatInputTextarea();
+  }, [input, isOpen, isMobile, desktopSize.width]);
+
+  const handleSubmit = async (event: Event) => {
+    event.preventDefault();
+    const prompt = input.trim();
+    if (!prompt || isBusy) {
+      return;
+    }
+
+    setErrorMessage("");
+    setIsBusy(true);
+    setIsAwaitingFirstToken(true);
+
+    const userMessage: ChatMessage = {
+      id: createMessageId(),
+      role: "user",
+      content: prompt,
+    };
+    const assistantId = createMessageId();
+    const nextConversation = [...messages, userMessage];
+
+    setInput("");
+    setMessages(nextConversation);
+
+    activeRequestAbortRef.current?.abort();
+    const abortController = new AbortController();
+    activeRequestAbortRef.current = abortController;
+
+    try {
+      const requestHeaders: Record<string, string> = {
+        "Content-Type": "application/json",
+      };
+
+      if (devProxyToken && devProxyToken.trim().length > 0) {
+        requestHeaders["x-ask-ai-dev-token"] = devProxyToken;
+      }
+
+      const response = await fetch(apiPath, {
+        method: "POST",
+        headers: requestHeaders,
+        body: JSON.stringify({
+          messages: nextConversation.map((message) => ({
+            role: message.role,
+            content: message.content,
+          })),
+        }),
+        signal: abortController.signal,
+      });
+
+      if (!response.ok) {
+        const rawBody = await response.text();
+        const detail = extractErrorMessage(rawBody);
+        throw new Error(
+          detail || `Request failed with status ${response.status}`,
+        );
+      }
+
+      if (!response.body) {
+        throw new Error("Response body is empty");
+      }
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let streamDone = false;
+      let hasReceivedFirstTextDelta = false;
+
+      while (!streamDone) {
+        const { done, value } = await reader.read();
+        if (done) {
+          break;
+        }
+
+        buffer += decoder.decode(value, { stream: true });
+
+        while (true) {
+          const eventBreakIndex = buffer.indexOf("\n\n");
+          if (eventBreakIndex === -1) {
+            break;
+          }
+
+          const rawEvent = buffer.slice(0, eventBreakIndex);
+          buffer = buffer.slice(eventBreakIndex + 2);
+
+          const dataPayload = rawEvent
+            .split("\n")
+            .filter((line) => line.startsWith("data:"))
+            .map((line) => line.slice(5).trimStart())
+            .join("\n");
+
+          if (!dataPayload) {
+            continue;
+          }
+
+          if (dataPayload === "[DONE]") {
+            streamDone = true;
+            break;
+          }
+
+          let parsed: AskAiStreamEvent;
+          try {
+            parsed = JSON.parse(dataPayload) as AskAiStreamEvent;
+          } catch {
+            continue;
+          }
+
+          if (
+            parsed.type === "text-delta" &&
+            typeof parsed.delta === "string" &&
+            parsed.delta.length > 0
+          ) {
+            const deltaText = parsed.delta;
+
+            if (!hasReceivedFirstTextDelta) {
+              hasReceivedFirstTextDelta = true;
+              setIsAwaitingFirstToken(false);
+            }
+
+            setMessages((previous) => {
+              const existingAssistantMessage = previous.find(
+                (message) => message.id === assistantId,
+              );
+
+              if (!existingAssistantMessage) {
+                return [
+                  ...previous,
+                  {
+                    id: assistantId,
+                    role: "assistant",
+                    content: deltaText,
+                  },
+                ];
+              }
+
+              return previous.map((message) =>
+                message.id === assistantId
+                  ? {
+                      ...message,
+                      content: `${message.content}${deltaText}`,
+                    }
+                  : message,
+              );
+            });
+          }
+        }
+      }
+    } catch (error) {
+      if (abortController.signal.aborted) {
+        return;
+      }
+
+      const resolvedError =
+        error instanceof Error ? error.message : String(error);
+      setErrorMessage(resolvedError || "Failed to get response.");
+    } finally {
+      if (activeRequestAbortRef.current === abortController) {
+        activeRequestAbortRef.current = null;
+      }
+      setIsBusy(false);
+      setIsAwaitingFirstToken(false);
+    }
+  };
+
+  const handleStartNewChat = () => {
+    activeRequestAbortRef.current?.abort();
+    activeRequestAbortRef.current = null;
+    setIsBusy(false);
+    setIsAwaitingFirstToken(false);
+    setErrorMessage("");
+    setInput("");
+    setMessages([]);
+    setThreadScrollTop(0);
+    threadScrollTopRef.current = 0;
+    const viewport = desktopScrollViewportRef.current;
+    if (viewport) {
+      viewport.scrollTop = 0;
+    }
+  };
+
+  const handleChatInputKeyDown = (event: ChatInputKeyEvent) => {
+    if (event.key !== "Enter" || event.shiftKey || event.isComposing) {
+      return;
+    }
+
+    event.preventDefault();
+    const form = event.currentTarget.form;
+    if (form) {
+      form.requestSubmit();
+    }
+  };
+
+  const handleRenderedMarkdownClick = (
+    event: JSX.TargetedMouseEvent<HTMLDivElement>,
+  ) => {
+    const targetElement = event.target instanceof Element ? event.target : null;
+    const copyButton = targetElement?.closest(
+      ".ask-ai-copy-code-button",
+    ) as HTMLButtonElement | null;
+
+    if (!copyButton) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (copyButton.dataset.copying === "true") {
+      return;
+    }
+
+    const preElement = copyButton.closest("pre");
+    const codeElement = preElement?.querySelector("code");
+    if (!codeElement) {
+      return;
+    }
+
+    const codeText = codeElement.textContent ?? "";
+    copyButton.dataset.copying = "true";
+
+    void (async () => {
+      const didCopy = await copyToClipboard(codeText);
+      if (didCopy) {
+        copyButton.dataset.copied = "true";
+      } else {
+        delete copyButton.dataset.copied;
+      }
+
+      window.setTimeout(() => {
+        delete copyButton.dataset.copied;
+        delete copyButton.dataset.copying;
+      }, 1200);
+    })();
+  };
+
+  const renderPanelContent = (mobile: boolean) => (
+    <>
+      <div
+        className={`flex items-center justify-between border-b border-border px-4 ${mobile ? "py-3" : "py-2"}`}
+      >
+        <button
+          type="button"
+          className="inline-flex items-center gap-1.5 rounded-md -ml-2 px-2 py-1 text-[13px] text-neutral-600 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-white/10 transition cursor-pointer"
+          onClick={handleStartNewChat}
+          disabled={isBusy}
+        >
+          <Icon
+            icon="lucide:messages-square"
+            className="size-3.5 -ml-px"
+            aria-hidden="true"
+          />
+          New chat
+        </button>
+        <button
+          type="button"
+          className="inline-flex items-center justify-center gap-1 rounded-full -mr-2 -my-px size-8 text-[13px] text-neutral-500 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-white/10 transition cursor-pointer"
+          onClick={() => handleOpenChange(false)}
+        >
+          <Icon icon="lucide:x" className="size-4.5" aria-hidden="true" />
+        </button>
+      </div>
+
+      {isChatAvailable ? (
+        <>
+          <div
+            className={
+              mobile
+                ? `flex-1 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden px-4 py-3 ${messages.length > 0 && "pb-60"} mb-10 space-y-6`
+                : `flex-1 overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden px-4 py-3 ${messages.length > 0 && "pb-60"} mb-10 space-y-6`
+            }
+            ref={desktopScrollViewportRef}
+            onScroll={handleThreadViewportScroll}
+          >
+            {messages.length === 0 ? (
+              <div class="flex items-center justify-center h-full">
+                <p className="text-3xl font-[450]">How can I help?</p>
+              </div>
+            ) : null}
+
+            {messages.map((message) => {
+              if (
+                message.role === "assistant" &&
+                message.content.length === 0
+              ) {
+                return null;
+              }
+              const isUser = message.role === "user";
+              return (
+                <div
+                  key={message.id}
+                  className={isUser ? "text-right" : "text-left"}
+                >
+                  <div
+                    className={[
+                      "ask-ai-markdown prose-rules max-w-full min-w-0 wrap-break-word prose-pre:bg-neutral-50! prose-pre:shadow-xs prose-pre:text-neutral-700! prose-pre:border prose-pre:border-neutral-200 prose-pre:rounded-xl!",
+                      isUser
+                        ? "inline-block px-3 py-2 rounded-3xl rounded-br-sm bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 *:text-left"
+                        : "block w-full bg-transparent text-neutral-900 dark:text-neutral-100",
+                    ].join(" ")}
+                    onClick={handleRenderedMarkdownClick}
+                    dangerouslySetInnerHTML={{
+                      __html: renderMarkdownToHtml(message.content),
+                    }}
+                  ></div>
+                </div>
+              );
+            })}
+
+            {isBusy && isAwaitingFirstToken ? (
+              <div className="text-left">
+                <span
+                  className="inline-block text-sm text-transparent bg-clip-text bg-[linear-gradient(110deg,var(--color-neutral-400)_50%,var(--color-neutral-300)_60%,var(--color-neutral-400)_70%)] dark:bg-[linear-gradient(110deg,#a3a3a3_30%,#ffffff_45%,#a3a3a3_60%)] bg-[length:200%_100%]"
+                  style={{
+                    animation: "ask-ai-thinking-shimmer 3.4s linear infinite",
+                  }}
+                >
+                  Thinking
+                </span>
+              </div>
+            ) : null}
+
+            {errorMessage ? (
+              <p className="text-sm text-red-600 dark:text-red-300">
+                {errorMessage}
+              </p>
+            ) : null}
+          </div>
+
+          <form
+            className={
+              mobile
+                ? "absolute z-10 bottom-0 inset-x-0 px-3 pb-3"
+                : "absolute z-10 bottom-0 inset-x-0 px-3 pb-3"
+            }
+            onSubmit={(event) => {
+              void handleSubmit(event);
+            }}
+          >
+            <div className="bg-white flex gap-2 border border-border rounded-[24px]">
+              <textarea
+                ref={chatInputTextareaRef}
+                value={input}
+                onInput={(event) => {
+                  setInput((event.target as HTMLTextAreaElement).value);
+                }}
+                onKeyDown={handleChatInputKeyDown}
+                placeholder="Ask a question..."
+                className="my-auto min-w-0 flex-1 bg-transparent pl-4 py-3 text-neutral-900 placeholder:text-neutral-400 focus:outline-none dark:text-white dark:placeholder:text-neutral-400 leading-5 resize-none [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+                disabled={isBusy}
+                rows={1}
+              />
+              <div class="p-1 pl-0 mt-auto">
+                <button
+                  type="submit"
+                  className="flex items-center justify-center rounded-full bg-neutral-900 size-10 disabled:opacity-90 dark:bg-white dark:text-neutral-900 cursor-pointer"
+                  disabled={isBusy || input.trim().length === 0}
+                >
+                  <Icon
+                    icon="lucide:arrow-up"
+                    className="size-5 invert dark:invert-0"
+                    aria-hidden="true"
+                  />
+                </button>
+              </div>
+            </div>
+          </form>
+        </>
+      ) : (
+        <div className={mobile ? "flex-1 px-4 py-4" : "px-4 py-4"}>
+          <p className="text-sm text-neutral-600 dark:text-neutral-300">
+            {unavailableMessage}
+          </p>
+        </div>
+      )}
+    </>
+  );
+
+  const desktopMaxHeight = getDesktopMaxHeightPx();
+  const desktopPanelWidth = clamp(
+    desktopSize.width,
+    DESKTOP_MIN_WIDTH_PX,
+    DESKTOP_MAX_WIDTH_PX,
+  );
+  const desktopPanelHeight = clamp(
+    desktopSize.height,
+    DESKTOP_MIN_HEIGHT_PX,
+    desktopMaxHeight,
+  );
+
+  return (
+    <>
+      <style>{`
+        @keyframes ask-ai-thinking-shimmer {
+          0% { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+
+        .prose-rules pre[class*="language-"],
+        .prose-rules code[class*="language-"] {
+          font-family: var(--font-mono);
+          font-size: 13px;
+          line-height: inherit;
+        }
+
+        .ask-ai-markdown pre {
+          position: relative;
+          width: 100%;
+          max-width: 100%;
+          min-width: 0;
+          box-sizing: border-box;
+          padding-top: 2.25rem;
+          overflow-x: auto;
+          overflow-y: hidden;
+          white-space: pre;
+          -webkit-overflow-scrolling: touch;
+          scrollbar-width: thin;
+          scrollbar-color: var(--color-neutral-300) var(--color-neutral-100);
+        }
+
+        .ask-ai-markdown pre[data-language]::before {
+          content: "";
+          position: absolute;
+          top: 0.52rem;
+          left: 0.75rem;
+          width: 16px;
+          height: 16px;
+          background-color: var(--color-neutral-500);
+          -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.4 16.6-4.6-4.6 4.6-4.6L8 6l-6 6 6 6zM14.6 16.6 19.2 12l-4.6-4.6L16 6l6 6-6 6z'/%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.4 16.6-4.6-4.6 4.6-4.6L8 6l-6 6 6 6zM14.6 16.6 19.2 12l-4.6-4.6L16 6l6 6-6 6z'/%3E%3C/svg%3E");
+          -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+          -webkit-mask-position: center;
+          mask-position: center;
+          -webkit-mask-size: contain;
+          mask-size: contain;
+          pointer-events: none;
+          user-select: none;
+        }
+
+        .ask-ai-markdown pre[data-language]::after {
+          content: attr(data-language);
+          position: absolute;
+          top: 0.6rem;
+          left: 2.2rem;
+          font-family: var(--font-sans);
+          font-size: 14px;
+          line-height: 1;
+          letter-spacing: 0.01em;
+          color: var(--color-neutral-500);
+          pointer-events: none;
+          user-select: none;
+        }
+
+        .ask-ai-markdown .ask-ai-copy-code-button {
+          position: absolute;
+          top: 0.3rem;
+          right: 0.46rem;
+          z-index: 2;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 1.75rem;
+          height: 1.75rem;
+          border: 0;
+          background: color-mix(
+            in oklab,
+            var(--color-neutral-50) 80%,
+            transparent
+          );
+          backdrop-filter: blur(4px);
+          color: color-mix(
+            in oklab,
+            var(--color-neutral-500) 80%,
+            transparent
+          );
+          border-radius: 8px;
+          cursor: pointer;
+          transition: background-color 120ms ease, color 120ms ease,
+            transform 120ms ease;
+        }
+
+        .ask-ai-markdown .ask-ai-copy-code-button:hover {
+          background: var(--color-neutral-100);
+          color: var(--color-neutral-700);
+        }
+
+        .ask-ai-markdown .ask-ai-copy-code-button:active {
+          transform: translateY(0.5px);
+        }
+
+        .ask-ai-markdown .ask-ai-copy-code-button:focus-visible {
+          outline: 2px solid var(--color-neutral-300);
+          outline-offset: 1px;
+        }
+
+        .ask-ai-markdown .ask-ai-copy-icon,
+        .ask-ai-markdown .ask-ai-copy-check-icon {
+          position: absolute;
+          width: 14px;
+          height: 14px;
+          transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
+            opacity 250ms cubic-bezier(0.22, 1, 0.36, 1);
+          will-change: transform, opacity;
+        }
+
+        .ask-ai-markdown .ask-ai-copy-icon {
+          opacity: 1;
+          transform: scale(1) rotate(0deg);
+          background-color: currentColor;
+          -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
+          -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+          -webkit-mask-position: center;
+          mask-position: center;
+          -webkit-mask-size: contain;
+          mask-size: contain;
+        }
+
+        .ask-ai-markdown .ask-ai-copy-check-icon {
+          opacity: 0;
+          transform: scale(0.25) rotate(6deg);
+          background-color: color-mix(
+            in oklab,
+            var(--color-green-700) 80%,
+            transparent
+          );
+          -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
+          -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+          -webkit-mask-position: center;
+          mask-position: center;
+          -webkit-mask-size: contain;
+          mask-size: contain;
+        }
+
+        .ask-ai-markdown .ask-ai-copy-code-button[data-copied="true"] .ask-ai-copy-icon {
+          opacity: 0;
+          transform: scale(0.5) rotate(-6deg);
+        }
+
+        .ask-ai-markdown .ask-ai-copy-code-button[data-copied="true"] .ask-ai-copy-check-icon {
+          opacity: 1;
+          transform: scale(1.1) rotate(0deg);
+        }
+
+        .ask-ai-markdown pre > code {
+          display: block;
+          min-width: max-content;
+          white-space: inherit;
+          word-break: normal;
+          overflow-wrap: normal;
+        }
+
+        .ask-ai-markdown pre::-webkit-scrollbar {
+          height: 10px;
+        }
+
+        .ask-ai-markdown pre::-webkit-scrollbar-track {
+          background: var(--color-neutral-100);
+          border-radius: 999px;
+        }
+
+        .ask-ai-markdown pre::-webkit-scrollbar-thumb {
+          background: var(--color-neutral-300);
+          border-radius: 999px;
+          border: 2px solid var(--color-neutral-100);
+        }
+
+        .ask-ai-markdown pre::-webkit-scrollbar-thumb:hover {
+          background: var(--color-neutral-400);
+        }
+      `}</style>
+      {!isOpen ? (
+        <div className="fixed bottom-5 right-6 size-12 z-40 bg-white hover:scale-105 transition duration-300 ease-in-out">
+          <button
+            type="button"
+            className="w-full h-full inline-flex items-center justify-center gap-2 rounded-full bg-linear-to-b from-neutral-900/85 to-neutral-900 shadow-xl dark:bg-white cursor-pointer"
+            onClick={() => handleOpenChange(true)}
+            data-pagefind-ignore
+          >
+            <img
+              src={sparkleIcon}
+              alt=""
+              aria-hidden="true"
+              className="size-4 invert dark:invert-0"
+            />
+          </button>
+        </div>
+      ) : null}
+
+      {isMobile ? (
+        <Drawer.Root
+          open={isOpen}
+          onOpenChange={handleOpenChange}
+          disablePreventScroll={true}
+        >
+          <Drawer.Portal>
+            <Drawer.Overlay className="fixed inset-0 z-50 bg-black/40" />
+            <Drawer.Content
+              className="fixed inset-x-0 bottom-0 z-50 flex h-[85dvh] max-h-[85dvh] flex-col rounded-t-2xl border border-border bg-background shadow-xl will-change-transform"
+              data-pagefind-ignore
+            >
+              <div className="absolute left-1/2 -translate-x-1/2 mt-2 h-1.5 w-12 rounded-full bg-neutral-300 dark:bg-neutral-700" />
+              {renderPanelContent(true)}
+            </Drawer.Content>
+          </Drawer.Portal>
+        </Drawer.Root>
+      ) : isOpen ? (
+        <div
+          className="fixed bottom-4 right-5 z-50"
+          data-pagefind-ignore
+          onWheelCapture={handleDesktopWheelCapture}
+        >
+          <div
+            className="relative flex flex-col overflow-hidden rounded-2xl border border-border bg-background shadow-[0_6px_20px_rgba(0,0,0,0.2)] shadow-neutral-300. shadow-black/15"
+            style={{
+              width: `${desktopPanelWidth}px`,
+              height: `${desktopPanelHeight}px`,
+            }}
+          >
+            <div
+              className="absolute left-0 top-3 bottom-3 z-20 w-2 cursor-ew-resize touch-none"
+              onPointerDown={beginDesktopResize("left")}
+            />
+            <div
+              className="absolute left-3 right-3 top-0 z-20 h-2 cursor-ns-resize touch-none"
+              onPointerDown={beginDesktopResize("top")}
+            />
+            <div
+              className="absolute left-0 top-0 z-30 h-3 w-3 cursor-nwse-resize touch-none"
+              onPointerDown={beginDesktopResize("corner")}
+            />
+            {renderPanelContent(false)}
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+}