radiant-docs 0.1.61 → 0.1.62

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

@@ -1,34 +1,17 @@
 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";
+import {
+  highlightAssistantCodeToHtml,
+  normalizeAssistantCodeLanguage,
+  type AssistantShikiRuntimeConfig,
+} from "../../lib/assistant-shiki-client";
 
 type AssistantLinkTarget = "current" | "blank";
 export type AssistantPanelSize = "default" | "expanded";
@@ -59,10 +42,13 @@ type AssistantEmbedPanelProps = {
   allowApiPathQueryOverride?: boolean;
   openSignal?: number;
   panelSize?: AssistantPanelSize;
+  mobileBreakpoint?: string;
+  panelFullscreenHeightBreakpoint?: string;
   onRequestOpen?: () => void;
   onRequestClose?: () => void;
   onRequestPanelSizeToggle?: (size: AssistantPanelSize) => void;
   onCurrentLinkNavigate?: (href: string, sourceElement?: Element) => void;
+  shiki?: AssistantShikiRuntimeConfig;
 };
 
 type AssistantColorByMode = {
@@ -120,41 +106,50 @@ 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 DEFAULT_ASSISTANT_MOBILE_BREAKPOINT = "640px";
+const DEFAULT_ASSISTANT_PANEL_FULLSCREEN_HEIGHT_BREAKPOINT = "560px";
 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> = {
+const markdownHtmlPromiseCache = new Map<string, Promise<string>>();
+const ASSISTANT_LANGUAGE_LABEL: Record<string, string> = {
+  bash: "Bash",
+  css: "CSS",
+  diff: "Diff",
+  go: "Go",
+  html: "HTML",
+  java: "Java",
   javascript: "JavaScript",
-  typescript: "TypeScript",
   jsx: "JSX",
-  tsx: "TSX",
   json: "JSON",
   markdown: "Markdown",
-  bash: "Bash",
-  shell: "Shell",
+  mdx: "MDX",
+  php: "PHP",
+  plaintext: "Text",
   python: "Python",
-  yaml: "YAML",
-  sql: "SQL",
+  ruby: "Ruby",
   rust: "Rust",
-  go: "Go",
-  java: "Java",
-  css: "CSS",
-  html: "HTML",
-  diff: "Diff",
-  mdx: "MDX",
+  shell: "Shell",
+  sql: "SQL",
+  tsx: "TSX",
+  typescript: "TypeScript",
+  yaml: "YAML",
 };
 
 const EXTERNAL_PROTOCOL_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*:/;
 
+function buildMarkdownCacheKey(
+  normalizedMarkdown: string,
+  linkTarget: AssistantLinkTarget,
+  shiki: AssistantShikiRuntimeConfig | undefined,
+): string {
+  return [
+    linkTarget,
+    shiki?.assetBaseUrl ?? "",
+    shiki?.syntaxThemes.light ?? "",
+    shiki?.syntaxThemes.dark ?? "",
+    normalizedMarkdown,
+  ].join("\0");
+}
+
 function normalizeRelTokens(value: unknown): string[] {
   if (Array.isArray(value)) {
     return value
@@ -395,6 +390,13 @@ function normalizePanelSize(value: unknown): AssistantPanelSize {
   return value === "expanded" ? "expanded" : "default";
 }
 
+function getPanelFullscreenMediaQuery(
+  mobileBreakpoint: string,
+  panelFullscreenHeightBreakpoint: string,
+): string {
+  return `(max-width: ${mobileBreakpoint}), (max-height: ${panelFullscreenHeightBreakpoint})`;
+}
+
 function normalizePersistedPanelState(rawState: unknown): PersistedPanelState {
   if (!rawState || typeof rawState !== "object") {
     return createEmptyPersistedPanelState();
@@ -574,32 +576,20 @@ function escapeHtml(value: string): string {
     .replaceAll("'", "&#39;");
 }
 
-function resolvePrismLanguage(rawLanguage: string): string {
-  const normalized = rawLanguage.trim().toLowerCase();
-  return PRISM_LANGUAGE_ALIAS[normalized] ?? normalized;
-}
-
-function resolvePrismLanguageLabel(language: string): string {
+function resolveAssistantLanguageLabel(language: string): string {
   const normalized = language.trim().toLowerCase();
   if (!normalized) {
     return "";
   }
 
   return (
-    PRISM_LANGUAGE_LABEL[normalized] ??
+    ASSISTANT_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) =>
@@ -697,12 +687,23 @@ function unwrapEscapedFenceCodeBlock(rawCode: string): {
   }
 
   return {
-    language: resolvePrismLanguage(languageToken),
+    language: normalizeAssistantCodeLanguage(languageToken),
     code: lines.slice(1, -1).join("\n"),
   };
 }
 
-function highlightCodeBlocksInHtml(html: string): string {
+function stripSerializedCodeBlockTrailingNewline(rawCode: string): string {
+  if (rawCode.endsWith("\n")) {
+    return rawCode.slice(0, -1);
+  }
+
+  return rawCode;
+}
+
+async function highlightCodeBlocksInHtml(
+  html: string,
+  shiki: AssistantShikiRuntimeConfig | undefined,
+): Promise<string> {
   if (typeof document === "undefined" || !html.trim()) {
     return html;
   }
@@ -711,8 +712,8 @@ function highlightCodeBlocksInHtml(html: string): string {
     const container = document.createElement("div");
     container.innerHTML = html;
 
-    const codeNodes = container.querySelectorAll("pre > code");
-    codeNodes.forEach((codeNode) => {
+    const codeNodes = Array.from(container.querySelectorAll("pre > code"));
+    for (const codeNode of codeNodes) {
       const getLanguageClassName = (element: Element | null) =>
         Array.from(element?.classList ?? []).find(
           (className) =>
@@ -741,13 +742,14 @@ function highlightCodeBlocksInHtml(html: string): string {
             }
           });
           preParent.classList.add(`language-${language}`);
-          const languageLabel = resolvePrismLanguageLabel(language);
+          const languageLabel = resolveAssistantLanguageLabel(language);
           if (languageLabel) {
             preParent.setAttribute("data-language", languageLabel);
           } else {
             preParent.removeAttribute("data-language");
           }
 
+          codeNode.setAttribute("data-rd-code-theme", "");
           ensureCodeBlockCopyButton(preParent);
         }
       };
@@ -759,7 +761,9 @@ function highlightCodeBlocksInHtml(html: string): string {
         preLanguageClassName?.replace(/^(language-|lang-)/, "") ??
         "";
 
-      let rawCode = codeNode.textContent ?? "";
+      let rawCode = stripSerializedCodeBlockTrailingNewline(
+        codeNode.textContent ?? "",
+      );
       if (!rawLanguage) {
         const unwrappedFence = unwrapEscapedFenceCodeBlock(rawCode);
         if (unwrappedFence) {
@@ -769,28 +773,37 @@ function highlightCodeBlocksInHtml(html: string): string {
       }
 
       if (!rawLanguage) {
-        return;
+        const preParent = codeNode.parentElement;
+        if (preParent instanceof HTMLPreElement) {
+          ensureCodeBlockCopyButton(preParent);
+        }
+        continue;
       }
 
-      const resolvedLanguage = resolvePrismLanguage(rawLanguage);
-      const grammar =
-        resolvePrismGrammar(resolvedLanguage) ??
-        resolvePrismGrammar(rawLanguage);
-      if (!grammar) {
-        return;
+      const resolvedLanguage = normalizeAssistantCodeLanguage(rawLanguage);
+      setLanguageClass(resolvedLanguage);
+
+      if (!shiki) {
+        codeNode.textContent = rawCode;
+        continue;
       }
 
-      setLanguageClass(resolvedLanguage);
       try {
-        const highlighted = Prism.highlight(rawCode, grammar, resolvedLanguage);
-        codeNode.innerHTML = highlighted;
+        const highlighted = await highlightAssistantCodeToHtml({
+          code: rawCode,
+          config: shiki,
+          language: resolvedLanguage,
+        });
+        setLanguageClass(highlighted.language);
+        codeNode.innerHTML = highlighted.html;
       } catch (error) {
         console.error("Assistant embed code highlighting failed", {
           language: resolvedLanguage,
           error,
         });
+        codeNode.textContent = rawCode;
       }
-    });
+    }
 
     return container.innerHTML;
   } catch (error) {
@@ -805,45 +818,139 @@ function highlightCodeBlocksInHtml(html: string): string {
 function renderMarkdownToHtml(
   markdown: string,
   linkTarget: AssistantLinkTarget,
-): string {
+  shiki: AssistantShikiRuntimeConfig | undefined,
+): Promise<string> {
   const normalizedMarkdown = markdown.replaceAll("\r\n", "\n");
-  const cacheKey = `${linkTarget}\0${normalizedMarkdown}`;
+  const cacheKey = buildMarkdownCacheKey(normalizedMarkdown, linkTarget, shiki);
   const cached = markdownHtmlCache.get(cacheKey);
   if (cached !== undefined) {
-    return cached;
+    return Promise.resolve(cached);
+  }
+
+  const cachedPromise = markdownHtmlPromiseCache.get(cacheKey);
+  if (cachedPromise) {
+    return cachedPromise;
   }
 
-  let html = "";
+  const renderPromise = (async () => {
+    let html = "";
 
-  try {
-    const processor = unified()
-      .use(remarkParse)
-      .use(remarkGfm)
-      .use(remarkRehype, { allowDangerousHtml: false })
-      .use(rehypeRebaseInternalLinks);
-
-    if (linkTarget === "blank") {
-      processor.use(rehypeOpenLinksInNewTab);
+    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 = String(
-      processor.use(rehypeStringify).processSync(normalizedMarkdown),
-    );
-  } catch {
-    html = escapeHtml(normalizedMarkdown).replaceAll("\n", "<br/>");
-  }
+    html = await highlightCodeBlocksInHtml(html, shiki);
+
+    markdownHtmlCache.set(cacheKey, html);
+    if (markdownHtmlCache.size > MARKDOWN_HTML_CACHE_LIMIT) {
+      const oldestKey = markdownHtmlCache.keys().next().value;
+      if (oldestKey) {
+        markdownHtmlCache.delete(oldestKey);
+      }
+    }
+
+    markdownHtmlPromiseCache.delete(cacheKey);
+    return html;
+  })();
+
+  markdownHtmlPromiseCache.set(cacheKey, renderPromise);
+  return renderPromise;
+}
+
+function getCachedMarkdownHtml(
+  markdown: string,
+  linkTarget: AssistantLinkTarget,
+  shiki: AssistantShikiRuntimeConfig | undefined,
+): string | undefined {
+  return markdownHtmlCache.get(
+    buildMarkdownCacheKey(markdown.replaceAll("\r\n", "\n"), linkTarget, shiki),
+  );
+}
 
-  html = highlightCodeBlocksInHtml(html);
+function AssistantMarkdownBlock({
+  className,
+  linkTarget,
+  markdown,
+  onClick,
+  onRendered,
+  shiki,
+}: {
+  className: string;
+  linkTarget: AssistantLinkTarget;
+  markdown: string;
+  onClick: (event: JSX.TargetedMouseEvent<HTMLDivElement>) => void;
+  onRendered?: () => void;
+  shiki?: AssistantShikiRuntimeConfig;
+}) {
+  const onRenderedRef = useRef(onRendered);
+  const [html, setHtml] = useState(
+    () => getCachedMarkdownHtml(markdown, linkTarget, shiki) ?? "",
+  );
 
-  markdownHtmlCache.set(cacheKey, html);
-  if (markdownHtmlCache.size > MARKDOWN_HTML_CACHE_LIMIT) {
-    const oldestKey = markdownHtmlCache.keys().next().value;
-    if (oldestKey) {
-      markdownHtmlCache.delete(oldestKey);
+  useEffect(() => {
+    onRenderedRef.current = onRendered;
+  }, [onRendered]);
+
+  useEffect(() => {
+    let isCancelled = false;
+    const cached = getCachedMarkdownHtml(markdown, linkTarget, shiki);
+    if (cached !== undefined) {
+      setHtml(cached);
+      onRenderedRef.current?.();
+      return () => {
+        isCancelled = true;
+      };
     }
-  }
 
-  return html;
+    void renderMarkdownToHtml(markdown, linkTarget, shiki)
+      .then((nextHtml) => {
+        if (isCancelled) return;
+        setHtml((previousHtml) =>
+          previousHtml === nextHtml ? previousHtml : nextHtml,
+        );
+        onRenderedRef.current?.();
+      })
+      .catch((error) => {
+        if (isCancelled) return;
+        console.error("Assistant embed markdown rendering failed", error);
+        setHtml(escapeHtml(markdown).replaceAll("\n", "<br/>"));
+        onRenderedRef.current?.();
+      });
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [
+    linkTarget,
+    markdown,
+    shiki?.assetBaseUrl,
+    shiki?.syntaxThemes.dark,
+    shiki?.syntaxThemes.light,
+  ]);
+
+  return (
+    <div
+      className={className}
+      onClick={onClick}
+      dangerouslySetInnerHTML={{
+        __html: html,
+      }}
+    />
+  );
 }
 
 function extractErrorMessage(rawBody: string): string {
@@ -944,11 +1051,18 @@ export default function AssistantEmbedPanel({
   allowApiPathQueryOverride = true,
   openSignal = 0,
   panelSize,
+  mobileBreakpoint = DEFAULT_ASSISTANT_MOBILE_BREAKPOINT,
+  panelFullscreenHeightBreakpoint = DEFAULT_ASSISTANT_PANEL_FULLSCREEN_HEIGHT_BREAKPOINT,
   onRequestOpen,
   onRequestClose,
   onRequestPanelSizeToggle,
   onCurrentLinkNavigate,
+  shiki,
 }: AssistantEmbedPanelProps) {
+  const panelFullscreenMediaQuery = getPanelFullscreenMediaQuery(
+    mobileBreakpoint,
+    panelFullscreenHeightBreakpoint,
+  );
   const [initialPanelState] = useState<PersistedPanelState>(() =>
     canSendChatRequest
       ? readPersistedPanelState()
@@ -969,7 +1083,17 @@ export default function AssistantEmbedPanel({
   const [localPanelSize, setLocalPanelSize] = useState<AssistantPanelSize>(
     panelSize ?? initialPanelState.panelSize,
   );
-  const [isShellFullscreen, setIsShellFullscreen] = useState(false);
+  const [isShellFullscreen, setIsShellFullscreen] = useState(() => {
+    if (
+      panelSurface !== "inline" ||
+      typeof window === "undefined" ||
+      typeof window.matchMedia !== "function"
+    ) {
+      return false;
+    }
+
+    return window.matchMedia(panelFullscreenMediaQuery).matches;
+  });
   const activeRequestAbortRef = useRef<AbortController | null>(null);
   const scrollViewportRef = useRef<HTMLDivElement | null>(null);
   const savedScrollTopRef = useRef(initialPanelState.scrollTop);
@@ -1541,6 +1665,27 @@ export default function AssistantEmbedPanel({
     notifyPanelSizeChange(resolvedPanelSize);
   }, [resolvedPanelSize]);
 
+  useEffect(() => {
+    if (
+      panelSurface !== "inline" ||
+      typeof window === "undefined" ||
+      typeof window.matchMedia !== "function"
+    ) {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia(panelFullscreenMediaQuery);
+    const updateShellLayout = () => {
+      setIsShellFullscreen(mediaQuery.matches);
+    };
+
+    updateShellLayout();
+    mediaQuery.addEventListener("change", updateShellLayout);
+    return () => {
+      mediaQuery.removeEventListener("change", updateShellLayout);
+    };
+  }, [panelFullscreenMediaQuery, panelSurface]);
+
   useEffect(() => {
     if (typeof window === "undefined") {
       return;
@@ -1949,6 +2094,12 @@ export default function AssistantEmbedPanel({
     });
   };
 
+  const handleMarkdownRendered = () => {
+    if (isBusyRef.current) {
+      queueThreadScrollToBottom(messagesRef.current);
+    }
+  };
+
   const panelClassName = [
     "relative flex min-h-0 flex-col overflow-hidden text-neutral-900 shadow-2xl dark:text-neutral-50",
     panelSurface === "inline"
@@ -2041,7 +2192,7 @@ export default function AssistantEmbedPanel({
             {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"
+                className="flex min-h-full flex-col items-center justify-center py-8 text-center"
               >
                 <AssistantPanelIcon
                   color={launcherIconColor}
@@ -2069,7 +2220,7 @@ export default function AssistantEmbedPanel({
                       <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)]"
+                        className="assistant-empty-state-item w-fit rounded-full border-neutral-900/8 bg-white/90 px-3.5 py-2 text-center 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`,
@@ -2101,17 +2252,18 @@ export default function AssistantEmbedPanel({
                   key={message.id}
                   className={isUser ? "text-right" : "text-left"}
                 >
-                  <div
+                  <AssistantMarkdownBlock
                     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(" ")}
+                    linkTarget={linkTarget}
+                    markdown={message.content}
                     onClick={handleRenderedMarkdownClick}
-                    dangerouslySetInnerHTML={{
-                      __html: renderMarkdownToHtml(message.content, linkTarget),
-                    }}
+                    onRendered={handleMarkdownRendered}
+                    shiki={shiki}
                   />
                 </div>
               );
@@ -2152,7 +2304,10 @@ export default function AssistantEmbedPanel({
                 }}
                 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"
+                className={[
+                  "assistant-embed-input 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",
+                  isShellFullscreen ? "text-base" : "text-sm",
+                ].join(" ")}
                 disabled={isBusy}
                 rows={1}
               />
@@ -2261,7 +2416,7 @@ export default function AssistantEmbedPanel({
           max-width: 100%;
           min-width: 0;
           box-sizing: border-box;
-          padding-top: 2.25rem;
+          padding: 2.25rem 0 0 !important;
           background: var(--color-neutral-50) !important;
           overflow-x: hidden;
           overflow-y: hidden;
@@ -2326,10 +2481,6 @@ export default function AssistantEmbedPanel({
           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%,
@@ -2344,22 +2495,14 @@ export default function AssistantEmbedPanel({
         }
 
         .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);
         }
 
@@ -2437,6 +2580,7 @@ export default function AssistantEmbedPanel({
           display: block;
           width: 100%;
           min-width: 100%;
+          padding-block: 0.625rem;
           background: transparent !important;
           white-space: inherit;
           word-break: normal;
@@ -2482,164 +2626,6 @@ export default function AssistantEmbedPanel({
           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;