Chat couldn't start
\n\n We couldn't securely initialize this chat. Check your connection and try again.\n
\n{description}
\n )}\n{tooltip}
\nNo Conversations
\nStart a new chat to begin
\nNo Results
\nTry a different search
\n\n {conversation.message_count} {conversation.message_count === 1 ? 'message' : 'messages'}\n
\n\n {config.subGreeting}\n
\n )}\n` always renders while (and if ever) highlighting\n * is unavailable. See utils/highlight.ts and the CollapsibleCodeBlock notes\n * below.\n *\n * Design history: an earlier revision was collapsed-by-default (header pill\n * only, body hidden until click). That hid content the reader almost always\n * wants to see and forced an extra click on every block. Open-by-default with a\n * max-height cap is the right call — the cap is what prevents the 80-line wall\n * that collapse-by-default was a workaround for.\n */\n\nimport { useEffect, useRef, useState, type ComponentType, type ReactNode } from \"react\";\nimport {\n ChevronRightIcon,\n CheckIcon,\n CopyIcon,\n} from \"lucide-react\";\nimport { getFileIconByLanguage } from \"./file-icons/file-icon-map\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"../ui/collapsible\";\nimport { cn } from \"../utils/cn\";\nimport { highlightCode } from \"../utils/highlight\";\n\n/**\n * Language icons come from the shared brand-icon map (ported from jarvis /\n * Crunch): real Python/TypeScript/React/Go glyphs with embedded brand colors —\n * replacing the old lucide \"nearest glyph\" stand-ins (a feather for Python, a\n * coffee cup for Java) that read as bugs. Unknown tags fall back to a generic\n * file icon — never a crash.\n */\nfunction iconForLanguage(language: string): ComponentType<{ className?: string }> {\n return getFileIconByLanguage(language);\n}\n\nfunction extractText(children: ReactNode): string {\n if (typeof children === \"string\") return children;\n if (Array.isArray(children)) return children.map(extractText).join(\"\");\n if (children && typeof children === \"object\" && \"props\" in children) {\n return extractText((children as { props?: { children?: ReactNode } }).props?.children);\n }\n return \"\";\n}\n\ninterface CodeProps {\n className?: string;\n children?: ReactNode;\n // react-markdown passes `inline` on older versions; newer infer from node.\n inline?: boolean;\n}\n\nexport function CollapsibleCode({ className, children, inline, ...props }: CodeProps) {\n const raw = extractText(children);\n const langMatch = /language-([\\w-]+)/.exec(className ?? \"\");\n const language = langMatch?.[1] ?? \"\";\n const isFenced = Boolean(language) || raw.includes(\"\\n\");\n\n // Inline code (`foo`) — render as-is; only fenced multi-line blocks use the\n // collapsible renderer.\n if (inline || !isFenced) {\n return (\n \n {children}\n \n );\n }\n\n return (null);\n const copyTimerRef = useRef | null>(null);\n const lineCount = code.split(\"\\n\").length;\n const LanguageIcon = iconForLanguage(language);\n\n // Monotonic generation counter: each highlight attempt captures the current\n // value and only commits its result if it's still the latest. This drops\n // stale async results from a still-growing stream (an earlier, shorter code\n // string resolving after a later one) and from a collapse-then-reopen.\n const genRef = useRef(0);\n\n // Highlight the body only when open. Debounced so streaming code is\n // highlighted once it settles, not on every chunk. Any failure (import\n // blocked, unknown lang, oversized) yields null → we keep rendering the plain\n // below. When collapsed, drop highlighted markup so a later reopen\n // re-highlights the (possibly grown) code afresh.\n useEffect(() => {\n if (!open) {\n setHighlighted(null);\n return;\n }\n\n const gen = ++genRef.current;\n let cancelled = false;\n const timer = setTimeout(() => {\n highlightCode(code, language).then((html) => {\n // Ignore if this effect was cleaned up, or a newer attempt superseded us.\n if (cancelled || gen !== genRef.current) return;\n setHighlighted(html);\n });\n }, HIGHLIGHT_DEBOUNCE_MS);\n\n return () => {\n cancelled = true;\n clearTimeout(timer);\n };\n }, [open, code, language]);\n\n useEffect(() => {\n return () => {\n if (copyTimerRef.current) clearTimeout(copyTimerRef.current);\n };\n }, []);\n\n const copy = async () => {\n try {\n // Always copy the RAW source — never the highlighted markup.\n await navigator.clipboard.writeText(code);\n setCopied(true);\n if (copyTimerRef.current) clearTimeout(copyTimerRef.current);\n copyTimerRef.current = setTimeout(() => setCopied(false), 1400);\n } catch {\n /* clipboard unavailable (e.g. http) — ignore */\n }\n };\n\n return (\n \n \n \n \n \n {copied ? \n \n {highlighted ? (\n // Shiki's markup. Safe to inject: Shiki escapes all\n // token text as it builds the HTML (tokens are s with\n // text-escaped content), so nothing from `code` can inject markup. The\n // wrapper carries the chat-code-body chrome (padding/border/surface +\n // the ~10-line max-height cap); styles.src.css resets .shiki's own\n // background so the widget surface shows through and the token colours\n // come from --shiki-light/-dark.\n \n {code}\n
\n )}\n \n \n );\n}\n","\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\nfunction Collapsible({\n ...props\n}: React.ComponentProps) {\n return ) {\n return (\n ) {\n return (\n ` when they get `null`. Highlighting is a nicety; the raw\n * code always renders.\n * - Dual-theme, token-driven. We render with BOTH `github-light` and\n * `github-dark` and `defaultColor: false`, so Shiki emits `--shiki-light` /\n * `--shiki-dark` CSS custom properties on every token instead of baking in a\n * fixed colour. styles.src.css maps those onto the widget's light/dark scope,\n * exactly like every other themed surface. Shiki never paints its own\n * background — the widget's `--chat-*` surfaces own that.\n *\n * SHIKI ↔ SCRIPT-TAG EMBED (see DOCS_CONTRACT §6). The `import()` below uses a\n * STATIC specifier (`\"shiki/bundle/web\"`) so app bundlers (Next / Vite /\n * Turbopack / webpack) resolve and code-split it at build time. The IIFE\n * script-tag embed (a separate PR) marks `shiki`/`shiki/bundle/web` as external,\n * so that literal import fails fast in the browser as a bare specifier — the\n * `catch` then loads Shiki from a CDN URL the embed pins on\n * `globalThis.__MORDN_SHIKI_URL__`. The `@vite-ignore` / `webpackIgnore`\n * comments keep bundlers from trying to resolve that runtime URL at build time.\n */\n\n// Shiki's `codeToHtml` is the only surface we use; typed loosely so we don't\n// pull Shiki's types into the app graph (it's a lazily-loaded, optional dep).\ntype ShikiModule = {\n codeToHtml: (code: string, options: Record) => Promise;\n};\n\n/**\n * Cached singleton highlighter load. The dynamic import runs on the first call\n * and the resulting promise is memoised — never re-imported. A rejected load is\n * cached too (so we don't hammer a failing import); callers treat a throw here\n * as \"no highlighting\" and fall back to plain text.\n */\nlet highlighterPromise: Promise | null = null;\n\nfunction loadShiki(): Promise {\n if (highlighterPromise) return highlighterPromise;\n\n highlighterPromise = (async (): Promise => {\n let mod: ShikiModule;\n try {\n // Static specifier — app bundlers resolve/split this at build time.\n mod = (await import(\"shiki/bundle/web\")) as unknown as ShikiModule;\n } catch {\n // Bundler left the specifier unresolved (script-tag embed): load from the\n // CDN URL the embed pins on globalThis. No URL → rethrow so the caller\n // falls back to plain text.\n const url = (globalThis as { __MORDN_SHIKI_URL__?: string }).__MORDN_SHIKI_URL__;\n if (!url) {\n throw new Error(\"shiki unavailable and no __MORDN_SHIKI_URL__ fallback set\");\n }\n mod = (await import(/* @vite-ignore */ /* webpackIgnore: true */ url)) as unknown as ShikiModule;\n }\n return mod;\n })();\n\n return highlighterPromise;\n}\n\n/**\n * Upper bound on what we hand to Shiki. Highlighting a very large block is slow\n * and pointless (the reader is scrolling, not tokenising) — past this we bail to\n * plain text. Generous enough that normal docs/code snippets always highlight.\n */\nconst MAX_HIGHLIGHT_CHARS = 50_000;\n\n/** The dual themes → drives the `--shiki-light` / `--shiki-dark` CSS vars. */\nconst THEMES = { light: \"github-light\", dark: \"github-dark\" } as const;\n\n/**\n * Highlight `code` in `lang`, returning Shiki's `…
`\n * HTML string — or `null` if it can't (any failure). Callers render plain text\n * on `null`.\n *\n * The returned HTML is safe to `dangerouslySetInnerHTML`: Shiki escapes all\n * token text as it builds the markup (tokens become ``s with\n * text-escaped content), so nothing from the user's `code` can inject markup.\n *\n * @param code The raw source. Copied/rendered verbatim on failure.\n * @param lang A language id (e.g. \"ts\", \"json\", \"python\"). Unknown ids retry\n * once as plain \"text\"; if even that fails we return `null`.\n * @returns The highlighted HTML, or `null` to signal \"render plain text\".\n */\nexport async function highlightCode(code: string, lang: string): Promise {\n // Oversized → don't even load Shiki; plain text is the right call.\n if (code.length > MAX_HIGHLIGHT_CHARS) return null;\n\n let shiki: ShikiModule;\n try {\n shiki = await loadShiki();\n } catch (err) {\n // Import failed (and no CDN fallback). Silent — highlighting is optional.\n console.debug(\"[chat-widget] shiki load failed; rendering plain code:\", err);\n return null;\n }\n\n const language = (lang || \"text\").toLowerCase();\n try {\n return await shiki.codeToHtml(code, {\n lang: language,\n themes: THEMES,\n // Emit CSS variables (--shiki-light/--shiki-dark) instead of inline fixed\n // colours, so the widget theme drives token colours per light/dark.\n defaultColor: false,\n });\n } catch {\n // Most commonly an unknown/unsupported language. Retry once as plain \"text\"\n // (which is always bundled) so we still get escaped, structured markup.\n if (language !== \"text\") {\n try {\n return await shiki.codeToHtml(code, {\n lang: \"text\",\n themes: THEMES,\n defaultColor: false,\n });\n } catch (err) {\n console.debug(\"[chat-widget] shiki highlight failed; rendering plain code:\", err);\n return null;\n }\n }\n return null;\n }\n}\n","\"use client\";\n\n/**\n * MarkdownTable — widget-owned renderer for GFM tables in assistant messages.\n *\n * Wired in via Streamdown's `components={{ table: ... }}` override\n * (response.tsx), which REPLACES Streamdown's own table wrapper. That wrapper\n * ships Tailwind utility classes (`bg-sidebar`, `divide-border`, control\n * buttons) that the widget's CSS build never generates, so tables rendered\n * through it came out half-styled. Here the widget owns the whole thing:\n *\n * ┌─ .chat-table (rounded card) ────────────┐\n * │ ┌─ .chat-table-scroll (x-scroll) ─────┐ │ [copy — hover-reveal]\n * │ │ … GFM content …
│ │\n * │ └─────────────────────────────────────┘ │\n * └─────────────────────────────────────────┘\n *\n * Sizing model: the table takes its CONTENT width (`max-content`) and scrolls\n * sideways inside the card, rather than being squeezed into the widget. A chat\n * column is ~380px and a six-column table simply does not fit — compressing it\n * shredded cells one character per line. Columns therefore keep their natural\n * widths and the reader pans; `data-overflow` here drives the edge fades that\n * make that panning discoverable.\n *\n * Visual styling lives in styles.src.css under \"Tables\". Copy serializes the\n * on-screen table to TSV, which pastes cleanly into Excel / Google Sheets /\n * Numbers as real cells.\n */\n\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\n\ninterface TableProps {\n children?: ReactNode;\n className?: string;\n // react-markdown passes the mdast node to every component override; keep it\n // out of the DOM spread.\n node?: unknown;\n}\n\n/** Which edges have more table hiding past them — drives the fade in CSS. */\ntype Overflow = \"none\" | \"start\" | \"end\" | \"both\";\n\nexport function MarkdownTable({ children, node: _node, ...props }: TableProps) {\n const tableRef = useRef(null);\n const scrollRef = useRef(null);\n const [copied, setCopied] = useState(false);\n const [overflow, setOverflow] = useState(\"none\");\n\n // Keep the edge fades honest: which side is faded depends on where the reader\n // has scrolled to. Re-measured on scroll, on resize, and as the table grows —\n // rows stream in one at a time, so the first measurement is never the last.\n useEffect(() => {\n const scroller = scrollRef.current;\n if (!scroller) return;\n\n const sync = () => {\n // Sub-pixel layout means scrollLeft rarely hits the bounds exactly.\n const slack = 1;\n const max = scroller.scrollWidth - scroller.clientWidth;\n if (max <= slack) return setOverflow(\"none\");\n const atStart = scroller.scrollLeft <= slack;\n const atEnd = scroller.scrollLeft >= max - slack;\n setOverflow(atStart ? \"end\" : atEnd ? \"start\" : \"both\");\n };\n\n sync();\n scroller.addEventListener(\"scroll\", sync, { passive: true });\n // ResizeObserver fires on the initial observe, so streamed rows and widget\n // resizes both land here without a polling loop.\n const observer = new ResizeObserver(sync);\n observer.observe(scroller);\n if (tableRef.current) observer.observe(tableRef.current);\n return () => {\n scroller.removeEventListener(\"scroll\", sync);\n observer.disconnect();\n };\n }, []);\n\n const scrollable = overflow !== \"none\";\n\n const copy = async () => {\n const el = tableRef.current;\n if (!el) return;\n // Serialize what's actually on screen — one row per , cells\n // tab-separated. Tabs inside a cell would split it, so flatten them.\n const tsv = Array.from(el.querySelectorAll(\"tr\"))\n .map((tr) =>\n Array.from(tr.querySelectorAll(\"th, td\"))\n .map((cell) => (cell.textContent ?? \"\").trim().replace(/\\t+/g, \" \"))\n .join(\"\\t\"),\n )\n .join(\"\\n\");\n try {\n await navigator.clipboard.writeText(tsv);\n setCopied(true);\n setTimeout(() => setCopied(false), 1500);\n } catch {\n /* clipboard unavailable (e.g. http) — ignore */\n }\n };\n\n return (\n \n {/* When it overflows the scroll region becomes a labelled, focusable\n region so keyboard users can pan it — a mouse-only scroller would\n strand the hidden columns. It stays out of the tab order otherwise. */}\n \n \n {children}\n
\n \n \n {copied ? (null);\n\nexport const CitationSourcesProvider = CitationSourcesContext.Provider;\n\n/** Read the sources for the current markdown block. */\nexport function useCitationSources(): CitationSource[] | null {\n return useContext(CitationSourcesContext);\n}\n\n/**\n * Resolve a model citation number without letting source deduplication remap it.\n * Knowledge sources carry every original DOC index in citationIds; provider\n * sources may expose a numeric sourceId. Positional fallback is used only when\n * the message has no explicit IDs at all — a muted miss is safer than linking to\n * the wrong evidence.\n */\nexport function resolveCitationSource(\n sources: CitationSource[] | null,\n n: number,\n): CitationSource | undefined {\n if (!sources) return undefined;\n const aliasMatch = sources.find((source) => source.citationIds?.includes(n));\n if (aliasMatch) return aliasMatch;\n const sourceIdMatch = sources.find((source) => source.sourceId === String(n));\n if (sourceIdMatch) return sourceIdMatch;\n if (sources.some((source) => source.citationIds && source.citationIds.length > 0)) {\n return undefined;\n }\n return sources[n - 1];\n}\n\n/**\n * Props stamped onto each `citeRef` element by the remark plugin\n * (data-ref-n / data-ref-raw). react-markdown surfaces them as DOM attributes on\n * the element the component override receives; we read them off `node` (the\n * ExtraProps `node`) to stay source-of-truth rather than re-parsing the DOM.\n */\ninterface CiteRefElementProps {\n // react-markdown / streamdown pass the hast element on `node`.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n node?: { properties?: Record } | undefined;\n // The element's DOM attributes also arrive as props (data-ref-n etc.), but we\n // prefer `node.properties` as the canonical source. Kept here for completeness.\n \"data-ref-n\"?: string;\n \"data-ref-raw\"?: string;\n children?: ReactNode;\n}\n\nfunction readRefNumber(props: CiteRefElementProps): number | null {\n const fromNode = props.node?.properties?.[\"data-ref-n\"];\n const raw = (typeof fromNode === \"string\" && fromNode) || props[\"data-ref-n\"];\n if (!raw) return null;\n const n = parseInt(raw, 10);\n return Number.isFinite(n) && n >= 1 ? n : null;\n}\n\n/**\n * The `citeRef` component override. Renders one superscript chip linking to the\n * source carrying that reference ID. Used as `components.citeRef` in response.tsx.\n *\n * Layout: a raised, pill-shaped superscript carrying the model's source number.\n * Links open in a new tab with safe rel\n * attrs. Out-of-range refs (N > source count, or no sources in context) render\n * muted and non-interactive so the prose still reads.\n */\nexport function CitationRef({ children, ...props }: CiteRefElementProps) {\n const n = readRefNumber(props);\n const sources = useCitationSources();\n\n // No usable number — render the raw token text so we never silently drop a\n // citation the model emitted (and so a future format we don't parse yet still\n // shows up as something, not nothing).\n if (!n) {\n const raw = props[\"data-ref-raw\"] ?? props.node?.properties?.[\"data-ref-raw\"];\n return (\n \n {typeof raw === \"string\" ? raw : children ?? \"\"}\n \n );\n }\n\n // Out of range or no sources in context → muted non-linking chip carrying the\n // number. Still useful: the user sees a citation was attempted.\n const source = resolveCitationSource(sources, n);\n if (!source) {\n return (\n \n {n}\n \n );\n }\n\n const safeHref = safeUrl(source.url);\n // A safe-but-non-http href (e.g. kb://) can't be opened — render muted chip,\n // matching how the Sources card handles a missing href.\n if (!safeHref) {\n return (\n \n {n}\n \n );\n }\n\n const title = source.title || source.url;\n return (\n \n {n}\n \n );\n}\n","// URL/HTML safety helpers for model- and user-controlled values.\n//\n// Attachment filenames and URLs (and citation links) originate from the AI\n// message stream, so they are untrusted. These helpers enforce a strict\n// protocol allowlist and HTML-escape any text that must be interpolated into\n// markup, preventing DOM-based XSS (e.g. `javascript:` hrefs or `