radiant-docs 0.1.68 → 0.1.70

package/template/src/components/TableOfContents.astro

@@ -1,6 +1,7 @@
 ---
 import type { MarkdownHeading } from "astro";
 import { Icon } from "astro-icon/components";
+import { getConfig } from "../lib/validation";
 
 interface Props {
   headings: MarkdownHeading[];
@@ -11,6 +12,18 @@ interface GroupedHeading extends MarkdownHeading {
 }
 
 const { headings } = Astro.props;
+type TabsPresentation = "topbar" | "sidebar";
+const config = await getConfig();
+const navigationTabs = config.navigation.tabs as
+  | (typeof config.navigation.tabs & { presentation?: TabsPresentation })
+  | undefined;
+const hasTopbarNavigationTabs =
+  Array.isArray(navigationTabs?.items) &&
+  navigationTabs.items.length > 0 &&
+  (navigationTabs.presentation ?? "topbar") === "topbar";
+const stickyTopClass = hasTopbarNavigationTabs
+  ? "top-[calc(68px+44px+64px)]"
+  : "top-[calc(68px+64px)]";
 
 // Group depth 3 headings under their preceding depth 2 heading
 const groupedHeadings: GroupedHeading[] = [];
@@ -30,7 +43,7 @@ for (const heading of headings) {
 ---
 
 <nav
-  class="sticky top-[calc(68px+64px)] text-[13px]/5"
+  class:list={["sticky text-[13px]/5", stickyTopClass]}
   aria-label="Table of Contents"
   data-slugs={JSON.stringify(headings.map((h) => h.slug))}
 >

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

@@ -6,7 +6,7 @@ import AssistantEmbedPanel, {
   AssistantPanelIcon,
   type AssistantPanelSize,
 } from "./AssistantEmbedPanel";
-import type { AssistantShikiRuntimeConfig } from "../../lib/assistant-shiki-client";
+import type { AssistantShikiRuntimeConfig } from "@radiant-docs/assistant-shiki";
 import {
   DEFAULT_ASSISTANT_CHROME_CONFIG,
   type AssistantChromeConfig,

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

@@ -6,13 +6,14 @@ 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,
+  resolveAssistantLanguageLabel,
   warmAssistantShikiRuntime,
   type AssistantShikiRuntimeConfig,
-} from "../../lib/assistant-shiki-client";
+} from "@radiant-docs/assistant-shiki";
+import { getDocsBasePath, withBasePath } from "../../lib/base-path";
 
 type AssistantLinkTarget = "current" | "blank";
 export type AssistantPanelSize = "default" | "expanded";
@@ -80,6 +81,7 @@ type ChatViewportWheelEvent = JSX.TargetedWheelEvent<HTMLDivElement>;
 type ChatViewportScrollEvent = JSX.TargetedEvent<HTMLDivElement, Event>;
 
 type PersistedPanelState = {
+  conversationId: string;
   messages: ChatMessage[];
   scrollTop: number;
   inFlight: boolean;
@@ -104,6 +106,16 @@ type PendingAssistantHandoff = {
   timeoutId: number;
 };
 
+type AssistantPageContext = {
+  hostname: string | null;
+  pagePath: string | null;
+};
+
+type PendingPageContextRequest = {
+  resolve: (context: AssistantPageContext) => void;
+  timeoutId: number;
+};
+
 export const ASSISTANT_PANEL_STORAGE_KEY = "docs:assistant-embed-panel:v1";
 const HANDOFF_QUERY_PARAM = "assistantHandoff";
 const OPEN_QUERY_PARAM = "assistant";
@@ -118,30 +130,6 @@ const DEFAULT_ASSISTANT_MOBILE_BREAKPOINT = "640px";
 const DEFAULT_ASSISTANT_PANEL_FULLSCREEN_HEIGHT_BREAKPOINT = "560px";
 const markdownHtmlCache = new Map<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",
-  jsx: "JSX",
-  json: "JSON",
-  markdown: "Markdown",
-  mdx: "MDX",
-  php: "PHP",
-  plaintext: "Text",
-  python: "Python",
-  ruby: "Ruby",
-  rust: "Rust",
-  shell: "Shell",
-  sql: "SQL",
-  tsx: "TSX",
-  typescript: "TypeScript",
-  yaml: "YAML",
-};
-
 const EXTERNAL_PROTOCOL_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*:/;
 
 function buildMarkdownCacheKey(
@@ -413,6 +401,7 @@ function normalizePersistedMessages(rawMessages: unknown): ChatMessage[] {
 
 function createEmptyPersistedPanelState(): PersistedPanelState {
   return {
+    conversationId: createMessageId(),
     messages: [],
     scrollTop: 0,
     inFlight: false,
@@ -426,6 +415,12 @@ function normalizePanelSize(value: unknown): AssistantPanelSize {
   return value === "expanded" ? "expanded" : "default";
 }
 
+function normalizeConversationId(value: unknown): string {
+  return typeof value === "string" && value.trim()
+    ? value.trim().slice(0, 128)
+    : createMessageId();
+}
+
 function getPanelFullscreenMediaQuery(
   mobileBreakpoint: string,
   panelFullscreenHeightBreakpoint: string,
@@ -439,6 +434,7 @@ function normalizePersistedPanelState(rawState: unknown): PersistedPanelState {
   }
 
   const state = rawState as {
+    conversationId?: unknown;
     messages?: unknown;
     scrollTop?: unknown;
     inFlight?: unknown;
@@ -461,6 +457,7 @@ function normalizePersistedPanelState(rawState: unknown): PersistedPanelState {
       : 0;
 
   return {
+    conversationId: normalizeConversationId(state.conversationId),
     messages: normalizePersistedMessages(state.messages),
     scrollTop,
     inFlight: isInFlightFresh,
@@ -515,6 +512,7 @@ function writePersistedPanelState(state: PersistedPanelState) {
       ASSISTANT_PANEL_STORAGE_KEY,
       JSON.stringify({
         messages: state.messages,
+        conversationId: state.conversationId,
         scrollTop:
           Number.isFinite(state.scrollTop) && state.scrollTop > 0
             ? state.scrollTop
@@ -612,20 +610,6 @@ function escapeHtml(value: string): string {
     .replaceAll("'", "&#39;");
 }
 
-function resolveAssistantLanguageLabel(language: string): string {
-  const normalized = language.trim().toLowerCase();
-  if (!normalized) {
-    return "";
-  }
-
-  return (
-    ASSISTANT_LANGUAGE_LABEL[normalized] ??
-    normalized
-      .replace(/[-_]+/g, " ")
-      .replace(/\b\w/g, (char) => char.toUpperCase())
-  );
-}
-
 function ensureCodeBlockCopyButton(preElement: HTMLPreElement): void {
   const existingButton = Array.from(preElement.children).find(
     (child) =>
@@ -1004,20 +988,33 @@ function AssistantSourcesBlock({
   }
 
   return (
-    <div
-      className="ask-ai-sources ask-ai-markdown prose-rules mt-3 max-w-full min-w-0 wrap-break-word text-[15px]!"
-      onClick={onClick}
-    >
-      <p>Sources:</p>
-      <ul>
+    <div className="ask-ai-sources mt-4 max-w-full min-w-0" onClick={onClick}>
+      <div className="text-xs font-semibold text-neutral-700 dark:text-neutral-200">
+        Sources
+      </div>
+      <ul className="mt-2 flex flex-wrap gap-2">
         {visibleSources.map((source) => (
-          <li key={`${source.href}\0${source.label}`}>
+          <li
+            key={`${source.href}\0${source.label}`}
+            className="min-w-0 max-w-full"
+          >
             <a
-              href={source.href}
+              href={withBasePath(source.href)}
               target={linkTarget === "blank" ? "_blank" : undefined}
               rel={linkTarget === "blank" ? "noopener noreferrer" : undefined}
+              className="inline-flex max-w-full items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-2 py-1 text-xs font-medium text-neutral-700 transition-colors hover:bg-neutral-50 hover:text-neutral-950 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800 dark:hover:text-white"
             >
-              {source.label}
+              <Icon
+                icon="lucide:file-text"
+                className="size-3.5 shrink-0"
+                aria-hidden="true"
+              />
+              <span className="truncate">{source.label}</span>
+              <Icon
+                icon="lucide:external-link"
+                className="size-3 shrink-0 text-neutral-500 dark:text-neutral-400"
+                aria-hidden="true"
+              />
             </a>
           </li>
         ))}
@@ -1057,6 +1054,36 @@ function postParentMessage(
   window.parent.postMessage({ type, ...payload }, "*");
 }
 
+function getCurrentPageContext(): AssistantPageContext {
+  if (typeof window === "undefined") {
+    return { hostname: null, pagePath: null };
+  }
+
+  return {
+    hostname: window.location.hostname || null,
+    pagePath: window.location.pathname || "/",
+  };
+}
+
+function normalizeParentPageContext(
+  hostname: unknown,
+  pagePath: unknown,
+): AssistantPageContext {
+  const normalizedHostname =
+    typeof hostname === "string" && hostname.trim().length > 0
+      ? hostname.trim().slice(0, 512)
+      : null;
+  const normalizedPagePath =
+    typeof pagePath === "string" && pagePath.trim().startsWith("/")
+      ? pagePath.trim().slice(0, 2048)
+      : null;
+
+  return {
+    hostname: normalizedHostname,
+    pagePath: normalizedPagePath,
+  };
+}
+
 function getApiPath(
   apiPath: string,
   allowApiPathQueryOverride: boolean,
@@ -1174,6 +1201,11 @@ export default function AssistantEmbedPanel({
   const scrollPersistenceUnlockTimeoutRef = useRef<number | null>(null);
   const isScrollPersistenceLockedRef = useRef(false);
   const pendingHandoffsRef = useRef(new Map<string, PendingAssistantHandoff>());
+  const pendingPageContextRequestsRef = useRef(
+    new Map<string, PendingPageContextRequest>(),
+  );
+  const pageContextRef = useRef<AssistantPageContext>(getCurrentPageContext());
+  const conversationIdRef = useRef(initialPanelState.conversationId);
   const messagesRef = useRef(initialPanelState.messages);
   const isBusyRef = useRef(initialPanelState.inFlight);
   const isAwaitingFirstTokenRef = useRef(
@@ -1203,6 +1235,32 @@ export default function AssistantEmbedPanel({
     launcherIconColors?.dark ?? launcherIconColor ?? "#ffffff";
   const resolvedPanelSize = panelSize ?? localPanelSize;
 
+  const requestPageContext = (): Promise<AssistantPageContext> => {
+    const currentContext = getCurrentPageContext();
+    if (
+      panelSurface !== "iframe" ||
+      typeof window === "undefined" ||
+      window.parent === window
+    ) {
+      pageContextRef.current = currentContext;
+      return Promise.resolve(currentContext);
+    }
+
+    return new Promise((resolve) => {
+      const requestId = createMessageId();
+      const timeoutId = window.setTimeout(() => {
+        pendingPageContextRequestsRef.current.delete(requestId);
+        resolve(pageContextRef.current);
+      }, 250);
+
+      pendingPageContextRequestsRef.current.set(requestId, {
+        resolve,
+        timeoutId,
+      });
+      postParentMessage("assistant-embed:get-page-context", { requestId });
+    });
+  };
+
   const persistPanelState = (
     nextMessages = messagesRef.current,
     scrollTop = savedScrollTopRef.current,
@@ -1227,6 +1285,7 @@ export default function AssistantEmbedPanel({
     }
 
     writePersistedPanelState({
+      conversationId: conversationIdRef.current,
       messages: nextMessages,
       scrollTop,
       inFlight: isBusyRef.current,
@@ -1388,6 +1447,7 @@ export default function AssistantEmbedPanel({
   };
 
   const applyPersistedPanelState = (nextState: PersistedPanelState) => {
+    conversationIdRef.current = nextState.conversationId;
     messagesRef.current = nextState.messages;
     savedScrollTopRef.current = nextState.scrollTop;
     isBusyRef.current = nextState.inFlight;
@@ -1445,6 +1505,7 @@ export default function AssistantEmbedPanel({
 
     pendingHandoffsRef.current.set(handoffId, {
       state: {
+        conversationId: conversationIdRef.current,
         messages: messagesRef.current,
         scrollTop: savedScrollTopRef.current,
         inFlight: isBusyRef.current,
@@ -1774,8 +1835,35 @@ export default function AssistantEmbedPanel({
         type?: unknown;
         size?: unknown;
         isFullscreen?: unknown;
+        hostname?: unknown;
+        pagePath?: unknown;
+        requestId?: unknown;
       };
 
+      if (data.type === "assistant-embed:set-page-context") {
+        if (event.source !== window.parent) {
+          return;
+        }
+
+        const pageContext = normalizeParentPageContext(
+          data.hostname,
+          data.pagePath,
+        );
+        pageContextRef.current = pageContext;
+
+        if (typeof data.requestId === "string") {
+          const pendingRequest = pendingPageContextRequestsRef.current.get(
+            data.requestId,
+          );
+          if (pendingRequest) {
+            window.clearTimeout(pendingRequest.timeoutId);
+            pendingPageContextRequestsRef.current.delete(data.requestId);
+            pendingRequest.resolve(pageContext);
+          }
+        }
+        return;
+      }
+
       if (data.type === "assistant-embed:panel-opened") {
         setEmptyStateAnimationKey((previous) => previous + 1);
         queueSavedScrollRestore();
@@ -1799,6 +1887,10 @@ export default function AssistantEmbedPanel({
     window.addEventListener("message", handlePanelMessage);
     return () => {
       window.removeEventListener("message", handlePanelMessage);
+      for (const pendingRequest of pendingPageContextRequestsRef.current.values()) {
+        window.clearTimeout(pendingRequest.timeoutId);
+      }
+      pendingPageContextRequestsRef.current.clear();
     };
   }, []);
 
@@ -1810,6 +1902,7 @@ export default function AssistantEmbedPanel({
   const handleStartNewChat = () => {
     activeRequestAbortRef.current?.abort();
     activeRequestAbortRef.current = null;
+    conversationIdRef.current = createMessageId();
     setSharedBusy(false);
     setSharedAwaitingFirstToken(false);
     resetThreadScrollPosition([]);
@@ -1837,6 +1930,7 @@ export default function AssistantEmbedPanel({
   const handleUnavailableBack = () => {
     activeRequestAbortRef.current?.abort();
     activeRequestAbortRef.current = null;
+    conversationIdRef.current = createMessageId();
     setSharedBusy(false);
     setSharedAwaitingFirstToken(false);
     resetThreadScrollPosition([]);
@@ -1893,10 +1987,14 @@ export default function AssistantEmbedPanel({
         requestHeaders["x-ask-ai-dev-token"] = devProxyToken;
       }
 
+      const pageContext = await requestPageContext();
       const response = await fetch(resolvedApiPathRef.current, {
         method: "POST",
         headers: requestHeaders,
         body: JSON.stringify({
+          conversationId: conversationIdRef.current,
+          pagePath: pageContext.pagePath,
+          hostname: pageContext.hostname,
           messages: nextConversation.map((message) => ({
             role: message.role,
             content: message.content,
@@ -2141,7 +2239,7 @@ export default function AssistantEmbedPanel({
       linkTarget === "current" && onCurrentLinkNavigate
         ? getSameOriginNavigationRequest(event)
         : null;
-    if (!navigationRequest) {
+    if (!navigationRequest || !onCurrentLinkNavigate) {
       return;
     }
 
@@ -2724,6 +2822,18 @@ export default function AssistantEmbedPanel({
           -ms-overflow-style: none;
         }
 
+        .ask-ai-markdown [data-rd-code-line] {
+          display: flex;
+          width: max-content;
+          min-width: 100%;
+        }
+
+        .ask-ai-markdown [data-rd-code-line-content] {
+          flex: 1;
+          padding-inline: 0.75rem;
+          white-space: pre;
+        }
+
         .dark .ask-ai-markdown pre > code {
           scrollbar-width: none;
         }

package/template/src/components/endpoint/PlaygroundForm.astro

@@ -1074,7 +1074,7 @@ const headerValuePrefixes = Object.fromEntries(
   import {
     highlightAssistantCodeToHtml,
     type AssistantShikiRuntimeConfig,
-  } from "../../lib/assistant-shiki-client";
+  } from "@radiant-docs/assistant-shiki";
 
   type PlaygroundShikiConfig = AssistantShikiRuntimeConfig | null | undefined;
 

package/template/src/components/user/CodeBlock.astro

@@ -397,90 +397,101 @@ const renderedCodeLinesHtml = normalizedTokenLines
       </div>
     </div>
   </div>
-  <script is:inline data-astro-rerun>
-    (() => {
-      const script = document.currentScript;
-      if (!(script instanceof HTMLScriptElement)) return;
+  <script>
+    const codeBlockRootSelector = "[data-rd-code-block-root='true']";
+    const codeBlockControlsKey = "__rdCodeBlockControls";
+
+    const getCodeBlockControls = () => {
+      window[codeBlockControlsKey] = window[codeBlockControlsKey] || {
+        copiedStateTimers: new WeakMap(),
+        installed: false,
+      };
 
-      const root = script.closest("[data-rd-code-block-root='true']");
-      if (!(root instanceof HTMLElement)) return;
+      return window[codeBlockControlsKey];
+    };
 
-      const copyButtons = root.querySelectorAll(
-        "[data-rd-copy-trigger='true']",
-      );
-      if (copyButtons.length === 0) return;
+    const setCopiedState = (button, copied) => {
+      const copyIcon = button.querySelector("[data-rd-copy-icon]");
+      const checkIcon = button.querySelector("[data-rd-copy-check]");
 
-      const setCopiedState = (button, copied) => {
-        const copyIcon = button.querySelector("[data-rd-copy-icon]");
-        const checkIcon = button.querySelector("[data-rd-copy-check]");
+      if (!copyIcon || !checkIcon) return;
 
-        if (!copyIcon || !checkIcon) return;
+      if (copied) {
+        copyIcon.classList.add("scale-50", "opacity-0", "-rotate-6");
+        copyIcon.classList.remove("scale-100", "opacity-100", "rotate-0");
 
-        if (copied) {
-          copyIcon.classList.add("scale-50", "opacity-0", "-rotate-6");
-          copyIcon.classList.remove("scale-100", "opacity-100", "rotate-0");
-
-          checkIcon.classList.remove("scale-50", "opacity-0", "rotate-6");
-          checkIcon.classList.add("scale-110", "opacity-100", "rotate-0");
-          return;
-        }
-
-        copyIcon.classList.remove("scale-50", "opacity-0", "-rotate-6");
-        copyIcon.classList.add("scale-100", "opacity-100", "rotate-0");
+        checkIcon.classList.remove("scale-50", "opacity-0", "rotate-6");
+        checkIcon.classList.add("scale-110", "opacity-100", "rotate-0");
+        return;
+      }
 
-        checkIcon.classList.remove("scale-110", "opacity-100", "rotate-0");
-        checkIcon.classList.add("scale-50", "opacity-0", "rotate-6");
-      };
+      copyIcon.classList.remove("scale-50", "opacity-0", "-rotate-6");
+      copyIcon.classList.add("scale-100", "opacity-100", "rotate-0");
+
+      checkIcon.classList.remove("scale-110", "opacity-100", "rotate-0");
+      checkIcon.classList.add("scale-50", "opacity-0", "rotate-6");
+    };
+
+    const fallbackCopy = (text) => {
+      try {
+        const textarea = document.createElement("textarea");
+        textarea.value = text;
+        textarea.setAttribute("readonly", "");
+        textarea.style.position = "fixed";
+        textarea.style.top = "0";
+        textarea.style.left = "0";
+        textarea.style.width = "1px";
+        textarea.style.height = "1px";
+        textarea.style.padding = "0";
+        textarea.style.border = "0";
+        textarea.style.opacity = "0";
+        textarea.style.fontSize = "16px";
+        textarea.style.pointerEvents = "none";
+        document.body.appendChild(textarea);
 
-      const fallbackCopy = (text) => {
         try {
-          const textarea = document.createElement("textarea");
-          textarea.value = text;
-          textarea.setAttribute("readonly", "");
-          textarea.style.position = "fixed";
-          textarea.style.top = "0";
-          textarea.style.left = "0";
-          textarea.style.width = "1px";
-          textarea.style.height = "1px";
-          textarea.style.padding = "0";
-          textarea.style.border = "0";
-          textarea.style.opacity = "0";
-          textarea.style.fontSize = "16px";
-          textarea.style.pointerEvents = "none";
-          document.body.appendChild(textarea);
-
-          try {
-            textarea.focus({ preventScroll: true });
-          } catch {
-            textarea.focus();
-          }
-          textarea.select();
-          textarea.setSelectionRange(0, textarea.value.length);
-
-          const copied = document.execCommand("copy");
-          document.body.removeChild(textarea);
-          return copied;
+          textarea.focus({ preventScroll: true });
         } catch {
-          return false;
+          textarea.focus();
         }
-      };
+        textarea.select();
+        textarea.setSelectionRange(0, textarea.value.length);
+
+        const copied = document.execCommand("copy");
+        document.body.removeChild(textarea);
+        return copied;
+      } catch {
+        return false;
+      }
+    };
 
-      const copyToClipboard = async (text) => {
-        try {
-          if (navigator.clipboard?.writeText) {
-            await navigator.clipboard.writeText(text);
-            return true;
-          }
-        } catch {
-          // Fallback below when the async Clipboard API is unavailable or blocked.
+    const copyToClipboard = async (text) => {
+      try {
+        if (navigator.clipboard?.writeText) {
+          await navigator.clipboard.writeText(text);
+          return true;
         }
+      } catch {
+        // Fallback below when the async Clipboard API is unavailable or blocked.
+      }
 
-        return fallbackCopy(text);
-      };
+      return fallbackCopy(text);
+    };
+
+    const initCodeBlock = (root) => {
+      if (!(root instanceof HTMLElement)) return;
+      if (root.dataset.rdCodeBlockInitialized === "true") return;
+
+      const copyButtons = root.querySelectorAll("[data-rd-copy-trigger='true']");
+      if (copyButtons.length === 0) return;
+
+      root.dataset.rdCodeBlockInitialized = "true";
 
       copyButtons.forEach((button) => {
-        let timeoutId = null;
+        if (!(button instanceof HTMLElement)) return;
+
         button.addEventListener("click", async () => {
+          const controls = getCodeBlockControls();
           const encodedCopyValue =
             button.getAttribute("data-rd-copy-content") ?? "";
           const copyValue = decodeURIComponent(encodedCopyValue);
@@ -494,16 +505,35 @@ const renderedCodeLinesHtml = normalizedTokenLines
 
             setCopiedState(button, true);
 
-            if (timeoutId) window.clearTimeout(timeoutId);
-            timeoutId = window.setTimeout(() => {
+            const existingTimeoutId = controls.copiedStateTimers.get(button);
+            if (existingTimeoutId) window.clearTimeout(existingTimeoutId);
+
+            const timeoutId = window.setTimeout(() => {
               setCopiedState(button, false);
-              timeoutId = null;
+              controls.copiedStateTimers.delete(button);
             }, 1200);
+            controls.copiedStateTimers.set(button, timeoutId);
           } catch {
             setCopiedState(button, false);
           }
         });
       });
-    })();
+    };
+
+    const initCodeBlocks = () => {
+      document.querySelectorAll(codeBlockRootSelector).forEach((root) => {
+        initCodeBlock(root);
+      });
+    };
+
+    const controls = getCodeBlockControls();
+    controls.init = initCodeBlocks;
+
+    if (!controls.installed) {
+      controls.installed = true;
+      document.addEventListener("astro:page-load", initCodeBlocks);
+    }
+
+    initCodeBlocks();
   </script>
 </div>