radiant-docs 0.1.40 → 0.1.42

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

@@ -1,2011 +0,0 @@
-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 = 448;
-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: getDesktopMaxHeightPx(),
-    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
-          : getDesktopMaxHeightPx(),
-      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;
-    const codeBlockScroller =
-      (eventTargetElement?.closest(
-        ".ask-ai-markdown pre > code",
-      ) as HTMLElement | null) ??
-      (codeBlockPre?.querySelector(":scope > code") as HTMLElement | null);
-
-    if (codeBlockScroller) {
-      const maxScrollLeft = Math.max(
-        0,
-        codeBlockScroller.scrollWidth - codeBlockScroller.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) {
-          codeBlockScroller.scrollLeft = clamp(
-            codeBlockScroller.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-code:text-neutral-700 dark:prose-code:text-neutral-200 prose-pre:shadow-xs prose-pre:text-neutral-700! dark:prose-pre:text-neutral-100! prose-pre:border prose-pre:border-neutral-200 dark:prose-pre:border-neutral-800 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 dark:bg-(--rd-code-surface) flex gap-2 border border-neutral-200 dark:border-neutral-800 rounded-[24px] shadow-xs">
-              <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 size-10 bg-linear-to-b from-[var(--color-theme-top)] to-[var(--color-theme-bottom)] text-white disabled:opacity-90 hover:opacity-95 cursor-pointer"
-                  disabled={isBusy || input.trim().length === 0}
-                >
-                  <Icon
-                    icon="lucide:arrow-up"
-                    className="size-5 text-white"
-                    aria-hidden="true"
-                  />
-                </button>
-              </div>
-            </div>
-          </form>
-        </>
-      ) : (
-        <div className="flex-1 px-4 py-4 flex items-center justify-center">
-          <p className="text-sm text-neutral-600 dark:text-neutral-300 flex justify-center gap-1.5">
-            <Icon
-              icon="lucide:circle-alert"
-              className="size-5 shrink-0 self-start justify-self-start mt-0.5 block"
-            />
-            {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;
-          background: var(--color-neutral-50) !important;
-          overflow-x: hidden;
-          overflow-y: hidden;
-          white-space: pre;
-        }
-
-        .dark .ask-ai-markdown pre {
-          background: var(--rd-code-surface) !important;
-          border-color: var(--color-neutral-800) !important;
-        }
-
-        .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;
-        }
-
-        .dark .ask-ai-markdown pre[data-language]::before {
-          background-color: var(--color-neutral-400);
-        }
-
-        .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;
-        }
-
-        .dark .ask-ai-markdown pre[data-language]::after {
-          color: var(--color-neutral-400);
-        }
-
-        .ask-ai-markdown .ask-ai-copy-code-button {
-          position: absolute;
-          top: 0.3rem;
-          right: 0.46rem;
-          z-index: 2;
-          appearance: none;
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          width: 1.75rem;
-          height: 1.75rem;
-          border: 1px solid
-            color-mix(in oklab, var(--color-neutral-200) 80%, transparent);
-          background: color-mix(
-            in oklab,
-            #fff 80%,
-            transparent
-          );
-          backdrop-filter: blur(4px);
-          color: color-mix(
-            in oklab,
-            var(--color-neutral-500) 80%,
-            transparent
-          );
-          border-radius: 0.375rem;
-          outline: none;
-          box-shadow: none;
-          cursor: pointer;
-          transition: background-color 150ms ease, color 150ms ease,
-            border-color 150ms ease, transform 120ms ease;
-        }
-
-        .dark .ask-ai-markdown .ask-ai-copy-code-button {
-          border-color: color-mix(
-            in oklab,
-            var(--color-neutral-700) 50%,
-            transparent
-          );
-          background: var(--rd-code-surface);
-          color: var(--color-neutral-400);
-        }
-
-        .ask-ai-markdown .ask-ai-copy-code-button:hover {
-          background: var(--color-neutral-50);
-          color: var(--color-neutral-600);
-        }
-
-        .dark .ask-ai-markdown .ask-ai-copy-code-button:hover {
-          background: var(--color-neutral-800);
-          color: var(--color-neutral-200);
-        }
-
-        .ask-ai-markdown .ask-ai-copy-code-button:active {
-          transform: translateY(0.5px);
-        }
-
-        .ask-ai-markdown .ask-ai-copy-code-button:focus-visible {
-          outline: none;
-          box-shadow: none;
-        }
-
-        .dark .ask-ai-markdown .ask-ai-copy-code-button:focus-visible {
-          outline: none;
-          box-shadow: none;
-        }
-
-        .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;
-        }
-
-        .dark .ask-ai-markdown .ask-ai-copy-check-icon {
-          background-color: color-mix(
-            in oklab,
-            var(--color-green-400) 90%,
-            transparent
-          );
-        }
-
-        .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;
-          width: 100%;
-          min-width: 100%;
-          background: transparent !important;
-          white-space: inherit;
-          word-break: normal;
-          overflow-wrap: normal;
-          overflow-x: auto;
-          overflow-y: hidden;
-          -webkit-overflow-scrolling: touch;
-          scrollbar-width: none;
-          -ms-overflow-style: none;
-        }
-
-        .dark .ask-ai-markdown pre > code {
-          scrollbar-width: none;
-        }
-
-        .ask-ai-markdown pre[class*="language-"] {
-          background: var(--color-neutral-50) !important;
-        }
-
-        .ask-ai-markdown pre[class*="language-"] > code[class*="language-"] {
-          background: transparent !important;
-        }
-
-        .ask-ai-markdown :not(pre) > code[class*="language-"] {
-          background: var(--color-neutral-100);
-        }
-
-        .dark .ask-ai-markdown pre[class*="language-"] {
-          background: var(--rd-code-surface) !important;
-          border-color: var(--color-neutral-800) !important;
-        }
-
-        .dark .ask-ai-markdown pre[class*="language-"] > code[class*="language-"] {
-          background: transparent !important;
-        }
-
-        .dark .ask-ai-markdown pre[class*="language-"],
-        .dark .ask-ai-markdown code[class*="language-"] {
-          color: var(--color-neutral-100);
-        }
-
-        .dark .ask-ai-markdown :not(pre) > code[class*="language-"] {
-          background: var(--color-neutral-800);
-        }
-
-        .dark .ask-ai-markdown .token.comment,
-        .dark .ask-ai-markdown .token.prolog,
-        .dark .ask-ai-markdown .token.doctype,
-        .dark .ask-ai-markdown .token.cdata {
-          color: #7f848e;
-        }
-
-        .dark .ask-ai-markdown .token.punctuation {
-          color: #abb2bf;
-        }
-
-        .dark .ask-ai-markdown .token.property,
-        .dark .ask-ai-markdown .token.tag,
-        .dark .ask-ai-markdown .token.boolean,
-        .dark .ask-ai-markdown .token.number,
-        .dark .ask-ai-markdown .token.constant,
-        .dark .ask-ai-markdown .token.symbol,
-        .dark .ask-ai-markdown .token.deleted {
-          color: #d19a66;
-        }
-
-        .dark .ask-ai-markdown .token.selector,
-        .dark .ask-ai-markdown .token.attr-name,
-        .dark .ask-ai-markdown .token.string,
-        .dark .ask-ai-markdown .token.char,
-        .dark .ask-ai-markdown .token.builtin,
-        .dark .ask-ai-markdown .token.inserted {
-          color: #98c379;
-        }
-
-        .dark .ask-ai-markdown .token.operator,
-        .dark .ask-ai-markdown .token.entity,
-        .dark .ask-ai-markdown .token.url,
-        .dark .ask-ai-markdown .language-css .token.string,
-        .dark .ask-ai-markdown .style .token.string {
-          color: #56b6c2;
-        }
-
-        .dark .ask-ai-markdown .token.atrule,
-        .dark .ask-ai-markdown .token.attr-value,
-        .dark .ask-ai-markdown .token.keyword {
-          color: #c678dd;
-        }
-
-        .dark .ask-ai-markdown .token.function,
-        .dark .ask-ai-markdown .token.class-name {
-          color: #e5c07b;
-        }
-
-        .dark .ask-ai-markdown .token.regex,
-        .dark .ask-ai-markdown .token.important,
-        .dark .ask-ai-markdown .token.variable {
-          color: #e06c75;
-        }
-
-        .dark .ask-ai-markdown .token.attr-value > .token.punctuation.attr-equals,
-        .dark
-          .ask-ai-markdown
-          .token.special-attr
-          > .token.attr-value
-          > .token.value.css {
-          color: #abb2bf;
-        }
-
-        .dark .ask-ai-markdown .language-css .token.selector {
-          color: #d19a66;
-        }
-
-        .dark .ask-ai-markdown .language-css .token.property {
-          color: #abb2bf;
-        }
-
-        .dark .ask-ai-markdown .language-css .token.function,
-        .dark .ask-ai-markdown .language-css .token.url > .token.function {
-          color: #56b6c2;
-        }
-
-        .dark .ask-ai-markdown .language-css .token.url > .token.string.url {
-          color: #98c379;
-        }
-
-        .dark .ask-ai-markdown .language-css .token.important,
-        .dark .ask-ai-markdown .language-css .token.atrule .token.rule {
-          color: #c678dd;
-        }
-
-        .dark .ask-ai-markdown .language-javascript .token.operator {
-          color: #c678dd;
-        }
-
-        .dark
-          .ask-ai-markdown
-          .language-javascript
-          .token.template-string
-          > .token.interpolation
-          > .token.interpolation-punctuation.punctuation {
-          color: #e06c75;
-        }
-
-        .dark .ask-ai-markdown .language-json .token.operator {
-          color: #abb2bf;
-        }
-
-        .dark .ask-ai-markdown .language-json .token.null.keyword {
-          color: #d19a66;
-        }
-
-        .dark .ask-ai-markdown .language-markdown .token.url,
-        .dark .ask-ai-markdown .language-markdown .token.url > .token.operator,
-        .dark
-          .ask-ai-markdown
-          .language-markdown
-          .token.url-reference.url
-          > .token.string {
-          color: #abb2bf;
-        }
-
-        .dark .ask-ai-markdown .language-markdown .token.url > .token.content {
-          color: #56b6c2;
-        }
-
-        .dark .ask-ai-markdown .language-markdown .token.url > .token.url,
-        .dark .ask-ai-markdown .language-markdown .token.url-reference.url {
-          color: #98c379;
-        }
-
-        .dark .ask-ai-markdown .language-markdown .token.blockquote.punctuation,
-        .dark .ask-ai-markdown .language-markdown .token.hr.punctuation {
-          color: #7f848e;
-        }
-
-        .dark .ask-ai-markdown .language-markdown .token.code-snippet {
-          color: #98c379;
-        }
-
-        .dark .ask-ai-markdown .language-markdown .token.bold .token.content {
-          color: #e5c07b;
-        }
-
-        .dark .ask-ai-markdown .language-markdown .token.italic .token.content {
-          color: #c678dd;
-        }
-
-        .dark .ask-ai-markdown .language-markdown .token.strike .token.content,
-        .dark
-          .ask-ai-markdown
-          .language-markdown
-          .token.strike
-          .token.punctuation,
-        .dark .ask-ai-markdown .language-markdown .token.list.punctuation,
-        .dark
-          .ask-ai-markdown
-          .language-markdown
-          .token.title.important
-          > .token.punctuation {
-          color: #e06c75;
-        }
-
-        .ask-ai-markdown pre > code::-webkit-scrollbar {
-          width: 0;
-          height: 0;
-          display: none;
-        }
-      `}</style>
-      {!isOpen ? (
-        <div className="fixed bottom-5 right-5 size-12 z-40 bg-background rounded-full 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-[var(--color-theme-top)] to-[var(--color-theme-bottom)] text-[var(--color-theme-foreground)] shadow-xl dark:shadow-white/5 hover:opacity-95 cursor-pointer"
-            onClick={() => handleOpenChange(true)}
-            data-pagefind-ignore
-          >
-            <img
-              src={sparkleIcon}
-              alt=""
-              aria-hidden="true"
-              className="size-4"
-              style={{ filter: "var(--color-theme-icon-filter)" }}
-            />
-          </button>
-        </div>
-      ) : null}
-
-      {isMobile ? (
-        <Drawer.Root
-          open={isOpen}
-          onOpenChange={handleOpenChange}
-          disablePreventScroll={true}
-          repositionInputs={false}
-        >
-          <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-4 z-50 dark:bg-neutral-800 rounded-2xl"
-          data-pagefind-ignore
-          onWheelCapture={handleDesktopWheelCapture}
-        >
-          <div
-            className="relative flex flex-col overflow-hidden rounded-2xl border border-border bg-background dark:bg-neutral-900/80 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}
-    </>
-  );
-}