radiant-docs 0.1.40 → 0.1.42

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

@@ -0,0 +1,2679 @@
+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 "prism-themes/themes/prism-one-light.css";
+import { type Plugin, unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkGfm from "remark-gfm";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+import { getDocsBasePath, withBasePath } from "../../lib/base-path";
+
+type AssistantLinkTarget = "current" | "blank";
+export type AssistantPanelSize = "default" | "expanded";
+
+type HastNode = {
+  type?: string;
+  tagName?: string;
+  properties?: Record<string, unknown>;
+  children?: HastNode[];
+};
+
+type AssistantEmbedPanelProps = {
+  apiPath: string;
+  docsTitle: string;
+  isChatAvailable: boolean;
+  canSendChatRequest: boolean;
+  launcherThemeColor?: string;
+  launcherThemeColors?: AssistantColorByMode;
+  launcherIconColor?: string;
+  launcherIconColors?: AssistantColorByMode;
+  launcherIconImageSrc?: string;
+  emptyStateHeading?: string;
+  emptyStateQuestions?: string[];
+  unavailableMessage?: string;
+  devProxyToken?: string;
+  panelSurface?: "iframe" | "inline";
+  linkTarget?: AssistantLinkTarget;
+  allowApiPathQueryOverride?: boolean;
+  openSignal?: number;
+  panelSize?: AssistantPanelSize;
+  onRequestOpen?: () => void;
+  onRequestClose?: () => void;
+  onRequestPanelSizeToggle?: (size: AssistantPanelSize) => void;
+  onCurrentLinkNavigate?: (href: string, sourceElement?: Element) => void;
+};
+
+type AssistantColorByMode = {
+  light: string;
+  dark: string;
+};
+
+type ChatMessage = {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+};
+
+type AssistantStreamEvent = {
+  type?: string;
+  delta?: string;
+};
+
+type ChatInputKeyEvent = JSX.TargetedKeyboardEvent<HTMLTextAreaElement>;
+type ChatViewportWheelEvent = JSX.TargetedWheelEvent<HTMLDivElement>;
+type ChatViewportScrollEvent = JSX.TargetedEvent<HTMLDivElement, Event>;
+
+type PersistedPanelState = {
+  messages: ChatMessage[];
+  scrollTop: number;
+  inFlight: boolean;
+  isAwaitingFirstToken: boolean;
+  inFlightUpdatedAt: number;
+  panelSize: AssistantPanelSize;
+};
+
+type PersistPanelStateOptions = {
+  allowBusyListenerWrite?: boolean;
+  refreshInFlightTimestamp?: boolean;
+};
+
+type CurrentLinkNavigationRequest = {
+  href: string;
+  sourceElement: HTMLAnchorElement;
+};
+
+type PendingAssistantHandoff = {
+  state: PersistedPanelState;
+  targetWindow: Window;
+  timeoutId: number;
+};
+
+export const ASSISTANT_PANEL_STORAGE_KEY = "docs:assistant-embed-panel:v1";
+const HANDOFF_QUERY_PARAM = "assistantHandoff";
+const OPEN_QUERY_PARAM = "assistant";
+const OPEN_QUERY_VALUE = "open";
+const HANDOFF_READY_TYPE = "assistant-handoff:ready";
+const HANDOFF_STATE_TYPE = "assistant-handoff:state";
+const HANDOFF_ACK_TYPE = "assistant-handoff:ack";
+const IN_FLIGHT_STALE_MS = 10000;
+const IN_FLIGHT_HEARTBEAT_MS = 3000;
+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",
+};
+
+const EXTERNAL_PROTOCOL_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*:/;
+
+function normalizeRelTokens(value: unknown): string[] {
+  if (Array.isArray(value)) {
+    return value
+      .flatMap((entry) => (typeof entry === "string" ? entry.split(/\s+/) : []))
+      .filter(Boolean);
+  }
+
+  if (typeof value === "string") {
+    return value.split(/\s+/).filter(Boolean);
+  }
+
+  return [];
+}
+
+function visitHastNodes(
+  node: HastNode,
+  visitor: (node: HastNode) => void,
+): void {
+  visitor(node);
+  if (!Array.isArray(node.children)) return;
+  for (const child of node.children) {
+    visitHastNodes(child, visitor);
+  }
+}
+
+function isDocumentLocalHref(href: string): boolean {
+  return (
+    href.startsWith("#") ||
+    href.startsWith("?") ||
+    href.startsWith("//") ||
+    href.startsWith("./") ||
+    href.startsWith("../")
+  );
+}
+
+function rebaseAssistantLinkHref(href: string): string {
+  const value = href.trim();
+  if (!value || isDocumentLocalHref(value)) {
+    return href;
+  }
+
+  if (!EXTERNAL_PROTOCOL_REGEX.test(value)) {
+    return withBasePath(value);
+  }
+
+  if (
+    typeof window === "undefined" ||
+    !/^https?:/i.test(value) ||
+    !getDocsBasePath()
+  ) {
+    return href;
+  }
+
+  try {
+    const parsed = new URL(value);
+    if (parsed.origin !== window.location.origin) {
+      return href;
+    }
+
+    const rebasedHref = withBasePath(
+      `${parsed.pathname}${parsed.search}${parsed.hash}`,
+    );
+    return new URL(rebasedHref, parsed.origin).toString();
+  } catch {
+    return href;
+  }
+}
+
+function getSameOriginNavigationRequest(
+  event: JSX.TargetedMouseEvent<HTMLDivElement>,
+): CurrentLinkNavigationRequest | null {
+  if (
+    event.defaultPrevented ||
+    event.button !== 0 ||
+    event.metaKey ||
+    event.ctrlKey ||
+    event.shiftKey ||
+    event.altKey
+  ) {
+    return null;
+  }
+
+  const targetElement = event.target instanceof Element ? event.target : null;
+  const anchor = targetElement?.closest("a[href]") as HTMLAnchorElement | null;
+  if (!anchor || !event.currentTarget.contains(anchor)) {
+    return null;
+  }
+
+  const target = anchor.getAttribute("target")?.trim().toLowerCase();
+  if ((target && target !== "_self") || anchor.hasAttribute("download")) {
+    return null;
+  }
+
+  const rawHref = anchor.getAttribute("href")?.trim();
+  if (!rawHref || rawHref.startsWith("#") || rawHref.startsWith("?")) {
+    return null;
+  }
+
+  try {
+    const url = new URL(anchor.href, window.location.href);
+    if (url.origin !== window.location.origin) {
+      return null;
+    }
+
+    if (
+      url.pathname === window.location.pathname &&
+      url.search === window.location.search &&
+      url.hash
+    ) {
+      return null;
+    }
+
+    return { href: url.href, sourceElement: anchor };
+  } catch {
+    return null;
+  }
+}
+
+function getSameOriginBlankNavigationRequest(
+  event: JSX.TargetedMouseEvent<HTMLDivElement>,
+): CurrentLinkNavigationRequest | null {
+  if (
+    event.defaultPrevented ||
+    event.button !== 0 ||
+    event.metaKey ||
+    event.ctrlKey ||
+    event.shiftKey ||
+    event.altKey
+  ) {
+    return null;
+  }
+
+  const targetElement = event.target instanceof Element ? event.target : null;
+  const anchor = targetElement?.closest("a[href]") as HTMLAnchorElement | null;
+  if (!anchor || !event.currentTarget.contains(anchor)) {
+    return null;
+  }
+
+  const target = anchor.getAttribute("target")?.trim().toLowerCase();
+  if ((target && target !== "_blank") || anchor.hasAttribute("download")) {
+    return null;
+  }
+
+  const rawHref = anchor.getAttribute("href")?.trim();
+  if (!rawHref || rawHref.startsWith("#") || rawHref.startsWith("?")) {
+    return null;
+  }
+
+  try {
+    const url = new URL(anchor.href, window.location.href);
+    if (url.origin !== window.location.origin) {
+      return null;
+    }
+
+    return { href: url.href, sourceElement: anchor };
+  } catch {
+    return null;
+  }
+}
+
+const rehypeRebaseInternalLinks: Plugin<[], HastNode> = () => {
+  return (tree) => {
+    visitHastNodes(tree, (node) => {
+      if (node.type !== "element" || node.tagName !== "a") return;
+
+      const props = node.properties;
+      if (!props || typeof props.href !== "string") return;
+
+      props.href = rebaseAssistantLinkHref(props.href);
+    });
+  };
+};
+
+const rehypeOpenLinksInNewTab: Plugin<[], HastNode> = () => {
+  return (tree) => {
+    visitHastNodes(tree, (node) => {
+      if (node.type !== "element" || node.tagName !== "a") return;
+
+      const props = (node.properties ??= {});
+      props.target = "_blank";
+
+      const relTokens = normalizeRelTokens(props.rel);
+      if (!relTokens.includes("noopener")) relTokens.push("noopener");
+      if (!relTokens.includes("noreferrer")) relTokens.push("noreferrer");
+      props.rel = relTokens.join(" ");
+    });
+  };
+};
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}
+
+function createMessageId(): string {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
+
+function normalizePersistedMessages(rawMessages: unknown): ChatMessage[] {
+  if (!Array.isArray(rawMessages)) {
+    return [];
+  }
+
+  return rawMessages
+    .filter((message): message is ChatMessage => {
+      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) => ({
+      id: message.id,
+      role: message.role,
+      content: message.content,
+    }));
+}
+
+function createEmptyPersistedPanelState(): PersistedPanelState {
+  return {
+    messages: [],
+    scrollTop: 0,
+    inFlight: false,
+    isAwaitingFirstToken: false,
+    inFlightUpdatedAt: 0,
+    panelSize: "default",
+  };
+}
+
+function normalizePanelSize(value: unknown): AssistantPanelSize {
+  return value === "expanded" ? "expanded" : "default";
+}
+
+function normalizePersistedPanelState(rawState: unknown): PersistedPanelState {
+  if (!rawState || typeof rawState !== "object") {
+    return createEmptyPersistedPanelState();
+  }
+
+  const state = rawState as {
+    messages?: unknown;
+    scrollTop?: unknown;
+    inFlight?: unknown;
+    isAwaitingFirstToken?: unknown;
+    inFlightUpdatedAt?: unknown;
+    panelSize?: unknown;
+  };
+  const inFlightUpdatedAt =
+    typeof state.inFlightUpdatedAt === "number" &&
+    Number.isFinite(state.inFlightUpdatedAt)
+      ? Math.max(0, state.inFlightUpdatedAt)
+      : 0;
+  const isInFlightFresh =
+    state.inFlight === true &&
+    inFlightUpdatedAt > 0 &&
+    Date.now() - inFlightUpdatedAt <= IN_FLIGHT_STALE_MS;
+  const scrollTop =
+    typeof state.scrollTop === "number" && Number.isFinite(state.scrollTop)
+      ? Math.max(0, state.scrollTop)
+      : 0;
+
+  return {
+    messages: normalizePersistedMessages(state.messages),
+    scrollTop,
+    inFlight: isInFlightFresh,
+    isAwaitingFirstToken:
+      isInFlightFresh && state.isAwaitingFirstToken === true,
+    inFlightUpdatedAt: isInFlightFresh ? inFlightUpdatedAt : 0,
+    panelSize: normalizePanelSize(state.panelSize),
+  };
+}
+
+function parsePersistedPanelState(raw: string | null): PersistedPanelState {
+  if (!raw) {
+    return createEmptyPersistedPanelState();
+  }
+
+  try {
+    const parsed = JSON.parse(raw) as unknown;
+    if (Array.isArray(parsed)) {
+      return {
+        ...createEmptyPersistedPanelState(),
+        messages: normalizePersistedMessages(parsed),
+      };
+    }
+
+    return normalizePersistedPanelState(parsed);
+  } catch {
+    return createEmptyPersistedPanelState();
+  }
+}
+
+function readPersistedPanelState(): PersistedPanelState {
+  if (typeof window === "undefined") {
+    return createEmptyPersistedPanelState();
+  }
+
+  try {
+    return parsePersistedPanelState(
+      window.localStorage.getItem(ASSISTANT_PANEL_STORAGE_KEY),
+    );
+  } catch {
+    return createEmptyPersistedPanelState();
+  }
+}
+
+function writePersistedPanelState(state: PersistedPanelState) {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  try {
+    window.localStorage.setItem(
+      ASSISTANT_PANEL_STORAGE_KEY,
+      JSON.stringify({
+        messages: state.messages,
+        scrollTop:
+          Number.isFinite(state.scrollTop) && state.scrollTop > 0
+            ? state.scrollTop
+            : 0,
+        inFlight: state.inFlight,
+        isAwaitingFirstToken: state.inFlight && state.isAwaitingFirstToken,
+        inFlightUpdatedAt: state.inFlight ? state.inFlightUpdatedAt : 0,
+        panelSize: normalizePanelSize(state.panelSize),
+      }),
+    );
+  } catch {
+    // Ignore storage failures in private mode or constrained embeds.
+  }
+}
+
+function buildHandoffUrl(href: string, handoffId: string): string {
+  const url = new URL(href, window.location.href);
+  url.searchParams.set(HANDOFF_QUERY_PARAM, handoffId);
+  url.searchParams.set(OPEN_QUERY_PARAM, OPEN_QUERY_VALUE);
+  return url.toString();
+}
+
+function readAssistantUrlSignal(): {
+  handoffId: string;
+  shouldOpen: boolean;
+} {
+  if (typeof window === "undefined") {
+    return { handoffId: "", shouldOpen: false };
+  }
+
+  try {
+    const url = new URL(window.location.href);
+    const searchHandoffId = url.searchParams.get(HANDOFF_QUERY_PARAM) ?? "";
+    const searchShouldOpen =
+      url.searchParams.get(OPEN_QUERY_PARAM) === OPEN_QUERY_VALUE;
+    const hashParams = new URLSearchParams(
+      url.hash.startsWith("#") ? url.hash.slice(1) : url.hash,
+    );
+    const hashHandoffId = hashParams.get(HANDOFF_QUERY_PARAM) ?? "";
+    const hashShouldOpen =
+      hashParams.get(OPEN_QUERY_PARAM) === OPEN_QUERY_VALUE;
+
+    return {
+      handoffId: searchHandoffId || hashHandoffId,
+      shouldOpen:
+        Boolean(searchHandoffId || hashHandoffId) ||
+        searchShouldOpen ||
+        hashShouldOpen,
+    };
+  } catch {
+    return { handoffId: "", shouldOpen: false };
+  }
+}
+
+function clearAssistantUrlSignal() {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  try {
+    const url = new URL(window.location.href);
+    url.searchParams.delete(HANDOFF_QUERY_PARAM);
+    url.searchParams.delete(OPEN_QUERY_PARAM);
+
+    const hashValue = url.hash.startsWith("#") ? url.hash.slice(1) : url.hash;
+    if (hashValue) {
+      const hashParams = new URLSearchParams(hashValue);
+      if (
+        hashParams.has(HANDOFF_QUERY_PARAM) ||
+        hashParams.has(OPEN_QUERY_PARAM)
+      ) {
+        hashParams.delete(HANDOFF_QUERY_PARAM);
+        hashParams.delete(OPEN_QUERY_PARAM);
+        const nextHash = hashParams.toString();
+        url.hash = nextHash ? `#${nextHash}` : "";
+      }
+    }
+
+    window.history.replaceState(
+      window.history.state,
+      "",
+      `${url.pathname}${url.search}${url.hash}`,
+    );
+  } catch {
+    // Leave the URL alone if parsing fails.
+  }
+}
+
+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("Assistant embed code highlighting failed", {
+          language: resolvedLanguage,
+          error,
+        });
+      }
+    });
+
+    return container.innerHTML;
+  } catch (error) {
+    console.error(
+      "Assistant embed markdown highlighting pipeline failed",
+      error,
+    );
+    return html;
+  }
+}
+
+function renderMarkdownToHtml(
+  markdown: string,
+  linkTarget: AssistantLinkTarget,
+): string {
+  const normalizedMarkdown = markdown.replaceAll("\r\n", "\n");
+  const cacheKey = `${linkTarget}\0${normalizedMarkdown}`;
+  const cached = markdownHtmlCache.get(cacheKey);
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  let html = "";
+
+  try {
+    const processor = unified()
+      .use(remarkParse)
+      .use(remarkGfm)
+      .use(remarkRehype, { allowDangerousHtml: false })
+      .use(rehypeRebaseInternalLinks);
+
+    if (linkTarget === "blank") {
+      processor.use(rehypeOpenLinksInNewTab);
+    }
+
+    html = String(
+      processor.use(rehypeStringify).processSync(normalizedMarkdown),
+    );
+  } catch {
+    html = escapeHtml(normalizedMarkdown).replaceAll("\n", "<br/>");
+  }
+
+  html = highlightCodeBlocksInHtml(html);
+
+  markdownHtmlCache.set(cacheKey, html);
+  if (markdownHtmlCache.size > MARKDOWN_HTML_CACHE_LIMIT) {
+    const oldestKey = markdownHtmlCache.keys().next().value;
+    if (oldestKey) {
+      markdownHtmlCache.delete(oldestKey);
+    }
+  }
+
+  return html;
+}
+
+function extractErrorMessage(rawBody: string): 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 {
+    // Fall back to the plain response body.
+  }
+
+  return rawBody.trim();
+}
+
+function postParentMessage(
+  type: string,
+  payload: Record<string, unknown> = {},
+) {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  window.parent.postMessage({ type, ...payload }, "*");
+}
+
+function getApiPath(
+  apiPath: string,
+  allowApiPathQueryOverride: boolean,
+): string {
+  if (typeof window === "undefined") {
+    return apiPath;
+  }
+
+  if (allowApiPathQueryOverride) {
+    try {
+      const configuredApiUrl = new URLSearchParams(window.location.search).get(
+        "apiUrl",
+      );
+      if (configuredApiUrl && configuredApiUrl.trim().length > 0) {
+        return configuredApiUrl;
+      }
+    } catch {
+      // Fall back to the server-rendered value.
+    }
+  }
+
+  return apiPath;
+}
+
+export function AssistantPanelIcon({
+  color,
+  imageSrc,
+  className,
+  style,
+}: {
+  color?: string;
+  imageSrc?: string;
+  className: string;
+  style?: JSX.CSSProperties;
+}) {
+  if (!imageSrc) return null;
+
+  return (
+    <span
+      className={className}
+      style={color ? { ...style, color } : style}
+      aria-hidden="true"
+    >
+      <img src={imageSrc} alt="" />
+    </span>
+  );
+}
+
+export default function AssistantEmbedPanel({
+  apiPath,
+  docsTitle,
+  isChatAvailable,
+  canSendChatRequest,
+  launcherThemeColor,
+  launcherThemeColors,
+  launcherIconColor,
+  launcherIconColors,
+  launcherIconImageSrc,
+  emptyStateHeading = "How can I help?",
+  emptyStateQuestions = [],
+  unavailableMessage = "Chat assistant is not available.",
+  devProxyToken,
+  panelSurface = "iframe",
+  linkTarget = "current",
+  allowApiPathQueryOverride = true,
+  openSignal = 0,
+  panelSize,
+  onRequestOpen,
+  onRequestClose,
+  onRequestPanelSizeToggle,
+  onCurrentLinkNavigate,
+}: AssistantEmbedPanelProps) {
+  const [initialPanelState] = useState<PersistedPanelState>(() =>
+    canSendChatRequest
+      ? readPersistedPanelState()
+      : createEmptyPersistedPanelState(),
+  );
+  const [messages, setMessages] = useState<ChatMessage[]>(
+    initialPanelState.messages,
+  );
+  const [input, setInput] = useState("");
+  const [isBusy, setIsBusy] = useState(initialPanelState.inFlight);
+  const [isAwaitingFirstToken, setIsAwaitingFirstToken] = useState(
+    initialPanelState.isAwaitingFirstToken,
+  );
+  const [errorMessage, setErrorMessage] = useState("");
+  const [showUnavailableState, setShowUnavailableState] =
+    useState(!isChatAvailable);
+  const [emptyStateAnimationKey, setEmptyStateAnimationKey] = useState(0);
+  const [localPanelSize, setLocalPanelSize] = useState<AssistantPanelSize>(
+    panelSize ?? initialPanelState.panelSize,
+  );
+  const [isShellFullscreen, setIsShellFullscreen] = useState(false);
+  const activeRequestAbortRef = useRef<AbortController | null>(null);
+  const scrollViewportRef = useRef<HTMLDivElement | null>(null);
+  const savedScrollTopRef = useRef(initialPanelState.scrollTop);
+  const scrollPersistenceFrameRef = useRef<number | null>(null);
+  const scrollPersistenceUnlockTimeoutRef = useRef<number | null>(null);
+  const isScrollPersistenceLockedRef = useRef(false);
+  const pendingHandoffsRef = useRef(new Map<string, PendingAssistantHandoff>());
+  const messagesRef = useRef(initialPanelState.messages);
+  const isBusyRef = useRef(initialPanelState.inFlight);
+  const isAwaitingFirstTokenRef = useRef(
+    initialPanelState.isAwaitingFirstToken,
+  );
+  const inFlightUpdatedAtRef = useRef(initialPanelState.inFlightUpdatedAt);
+  const panelSizeRef = useRef<AssistantPanelSize>(
+    panelSize ?? initialPanelState.panelSize,
+  );
+  const skipNextMessagesPersistRef = useRef(false);
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const resolvedApiPathRef = useRef(
+    getApiPath(apiPath, allowApiPathQueryOverride),
+  );
+  const visibleEmptyStateQuestions = emptyStateQuestions
+    .map((question) => question.trim())
+    .filter((question) => question.length > 0)
+    .slice(0, 3);
+  const launcherThemeColorLight =
+    launcherThemeColors?.light ?? launcherThemeColor ?? "#171717";
+  const launcherThemeColorDark =
+    launcherThemeColors?.dark ?? launcherThemeColor ?? "#171717";
+  const launcherIconColorLight =
+    launcherIconColors?.light ?? launcherIconColor ?? "#ffffff";
+  const launcherIconColorDark =
+    launcherIconColors?.dark ?? launcherIconColor ?? "#ffffff";
+  const resolvedPanelSize = panelSize ?? localPanelSize;
+
+  const persistPanelState = (
+    nextMessages = messagesRef.current,
+    scrollTop = savedScrollTopRef.current,
+    options: PersistPanelStateOptions = {},
+  ) => {
+    const ownsActiveRequest = Boolean(activeRequestAbortRef.current);
+    if (
+      isBusyRef.current &&
+      !ownsActiveRequest &&
+      !options.allowBusyListenerWrite
+    ) {
+      return;
+    }
+
+    if (!isBusyRef.current) {
+      inFlightUpdatedAtRef.current = 0;
+    } else if (
+      ownsActiveRequest &&
+      options.refreshInFlightTimestamp !== false
+    ) {
+      inFlightUpdatedAtRef.current = Date.now();
+    }
+
+    writePersistedPanelState({
+      messages: nextMessages,
+      scrollTop,
+      inFlight: isBusyRef.current,
+      isAwaitingFirstToken:
+        isBusyRef.current && isAwaitingFirstTokenRef.current,
+      inFlightUpdatedAt: inFlightUpdatedAtRef.current,
+      panelSize: panelSizeRef.current,
+    });
+  };
+
+  const cancelQueuedScrollPersistence = () => {
+    if (
+      typeof window !== "undefined" &&
+      scrollPersistenceFrameRef.current !== null
+    ) {
+      window.cancelAnimationFrame(scrollPersistenceFrameRef.current);
+      scrollPersistenceFrameRef.current = null;
+    }
+  };
+
+  const clearScrollPersistenceUnlockTimeout = () => {
+    if (
+      typeof window !== "undefined" &&
+      scrollPersistenceUnlockTimeoutRef.current !== null
+    ) {
+      window.clearTimeout(scrollPersistenceUnlockTimeoutRef.current);
+      scrollPersistenceUnlockTimeoutRef.current = null;
+    }
+  };
+
+  const unlockScrollPersistence = () => {
+    clearScrollPersistenceUnlockTimeout();
+    isScrollPersistenceLockedRef.current = false;
+  };
+
+  const lockScrollPersistence = () => {
+    if (typeof window === "undefined") {
+      isScrollPersistenceLockedRef.current = true;
+      return;
+    }
+
+    clearScrollPersistenceUnlockTimeout();
+    isScrollPersistenceLockedRef.current = true;
+    scrollPersistenceUnlockTimeoutRef.current = window.setTimeout(() => {
+      scrollPersistenceUnlockTimeoutRef.current = null;
+      isScrollPersistenceLockedRef.current = false;
+    }, 1200);
+  };
+
+  const snapshotThreadScrollPosition = () => {
+    const viewport = scrollViewportRef.current;
+    if (!viewport) {
+      return;
+    }
+
+    savedScrollTopRef.current = viewport.scrollTop;
+    cancelQueuedScrollPersistence();
+    persistPanelState();
+  };
+
+  const restoreSavedScrollPosition = (unlockAfterRestore = false) => {
+    const viewport = scrollViewportRef.current;
+    if (!viewport) {
+      if (unlockAfterRestore) {
+        unlockScrollPersistence();
+      }
+      return;
+    }
+
+    const maxScrollTop = Math.max(
+      0,
+      viewport.scrollHeight - viewport.clientHeight,
+    );
+    viewport.scrollTop = clamp(savedScrollTopRef.current, 0, maxScrollTop);
+
+    if (unlockAfterRestore && typeof window !== "undefined") {
+      window.requestAnimationFrame(() => {
+        unlockScrollPersistence();
+      });
+    } else if (unlockAfterRestore) {
+      unlockScrollPersistence();
+    }
+  };
+
+  const queueSavedScrollRestore = (unlockAfterRestore = false) => {
+    if (typeof window === "undefined") {
+      restoreSavedScrollPosition(unlockAfterRestore);
+      return;
+    }
+
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        restoreSavedScrollPosition(unlockAfterRestore);
+      });
+    });
+  };
+
+  const queueThreadScrollToBottom = (nextMessages: ChatMessage[]) => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    window.requestAnimationFrame(() => {
+      const viewport = scrollViewportRef.current;
+      if (!viewport) {
+        return;
+      }
+
+      viewport.scrollTop = viewport.scrollHeight;
+      savedScrollTopRef.current = viewport.scrollTop;
+      persistPanelState(nextMessages, savedScrollTopRef.current);
+    });
+  };
+
+  const resetThreadScrollPosition = (nextMessages: ChatMessage[]) => {
+    savedScrollTopRef.current = 0;
+    if (scrollViewportRef.current) {
+      scrollViewportRef.current.scrollTop = 0;
+    }
+    persistPanelState(nextMessages, 0);
+  };
+
+  const setSharedBusy = (nextIsBusy: boolean) => {
+    isBusyRef.current = nextIsBusy;
+    inFlightUpdatedAtRef.current = nextIsBusy ? Date.now() : 0;
+    setIsBusy(nextIsBusy);
+  };
+
+  const setSharedAwaitingFirstToken = (nextIsAwaiting: boolean) => {
+    isAwaitingFirstTokenRef.current = nextIsAwaiting;
+    setIsAwaitingFirstToken(nextIsAwaiting);
+  };
+
+  const notifyPanelSizeChange = (nextPanelSize: AssistantPanelSize) => {
+    if (onRequestPanelSizeToggle) {
+      onRequestPanelSizeToggle(nextPanelSize);
+      return;
+    }
+
+    postParentMessage("assistant-embed:set-panel-size", {
+      size: nextPanelSize,
+    });
+  };
+
+  const setSharedPanelSize = (
+    nextPanelSize: AssistantPanelSize,
+    shouldNotifyShell = true,
+  ) => {
+    panelSizeRef.current = nextPanelSize;
+    setLocalPanelSize(nextPanelSize);
+    persistPanelState(messagesRef.current, savedScrollTopRef.current, {
+      allowBusyListenerWrite: true,
+      refreshInFlightTimestamp: false,
+    });
+
+    if (shouldNotifyShell) {
+      notifyPanelSizeChange(nextPanelSize);
+    }
+  };
+
+  const applyPersistedPanelState = (nextState: PersistedPanelState) => {
+    messagesRef.current = nextState.messages;
+    savedScrollTopRef.current = nextState.scrollTop;
+    isBusyRef.current = nextState.inFlight;
+    isAwaitingFirstTokenRef.current = nextState.isAwaitingFirstToken;
+    inFlightUpdatedAtRef.current = nextState.inFlightUpdatedAt;
+    panelSizeRef.current = nextState.panelSize;
+    skipNextMessagesPersistRef.current = true;
+    setMessages(nextState.messages);
+    setIsBusy(nextState.inFlight);
+    setIsAwaitingFirstToken(nextState.isAwaitingFirstToken);
+    setLocalPanelSize(nextState.panelSize);
+    queueSavedScrollRestore();
+  };
+
+  const requestPanelOpen = () => {
+    if (onRequestOpen) {
+      onRequestOpen();
+      return;
+    }
+
+    postParentMessage("assistant-embed:open");
+  };
+
+  const clearPendingHandoff = (handoffId: string) => {
+    const pending = pendingHandoffsRef.current.get(handoffId);
+    if (!pending) {
+      return;
+    }
+
+    window.clearTimeout(pending.timeoutId);
+    pendingHandoffsRef.current.delete(handoffId);
+  };
+
+  const openBlankLinkWithHandoff = (
+    navigationRequest: CurrentLinkNavigationRequest,
+  ) => {
+    if (typeof window === "undefined") {
+      return false;
+    }
+
+    snapshotThreadScrollPosition();
+
+    const handoffId = createMessageId();
+    const targetWindow = window.open(
+      buildHandoffUrl(navigationRequest.href, handoffId),
+      "_blank",
+    );
+    if (!targetWindow) {
+      return false;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      pendingHandoffsRef.current.delete(handoffId);
+    }, 30000);
+
+    pendingHandoffsRef.current.set(handoffId, {
+      state: {
+        messages: messagesRef.current,
+        scrollTop: savedScrollTopRef.current,
+        inFlight: isBusyRef.current,
+        isAwaitingFirstToken:
+          isBusyRef.current && isAwaitingFirstTokenRef.current,
+        inFlightUpdatedAt:
+          isBusyRef.current && activeRequestAbortRef.current
+            ? Date.now()
+            : inFlightUpdatedAtRef.current,
+        panelSize: panelSizeRef.current,
+      },
+      targetWindow,
+      timeoutId,
+    });
+
+    return true;
+  };
+
+  useEffect(() => {
+    return () => {
+      activeRequestAbortRef.current?.abort();
+      activeRequestAbortRef.current = null;
+      if (
+        typeof window !== "undefined" &&
+        scrollPersistenceFrameRef.current !== null
+      ) {
+        window.cancelAnimationFrame(scrollPersistenceFrameRef.current);
+      }
+      clearScrollPersistenceUnlockTimeout();
+      for (const handoffId of pendingHandoffsRef.current.keys()) {
+        clearPendingHandoff(handoffId);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    messagesRef.current = messages;
+    if (skipNextMessagesPersistRef.current) {
+      skipNextMessagesPersistRef.current = false;
+      return;
+    }
+    persistPanelState(messages);
+  }, [messages]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    if (!isBusy || !activeRequestAbortRef.current) {
+      return;
+    }
+
+    const inFlightHeartbeat = window.setInterval(() => {
+      if (!activeRequestAbortRef.current) {
+        return;
+      }
+
+      persistPanelState();
+    }, IN_FLIGHT_HEARTBEAT_MS);
+
+    return () => {
+      window.clearInterval(inFlightHeartbeat);
+    };
+  }, [isBusy]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const handleStorage = (event: StorageEvent) => {
+      if (
+        event.key !== ASSISTANT_PANEL_STORAGE_KEY ||
+        event.newValue === null
+      ) {
+        return;
+      }
+
+      if (activeRequestAbortRef.current) {
+        return;
+      }
+
+      applyPersistedPanelState(parsePersistedPanelState(event.newValue));
+    };
+
+    window.addEventListener("storage", handleStorage);
+    return () => {
+      window.removeEventListener("storage", handleStorage);
+    };
+  }, []);
+
+  useEffect(() => {
+    queueSavedScrollRestore();
+
+    if (typeof document === "undefined") {
+      return;
+    }
+
+    const persistCurrentScrollPosition = () => {
+      if (isScrollPersistenceLockedRef.current) {
+        return;
+      }
+
+      const viewport = scrollViewportRef.current;
+      if (!viewport) {
+        return;
+      }
+
+      savedScrollTopRef.current = viewport.scrollTop;
+      persistPanelState();
+    };
+
+    const handleAfterSwap = () => {
+      queueSavedScrollRestore(isScrollPersistenceLockedRef.current);
+    };
+
+    document.addEventListener(
+      "astro:before-preparation",
+      persistCurrentScrollPosition,
+    );
+    document.addEventListener("astro:after-swap", handleAfterSwap);
+    return () => {
+      document.removeEventListener(
+        "astro:before-preparation",
+        persistCurrentScrollPosition,
+      );
+      document.removeEventListener("astro:after-swap", handleAfterSwap);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const handleHandoffMessage = (event: MessageEvent) => {
+      if (
+        event.origin !== window.location.origin ||
+        !event.data ||
+        typeof event.data !== "object"
+      ) {
+        return;
+      }
+
+      const data = event.data as {
+        type?: unknown;
+        handoffId?: unknown;
+      };
+      if (typeof data.handoffId !== "string") {
+        return;
+      }
+
+      const pending = pendingHandoffsRef.current.get(data.handoffId);
+      if (!pending || event.source !== pending.targetWindow) {
+        return;
+      }
+
+      if (data.type === HANDOFF_READY_TYPE) {
+        pending.targetWindow.postMessage(
+          {
+            type: HANDOFF_STATE_TYPE,
+            handoffId: data.handoffId,
+            state: pending.state,
+          },
+          window.location.origin,
+        );
+        return;
+      }
+
+      if (data.type === HANDOFF_ACK_TYPE) {
+        clearPendingHandoff(data.handoffId);
+      }
+    };
+
+    window.addEventListener("message", handleHandoffMessage);
+    return () => {
+      window.removeEventListener("message", handleHandoffMessage);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const { handoffId, shouldOpen } = readAssistantUrlSignal();
+    if (!handoffId && !shouldOpen) {
+      return;
+    }
+
+    requestPanelOpen();
+    clearAssistantUrlSignal();
+
+    if (!handoffId || !window.opener) {
+      return;
+    }
+
+    const handleIncomingHandoff = (event: MessageEvent) => {
+      if (
+        event.origin !== window.location.origin ||
+        event.source !== window.opener ||
+        !event.data ||
+        typeof event.data !== "object"
+      ) {
+        return;
+      }
+
+      const data = event.data as {
+        type?: unknown;
+        handoffId?: unknown;
+        state?: unknown;
+      };
+      if (data.type !== HANDOFF_STATE_TYPE || data.handoffId !== handoffId) {
+        return;
+      }
+
+      const handoffState = normalizePersistedPanelState(data.state);
+      const nextState = {
+        ...handoffState,
+        inFlight: isBusyRef.current,
+        isAwaitingFirstToken:
+          isBusyRef.current && isAwaitingFirstTokenRef.current,
+        inFlightUpdatedAt: isBusyRef.current ? inFlightUpdatedAtRef.current : 0,
+      };
+      applyPersistedPanelState(nextState);
+      writePersistedPanelState(nextState);
+
+      window.opener?.postMessage(
+        { type: HANDOFF_ACK_TYPE, handoffId },
+        window.location.origin,
+      );
+      window.removeEventListener("message", handleIncomingHandoff);
+    };
+
+    window.addEventListener("message", handleIncomingHandoff);
+    window.opener.postMessage(
+      { type: HANDOFF_READY_TYPE, handoffId },
+      window.location.origin,
+    );
+
+    const handoffTimeout = window.setTimeout(() => {
+      window.removeEventListener("message", handleIncomingHandoff);
+    }, 5000);
+
+    return () => {
+      window.clearTimeout(handoffTimeout);
+      window.removeEventListener("message", handleIncomingHandoff);
+    };
+  }, []);
+
+  const resizeChatInputTextarea = () => {
+    const textarea = inputRef.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 minHeight = lineHeight + paddingTop + paddingBottom;
+    const measuredScrollHeight = Math.max(textarea.scrollHeight, minHeight);
+    const maxHeight = lineHeight * 11.2 + paddingTop + paddingBottom;
+    const nextHeight = Math.min(measuredScrollHeight, maxHeight);
+
+    textarea.style.height = `${nextHeight}px`;
+    textarea.style.overflowY =
+      measuredScrollHeight > maxHeight ? "auto" : "hidden";
+  };
+
+  useEffect(() => {
+    resizeChatInputTextarea();
+  }, [input]);
+
+  useEffect(() => {
+    if (panelSize) {
+      setSharedPanelSize(panelSize, false);
+    }
+  }, [panelSize]);
+
+  useEffect(() => {
+    notifyPanelSizeChange(resolvedPanelSize);
+  }, [resolvedPanelSize]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const handlePanelMessage = (event: MessageEvent) => {
+      if (!event.data || typeof event.data !== "object") {
+        return;
+      }
+
+      const data = event.data as {
+        type?: unknown;
+        size?: unknown;
+        isFullscreen?: unknown;
+      };
+
+      if (data.type === "assistant-embed:panel-opened") {
+        setEmptyStateAnimationKey((previous) => previous + 1);
+        queueSavedScrollRestore();
+        postParentMessage("assistant-embed:get-panel-layout");
+        return;
+      }
+
+      if (data.type === "assistant-embed:set-panel-layout") {
+        setIsShellFullscreen(data.isFullscreen === true);
+        return;
+      }
+
+      if (
+        data.type === "assistant-embed:set-panel-size" &&
+        (data.size === "default" || data.size === "expanded")
+      ) {
+        setSharedPanelSize(data.size, true);
+      }
+    };
+
+    window.addEventListener("message", handlePanelMessage);
+    return () => {
+      window.removeEventListener("message", handlePanelMessage);
+    };
+  }, []);
+
+  useEffect(() => {
+    setEmptyStateAnimationKey((previous) => previous + 1);
+    queueSavedScrollRestore();
+  }, [openSignal]);
+
+  const handleStartNewChat = () => {
+    activeRequestAbortRef.current?.abort();
+    activeRequestAbortRef.current = null;
+    setSharedBusy(false);
+    setSharedAwaitingFirstToken(false);
+    resetThreadScrollPosition([]);
+    setMessages([]);
+    setInput("");
+    setErrorMessage("");
+    setShowUnavailableState(false);
+  };
+
+  const handleRequestClose = () => {
+    if (onRequestClose) {
+      onRequestClose();
+      return;
+    }
+
+    postParentMessage("assistant-embed:close");
+  };
+
+  const handlePanelSizeToggle = () => {
+    const nextPanelSize =
+      resolvedPanelSize === "expanded" ? "default" : "expanded";
+    setSharedPanelSize(nextPanelSize);
+  };
+
+  const handleUnavailableBack = () => {
+    activeRequestAbortRef.current?.abort();
+    activeRequestAbortRef.current = null;
+    setSharedBusy(false);
+    setSharedAwaitingFirstToken(false);
+    resetThreadScrollPosition([]);
+    setMessages([]);
+    setInput("");
+    setErrorMessage("");
+    setShowUnavailableState(false);
+  };
+
+  const submitPrompt = async (rawPrompt: string) => {
+    const prompt = rawPrompt.trim();
+    if (!prompt || isBusy || showUnavailableState) {
+      return;
+    }
+
+    if (!isChatAvailable || !canSendChatRequest) {
+      setShowUnavailableState(true);
+      return;
+    }
+
+    setErrorMessage("");
+    setSharedBusy(true);
+    setSharedAwaitingFirstToken(true);
+
+    const userMessage: ChatMessage = {
+      id: createMessageId(),
+      role: "user",
+      content: prompt,
+    };
+    const assistantId = createMessageId();
+    const nextConversation = [...messages, userMessage];
+
+    setInput("");
+    setMessages(nextConversation);
+    queueThreadScrollToBottom(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(resolvedApiPathRef.current, {
+        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: AssistantStreamEvent;
+          try {
+            parsed = JSON.parse(dataPayload) as AssistantStreamEvent;
+          } catch {
+            continue;
+          }
+
+          if (
+            parsed.type === "text-delta" &&
+            typeof parsed.delta === "string" &&
+            parsed.delta.length > 0
+          ) {
+            if (!hasReceivedFirstTextDelta) {
+              hasReceivedFirstTextDelta = true;
+              setSharedAwaitingFirstToken(false);
+            }
+
+            setMessages((previous) => {
+              const existingAssistantMessage = previous.find(
+                (message) => message.id === assistantId,
+              );
+
+              if (!existingAssistantMessage) {
+                return [
+                  ...previous,
+                  {
+                    id: assistantId,
+                    role: "assistant",
+                    content: parsed.delta ?? "",
+                  },
+                ];
+              }
+
+              return previous.map((message) =>
+                message.id === assistantId
+                  ? {
+                      ...message,
+                      content: `${message.content}${parsed.delta ?? ""}`,
+                    }
+                  : 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;
+      }
+      setSharedBusy(false);
+      setSharedAwaitingFirstToken(false);
+      persistPanelState();
+    }
+  };
+
+  const handleSubmit = async (event: Event) => {
+    event.preventDefault();
+    await submitPrompt(input);
+  };
+
+  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) {
+      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);
+      })();
+      return;
+    }
+
+    const blankNavigationRequest =
+      linkTarget === "blank"
+        ? getSameOriginBlankNavigationRequest(event)
+        : null;
+    if (blankNavigationRequest) {
+      event.preventDefault();
+      event.stopPropagation();
+      const didOpen = openBlankLinkWithHandoff(blankNavigationRequest);
+      if (!didOpen && typeof window !== "undefined") {
+        window.open(
+          blankNavigationRequest.href,
+          "_blank",
+          "noopener,noreferrer",
+        );
+      }
+      return;
+    }
+
+    const navigationRequest =
+      linkTarget === "current" && onCurrentLinkNavigate
+        ? getSameOriginNavigationRequest(event)
+        : null;
+    if (!navigationRequest) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    snapshotThreadScrollPosition();
+    lockScrollPersistence();
+    onCurrentLinkNavigate(
+      navigationRequest.href,
+      navigationRequest.sourceElement,
+    );
+  };
+
+  const handleThreadViewportWheel = (event: ChatViewportWheelEvent) => {
+    const eventTargetElement =
+      event.target instanceof Element ? event.target : null;
+    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) {
+      return;
+    }
+
+    const horizontalIntentDelta =
+      Math.abs(event.deltaX) > 0.01
+        ? event.deltaX
+        : event.shiftKey
+          ? event.deltaY
+          : 0;
+
+    if (Math.abs(horizontalIntentDelta) <= 0.01) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const maxScrollLeft = Math.max(
+      0,
+      codeBlockScroller.scrollWidth - codeBlockScroller.clientWidth,
+    );
+
+    if (maxScrollLeft > 0) {
+      codeBlockScroller.scrollLeft = clamp(
+        codeBlockScroller.scrollLeft + horizontalIntentDelta,
+        0,
+        maxScrollLeft,
+      );
+    }
+  };
+
+  const handleThreadViewportScroll = (event: ChatViewportScrollEvent) => {
+    if (isScrollPersistenceLockedRef.current) {
+      return;
+    }
+
+    savedScrollTopRef.current = event.currentTarget.scrollTop;
+
+    if (
+      typeof window === "undefined" ||
+      scrollPersistenceFrameRef.current !== null
+    ) {
+      return;
+    }
+
+    scrollPersistenceFrameRef.current = window.requestAnimationFrame(() => {
+      scrollPersistenceFrameRef.current = null;
+      persistPanelState();
+    });
+  };
+
+  const panelClassName = [
+    "relative flex min-h-0 flex-col overflow-hidden text-neutral-900 shadow-2xl dark:text-neutral-50",
+    panelSurface === "inline"
+      ? "h-full rounded-2xl"
+      : "h-dvh sm:h-screen sm:rounded-2xl",
+  ].join(" ");
+
+  return (
+    <div className={panelClassName}>
+      <header className="flex items-center justify-between gap-2 px-2 pt-2 pb-1">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <AssistantPanelIcon
+            color={launcherIconColor}
+            imageSrc={launcherIconImageSrc}
+            className="assistant-embed-header-icon inline-flex size-9 shrink-0 items-center justify-center rounded-md dark:border-[0.5px] border-neutral-900/7 bg-radial from-neutral-700/5 dark:from-white/7 to-neutral-900/7 dark:to-white/5 to-60% text-neutral-900 dark:border-white/7 dark:text-neutral-50 [&_img]:block [&_img]:size-5.5 [&_img]:object-contain [&_svg]:static [&_svg]:block [&_svg]:size-5 [&_svg]:transform-none [&_svg]:opacity-100"
+          />
+          <div className="min-w-0 space-y-px">
+            <p className="truncate text-sm font-medium leading-3.5 text-neutral-900 dark:text-neutral-50">
+              {docsTitle}
+            </p>
+            <p className="text-xs leading-3 text-neutral-500/80 dark:text-neutral-400">
+              Assistant
+            </p>
+          </div>
+          {messages.length > 0 ? (
+            <button
+              type="button"
+              className="shrink-0 inline-flex items-center gap-1.5 rounded-md border border-neutral-900/8 px-2 py-1 ml-1.5 text-[12px] text-neutral-500 transition hover:bg-neutral-900/4 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-white/5 dark:text-neutral-300 dark:hover:bg-white/10 cursor-pointer"
+              onClick={handleStartNewChat}
+              aria-label="Clear chat"
+              title="Clear chat"
+            >
+              <Icon
+                icon="lucide:trash-2"
+                className="size-3.5 -ml-px"
+                aria-hidden="true"
+              />
+              Clear
+            </button>
+          ) : null}
+        </div>
+        <div className="flex shrink-0 items-center">
+          {!isShellFullscreen ? (
+            <button
+              type="button"
+              className="inline-flex items-center justify-center rounded-md size-9 rotate-90 text-[13px] text-neutral-500 hover:bg-neutral-900/5 dark:text-neutral-300 dark:hover:bg-white/10 transition cursor-pointer"
+              onClick={handlePanelSizeToggle}
+              aria-label={
+                resolvedPanelSize === "expanded"
+                  ? "Use default panel size"
+                  : "Expand panel"
+              }
+              title={
+                resolvedPanelSize === "expanded"
+                  ? "Default size"
+                  : "Expand panel"
+              }
+            >
+              <Icon
+                icon={
+                  resolvedPanelSize === "expanded"
+                    ? "lucide:minimize-2"
+                    : "lucide:maximize-2"
+                }
+                className="size-4"
+                aria-hidden="true"
+              />
+            </button>
+          ) : null}
+          <button
+            type="button"
+            className="inline-flex items-center justify-center rounded-md size-9 text-[13px] text-neutral-500 hover:bg-neutral-900/5 dark:text-neutral-300 dark:hover:bg-white/10 transition cursor-pointer"
+            onClick={handleRequestClose}
+            aria-label="Close chat"
+            title="Close"
+          >
+            <Icon icon="lucide:x" className="size-5" aria-hidden="true" />
+          </button>
+        </div>
+      </header>
+
+      {!showUnavailableState ? (
+        <>
+          <div
+            ref={scrollViewportRef}
+            className={`mask-t-from-[calc(100%-1rem)] flex-1 overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden px-4 py-4 ${messages.length > 0 ? "pb-60" : ""} mb-10 space-y-6`}
+            onScroll={handleThreadViewportScroll}
+            onWheel={handleThreadViewportWheel}
+          >
+            {messages.length === 0 ? (
+              <div
+                key={emptyStateAnimationKey}
+                className="flex min-h-full flex-col items-center justify-center px-1. pb-28. pt-8. text-center"
+              >
+                <AssistantPanelIcon
+                  color={launcherIconColor}
+                  imageSrc={launcherIconImageSrc}
+                  className="assistant-empty-state-item assistant-embed-header-icon inline-flex size-16 shrink-0 items-center justify-center rounded-xl border-[0.5px] border-neutral-900/7 bg-white/90 text-neutral-900 shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-4px_rgba(0,0,0,0.08)] dark:border-white/10 dark:bg-white/5 dark:text-neutral-50 dark:shadow-none [&_img]:block [&_img]:size-10 [&_img]:object-contain [&_svg]:static [&_svg]:block [&_svg]:size-9 [&_svg]:transform-none [&_svg]:opacity-100"
+                  style={
+                    {
+                      "--assistant-empty-state-delay": "200ms",
+                    } as JSX.CSSProperties
+                  }
+                />
+                <p
+                  className="assistant-empty-state-item mt-3 text-3xl font-[450] leading-9 text-neutral-900 dark:text-neutral-50"
+                  style={
+                    {
+                      "--assistant-empty-state-delay": "300ms",
+                    } as JSX.CSSProperties
+                  }
+                >
+                  {emptyStateHeading}
+                </p>
+                {visibleEmptyStateQuestions.length > 0 ? (
+                  <div className="mt-10 flex w-full flex-col items-center gap-2">
+                    {visibleEmptyStateQuestions.map((question, index) => (
+                      <button
+                        key={question}
+                        type="button"
+                        className="assistant-empty-state-item w-fit rounded-full border-neutral-900/8 bg-white/90 px-3.5 py-2 text-left text-[13px] leading-5 text-neutral-700 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.04),0px_0px_0px_1px_rgba(0,0,0,0.06)_inset,0px_-1px_0px_0px_rgba(0,0,0,0.06)_inset] transition hover:bg-white dark:bg-white/4 dark:text-neutral-200 dark:hover:bg-white/8 cursor-pointer dark:shadow-[0_1px_3px_0_rgba(0,0,0,0.04),inset_0_1px_0_0_rgba(255,255,255,0.04),inset_0_0_0_1px_rgba(0,0,0,0.06),inset_0_-1px_0_0_rgba(0,0,0,0.06),inset_0_0_0_1px_rgba(196,196,196,0.07)]"
+                        style={
+                          {
+                            "--assistant-empty-state-delay": `${400 + index * 100}ms`,
+                          } as JSX.CSSProperties
+                        }
+                        disabled={isBusy}
+                        onClick={() => {
+                          void submitPrompt(question);
+                        }}
+                      >
+                        {question}
+                      </button>
+                    ))}
+                  </div>
+                ) : null}
+              </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 text-[15px]! 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 ml-2 px-3 py-1.5 rounded-2xl rounded-br-sm bg-neutral-900/5 text-neutral-700/85 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, linkTarget),
+                    }}
+                  />
+                </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="absolute z-10 bottom-0 inset-x-0 px-3 pb-3"
+            onSubmit={(event) => {
+              void handleSubmit(event);
+            }}
+          >
+            <div className="flex gap-2 rounded-[24px] bg-white dark:bg-(--rd-code-surface) shadow-[0px_1px_3px_0px_rgba(0,0,0,0.04),0px_0px_0px_1px_rgba(0,0,0,0.06)_inset,0px_-1px_0px_0px_rgba(0,0,0,0.06)_inset] dark:shadow-[0_1px_3px_0_rgba(0,0,0,0.04),inset_0_1px_0_0_rgba(255,255,255,0.04),inset_0_0_0_1px_rgba(0,0,0,0.06),inset_0_-1px_0_0_rgba(0,0,0,0.06),inset_0_0_0_1px_rgba(196,196,196,0.07)]">
+              <textarea
+                ref={inputRef}
+                value={input}
+                onInput={(event) => {
+                  setInput((event.target as HTMLTextAreaElement).value);
+                }}
+                onKeyDown={handleChatInputKeyDown}
+                placeholder="Ask a question..."
+                className="text-sm my-auto min-w-0 flex-1 bg-transparent pl-4 py-2.5 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 className="p-1 pl-0 mt-auto">
+                <button
+                  type="submit"
+                  className="assistant-embed-send-button flex items-center justify-center rounded-full size-9 disabled:opacity-90 hover:opacity-95 cursor-pointer"
+                  style={
+                    {
+                      "--assistant-embed-send-theme-light":
+                        launcherThemeColorLight,
+                      "--assistant-embed-send-theme-dark":
+                        launcherThemeColorDark,
+                      "--assistant-embed-send-foreground-light":
+                        launcherIconColorLight,
+                      "--assistant-embed-send-foreground-dark":
+                        launcherIconColorDark,
+                    } as JSX.CSSProperties
+                  }
+                  disabled={isBusy || input.trim().length === 0}
+                  aria-label="Send message"
+                >
+                  <Icon
+                    icon="lucide:arrow-up"
+                    className="size-4.5 **:stroke-[2.2]"
+                    aria-hidden="true"
+                  />
+                </button>
+              </div>
+            </div>
+          </form>
+        </>
+      ) : (
+        <div className="flex flex-1 items-center justify-center px-5 text-center">
+          <div className="flex max-w-64 flex-col items-center gap-3">
+            <AssistantPanelIcon
+              color={launcherIconColor}
+              imageSrc={launcherIconImageSrc}
+              className="assistant-embed-unavailable-icon inline-flex size-11 items-center justify-center rounded-full border border-neutral-900/7 bg-neutral-100 text-neutral-900 dark:border-white/10 dark:bg-white/5 dark:text-neutral-50 [&_img]:block [&_img]:size-5 [&_img]:object-contain [&_svg]:static [&_svg]:block [&_svg]:size-5 [&_svg]:transform-none [&_svg]:opacity-100"
+            />
+            <p className="text-sm text-neutral-500 dark:text-neutral-300">
+              {unavailableMessage}
+            </p>
+            <button
+              type="button"
+              className="mt-1 inline-flex items-center gap-1.5 rounded-md border border-neutral-900/8 bg-white px-2.5 py-1.5 text-[13px] font-medium text-neutral-700 shadow-xs transition hover:bg-neutral-50 dark:border-white/10 dark:bg-white/5 dark:text-neutral-200 dark:hover:bg-white/10 cursor-pointer"
+              onClick={handleUnavailableBack}
+            >
+              <Icon
+                icon="lucide:arrow-left"
+                className="size-3.5"
+                aria-hidden="true"
+              />
+              Back
+            </button>
+          </div>
+        </div>
+      )}
+
+      <style>{`
+        @keyframes assistant-empty-state-enter {
+          0% {
+            opacity: 0;
+            filter: blur(8px);
+            transform: translateY(12px);
+          }
+          100% {
+            opacity: 1;
+            filter: blur(0);
+            transform: translateY(0);
+          }
+        }
+
+        .assistant-empty-state-item {
+          animation: assistant-empty-state-enter 840ms cubic-bezier(0.22, 1, 0.36, 1) both;
+          animation-delay: var(--assistant-empty-state-delay, 0ms);
+          will-change: opacity, filter, transform;
+        }
+
+        @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,
+        .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;
+        }
+
+        .assistant-embed-send-button {
+          --assistant-embed-send-theme: var(
+            --assistant-embed-send-theme-light
+          );
+          --assistant-embed-send-foreground: var(
+            --assistant-embed-send-foreground-light
+          );
+          color: var(--assistant-embed-send-foreground);
+          background: linear-gradient(
+            to bottom,
+            color-mix(
+              in oklab,
+              var(--assistant-embed-send-theme) 88%,
+              white
+            ),
+            color-mix(
+              in oklab,
+              var(--assistant-embed-send-theme) 90%,
+              black
+            )
+          );
+        }
+
+        .dark .assistant-embed-send-button,
+        [data-theme="dark"] .assistant-embed-send-button {
+          --assistant-embed-send-theme: var(
+            --assistant-embed-send-theme-dark
+          );
+          --assistant-embed-send-foreground: var(
+            --assistant-embed-send-foreground-dark
+          );
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .assistant-empty-state-item {
+            animation: none;
+          }
+        }
+      `}</style>
+    </div>
+  );
+}