@usetheo/ui 0.13.0 → 0.13.2

package/dist/chunk-FOE3XXBJ.js

@@ -0,0 +1,965 @@
+"use client";
+import { safeHref } from './chunk-GDMCDW66.js';
+import { AgentToolRenderer } from './chunk-2NTEJRPA.js';
+import { Button } from './chunk-25KBUQEQ.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { memo, forwardRef, createContext, useState, useEffect, createElement, useCallback, useMemo, useContext } from 'react';
+import { BrainCircuitIcon, ImageIcon, FileIcon, ExternalLinkIcon, FileTextIcon, CodeIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, CopyIcon } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/types/chat.ts
+function isTextUIPart(part) {
+  return part.type === "text";
+}
+function isReasoningUIPart(part) {
+  return part.type === "reasoning";
+}
+function isFileUIPart(part) {
+  return part.type === "file";
+}
+function isReasoningFileUIPart(part) {
+  return part.type === "reasoning-file";
+}
+function isSourceUrlUIPart(part) {
+  return part.type === "source-url";
+}
+function isSourceDocumentUIPart(part) {
+  return part.type === "source-document";
+}
+function isStepStartUIPart(part) {
+  return part.type === "step-start";
+}
+function isCustomContentUIPart(part) {
+  return part.type === "custom";
+}
+function isToolUIPart(part) {
+  return part.type === "dynamic-tool" || part.type.startsWith("tool-");
+}
+function isDataUIPart(part) {
+  return part.type.startsWith("data-");
+}
+function deriveDataName(part) {
+  return part.type.slice("data-".length);
+}
+function DataPart({ part, renderers }) {
+  const name = deriveDataName(part);
+  const renderer = renderers?.[part.type] ?? renderers?.[name];
+  if (renderer) return renderer(part.data, part);
+  return /* @__PURE__ */ jsxs(
+    "details",
+    {
+      className: cn("my-2 rounded-md border border-border bg-muted/20 px-3 py-1.5 text-body-sm"),
+      "data-theo-data": name,
+      children: [
+        /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer items-center gap-1.5 font-mono text-label-caps text-muted-foreground uppercase tracking-wider", children: [
+          /* @__PURE__ */ jsx(CodeIcon, { className: "size-3", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "data-",
+            name
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: "mt-2 overflow-x-auto border-border border-t pt-2 text-code-sm", children: /* @__PURE__ */ jsx("code", { children: safeStringify(part.data) }) })
+      ]
+    }
+  );
+}
+function safeStringify(value) {
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+function isImage(mediaType) {
+  return mediaType.startsWith("image/") || mediaType === "image";
+}
+function FilePart({ part }) {
+  const safeUrl = safeHref(part.url);
+  const label = part.filename ?? part.url.split("/").pop() ?? "file";
+  if (isImage(part.mediaType)) {
+    if (!safeUrl) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-slot": "file-part",
+          className: cn(
+            "my-2 inline-flex items-center gap-2 rounded-md border border-border bg-muted/30 px-3 py-2",
+            "text-body-sm text-muted-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(ImageIcon, { className: "size-4", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { children: label }),
+            /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "(blocked)" })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "figure",
+      {
+        className: "my-3 overflow-hidden rounded-lg border border-border",
+        "data-theo-file": "image",
+        children: [
+          /* @__PURE__ */ jsx("img", { src: safeUrl, alt: label, className: "block max-w-full", loading: "lazy" }),
+          part.filename ? /* @__PURE__ */ jsx("figcaption", { className: "border-border border-t bg-muted/30 px-3 py-1.5 font-mono text-label-caps text-muted-foreground uppercase tracking-wider", children: part.filename }) : null
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "my-2 inline-flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2",
+        "text-body-sm"
+      ),
+      "data-theo-file": "generic",
+      children: [
+        /* @__PURE__ */ jsx(FileIcon, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }),
+        safeUrl ? /* @__PURE__ */ jsx("a", { href: safeUrl, className: "text-primary hover:text-primary-deep hover:underline", children: label }) : /* @__PURE__ */ jsx("span", { children: label }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-label-caps text-muted-foreground uppercase tracking-wider", children: part.mediaType })
+      ]
+    }
+  );
+}
+var DEFAULT_THEMES = { light: "github-light", dark: "github-dark" };
+var cachedHighlighter = null;
+var highlighterFailed = false;
+async function getHighlighter(themes) {
+  if (cachedHighlighter) return cachedHighlighter;
+  if (highlighterFailed) return null;
+  try {
+    const shiki = await import('shiki');
+    cachedHighlighter = await shiki.createHighlighter({
+      themes: [themes.light, themes.dark],
+      langs: [
+        "ts",
+        "tsx",
+        "js",
+        "jsx",
+        "python",
+        "go",
+        "rust",
+        "java",
+        "json",
+        "yaml",
+        "bash",
+        "shell",
+        "html",
+        "css",
+        "sql",
+        "markdown"
+      ]
+    });
+    return cachedHighlighter;
+  } catch {
+    highlighterFailed = true;
+    return null;
+  }
+}
+function CodeBlock({ code, language, themes, className }) {
+  const [html, setHtml] = useState(null);
+  const [copied, setCopied] = useState(false);
+  const effectiveThemes = themes ?? DEFAULT_THEMES;
+  useEffect(() => {
+    let cancelled = false;
+    if (!language) return;
+    getHighlighter(effectiveThemes).then((hl) => {
+      if (cancelled || !hl) return;
+      try {
+        const out = hl.codeToHtml(code, {
+          lang: language,
+          themes: { light: effectiveThemes.light, dark: effectiveThemes.dark },
+          defaultColor: "light"
+        });
+        setHtml(out);
+      } catch {
+      }
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [code, language, effectiveThemes.light, effectiveThemes.dark, effectiveThemes]);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group relative my-4 overflow-hidden rounded-lg border border-border bg-muted/30",
+        className
+      ),
+      "data-theo-code-block": "",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-border border-b bg-muted/50 px-3 py-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-label-caps text-muted-foreground uppercase tracking-wider", children: language || "text" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleCopy,
+              className: cn(
+                "inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-label",
+                "text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+                "focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
+              ),
+              "aria-label": copied ? "Copied" : "Copy code",
+              children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { children: "Copied" })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(CopyIcon, { className: "size-3.5", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { children: "Copy" })
+              ] })
+            }
+          )
+        ] }),
+        html ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "[&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:!p-0 overflow-x-auto p-3 text-code-sm",
+            dangerouslySetInnerHTML: { __html: html }
+          }
+        ) : /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto p-3 text-code-sm", children: /* @__PURE__ */ jsx("code", { className: language ? `language-${language}` : void 0, children: code }) })
+      ]
+    }
+  );
+}
+function InlineCode({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "code",
+    {
+      className: cn(
+        "rounded bg-muted px-1.5 py-0.5 font-mono text-code-sm text-foreground",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/lib/markdown/streaming-preprocess.ts
+function preprocessStreaming(markdown, isStreaming = true) {
+  if (!isStreaming) return markdown;
+  let buf = markdown;
+  const fenceCount = countTripleBackticks(buf);
+  if (fenceCount % 2 === 1) {
+    buf = `${buf.endsWith("\n") ? buf : `${buf}
+`}\`\`\``;
+    return buf;
+  }
+  const blockMathCount = countOccurrences(buf, "$$");
+  if (blockMathCount % 2 === 1) {
+    buf = `${buf}$$`;
+    return buf;
+  }
+  const inlineBackticks = countSingleBackticks(buf);
+  if (inlineBackticks % 2 === 1) {
+    buf = `${buf}\``;
+  }
+  const inlineDollars = countSingleDollars(buf);
+  if (inlineDollars % 2 === 1) {
+    buf = `${buf}$`;
+  }
+  for (const marker of ["**", "__", "*", "_"]) {
+    if (countMarker(buf, marker) % 2 === 1) {
+      buf = `${buf}${marker}`;
+    }
+  }
+  buf = closeUnclosedLink(buf);
+  return buf;
+}
+function countTripleBackticks(s) {
+  let count = 0;
+  let i = 0;
+  while (i < s.length) {
+    if (s[i] === "`" && s[i + 1] === "`" && s[i + 2] === "`") {
+      count++;
+      i += 3;
+    } else {
+      i++;
+    }
+  }
+  return count;
+}
+function countSingleBackticks(s) {
+  let count = 0;
+  let i = 0;
+  while (i < s.length) {
+    if (s[i] === "`") {
+      if (s[i + 1] === "`" && s[i + 2] === "`") {
+        i += 3;
+        continue;
+      }
+      count++;
+    }
+    i++;
+  }
+  return count;
+}
+function countOccurrences(s, needle) {
+  if (needle.length === 0) return 0;
+  let count = 0;
+  let i = s.indexOf(needle);
+  while (i !== -1) {
+    count++;
+    i = s.indexOf(needle, i + needle.length);
+  }
+  return count;
+}
+function countSingleDollars(s) {
+  let count = 0;
+  let i = 0;
+  while (i < s.length) {
+    if (s[i] === "$") {
+      if (s[i + 1] === "$") {
+        i += 2;
+        continue;
+      }
+      if (i > 0 && s[i - 1] === "\\") {
+        i++;
+        continue;
+      }
+      count++;
+    }
+    i++;
+  }
+  return count;
+}
+function countMarker(s, marker) {
+  if (marker.length === 0) return 0;
+  if (marker.length === 1) {
+    let count2 = 0;
+    let i2 = 0;
+    while (i2 < s.length) {
+      if (s[i2] === marker) {
+        if (s[i2 + 1] === marker) {
+          i2 += 2;
+          continue;
+        }
+        if (i2 > 0 && s[i2 - 1] === "\\") {
+          i2++;
+          continue;
+        }
+        count2++;
+      }
+      i2++;
+    }
+    return count2;
+  }
+  let count = 0;
+  let i = 0;
+  while (i <= s.length - marker.length) {
+    if (s.substring(i, i + marker.length) === marker) {
+      count++;
+      i += marker.length;
+    } else {
+      i++;
+    }
+  }
+  return count;
+}
+function closeUnclosedLink(s) {
+  const lastOpenParen = s.lastIndexOf("(");
+  const lastCloseParen = s.lastIndexOf(")");
+  if (lastOpenParen === -1 || lastOpenParen <= lastCloseParen) return s;
+  if (s[lastOpenParen - 1] !== "]") return s;
+  const closingBracket = lastOpenParen - 1;
+  const openingBracket = s.lastIndexOf("[", closingBracket - 1);
+  if (openingBracket === -1) return s;
+  return `${s})`;
+}
+
+// src/lib/markdown/parser.ts
+async function parseBody(body) {
+  const [{ fromMarkdown }, { gfmFromMarkdown }, { gfm }] = await Promise.all([
+    import('mdast-util-from-markdown'),
+    import('mdast-util-gfm'),
+    import('micromark-extension-gfm')
+  ]);
+  return fromMarkdown(body, {
+    extensions: [gfm()],
+    mdastExtensions: [gfmFromMarkdown()]
+  });
+}
+async function mdastToHast(tree) {
+  const { toHast } = await import('mdast-util-to-hast');
+  const hast = toHast(tree, { allowDangerousHtml: false });
+  if (!hast || hast.type !== "root") {
+    return { type: "root", children: hast ? [hast] : [] };
+  }
+  return hast;
+}
+async function sanitizeHast(tree) {
+  const { sanitize, defaultSchema } = await import('hast-util-sanitize');
+  const schema = {
+    ...defaultSchema,
+    attributes: {
+      ...defaultSchema.attributes ?? {},
+      code: [...defaultSchema.attributes?.code ?? [], ["className", /^language-./]],
+      pre: [...defaultSchema.attributes?.pre ?? [], ["className", /./]],
+      span: [...defaultSchema.attributes?.span ?? [], ["className", /./], ["style"]]
+    }
+  };
+  const safe = sanitize(tree, schema);
+  return safe.type === "root" ? safe : { type: "root", children: [safe] };
+}
+async function hastToReact(tree, components) {
+  const { Fragment: Fragment4, jsx: jsx13, jsxs: jsxs9 } = await import('react/jsx-runtime');
+  const { toJsxRuntime } = await import('hast-util-to-jsx-runtime');
+  return toJsxRuntime(tree, {
+    Fragment: Fragment4,
+    jsx: jsx13,
+    jsxs: jsxs9,
+    components
+  });
+}
+async function parseMarkdownToReact(markdown, opts = {}) {
+  const preprocessed = preprocessStreaming(markdown, opts.isStreaming ?? false);
+  const mdast = await parseBody(preprocessed);
+  const hast = await mdastToHast(mdast);
+  const safe = await sanitizeHast(hast);
+  return hastToReact(safe, opts.components);
+}
+async function parseMarkdownToReactSafe(markdown, opts = {}) {
+  try {
+    return await parseMarkdownToReact(markdown, opts);
+  } catch {
+    return createElement("span", { className: "whitespace-pre-wrap" }, markdown);
+  }
+}
+function isFenced(props) {
+  const cls = props.className;
+  if (typeof cls === "string") return cls.startsWith("language-");
+  if (Array.isArray(cls))
+    return cls.some((c) => typeof c === "string" && c.startsWith("language-"));
+  return false;
+}
+function extractLanguage(props) {
+  const cls = props.className;
+  const list = typeof cls === "string" ? [cls] : Array.isArray(cls) ? cls : [];
+  for (const c of list) {
+    if (typeof c === "string" && c.startsWith("language-")) {
+      return c.slice("language-".length);
+    }
+  }
+  return void 0;
+}
+function extractText(children) {
+  if (typeof children === "string") return children;
+  if (Array.isArray(children)) return children.map(extractText).join("");
+  if (children && typeof children === "object" && "props" in children && children.props) {
+    return extractText(children.props.children);
+  }
+  return "";
+}
+var MARKDOWN_COMPONENTS = {
+  code: (props) => {
+    if (isFenced(props)) {
+      const language = extractLanguage(props);
+      const code = extractText(props.children);
+      return /* @__PURE__ */ jsx(CodeBlock, { code, language });
+    }
+    return /* @__PURE__ */ jsx(InlineCode, { ...props, children: props.children });
+  },
+  // Strip the default `<pre>` since `<CodeBlock>` ships its own wrapper.
+  // Inline `<pre>` still works for raw whitespace-preserving text.
+  pre: ({ children }) => {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+};
+function ChatMessageResponseImpl({
+  text,
+  isStreaming = false,
+  className
+}) {
+  const [tree, setTree] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    parseMarkdownToReactSafe(text, {
+      isStreaming,
+      components: MARKDOWN_COMPONENTS
+    }).then((next) => {
+      if (!cancelled) setTree(next);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [text, isStreaming]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "chat-message-response-impl",
+      className: cn(
+        "prose-theo max-w-none text-body-md text-foreground leading-relaxed",
+        // First/last child margin reset — fork from vercel/ai-elements
+        "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        // Heading sizes inside chat use our typescale, not browser defaults
+        "[&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:font-semibold [&_h1]:text-title-lg",
+        "[&_h2]:mt-3 [&_h2]:mb-2 [&_h2]:font-semibold [&_h2]:text-title-md",
+        "[&_h3]:mt-3 [&_h3]:mb-1.5 [&_h3]:font-semibold [&_h3]:text-body-lg",
+        "[&_p]:my-2",
+        "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5",
+        "[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5",
+        "[&_li]:my-0.5",
+        "[&_blockquote]:my-2 [&_blockquote]:border-primary/40 [&_blockquote]:border-l-2 [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground",
+        "[&_a:hover]:text-primary-deep [&_a]:text-primary [&_a]:underline",
+        "[&_table]:my-3 [&_table]:w-full [&_table]:border-collapse",
+        "[&_th]:border [&_th]:border-border [&_th]:bg-muted/40 [&_th]:px-3 [&_th]:py-1.5 [&_th]:text-left",
+        "[&_td]:border [&_td]:border-border [&_td]:px-3 [&_td]:py-1.5",
+        "[&_hr]:my-4 [&_hr]:border-border",
+        className
+      ),
+      "data-theo-chat-response": "",
+      children: tree
+    }
+  );
+}
+var ChatMessageResponse = memo(ChatMessageResponseImpl, (prev, next) => {
+  return prev.text === next.text && prev.isStreaming === next.isStreaming;
+});
+ChatMessageResponse.displayName = "ChatMessageResponse";
+function ReasoningPart({ part, defaultOpen }) {
+  const isStreaming = part.state === "streaming";
+  const open = defaultOpen ?? isStreaming;
+  return /* @__PURE__ */ jsxs(
+    "details",
+    {
+      "data-slot": "reasoning-part",
+      className: cn(
+        "my-2 rounded-md border border-border bg-muted/20 px-3 py-2",
+        "[&[open]]:bg-muted/40"
+      ),
+      open,
+      "data-theo-reasoning": "",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "summary",
+          {
+            className: cn(
+              "cursor-pointer list-none font-mono text-label-caps text-muted-foreground uppercase tracking-wider",
+              "flex items-center gap-1.5 marker:hidden",
+              "transition-colors hover:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(BrainCircuitIcon, { className: "size-3.5", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { children: "Reasoning" }),
+              isStreaming ? /* @__PURE__ */ jsx("span", { className: "text-primary/80", children: "\u2026" }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "mt-2 border-border border-t pt-2", children: /* @__PURE__ */ jsx(ChatMessageResponse, { text: part.text, isStreaming }) })
+      ]
+    }
+  );
+}
+function SourceUrlPart({ part }) {
+  const safe = safeHref(part.url);
+  const label = part.title || part.url;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "source-url-part",
+      className: cn(
+        "my-1 inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-card px-2 py-1",
+        "align-middle font-mono text-label"
+      ),
+      "data-theo-source": "url",
+      children: [
+        /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "size-3 text-muted-foreground", "aria-hidden": "true" }),
+        safe ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: safe,
+            className: "truncate text-primary hover:text-primary-deep hover:underline",
+            rel: "noopener noreferrer",
+            target: "_blank",
+            children: label
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: label })
+      ]
+    }
+  );
+}
+function SourceDocumentPart({ part }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "source-document-part",
+      className: cn(
+        "my-1 inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-card px-2 py-1",
+        "align-middle font-mono text-label"
+      ),
+      "data-theo-source": "document",
+      children: [
+        /* @__PURE__ */ jsx(FileTextIcon, { className: "size-3 text-muted-foreground", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate text-foreground", children: part.title }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\xB7" }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: part.mediaType })
+      ]
+    }
+  );
+}
+function TextPart({ part }) {
+  return /* @__PURE__ */ jsx(
+    ChatMessageResponse,
+    {
+      "data-slot": "text-part",
+      text: part.text,
+      isStreaming: part.state === "streaming"
+    }
+  );
+}
+var ChatMessageRoot = forwardRef(
+  ({ className, from, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "chat-message-root",
+      ref,
+      className: cn(
+        "group flex w-full max-w-[95%] flex-col gap-2",
+        from === "user" ? "is-user ml-auto justify-end" : from === "assistant" ? "is-assistant" : "is-system",
+        className
+      ),
+      "data-theo-chat-message": from,
+      ...props,
+      children
+    }
+  )
+);
+ChatMessageRoot.displayName = "ChatMessageRoot";
+var ChatMessageContent = forwardRef(
+  ({ className, variant, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "chat-message-content",
+      ref,
+      className: cn(
+        "flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-body-md",
+        // User bubble — secondary surface, right-aligned (within the `is-user` group)
+        "group-[.is-user]:ml-auto",
+        variant !== "flat" && "group-[.is-user]:rounded-2xl group-[.is-user]:rounded-tr-md group-[.is-user]:border group-[.is-user]:border-border/40 group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3",
+        // Assistant card — primary accent border-left
+        variant === "contained" && "group-[.is-assistant]:rounded-2xl group-[.is-assistant]:rounded-tl-md group-[.is-assistant]:border group-[.is-assistant]:border-border/40 group-[.is-assistant]:border-l-2 group-[.is-assistant]:border-l-primary group-[.is-assistant]:bg-card group-[.is-assistant]:px-5 group-[.is-assistant]:py-4 group-[.is-assistant]:shadow-sm",
+        // System callout — accent-deep border
+        "group-[.is-system]:rounded-lg group-[.is-system]:border group-[.is-system]:border-accent-deep/40 group-[.is-system]:border-l-4 group-[.is-system]:bg-accent/10 group-[.is-system]:px-4 group-[.is-system]:py-2 group-[.is-system]:text-body-sm",
+        "group-[.is-assistant]:text-foreground group-[.is-user]:text-secondary-foreground",
+        className
+      ),
+      "data-theo-chat-content": "",
+      ...props,
+      children
+    }
+  )
+);
+ChatMessageContent.displayName = "ChatMessageContent";
+function renderPart(part, opts = {}) {
+  const overrides = opts.partRenderers ?? {};
+  if (isTextUIPart(part)) {
+    return overrides.text?.(part) ?? /* @__PURE__ */ jsx(TextPart, { part });
+  }
+  if (isReasoningUIPart(part)) {
+    return overrides.reasoning?.(part) ?? /* @__PURE__ */ jsx(ReasoningPart, { part });
+  }
+  if (isReasoningFileUIPart(part)) {
+    return overrides["reasoning-file"]?.(part) ?? null;
+  }
+  if (isFileUIPart(part)) {
+    return overrides.file?.(part) ?? /* @__PURE__ */ jsx(FilePart, { part });
+  }
+  if (isSourceUrlUIPart(part)) {
+    return overrides["source-url"]?.(part) ?? /* @__PURE__ */ jsx(SourceUrlPart, { part });
+  }
+  if (isSourceDocumentUIPart(part)) {
+    return overrides["source-document"]?.(part) ?? /* @__PURE__ */ jsx(SourceDocumentPart, { part });
+  }
+  if (isToolUIPart(part)) {
+    if (overrides.tool) return overrides.tool(part);
+    return /* @__PURE__ */ jsx(
+      AgentToolRenderer,
+      {
+        part,
+        toolRenderers: opts.toolRenderers,
+        classifyTool: opts.classifyTool
+      }
+    );
+  }
+  if (isDataUIPart(part)) {
+    return overrides.data?.(part) ?? /* @__PURE__ */ jsx(DataPart, { part, renderers: opts.dataRenderers });
+  }
+  if (isStepStartUIPart(part)) {
+    return overrides["step-start"]?.() ?? /* @__PURE__ */ jsx("hr", { className: "my-3 border-border", "aria-label": "Step boundary" });
+  }
+  return null;
+}
+var ChatMessage = forwardRef(
+  ({
+    message,
+    avatar,
+    actions,
+    variant,
+    partRenderers,
+    dataRenderers,
+    toolRenderers,
+    classifyTool,
+    className,
+    ...props
+  }, ref) => {
+    const inner = /* @__PURE__ */ jsxs(
+      ChatMessageContent,
+      {
+        variant: variant ?? (message.role === "assistant" ? "contained" : void 0),
+        children: [
+          message.parts.map((part, idx) => /* @__PURE__ */ jsx("div", { children: renderPart(part, { dataRenderers, partRenderers, toolRenderers, classifyTool }) }, `${part.type}-${idx}`)),
+          actions
+        ]
+      }
+    );
+    if (message.role === "user") {
+      return /* @__PURE__ */ jsxs(
+        ChatMessageRoot,
+        {
+          "data-slot": "chat-message",
+          ref,
+          from: "user",
+          className,
+          ...props,
+          children: [
+            inner,
+            avatar ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar }) : null
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      ChatMessageRoot,
+      {
+        "data-slot": "chat-message",
+        ref,
+        from: message.role,
+        className,
+        ...props,
+        children: [
+          avatar ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar }) : null,
+          inner
+        ]
+      }
+    );
+  }
+);
+ChatMessage.displayName = "ChatMessage";
+function ChatMessageActions({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "chat-message-actions",
+      className: cn("flex items-center gap-1", className),
+      "data-theo-chat-actions": "",
+      ...props,
+      children
+    }
+  );
+}
+function ChatMessageAction({
+  tooltip,
+  label,
+  variant = "ghost",
+  size = "icon",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "data-slot": "chat-message-action",
+      type: "button",
+      variant,
+      size,
+      title: tooltip,
+      className: cn(className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label || tooltip })
+      ]
+    }
+  );
+}
+function ChatMessageToolbar({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "chat-message-toolbar",
+      className: cn("mt-3 flex w-full items-center justify-between gap-3", className),
+      "data-theo-chat-toolbar": "",
+      ...props,
+      children
+    }
+  );
+}
+var MessageBranchContext = createContext(null);
+function useMessageBranch() {
+  const ctx = useContext(MessageBranchContext);
+  if (!ctx) {
+    throw new Error("ChatMessageBranch* components must be wrapped in <ChatMessageBranch>.");
+  }
+  return ctx;
+}
+function ChatMessageBranch({
+  defaultBranch = 0,
+  onBranchChange,
+  className,
+  ...props
+}) {
+  const [currentBranch, setCurrentBranch] = useState(defaultBranch);
+  const [branches, setBranches] = useState([]);
+  const handleChange = useCallback(
+    (next) => {
+      setCurrentBranch(next);
+      onBranchChange?.(next);
+    },
+    [onBranchChange]
+  );
+  const goToPrevious = useCallback(() => {
+    handleChange(currentBranch > 0 ? currentBranch - 1 : branches.length - 1);
+  }, [currentBranch, branches.length, handleChange]);
+  const goToNext = useCallback(() => {
+    handleChange(currentBranch < branches.length - 1 ? currentBranch + 1 : 0);
+  }, [currentBranch, branches.length, handleChange]);
+  const value = useMemo(
+    () => ({
+      branches,
+      currentBranch,
+      goToNext,
+      goToPrevious,
+      setBranches,
+      totalBranches: branches.length
+    }),
+    [branches, currentBranch, goToNext, goToPrevious]
+  );
+  return /* @__PURE__ */ jsx(MessageBranchContext.Provider, { "data-slot": "chat-message-branch", value, children: /* @__PURE__ */ jsx("div", { className: cn("grid w-full gap-2", className), ...props }) });
+}
+function ChatMessageBranchContent({
+  children,
+  ...props
+}) {
+  const { currentBranch, setBranches, branches } = useMessageBranch();
+  const childrenArray = useMemo(
+    () => Array.isArray(children) ? children : [children],
+    [children]
+  );
+  useEffect(() => {
+    if (branches.length !== childrenArray.length) {
+      setBranches(childrenArray);
+    }
+  }, [childrenArray, branches, setBranches]);
+  return /* @__PURE__ */ jsx(Fragment, { children: childrenArray.map((branch, idx) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid gap-2 overflow-hidden", idx === currentBranch ? "block" : "hidden"),
+      ...props,
+      children: branch
+    },
+    // Prefer a stable element key; fall back to index
+    branch?.key ?? `branch-${idx}`
+  )) });
+}
+function ChatMessageBranchSelector({
+  className,
+  ...props
+}) {
+  const { totalBranches } = useMessageBranch();
+  if (totalBranches <= 1) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("inline-flex items-center gap-0.5 rounded-md border border-border", className),
+      role: "group",
+      "aria-label": "Branch selector",
+      ...props
+    }
+  );
+}
+function ChatMessageBranchPrevious({
+  children,
+  ...props
+}) {
+  const { goToPrevious, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "data-slot": "chat-message-branch-previous",
+      type: "button",
+      variant: "ghost",
+      size: "icon",
+      "aria-label": "Previous branch",
+      disabled: totalBranches <= 1,
+      onClick: goToPrevious,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-3.5", "aria-hidden": "true" })
+    }
+  );
+}
+function ChatMessageBranchNext({
+  children,
+  ...props
+}) {
+  const { goToNext, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "data-slot": "chat-message-branch-next",
+      type: "button",
+      variant: "ghost",
+      size: "icon",
+      "aria-label": "Next branch",
+      disabled: totalBranches <= 1,
+      onClick: goToNext,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5", "aria-hidden": "true" })
+    }
+  );
+}
+function ChatMessageBranchPage({
+  className,
+  ...props
+}) {
+  const { currentBranch, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "chat-message-branch-page",
+      className: cn(
+        "inline-flex items-center px-2 font-mono text-label-caps text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        currentBranch + 1,
+        " of ",
+        totalBranches
+      ]
+    }
+  );
+}
+
+export { ChatMessage, ChatMessageAction, ChatMessageActions, ChatMessageBranch, ChatMessageBranchContent, ChatMessageBranchNext, ChatMessageBranchPage, ChatMessageBranchPrevious, ChatMessageBranchSelector, ChatMessageContent, ChatMessageResponse, ChatMessageRoot, ChatMessageToolbar, DataPart, FilePart, ReasoningPart, SourceDocumentPart, SourceUrlPart, TextPart, isCustomContentUIPart, isDataUIPart, isFileUIPart, isReasoningFileUIPart, isReasoningUIPart, isSourceDocumentUIPart, isSourceUrlUIPart, isStepStartUIPart, isTextUIPart, isToolUIPart, renderPart };
+//# sourceMappingURL=chunk-FOE3XXBJ.js.map
+//# sourceMappingURL=chunk-FOE3XXBJ.js.map