radiant-docs 0.1.39 → 0.1.41

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

@@ -0,0 +1,1693 @@
+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";
+
+type AssistantLinkTarget = "current" | "blank";
+
+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;
+  onRequestClose?: () => 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>;
+
+const STORAGE_KEY = "docs:assistant-embed-panel:v1";
+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 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);
+  }
+}
+
+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 readPersistedMessages(): ChatMessage[] {
+  if (typeof window === "undefined") {
+    return [];
+  }
+
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) {
+      return [];
+    }
+
+    const parsed = JSON.parse(raw) as { messages?: unknown };
+    if (!Array.isArray(parsed.messages)) {
+      return [];
+    }
+
+    return parsed.messages
+      .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,
+      }));
+  } catch {
+    return [];
+  }
+}
+
+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 });
+
+    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) {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  window.parent.postMessage({ type }, "*");
+}
+
+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,
+  onRequestClose,
+}: AssistantEmbedPanelProps) {
+  const [messages, setMessages] = useState<ChatMessage[]>(
+    canSendChatRequest ? readPersistedMessages : [],
+  );
+  const [input, setInput] = useState("");
+  const [isBusy, setIsBusy] = useState(false);
+  const [isAwaitingFirstToken, setIsAwaitingFirstToken] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+  const [showUnavailableState, setShowUnavailableState] =
+    useState(!isChatAvailable);
+  const [emptyStateAnimationKey, setEmptyStateAnimationKey] = useState(0);
+  const activeRequestAbortRef = useRef<AbortController | null>(null);
+  const scrollViewportRef = useRef<HTMLDivElement | null>(null);
+  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";
+
+  useEffect(() => {
+    return () => {
+      activeRequestAbortRef.current?.abort();
+      activeRequestAbortRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    try {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify({ messages }));
+    } catch {
+      // Ignore storage failures in private mode or constrained embeds.
+    }
+  }, [messages]);
+
+  useEffect(() => {
+    const viewport = scrollViewportRef.current;
+    if (!viewport) {
+      return;
+    }
+    viewport.scrollTop = viewport.scrollHeight;
+  }, [messages, isAwaitingFirstToken]);
+
+  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 (typeof window === "undefined") {
+      return;
+    }
+
+    const handlePanelMessage = (event: MessageEvent) => {
+      if (
+        !event.data ||
+        typeof event.data !== "object" ||
+        event.data.type !== "assistant-embed:panel-opened"
+      ) {
+        return;
+      }
+
+      setEmptyStateAnimationKey((previous) => previous + 1);
+    };
+
+    window.addEventListener("message", handlePanelMessage);
+    return () => {
+      window.removeEventListener("message", handlePanelMessage);
+    };
+  }, []);
+
+  useEffect(() => {
+    setEmptyStateAnimationKey((previous) => previous + 1);
+  }, [openSignal]);
+
+  const handleStartNewChat = () => {
+    activeRequestAbortRef.current?.abort();
+    activeRequestAbortRef.current = null;
+    setMessages([]);
+    setInput("");
+    setIsBusy(false);
+    setIsAwaitingFirstToken(false);
+    setErrorMessage("");
+    setShowUnavailableState(false);
+  };
+
+  const handleRequestClose = () => {
+    if (onRequestClose) {
+      onRequestClose();
+      return;
+    }
+
+    postParentMessage("assistant-embed:close");
+  };
+
+  const handleUnavailableBack = () => {
+    activeRequestAbortRef.current?.abort();
+    activeRequestAbortRef.current = null;
+    setMessages([]);
+    setInput("");
+    setIsBusy(false);
+    setIsAwaitingFirstToken(false);
+    setErrorMessage("");
+    setShowUnavailableState(false);
+  };
+
+  const submitPrompt = async (rawPrompt: string) => {
+    const prompt = rawPrompt.trim();
+    if (!prompt || isBusy || showUnavailableState) {
+      return;
+    }
+
+    if (!isChatAvailable || !canSendChatRequest) {
+      setShowUnavailableState(true);
+      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(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;
+              setIsAwaitingFirstToken(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;
+      }
+      setIsBusy(false);
+      setIsAwaitingFirstToken(false);
+    }
+  };
+
+  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) {
+      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 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 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-3 px-2 pt-2 pb-1">
+        <div className="flex min-w-0 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>
+        </div>
+        {messages.length > 0 ? (
+          <button
+            type="button"
+            className="ml-auto inline-flex items-center gap-1.5 rounded-md border border-neutral-900/8 px-2 py-1 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}
+        <button
+          type="button"
+          className="inline-flex items-center justify-center gap-1 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>
+      </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`}
+            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>
+  );
+}