@mieweb/ui 0.6.1-dev.148 → 0.6.1-dev.150

package/dist/components/SuperChat/index.js

@@ -0,0 +1,1282 @@
+import { TextRenderContext } from '../../chunk-I6CY5C6A.js';
+export { TextRenderContext, useTextRenderContext } from '../../chunk-I6CY5C6A.js';
+import { ChatBubble, MCPToolCallDisplay, AITypingIndicator, SparklesIcon, CloseIcon } from '../../chunk-XQE26F3G.js';
+import { MessageComposer } from '../../chunk-UHPQYBXQ.js';
+import { Dropdown, DropdownItem } from '../../chunk-M7BLVBL4.js';
+import '../../chunk-PVUDXJAI.js';
+import { Avatar } from '../../chunk-WO5CAOAN.js';
+import { Badge } from '../../chunk-DCER2QQB.js';
+import '../../chunk-T4ME7QCT.js';
+import '../../chunk-OKBR6PX4.js';
+import { cn } from '../../chunk-F3SOEIN2.js';
+import * as React4 from 'react';
+import Markdown, { defaultUrlTransform } from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { Pencil, Check, Clipboard } from 'lucide-react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+
+function remarkPreserveLineBreaks() {
+  const splitNode = (node) => {
+    if (!node.children) return;
+    const next = [];
+    for (const child of node.children) {
+      if (child.type === "text" && child.value && child.value.includes("\n")) {
+        const segments = child.value.split("\n");
+        segments.forEach((segment, i) => {
+          if (i > 0) next.push({ type: "break" });
+          if (segment) next.push({ type: "text", value: segment });
+        });
+      } else {
+        splitNode(child);
+        next.push(child);
+      }
+    }
+    node.children = next;
+  };
+  return (tree) => splitNode(tree);
+}
+function baseSanitizeSchema() {
+  const schema = JSON.parse(JSON.stringify(defaultSchema));
+  const attributes = schema.attributes ?? {};
+  const allowClass = (tag) => {
+    const existing = attributes[tag] ?? [];
+    const withoutClass = existing.filter(
+      (a) => !(Array.isArray(a) && a[0] === "className")
+    );
+    attributes[tag] = [...withoutClass, "className"];
+  };
+  allowClass("code");
+  allowClass("pre");
+  allowClass("span");
+  allowClass("div");
+  schema.attributes = attributes;
+  return schema;
+}
+function mergeSanitizeSchema(base, extra) {
+  if (!extra) return base;
+  const out = { ...base };
+  if (Array.isArray(extra.tagNames)) {
+    const a = base.tagNames ?? [];
+    out.tagNames = Array.from(/* @__PURE__ */ new Set([...a, ...extra.tagNames]));
+  }
+  if (extra.attributes && typeof extra.attributes === "object") {
+    const baseAttrs = {
+      ...base.attributes ?? {}
+    };
+    for (const [tag, attrs] of Object.entries(
+      extra.attributes
+    )) {
+      baseAttrs[tag] = [...baseAttrs[tag] ?? [], ...attrs];
+    }
+    out.attributes = baseAttrs;
+  }
+  if (extra.protocols && typeof extra.protocols === "object") {
+    const baseProtocols = {
+      ...base.protocols ?? {}
+    };
+    for (const [attr, protocols] of Object.entries(
+      extra.protocols
+    )) {
+      baseProtocols[attr] = Array.from(
+        /* @__PURE__ */ new Set([...baseProtocols[attr] ?? [], ...protocols])
+      );
+    }
+    out.protocols = baseProtocols;
+  }
+  for (const [k, v] of Object.entries(extra)) {
+    if (k === "tagNames" || k === "attributes" || k === "protocols") continue;
+    out[k] = v;
+  }
+  return out;
+}
+function baseComponents() {
+  return {
+    a: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...props,
+        className: cn(
+          "text-primary-700 hover:text-primary-800 dark:text-primary-300 underline underline-offset-2",
+          props.className
+        ),
+        target: props.target ?? "_blank",
+        rel: props.rel ?? "noopener noreferrer",
+        children
+      }
+    ),
+    pre: ({ node: _node, ...props }) => /* @__PURE__ */ jsx(
+      "pre",
+      {
+        ...props,
+        className: cn(
+          "overflow-x-auto rounded-lg bg-neutral-900 p-3 text-sm text-neutral-100 dark:bg-neutral-950",
+          props.className
+        )
+      }
+    ),
+    code: ({ node: _node, ...props }) => {
+      const isBlock = typeof props.className === "string" && props.className.includes("language-");
+      return /* @__PURE__ */ jsx(
+        "code",
+        {
+          ...props,
+          className: cn(
+            !isBlock && "rounded bg-neutral-200 px-1 py-0.5 text-[0.85em] dark:bg-neutral-700",
+            props.className
+          )
+        }
+      );
+    },
+    table: ({ node: _node, ...props }) => /* @__PURE__ */ jsx("div", { className: "my-2 overflow-x-auto", children: /* @__PURE__ */ jsx(
+      "table",
+      {
+        ...props,
+        className: cn(
+          "w-full border-collapse text-sm [&_td]:border [&_td]:border-neutral-200 [&_td]:px-2 [&_td]:py-1 dark:[&_td]:border-neutral-700 [&_th]:border [&_th]:border-neutral-200 [&_th]:px-2 [&_th]:py-1 [&_th]:text-left dark:[&_th]:border-neutral-700",
+          props.className
+        )
+      }
+    ) }),
+    // Tailwind's preflight resets list markers/padding; restore them explicitly
+    // so bullets/numbers show without depending on the typography plugin.
+    ul: ({ node: _node, ...props }) => /* @__PURE__ */ jsx("ul", { ...props, className: cn("list-disc ps-5", props.className) }),
+    ol: ({ node: _node, ...props }) => /* @__PURE__ */ jsx("ol", { ...props, className: cn("list-decimal ps-5", props.className) }),
+    li: ({ node: _node, ...props }) => /* @__PURE__ */ jsx("li", { ...props, className: cn("ps-1", props.className) }),
+    // Preflight also flattens headings to body size/weight; restore a sensible
+    // hierarchy without depending on the typography plugin.
+    h1: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsx(
+      "h1",
+      {
+        ...props,
+        className: cn("mt-3 mb-1 text-xl font-semibold", props.className),
+        children
+      }
+    ),
+    h2: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsx(
+      "h2",
+      {
+        ...props,
+        className: cn("mt-3 mb-1 text-lg font-semibold", props.className),
+        children
+      }
+    ),
+    h3: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsx(
+      "h3",
+      {
+        ...props,
+        className: cn("mt-2 mb-1 text-base font-semibold", props.className),
+        children
+      }
+    ),
+    h4: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsx(
+      "h4",
+      {
+        ...props,
+        className: cn("mt-2 mb-1 text-sm font-semibold", props.className),
+        children
+      }
+    ),
+    h5: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsx(
+      "h5",
+      {
+        ...props,
+        className: cn("mt-2 mb-1 text-sm font-semibold", props.className),
+        children
+      }
+    ),
+    h6: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsx(
+      "h6",
+      {
+        ...props,
+        className: cn(
+          "mt-2 mb-1 text-xs font-semibold tracking-wide uppercase",
+          props.className
+        ),
+        children
+      }
+    ),
+    hr: ({ node: _node, ...props }) => /* @__PURE__ */ jsx(
+      "hr",
+      {
+        ...props,
+        className: cn(
+          "my-2 border-neutral-300 dark:border-neutral-600",
+          props.className
+        )
+      }
+    )
+  };
+}
+function createMarkdownRenderer(options = {}) {
+  const { plugins = [], trusted = false } = options;
+  const remarkPlugins = [
+    remarkGfm,
+    remarkPreserveLineBreaks,
+    ...plugins.flatMap((p) => p.remarkPlugins ?? [])
+  ];
+  const pluginRehype = plugins.flatMap(
+    (p) => p.rehypePlugins ?? []
+  );
+  const sanitizeSchema = plugins.reduce(
+    (acc, p) => mergeSanitizeSchema(acc, p.sanitizeSchema),
+    baseSanitizeSchema()
+  );
+  const rehypePlugins = trusted ? pluginRehype : [...pluginRehype, [rehypeSanitize, sanitizeSchema]];
+  const components = plugins.reduce(
+    (acc, p) => ({ ...acc, ...p.components }),
+    baseComponents()
+  );
+  const MarkdownRenderer = (text, ctx) => /* @__PURE__ */ jsx(
+    MarkdownContent,
+    {
+      text,
+      messageId: ctx.messageId,
+      streaming: ctx.streaming,
+      remarkPlugins,
+      rehypePlugins,
+      components
+    },
+    ctx.messageId
+  );
+  return MarkdownRenderer;
+}
+var transformUrl = (url, key, node) => {
+  if (key === "src" && node.tagName === "img" && (/^data:image\//i.test(url) || /^blob:/i.test(url))) {
+    return url;
+  }
+  return defaultUrlTransform(url);
+};
+var MarkdownContent = React4.memo(function MarkdownContent2({
+  text,
+  messageId,
+  streaming,
+  remarkPlugins,
+  rehypePlugins,
+  components
+}) {
+  return /* @__PURE__ */ jsx(TextRenderContext.Provider, { value: { messageId, streaming }, children: /* @__PURE__ */ jsx(
+    Markdown,
+    {
+      remarkPlugins,
+      rehypePlugins,
+      urlTransform: transformUrl,
+      components,
+      children: text
+    }
+  ) });
+});
+function formatTime(time) {
+  return new Date(time).toLocaleTimeString(void 0, {
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+function byTime(a, b) {
+  return new Date(a.time).getTime() - new Date(b.time).getTime();
+}
+function lastActivityOf(c) {
+  if (c.lastActivity) return new Date(c.lastActivity).getTime();
+  const last = lastMessageByTime(c.thread);
+  return last ? new Date(last.time).getTime() : 0;
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function detectMentions(text, participants) {
+  const ids = [];
+  for (const p of participants) {
+    if (p.kind === "system") continue;
+    const token = "@" + p.name.split(" ")[0];
+    const pattern = new RegExp(
+      `(?<![\\w@])${escapeRegExp(token)}(?![\\w])`,
+      "i"
+    );
+    if (pattern.test(text)) ids.push(p.id);
+  }
+  return ids;
+}
+function lastMessageByTime(thread) {
+  let latest;
+  let latestTime = -Infinity;
+  for (const message of thread) {
+    const t = new Date(message.time).getTime();
+    if (t >= latestTime) {
+      latest = message;
+      latestTime = t;
+    }
+  }
+  return latest;
+}
+function ParticipantAvatar({
+  participant
+}) {
+  const isAgent = participant?.kind === "agent";
+  const backgroundColor = participant?.color ?? (isAgent ? "var(--mieweb-primary-700, #1f2937)" : "#64748b");
+  return /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      size: "xs",
+      src: participant?.avatar,
+      alt: "",
+      name: participant?.name ?? "?",
+      fallback: isAgent ? /* @__PURE__ */ jsx(SparklesIcon, { size: "sm" }) : void 0,
+      style: { backgroundColor },
+      "aria-hidden": "true",
+      className: "shrink-0"
+    }
+  );
+}
+function ReferenceChip({
+  reference,
+  linkBuilder,
+  onReferenceClick
+}) {
+  const href = linkBuilder?.(reference);
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Badge,
+      {
+        variant: "default",
+        size: "sm",
+        className: "rounded px-1.5 text-[10px] font-semibold tracking-wide uppercase",
+        children: reference.refType
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: reference.title })
+  ] });
+  const className = "inline-flex max-w-full items-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-700 hover:border-primary-300 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200";
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        className,
+        onClick: () => onReferenceClick?.(reference),
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className,
+      onClick: () => onReferenceClick?.(reference),
+      children: content
+    }
+  );
+}
+var ATTACHMENT_KIND_CONFIG = {
+  image: { accept: "image/*", match: (t) => t.startsWith("image/") },
+  video: { accept: "video/*", match: (t) => t.startsWith("video/") },
+  audio: { accept: "audio/*", match: (t) => t.startsWith("audio/") },
+  pdf: { accept: "application/pdf", match: (t) => t === "application/pdf" }
+};
+var DEFAULT_ACCEPTED_FILE_TYPES = [
+  "image",
+  "video",
+  "audio",
+  "pdf"
+];
+function acceptTokensFor(kinds = DEFAULT_ACCEPTED_FILE_TYPES) {
+  const source = kinds.length > 0 ? kinds : DEFAULT_ACCEPTED_FILE_TYPES;
+  return Array.from(
+    new Set(source.map((k) => ATTACHMENT_KIND_CONFIG[k].accept))
+  );
+}
+function filesToComposerAttachments(files) {
+  return Promise.all(
+    files.map(
+      (file, i) => new Promise((resolve, reject) => {
+        const reader = new window.FileReader();
+        reader.onload = () => {
+          const dataUrl = typeof reader.result === "string" ? reader.result : "";
+          resolve({
+            id: `att-${Date.now()}-${i}`,
+            name: file.name || `attachment-${i}`,
+            type: file.type || "application/octet-stream",
+            dataUrl
+          });
+        };
+        reader.onerror = () => reject(reader.error);
+        reader.readAsDataURL(file);
+      })
+    )
+  );
+}
+function CopyMenu({ isSelf, markdown, getHtml, getText }) {
+  const [open, setOpen] = React4.useState(false);
+  const [copied, setCopied] = React4.useState(false);
+  const copiedTimer = React4.useRef(
+    void 0
+  );
+  React4.useEffect(() => () => window.clearTimeout(copiedTimer.current), []);
+  const flash = () => {
+    setCopied(true);
+    window.clearTimeout(copiedTimer.current);
+    copiedTimer.current = setTimeout(() => setCopied(false), 1200);
+  };
+  const writeText = async (value) => {
+    if (!navigator.clipboard?.writeText) {
+      throw new Error("Clipboard API unavailable");
+    }
+    await navigator.clipboard.writeText(value);
+  };
+  const writeBoth = async () => {
+    const html = getHtml();
+    const text = markdown || getText();
+    try {
+      if (typeof window !== "undefined" && "ClipboardItem" in window && navigator.clipboard?.write) {
+        await navigator.clipboard.write([
+          new window.ClipboardItem({
+            "text/html": new Blob([html], { type: "text/html" }),
+            "text/plain": new Blob([text], { type: "text/plain" })
+          })
+        ]);
+      } else {
+        await writeText(text);
+      }
+    } catch {
+      await writeText(text);
+    }
+  };
+  const run = (fn) => {
+    setOpen(false);
+    void fn().then(flash, () => {
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "sticky bottom-2 shrink-0 self-end",
+        // Rich content (e.g. NITRO tables) layers internals up to z-50, so the
+        // open menu's stacking context must clear that.
+        open ? "z-[60]" : "z-10"
+      ),
+      children: /* @__PURE__ */ jsxs(
+        Dropdown,
+        {
+          open,
+          onOpenChange: setOpen,
+          placement: isSelf ? "top-end" : "top-start",
+          trigger: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-slot": "superchat-copy-button",
+              "aria-label": "Copy message",
+              className: "rounded p-1 text-neutral-400 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 hover:text-neutral-600 focus-visible:opacity-100 dark:hover:text-neutral-200",
+              children: copied ? /* @__PURE__ */ jsx(Check, { size: 14, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Clipboard, { size: 14, "aria-hidden": "true" })
+            }
+          ),
+          children: [
+            /* @__PURE__ */ jsx(DropdownItem, { onClick: () => run(writeBoth), children: /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start", children: [
+              /* @__PURE__ */ jsx("span", { children: "Copy" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-normal text-neutral-400", children: "Rich text + Markdown" })
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                onClick: () => run(() => writeText(markdown || getText())),
+                children: "Copy as Markdown"
+              }
+            ),
+            /* @__PURE__ */ jsx(DropdownItem, { onClick: () => run(() => writeText(getText())), children: "Copy as plain text" })
+          ]
+        }
+      )
+    }
+  );
+}
+var MessageRow = React4.memo(function MessageRow2({
+  message,
+  participant,
+  isSelf,
+  renderText,
+  linkBuilder,
+  onReferenceClick,
+  editable,
+  onMessageEdited
+}) {
+  const streaming = message.status === "streaming";
+  const hasBody = !!message.text || (message.content?.length ?? 0) > 0;
+  const [isEditing, setIsEditing] = React4.useState(false);
+  const [draft, setDraft] = React4.useState(message.text ?? "");
+  const editRef = React4.useRef(null);
+  const bubbleRef = React4.useRef(null);
+  const autosize = React4.useCallback(() => {
+    const el = editRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, []);
+  React4.useEffect(() => {
+    if (!isEditing) return;
+    const el = editRef.current;
+    if (!el) return;
+    el.focus();
+    el.setSelectionRange(el.value.length, el.value.length);
+    autosize();
+  }, [isEditing, autosize]);
+  if (message.type === "system") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "superchat-system-message",
+        role: "status",
+        className: "my-1 text-center text-xs text-neutral-500 dark:text-neutral-400",
+        children: message.text
+      }
+    );
+  }
+  if (message.type === "ref" && message.ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "superchat-reference",
+        className: cn("flex", isSelf && "justify-end"),
+        children: /* @__PURE__ */ jsx(
+          ReferenceChip,
+          {
+            reference: message.ref,
+            linkBuilder,
+            onReferenceClick
+          }
+        )
+      }
+    );
+  }
+  const accent = participant?.color;
+  const authorName = participant?.name ?? "Unknown";
+  const canEdit = !!editable && isSelf && !streaming && typeof message.text === "string" && !message.content?.length;
+  const startEdit = () => {
+    setDraft(message.text ?? "");
+    setIsEditing(true);
+  };
+  const cancelEdit = () => setIsEditing(false);
+  const saveEdit = () => {
+    const next = draft.trim();
+    if (next && next !== message.text) onMessageEdited?.(message.id, next);
+    setIsEditing(false);
+  };
+  const handleEditPaste = (e) => {
+    const files = Array.from(e.clipboardData.items).filter((item) => item.kind === "file" && item.type.startsWith("image/")).map((item) => item.getAsFile()).filter((f) => f !== null);
+    if (files.length === 0) return;
+    e.preventDefault();
+    const el = e.currentTarget;
+    const start = el.selectionStart ?? draft.length;
+    const end = el.selectionEnd ?? draft.length;
+    Promise.all(
+      files.map(
+        (file, i) => new Promise((resolve) => {
+          const reader = new window.FileReader();
+          reader.onload = () => {
+            const dataUrl = typeof reader.result === "string" ? reader.result : "";
+            const name = file.name || `pasted-image-${i + 1}.png`;
+            resolve(dataUrl ? `![${name}](${dataUrl})` : "");
+          };
+          reader.readAsDataURL(file);
+        })
+      )
+    ).then((snippets) => {
+      const insert = snippets.filter(Boolean).join("\n");
+      if (!insert) return;
+      el.focus();
+      el.setSelectionRange(start, end);
+      const text = `${insert}
+`;
+      const inserted = typeof document !== "undefined" && typeof document.execCommand === "function" && document.execCommand("insertText", false, text);
+      if (!inserted) {
+        setDraft((prev) => `${prev.slice(0, start)}${text}${prev.slice(end)}`);
+      }
+      requestAnimationFrame(autosize);
+    });
+  };
+  const markdownSource = typeof message.text === "string" && message.text ? message.text : message.content?.map((block) => {
+    if (block.type === "code" && block.text) {
+      return `\`\`\`${block.language ?? ""}
+${block.text}
+\`\`\``;
+    }
+    if ((block.type === "text" || block.type === "thinking") && block.text) {
+      return block.text;
+    }
+    return "";
+  }).filter(Boolean).join("\n\n") ?? "";
+  const canCopy = !isEditing && (!!message.content?.length || typeof message.text === "string" && message.text.length > 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "superchat-message",
+      role: "article",
+      "aria-label": `${authorName}, ${formatTime(message.time)}`,
+      className: cn(
+        "group flex gap-2",
+        isSelf ? "flex-row-reverse" : "flex-row"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(ParticipantAvatar, { participant }),
+        /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col gap-1", isSelf && "items-end"), children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "superchat-message-meta",
+              className: "flex items-baseline gap-2",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-xs font-medium",
+                    style: accent ? { color: accent } : void 0,
+                    children: authorName
+                  }
+                ),
+                participant?.role && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: participant.role }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: formatTime(message.time) }),
+                message.editedAt && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-slot": "superchat-edited-indicator",
+                    className: "text-[10px] text-neutral-400",
+                    title: `Edited ${formatTime(message.editedAt)}`,
+                    children: "(edited)"
+                  }
+                ),
+                canEdit && !isEditing && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-slot": "superchat-edit-button",
+                    onClick: startEdit,
+                    "aria-label": "Edit message",
+                    className: "rounded p-0.5 text-neutral-400 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 hover:text-neutral-600 focus-visible:opacity-100 dark:hover:text-neutral-200",
+                    children: /* @__PURE__ */ jsx(Pencil, { size: 14, "aria-hidden": "true" })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-1",
+                isSelf ? "flex-row-reverse" : "flex-row"
+              ),
+              children: [
+                canCopy && /* @__PURE__ */ jsx(
+                  CopyMenu,
+                  {
+                    isSelf,
+                    markdown: markdownSource,
+                    getHtml: () => bubbleRef.current?.innerHTML ?? "",
+                    getText: () => bubbleRef.current?.textContent ?? ""
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ChatBubble,
+                  {
+                    ref: bubbleRef,
+                    "data-slot": "superchat-bubble",
+                    variant: isSelf ? "user" : "assistant",
+                    hasError: message.status === "error",
+                    className: "text-sm",
+                    children: isEditing ? /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        "data-slot": "superchat-message-editor",
+                        className: "flex w-80 max-w-full flex-col gap-2",
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "textarea",
+                            {
+                              value: draft,
+                              ref: editRef,
+                              rows: 2,
+                              onChange: (e) => {
+                                setDraft(e.target.value);
+                                autosize();
+                              },
+                              onPaste: handleEditPaste,
+                              onKeyDown: (e) => {
+                                if (e.key === "Enter" && !e.shiftKey) {
+                                  e.preventDefault();
+                                  saveEdit();
+                                } else if (e.key === "Escape") {
+                                  e.preventDefault();
+                                  cancelEdit();
+                                }
+                              },
+                              "aria-label": "Edit message",
+                              className: "focus:ring-primary-500 max-h-60 min-h-16 w-full resize-none rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 focus:ring-1 focus:outline-none dark:border-neutral-600 dark:bg-neutral-900 dark:text-white"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: cancelEdit,
+                                className: "rounded-md px-2.5 py-1 text-xs font-medium text-neutral-200 hover:bg-white/10",
+                                children: "Cancel"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: saveEdit,
+                                disabled: !draft.trim() || draft.trim() === message.text,
+                                className: "rounded-md bg-white px-2.5 py-1 text-xs font-medium text-neutral-900 hover:bg-neutral-100 disabled:opacity-40",
+                                children: "Save"
+                              }
+                            )
+                          ] })
+                        ]
+                      }
+                    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      message.content?.map((block, i) => {
+                        if (block.type === "tool_use" && block.toolCall) {
+                          return /* @__PURE__ */ jsx(MCPToolCallDisplay, { toolCall: block.toolCall }, i);
+                        }
+                        if ((block.type === "text" || block.type === "thinking") && block.text) {
+                          return /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: "prose prose-sm dark:prose-invert max-w-none **:wrap-break-word",
+                              children: renderText(block.text, {
+                                messageId: message.id,
+                                streaming,
+                                role: participant?.kind === "human" ? "user" : "assistant"
+                              })
+                            },
+                            i
+                          );
+                        }
+                        if (block.type === "code" && block.text) {
+                          const fenced = `\`\`\`${block.language ?? ""}
+${block.text}
+\`\`\``;
+                          return /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: "prose prose-sm dark:prose-invert max-w-none **:wrap-break-word",
+                              children: renderText(fenced, {
+                                messageId: message.id,
+                                streaming,
+                                role: participant?.kind === "human" ? "user" : "assistant"
+                              })
+                            },
+                            i
+                          );
+                        }
+                        return null;
+                      }),
+                      message.text && /* @__PURE__ */ jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none **:wrap-break-word", children: renderText(message.text, {
+                        messageId: message.id,
+                        streaming,
+                        role: participant?.kind === "human" ? "user" : "assistant"
+                      }) }),
+                      streaming && !hasBody && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(AITypingIndicator, {}) })
+                    ] })
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+var sidebarItem = cva(
+  "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors",
+  {
+    variants: {
+      active: {
+        true: "bg-primary-100 text-primary-900 dark:bg-primary-900/40 dark:text-primary-100",
+        false: "text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800"
+      }
+    },
+    defaultVariants: { active: false }
+  }
+);
+function VirtualThread({
+  items,
+  participantById,
+  currentParticipantId,
+  renderText,
+  linkBuilder,
+  onReferenceClick,
+  editable,
+  onMessageEdited,
+  order,
+  conversationId,
+  containerProps
+}) {
+  const parentRef = React4.useRef(null);
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => parentRef.current,
+    // Rough first guess; real heights are measured via measureElement.
+    estimateSize: () => 88,
+    overscan: 10,
+    getItemKey: (index) => items[index]?.id ?? index
+  });
+  const count = items.length;
+  React4.useEffect(() => {
+    if (count === 0) return;
+    if (order === "desc") {
+      virtualizer.scrollToIndex(0, { align: "start" });
+    } else {
+      virtualizer.scrollToIndex(count - 1, { align: "end" });
+    }
+  }, [count, conversationId, order]);
+  const virtualItems = virtualizer.getVirtualItems();
+  return /* @__PURE__ */ jsx("div", { ...containerProps, ref: parentRef, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        height: virtualizer.getTotalSize(),
+        position: "relative",
+        width: "100%"
+      },
+      children: virtualItems.map((virtualRow) => {
+        const message = items[virtualRow.index];
+        if (!message) return null;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-index": virtualRow.index,
+            ref: virtualizer.measureElement,
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              transform: `translateY(${virtualRow.start}px)`
+            },
+            children: /* @__PURE__ */ jsx("div", { className: "pb-4", children: /* @__PURE__ */ jsx(
+              MessageRow,
+              {
+                message,
+                participant: participantById.get(message.participantId),
+                isSelf: !!currentParticipantId && message.participantId === currentParticipantId,
+                renderText,
+                linkBuilder,
+                onReferenceClick,
+                editable,
+                onMessageEdited
+              }
+            ) })
+          },
+          virtualRow.key
+        );
+      })
+    }
+  ) });
+}
+function SuperChat({
+  conversation,
+  currentParticipantId,
+  renderPlugins,
+  renderTextContent,
+  trustedContent,
+  readOnly,
+  acceptedFileTypes,
+  order = "asc",
+  virtualized = false,
+  linkBuilder,
+  className,
+  onMessageSent,
+  onMessageEdited,
+  onConversationClosed,
+  onReferenceClick,
+  onBack
+}) {
+  const headingId = React4.useId();
+  const renderText = React4.useMemo(
+    () => renderTextContent ?? createMarkdownRenderer({
+      plugins: renderPlugins,
+      trusted: trustedContent
+    }),
+    [renderTextContent, renderPlugins, trustedContent]
+  );
+  const threadRef = React4.useRef(null);
+  React4.useEffect(() => {
+    if (virtualized) return;
+    const el = threadRef.current;
+    if (!el) return;
+    el.scrollTop = order === "desc" ? 0 : el.scrollHeight;
+  }, [conversation.thread.length, conversation.id, order, virtualized]);
+  const participantById = React4.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    conversation.participants.forEach((p) => map.set(p.id, p));
+    return map;
+  }, [conversation]);
+  const orderedThread = React4.useMemo(() => {
+    const sorted = [...conversation.thread].sort(byTime);
+    return order === "desc" ? sorted.reverse() : sorted;
+  }, [conversation, order]);
+  const onMessageEditedRef = React4.useRef(onMessageEdited);
+  onMessageEditedRef.current = onMessageEdited;
+  const conversationRef = React4.useRef(conversation);
+  conversationRef.current = conversation;
+  const handleMessageEdited = React4.useCallback(
+    (messageId, text) => {
+      onMessageEditedRef.current?.(messageId, text, {
+        conversation: conversationRef.current
+      });
+    },
+    []
+  );
+  const editable = !readOnly && !!onMessageEdited;
+  const mentionOptions = React4.useMemo(
+    () => conversation.participants.filter((p) => p.kind !== "system").map((p) => ({
+      id: p.id,
+      label: p.name,
+      description: p.role,
+      meta: p.kind,
+      icon: /* @__PURE__ */ jsx(ParticipantAvatar, { participant: p })
+    })),
+    [conversation.participants]
+  );
+  const composerAccept = React4.useMemo(
+    () => acceptTokensFor(acceptedFileTypes),
+    [acceptedFileTypes]
+  );
+  const handleComposerSend = React4.useCallback(
+    async (message) => {
+      const text = message.content;
+      const mentions = detectMentions(text, conversation.participants);
+      const attachments = await filesToComposerAttachments(
+        message.attachments ?? []
+      );
+      onMessageSent?.(text, { conversation, mentions, attachments });
+    },
+    [conversation, onMessageSent]
+  );
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "superchat",
+      role: "group",
+      "aria-labelledby": headingId,
+      className: cn(
+        "flex min-w-0 flex-1 flex-col bg-white dark:bg-neutral-900",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "header",
+          {
+            "data-slot": "superchat-header",
+            className: "flex items-center justify-between gap-2 border-b border-neutral-200 p-3 dark:border-neutral-700",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+                onBack && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onBack,
+                    "aria-label": "Back to conversations",
+                    className: "-ml-1 shrink-0 rounded-md p-1 text-neutral-500 hover:bg-neutral-100 sm:hidden dark:text-neutral-300 dark:hover:bg-neutral-800",
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        viewBox: "0 0 24 24",
+                        width: "20",
+                        height: "20",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      id: headingId,
+                      className: "truncate text-sm font-semibold text-neutral-800 dark:text-neutral-100",
+                      children: conversation.title
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "data-slot": "superchat-participants",
+                      role: "group",
+                      "aria-label": "Participants",
+                      className: "mt-0.5 flex items-center gap-1",
+                      children: conversation.participants.slice(0, 6).map((p) => /* @__PURE__ */ jsx("span", { role: "img", "aria-label": p.name, children: /* @__PURE__ */ jsx(ParticipantAvatar, { participant: p }) }, p.id))
+                    }
+                  )
+                ] })
+              ] }),
+              onConversationClosed && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onConversationClosed(conversation),
+                  "aria-label": "Close conversation",
+                  className: "rounded-md p-1 text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800",
+                  children: /* @__PURE__ */ jsx(CloseIcon, {})
+                }
+              )
+            ]
+          }
+        ),
+        virtualized ? /* @__PURE__ */ jsx(
+          VirtualThread,
+          {
+            items: orderedThread,
+            participantById,
+            currentParticipantId,
+            renderText,
+            linkBuilder,
+            onReferenceClick,
+            editable,
+            onMessageEdited: handleMessageEdited,
+            order,
+            conversationId: conversation.id,
+            containerProps: {
+              "data-slot": "superchat-thread",
+              role: "log",
+              "aria-label": "Messages",
+              "aria-live": "polite",
+              // Focusable so keyboard-only users can scroll the message history.
+              tabIndex: 0,
+              className: "flex-1 overflow-y-auto p-4"
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "superchat-thread",
+            ref: threadRef,
+            role: "log",
+            "aria-label": "Messages",
+            "aria-live": "polite",
+            tabIndex: 0,
+            className: "flex-1 space-y-4 overflow-y-auto p-4",
+            children: orderedThread.map((m) => /* @__PURE__ */ jsx(
+              MessageRow,
+              {
+                message: m,
+                participant: participantById.get(m.participantId),
+                isSelf: !!currentParticipantId && m.participantId === currentParticipantId,
+                renderText,
+                linkBuilder,
+                onReferenceClick,
+                editable,
+                onMessageEdited: handleMessageEdited
+              },
+              m.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MessageComposer,
+          {
+            onSend: handleComposerSend,
+            disabled: readOnly,
+            placeholder: readOnly ? "Read-only conversation" : "Type a message\u2026 use @ to address an agent",
+            mentionOptions,
+            showAttachmentPicker: !readOnly,
+            showCameraButton: false,
+            acceptedFileTypes: composerAccept,
+            maxLength: 1e5
+          }
+        )
+      ]
+    }
+  );
+}
+function SuperChatConversations({
+  conversations,
+  activeConversationId,
+  defaultActiveConversationId,
+  className,
+  onConversationOpened,
+  onNewConversation
+}) {
+  const [internalActive, setInternalActive] = React4.useState(
+    defaultActiveConversationId ?? conversations[0]?.id
+  );
+  const requestedId = activeConversationId ?? internalActive;
+  const activeId = conversations.some((c) => c.id === requestedId) ? requestedId : conversations[0]?.id;
+  const sortedConversations = React4.useMemo(
+    () => [...conversations].sort((a, b) => lastActivityOf(b) - lastActivityOf(a)),
+    [conversations]
+  );
+  const selectConversation = (c) => {
+    if (activeConversationId === void 0) setInternalActive(c.id);
+    onConversationOpened?.(c);
+  };
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      "data-slot": "superchat-conversations",
+      "aria-label": "Conversations",
+      className: cn(
+        "flex w-64 shrink-0 flex-col border-r border-neutral-200 dark:border-neutral-700",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-neutral-700 dark:text-neutral-200", children: "Conversations" }),
+          onNewConversation && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onNewConversation,
+              "aria-label": "New conversation",
+              className: "rounded-md px-2 py-1 text-lg leading-none text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
+              children: "+"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "superchat-conversation-list",
+            role: "list",
+            className: "flex-1 space-y-1 overflow-y-auto px-2 pb-2",
+            children: sortedConversations.map((c) => {
+              const last = lastMessageByTime(c.thread);
+              const isActive = c.id === activeId;
+              return /* @__PURE__ */ jsx("div", { role: "listitem", children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "aria-current": isActive ? "true" : void 0,
+                  onClick: () => selectConversation(c),
+                  className: sidebarItem({ active: isActive }),
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { className: "flex-1 truncate", children: [
+                      /* @__PURE__ */ jsx("span", { className: "block truncate font-medium", children: c.title }),
+                      last?.text && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-neutral-400", children: last.text })
+                    ] }),
+                    !!c.unread && /* @__PURE__ */ jsxs("span", { className: "bg-primary-600 ml-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[10px] font-semibold text-white", children: [
+                      c.unread,
+                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: " unread messages" })
+                    ] })
+                  ]
+                }
+              ) }, c.id);
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+function SuperChatInbox({
+  conversations,
+  activeConversationId,
+  defaultActiveConversationId,
+  currentParticipantId,
+  renderPlugins,
+  renderTextContent,
+  trustedContent,
+  readOnly,
+  acceptedFileTypes,
+  order,
+  virtualized,
+  showSidebar = true,
+  linkBuilder,
+  className,
+  onMessageSent,
+  onMessageEdited,
+  onConversationOpened,
+  onConversationClosed,
+  onNewConversation,
+  onReferenceClick
+}) {
+  const [internalActive, setInternalActive] = React4.useState(
+    defaultActiveConversationId ?? conversations[0]?.id
+  );
+  const requestedId = activeConversationId ?? internalActive;
+  const active = conversations.find((c) => c.id === requestedId) ?? conversations[0];
+  const activeId = active?.id;
+  const [mobileView, setMobileView] = React4.useState("list");
+  const handleOpen = (c) => {
+    if (activeConversationId === void 0) setInternalActive(c.id);
+    setMobileView("chat");
+    onConversationOpened?.(c);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "superchat-inbox",
+      role: "group",
+      "aria-label": active ? `Chat: ${active.title}` : "Chat",
+      className: cn(
+        "flex h-full overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-900",
+        className
+      ),
+      children: [
+        showSidebar && /* @__PURE__ */ jsx(
+          SuperChatConversations,
+          {
+            conversations,
+            activeConversationId: activeId,
+            onConversationOpened: handleOpen,
+            onNewConversation,
+            className: cn(
+              "w-full sm:w-64",
+              mobileView === "chat" && "hidden sm:flex"
+            )
+          }
+        ),
+        active ? /* @__PURE__ */ jsx(
+          SuperChat,
+          {
+            conversation: active,
+            currentParticipantId,
+            renderPlugins,
+            renderTextContent,
+            trustedContent,
+            readOnly,
+            acceptedFileTypes,
+            order,
+            virtualized,
+            linkBuilder,
+            onMessageSent,
+            onMessageEdited,
+            onConversationClosed,
+            onReferenceClick,
+            onBack: showSidebar ? () => setMobileView("list") : void 0,
+            className: cn(
+              showSidebar && mobileView === "list" && "hidden sm:flex"
+            )
+          }
+        ) : /* @__PURE__ */ jsx(
+          "section",
+          {
+            "data-slot": "superchat",
+            className: cn(
+              "min-w-0 flex-1 items-center justify-center text-sm text-neutral-400",
+              showSidebar && mobileView === "list" ? "hidden sm:flex" : "flex"
+            ),
+            children: "No conversation selected"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { SuperChat, SuperChatConversations, SuperChatInbox, createMarkdownRenderer };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map