@mieweb/ui 0.10.0-dev.3 → 0.10.0-dev.30

package/dist/components/SuperChat/index.js

@@ -1,418 +1,235 @@
 import { TextRenderContext } from '../../chunk-I6CY5C6A.js';
 export { TextRenderContext, useTextRenderContext } from '../../chunk-I6CY5C6A.js';
-import { ChatBubble, MCPToolCallDisplay, AITypingIndicator, SparklesIcon, CloseIcon } from '../../chunk-22CYDCXA.js';
-import { notifyComposerMigrationOnce, ChatComposer } from '../../chunk-ACCAXVOG.js';
-import { Dropdown, DropdownSubmenu, DropdownItem } from '../../chunk-ZGRCSNPK.js';
+import { ChatBubble, MCPToolCallDisplay, AITypingIndicator, SparklesIcon, ButtonGroup, CloseIcon, JumpToBottomButton } from '../../chunk-RM2HPQIC.js';
+import { notifyComposerMigrationOnce, ChatComposer } from '../../chunk-CRS2CQWM.js';
+import { MediaFeed } from '../../chunk-BNH4SXJB.js';
+import '../../chunk-RISZWWEQ.js';
+import { MediaPlayer } from '../../chunk-2JICT4A2.js';
+import { Dropdown, DropdownSubmenu, DropdownItem } from '../../chunk-E2PBPQGS.js';
+import '../../chunk-VVDE4CHU.js';
 import { Avatar } from '../../chunk-HZ4MBUC3.js';
 import '../../chunk-IQ4KQJAO.js';
-import '../../chunk-VVDE4CHU.js';
+import { useStickToBottom, useStreamEndedBelowFold } from '../../chunk-BM35CACB.js';
+import '../../chunk-GW4RFJZ5.js';
+import '../../chunk-ENMXHZNE.js';
 import '../../chunk-6NZXWKUE.js';
 import '../../chunk-3IMM2PM4.js';
+import '../../chunk-4SMSH4OY.js';
+import '../../chunk-T4ME7QCT.js';
 import '../../chunk-62ZOA6PX.js';
 import '../../chunk-WSNMQQ4P.js';
-import '../../chunk-T4ME7QCT.js';
+import '../../chunk-VSQF22GL.js';
 import '../../chunk-BKSPDTX4.js';
+import { usePrefersReducedMotion } from '../../chunk-XDU65GLW.js';
+import { Button } from '../../chunk-7YO7DNUV.js';
 import { Badge } from '../../chunk-BMSG4NBH.js';
-import '../../chunk-XCP454Q6.js';
+import '../../chunk-GVM6DTR5.js';
+import { AnimatedPresence, Animated } from '../../chunk-F4N67NAF.js';
 import { cn } from '../../chunk-TQONQSJO.js';
 import '../../chunk-PX6F3LHL.js';
-import * as React2 from 'react';
+import * as React3 from 'react';
+import { createElement } from 'react';
+import { Ellipsis, Check, Clipboard, Pencil, Play, ArrowLeft } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 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 { Ellipsis, Check, Clipboard, Pencil } 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);
-      }
+function MessageMedia({
+  attachment,
+  onOpen,
+  openLabel,
+  playLabel,
+  errorLabel,
+  retryLabel,
+  launchId
+}) {
+  const playable = attachment.kind !== "image";
+  const actionLabel = playable ? playLabel : openLabel;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "superchat-message-media",
+      className: "mt-3 flex w-72 max-w-full flex-col gap-2",
+      children: [
+        attachment.title && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: attachment.title }),
+        attachment.kind === "image" && attachment.src ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: attachment.src,
+            alt: attachment.alt ?? attachment.title ?? "",
+            loading: "lazy",
+            className: "max-h-72 w-full rounded-lg object-contain"
+          }
+        ) : (attachment.kind === "video" || attachment.kind === "audio") && attachment.src ? (
+          // An opaque themed surface: the player's semi-transparent states
+          // (error, loading) must never compose onto a colored chat bubble.
+          /* @__PURE__ */ jsx("div", { className: "bg-background overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
+            MediaPlayer,
+            {
+              src: attachment.src,
+              kind: attachment.kind,
+              poster: attachment.poster,
+              "aria-label": attachment.alt ?? attachment.title ?? openLabel,
+              controls: !onOpen,
+              preload: "metadata",
+              labels: { error: errorLabel, retry: retryLabel },
+              className: "max-h-72"
+            }
+          ) })
+        ) : attachment.poster ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: attachment.poster,
+            alt: attachment.alt ?? attachment.title ?? "",
+            loading: "lazy",
+            className: "max-h-72 w-full rounded-lg object-contain"
+          }
+        ) : null,
+        attachment.caption && /* @__PURE__ */ jsx("p", { className: "text-sm", children: attachment.caption }),
+        onOpen && /* @__PURE__ */ jsx(ButtonGroup, { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            "data-media-launch-id": launchId,
+            variant: "secondary",
+            size: "sm",
+            leftIcon: playable ? /* @__PURE__ */ jsx(Play, { className: "size-4", "aria-hidden": "true" }) : void 0,
+            "aria-label": playable && attachment.title ? `${playLabel} ${attachment.title}` : actionLabel,
+            onClick: () => onOpen(playable),
+            children: actionLabel
+          }
+        ) })
+      ]
     }
-    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 formatTime(time) {
+  return new Date(time).toLocaleTimeString(void 0, {
+    hour: "numeric",
+    minute: "2-digit"
+  });
 }
-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]));
+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);
   }
-  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];
+  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;
     }
-    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])
-      );
+  return latest;
+}
+function parseHexColor(value) {
+  const hex = value.trim();
+  if (!/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex)) return null;
+  const normalized = hex.length === 4 ? "#" + [...hex.slice(1)].map((char) => char + char).join("") : hex;
+  return [1, 3, 5].map(
+    (start) => parseInt(normalized.slice(start, start + 2), 16)
+  );
+}
+function relativeLuminanceChannel(channel) {
+  const normalized = channel / 255;
+  return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+}
+function relativeLuminance(value) {
+  const rgb = parseHexColor(value);
+  if (!rgb) return null;
+  const [red, green, blue] = rgb;
+  return 0.2126 * relativeLuminanceChannel(red) + 0.7152 * relativeLuminanceChannel(green) + 0.0722 * relativeLuminanceChannel(blue);
+}
+function contrastRatio(foreground, background) {
+  const foregroundLuminance = relativeLuminance(foreground);
+  const backgroundLuminance = relativeLuminance(background);
+  if (foregroundLuminance === null || backgroundLuminance === null) return null;
+  const lighter = Math.max(foregroundLuminance, backgroundLuminance);
+  const darker = Math.min(foregroundLuminance, backgroundLuminance);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function minimumContrastRatio(value, backgrounds) {
+  const contrasts = backgrounds.map((background) => contrastRatio(value, background)).filter((contrast) => contrast !== null);
+  if (contrasts.length !== backgrounds.length) return null;
+  return Math.min(...contrasts);
+}
+function accessibleAccentTextColor(value) {
+  if (!value) return void 0;
+  const contrast = minimumContrastRatio(value, ["#f5f5f5", "#262626"]);
+  if (contrast === null) return value;
+  return contrast < 4.5 ? void 0 : value;
+}
+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"
     }
-    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",
+function ReferenceChip({
+  reference,
+  linkBuilder,
+  onReferenceClick
+}) {
+  const href = linkBuilder?.(reference);
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Badge,
       {
-        ...props,
-        className: cn(
-          "text-primary-800 hover:text-primary-900 dark:text-primary-300 underline underline-offset-2",
-          props.className
-        ),
-        target: props.target ?? "_blank",
-        rel: props.rel ?? "noopener noreferrer",
-        children
+        variant: "default",
+        size: "sm",
+        className: "rounded px-1.5 text-[10px] font-semibold tracking-wide uppercase",
+        children: reference.refType
       }
     ),
-    pre: ({ node: _node, ...props }) => /* @__PURE__ */ jsx(
-      "pre",
+    /* @__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",
       {
-        ...props,
-        tabIndex: 0,
-        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] text-neutral-800 dark:bg-neutral-700 dark:text-neutral-100",
-            props.className
-          )
-        }
-      );
-    },
-    input: ({ node: _node, ...props }) => {
-      if (props.type === "checkbox") {
-        return /* @__PURE__ */ jsx(
-          "input",
-          {
-            ...props,
-            "aria-label": props["aria-label"] ?? (props["aria-labelledby"] ? void 0 : "Task list item")
-          }
-        );
-      }
-      return /* @__PURE__ */ jsx("input", { ...props });
-    },
-    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-start 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 = React2.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 parseHexColor(value) {
-  const hex = value.trim();
-  if (!/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex)) return null;
-  const normalized = hex.length === 4 ? "#" + [...hex.slice(1)].map((char) => char + char).join("") : hex;
-  return [1, 3, 5].map(
-    (start) => parseInt(normalized.slice(start, start + 2), 16)
-  );
-}
-function relativeLuminanceChannel(channel) {
-  const normalized = channel / 255;
-  return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
-}
-function relativeLuminance(value) {
-  const rgb = parseHexColor(value);
-  if (!rgb) return null;
-  const [red, green, blue] = rgb;
-  return 0.2126 * relativeLuminanceChannel(red) + 0.7152 * relativeLuminanceChannel(green) + 0.0722 * relativeLuminanceChannel(blue);
-}
-function contrastRatio(foreground, background) {
-  const foregroundLuminance = relativeLuminance(foreground);
-  const backgroundLuminance = relativeLuminance(background);
-  if (foregroundLuminance === null || backgroundLuminance === null) return null;
-  const lighter = Math.max(foregroundLuminance, backgroundLuminance);
-  const darker = Math.min(foregroundLuminance, backgroundLuminance);
-  return (lighter + 0.05) / (darker + 0.05);
-}
-function minimumContrastRatio(value, backgrounds) {
-  const contrasts = backgrounds.map((background) => contrastRatio(value, background)).filter((contrast) => contrast !== null);
-  if (contrasts.length !== backgrounds.length) return null;
-  return Math.min(...contrasts);
-}
-function accessibleAccentTextColor(value) {
-  if (!value) return void 0;
-  const contrast = minimumContrastRatio(value, ["#f5f5f5", "#262626"]);
-  if (contrast === null) return value;
-  return contrast < 4.5 ? void 0 : value;
-}
-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
+        href,
+        className,
+        onClick: () => onReferenceClick?.(reference),
+        children: content
       }
     );
   }
@@ -472,11 +289,11 @@ function useMessageCopy({
   getText,
   defaultFormat
 }) {
-  const [copied, setCopied] = React2.useState(false);
-  const copiedTimer = React2.useRef(
+  const [copied, setCopied] = React3.useState(false);
+  const copiedTimer = React3.useRef(
     void 0
   );
-  React2.useEffect(() => () => window.clearTimeout(copiedTimer.current), []);
+  React3.useEffect(() => () => window.clearTimeout(copiedTimer.current), []);
   const flash = () => {
     setCopied(true);
     window.clearTimeout(copiedTimer.current);
@@ -529,7 +346,7 @@ function FooterActionButton({
   action,
   isSelf
 }) {
-  const [open, setOpen] = React2.useState(false);
+  const [open, setOpen] = React3.useState(false);
   const onClickCapture = action.submenu ? (e) => {
     if (e.metaKey || e.ctrlKey) {
       e.preventDefault();
@@ -572,17 +389,13 @@ function FooterActionButton({
     }
   );
 }
-var MessageActionsBar = React2.forwardRef(function MessageActionsBar2({ actions, isSelf }, ref) {
+var MessageActionsBar = React3.forwardRef(function MessageActionsBar2({ actions, isSelf }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       "data-slot": "superchat-message-actions",
-      className: cn(
-        "flex items-center gap-0.5",
-        isSelf && "justify-end",
-        actionRevealClass
-      ),
+      className: cn("flex flex-col items-center gap-0.5", actionRevealClass),
       children: actions.map((action) => /* @__PURE__ */ jsx(FooterActionButton, { action, isSelf }, action.id))
     }
   );
@@ -592,7 +405,7 @@ function MessageOverflowMenu({
   actions,
   footerVisible
 }) {
-  const [open, setOpen] = React2.useState(false);
+  const [open, setOpen] = React3.useState(false);
   const select = (fn) => {
     setOpen(false);
     fn();
@@ -601,7 +414,7 @@ function MessageOverflowMenu({
     "div",
     {
       className: cn(
-        "sticky bottom-2 shrink-0 self-end transition-opacity",
+        "sticky bottom-2 mt-auto shrink-0 transition-opacity",
         // 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",
@@ -645,7 +458,7 @@ function MessageOverflowMenu({
     }
   );
 }
-var MessageRow = React2.memo(function MessageRow2({
+var MessageRow = React3.memo(function MessageRow2({
   message,
   participant,
   isSelf,
@@ -654,21 +467,27 @@ var MessageRow = React2.memo(function MessageRow2({
   onReferenceClick,
   editable,
   onMessageEdited,
-  defaultCopyFormat = "rich"
+  defaultCopyFormat = "rich",
+  onOpenMedia,
+  openMediaLabel = "Open in media feed",
+  playMediaLabel = "Play",
+  mediaErrorLabel,
+  mediaRetryLabel
 }) {
   const streaming = message.status === "streaming";
-  const hasBody = !!message.text || (message.content?.length ?? 0) > 0;
-  const [isEditing, setIsEditing] = React2.useState(false);
-  const [draft, setDraft] = React2.useState(message.text ?? "");
-  const editRef = React2.useRef(null);
-  const bubbleRef = React2.useRef(null);
-  const autosize = React2.useCallback(() => {
+  const hasBody = !!message.text || (message.content?.length ?? 0) > 0 || (message.media?.length ?? 0) > 0;
+  const [isEditing, setIsEditing] = React3.useState(false);
+  const [draft, setDraft] = React3.useState(message.text ?? "");
+  const [editMinWidth, setEditMinWidth] = React3.useState();
+  const editRef = React3.useRef(null);
+  const bubbleRef = React3.useRef(null);
+  const autosize = React3.useCallback(() => {
     const el = editRef.current;
     if (!el) return;
     el.style.height = "auto";
     el.style.height = `${el.scrollHeight}px`;
   }, []);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!isEditing) return;
     const el = editRef.current;
     if (!el) return;
@@ -683,337 +502,662 @@ var MessageRow = React2.memo(function MessageRow2({
 ${block.text}
 \`\`\``;
     }
-    if ((block.type === "text" || block.type === "thinking") && block.text) {
-      return 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);
+  const showEditAction = canEdit && !isEditing;
+  const actionCount = (canCopy ? 1 : 0) + (showEditAction ? 1 : 0);
+  const hasActions = actionCount > 0;
+  const collapseToMenu = actionCount > 1;
+  const copy = useMessageCopy({
+    markdown: markdownSource,
+    getHtml: () => bubbleRef.current?.innerHTML ?? "",
+    getText: () => bubbleRef.current?.textContent ?? "",
+    defaultFormat: defaultCopyFormat
+  });
+  const actionsBarRef = React3.useRef(null);
+  const [footerVisible, setFooterVisible] = React3.useState(true);
+  React3.useEffect(() => {
+    const el = actionsBarRef.current;
+    if (!el || typeof globalThis.IntersectionObserver === "undefined") return;
+    const observer = new globalThis.IntersectionObserver(([entry]) => {
+      setFooterVisible(entry?.isIntersecting ?? false);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [hasActions, collapseToMenu]);
+  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 accentTextColor = accessibleAccentTextColor(accent);
+  const authorName = participant?.name ?? "Unknown";
+  const startEdit = () => {
+    const el = bubbleRef.current;
+    if (el) {
+      const cs = getComputedStyle(el);
+      const contentWidth = el.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
+      setEditMinWidth(contentWidth > 0 ? contentWidth : void 0);
+    }
+    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 actions = [
+    ...canCopy ? [
+      {
+        id: "copy",
+        label: "Copy message",
+        title: "Copy message (\u2318/Ctrl-click: default format)",
+        icon: copy.copied ? /* @__PURE__ */ jsx(Check, { size: 14, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Clipboard, { size: 14, "aria-hidden": "true" }),
+        onSelect: copy.copyDefault,
+        submenu: {
+          label: "Copy as",
+          items: [
+            {
+              id: "copy-rich",
+              label: "Copy as rich text",
+              description: "Rich text + Markdown",
+              onSelect: copy.copyRich
+            },
+            {
+              id: "copy-markdown",
+              label: "Copy as Markdown",
+              onSelect: copy.copyMarkdown
+            },
+            {
+              id: "copy-plain",
+              label: "Copy as plain text",
+              onSelect: copy.copyPlain
+            }
+          ]
+        }
+      }
+    ] : [],
+    ...showEditAction ? [
+      {
+        id: "edit",
+        label: "Edit message",
+        icon: /* @__PURE__ */ jsx(Pencil, { size: 14, "aria-hidden": "true" }),
+        onSelect: startEdit
+      }
+    ] : []
+  ];
+  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__ */ jsxs(
+          "div",
+          {
+            "data-slot": "superchat-message-gutter",
+            className: "flex shrink-0 flex-col items-center gap-1",
+            children: [
+              /* @__PURE__ */ jsx(ParticipantAvatar, { participant }),
+              hasActions && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  MessageOverflowMenu,
+                  {
+                    isSelf,
+                    actions,
+                    footerVisible: collapseToMenu ? false : footerVisible
+                  }
+                ),
+                !collapseToMenu && /* @__PURE__ */ jsx(
+                  MessageActionsBar,
+                  {
+                    ref: actionsBarRef,
+                    actions,
+                    isSelf
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 flex-1 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: accentTextColor ? { color: accentTextColor } : void 0,
+                        children: authorName
+                      }
+                    ),
+                    participant?.role && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: participant.role }),
+                    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: formatTime(message.time) }),
+                    message.editedAt && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "data-slot": "superchat-edited-indicator",
+                        className: "text-[10px] text-neutral-500 dark:text-neutral-400",
+                        title: `Edited ${formatTime(message.editedAt)}`,
+                        children: "(edited)"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex w-full items-center gap-1",
+                    isSelf ? "flex-row-reverse" : "flex-row"
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    ChatBubble,
+                    {
+                      ref: bubbleRef,
+                      "data-slot": "superchat-bubble",
+                      variant: isSelf ? "user" : "assistant",
+                      hasError: message.status === "error",
+                      className: "text-sm has-[[data-slot=superchat-nitro-table]]:w-full has-[[data-slot=superchat-nitro-table]]:max-w-full",
+                      children: isEditing ? /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          "data-slot": "superchat-message-editor",
+                          className: "flex w-80 max-w-full flex-col gap-2",
+                          style: editMinWidth ? { minWidth: editMinWidth } : void 0,
+                          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"
+                        }) }),
+                        message.media?.map((attachment) => /* @__PURE__ */ jsx(
+                          MessageMedia,
+                          {
+                            attachment,
+                            openLabel: openMediaLabel,
+                            playLabel: playMediaLabel,
+                            errorLabel: mediaErrorLabel,
+                            retryLabel: mediaRetryLabel,
+                            launchId: JSON.stringify([message.id, attachment.id]),
+                            onOpen: onOpenMedia ? (play) => onOpenMedia(message.id, attachment.id, play) : void 0
+                          },
+                          attachment.id
+                        )),
+                        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-start 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 }
+  }
+);
+
+// src/components/SuperChat/media.ts
+function getConversationMediaItems(conversation) {
+  const participants = new Map(
+    conversation.participants.map((participant) => [
+      participant.id,
+      participant
+    ])
+  );
+  return [...conversation.thread].sort(byTime).flatMap(
+    (message) => (message.media ?? []).map((attachment) => ({
+      // Tuple encoding prevents collisions when ids themselves contain a
+      // delimiter. Including the conversation keeps selection scoped to it.
+      id: JSON.stringify([conversation.id, message.id, attachment.id]),
+      conversationId: conversation.id,
+      message,
+      attachment,
+      participant: participants.get(message.participantId)
+    }))
+  );
+}
+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])
+      );
     }
-    return "";
-  }).filter(Boolean).join("\n\n") ?? "";
-  const canCopy = !isEditing && (!!message.content?.length || typeof message.text === "string" && message.text.length > 0);
-  const hasActions = canCopy || canEdit && !isEditing;
-  const copy = useMessageCopy({
-    markdown: markdownSource,
-    getHtml: () => bubbleRef.current?.innerHTML ?? "",
-    getText: () => bubbleRef.current?.textContent ?? "",
-    defaultFormat: defaultCopyFormat
-  });
-  const actionsBarRef = React2.useRef(null);
-  const [footerVisible, setFooterVisible] = React2.useState(true);
-  React2.useEffect(() => {
-    const el = actionsBarRef.current;
-    if (!el || typeof globalThis.IntersectionObserver === "undefined") return;
-    const observer = new globalThis.IntersectionObserver(([entry]) => {
-      setFooterVisible(entry?.isIntersecting ?? false);
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [hasActions]);
-  if (message.type === "system") {
-    return /* @__PURE__ */ jsx(
-      "div",
+    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",
       {
-        "data-slot": "superchat-system-message",
-        role: "status",
-        className: "my-1 text-center text-xs text-neutral-500 dark:text-neutral-400",
-        children: message.text
+        ...props,
+        className: cn(
+          "text-primary-800 hover:text-primary-900 dark:text-primary-300 underline underline-offset-2",
+          props.className
+        ),
+        target: props.target ?? "_blank",
+        rel: props.rel ?? "noopener noreferrer",
+        children
       }
-    );
-  }
-  if (message.type === "ref" && message.ref) {
-    return /* @__PURE__ */ jsx(
-      "div",
+    ),
+    pre: ({ node: _node, ...props }) => /* @__PURE__ */ jsx(
+      "pre",
       {
-        "data-slot": "superchat-reference",
-        className: cn("flex", isSelf && "justify-end"),
-        children: /* @__PURE__ */ jsx(
-          ReferenceChip,
+        ...props,
+        tabIndex: 0,
+        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] text-neutral-800 dark:bg-neutral-700 dark:text-neutral-100",
+            props.className
+          )
+        }
+      );
+    },
+    input: ({ node: _node, ...props }) => {
+      if (props.type === "checkbox") {
+        return /* @__PURE__ */ jsx(
+          "input",
           {
-            reference: message.ref,
-            linkBuilder,
-            onReferenceClick
+            ...props,
+            "aria-label": props["aria-label"] ?? (props["aria-labelledby"] ? void 0 : "Task list item")
           }
+        );
+      }
+      return /* @__PURE__ */ jsx("input", { ...props });
+    },
+    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-start dark:[&_th]:border-neutral-700",
+          props.className
         )
       }
-    );
-  }
-  const accent = participant?.color;
-  const accentTextColor = accessibleAccentTextColor(accent);
-  const authorName = participant?.name ?? "Unknown";
-  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)}`);
+    ) }),
+    // 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
       }
-      requestAnimationFrame(autosize);
-    });
-  };
-  const actions = [
-    ...canCopy ? [
+    ),
+    h2: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsx(
+      "h2",
       {
-        id: "copy",
-        label: "Copy message",
-        title: "Copy message (\u2318/Ctrl-click: default format)",
-        icon: copy.copied ? /* @__PURE__ */ jsx(Check, { size: 14, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Clipboard, { size: 14, "aria-hidden": "true" }),
-        onSelect: copy.copyDefault,
-        submenu: {
-          label: "Copy as",
-          items: [
-            {
-              id: "copy-rich",
-              label: "Copy as rich text",
-              description: "Rich text + Markdown",
-              onSelect: copy.copyRich
-            },
-            {
-              id: "copy-markdown",
-              label: "Copy as Markdown",
-              onSelect: copy.copyMarkdown
-            },
-            {
-              id: "copy-plain",
-              label: "Copy as plain text",
-              onSelect: copy.copyPlain
-            }
-          ]
-        }
+        ...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
       }
-    ] : [],
-    ...canEdit && !isEditing ? [
+    ),
+    h5: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsx(
+      "h5",
       {
-        id: "edit",
-        label: "Edit message",
-        icon: /* @__PURE__ */ jsx(Pencil, { size: 14, "aria-hidden": "true" }),
-        onSelect: startEdit
+        ...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 ?? [])
   ];
-  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: accentTextColor ? { color: accentTextColor } : void 0,
-                    children: authorName
-                  }
-                ),
-                participant?.role && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: participant.role }),
-                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: formatTime(message.time) }),
-                message.editedAt && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    "data-slot": "superchat-edited-indicator",
-                    className: "text-[10px] text-neutral-500 dark:text-neutral-400",
-                    title: `Edited ${formatTime(message.editedAt)}`,
-                    children: "(edited)"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "flex items-center gap-1",
-                isSelf ? "flex-row-reverse" : "flex-row"
-              ),
-              children: [
-                hasActions && /* @__PURE__ */ jsx(
-                  MessageOverflowMenu,
-                  {
-                    isSelf,
-                    actions,
-                    footerVisible
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  ChatBubble,
-                  {
-                    ref: bubbleRef,
-                    "data-slot": "superchat-bubble",
-                    variant: isSelf ? "user" : "assistant",
-                    hasError: message.status === "error",
-                    className: "text-sm has-[[data-slot=superchat-nitro-table]]:w-full has-[[data-slot=superchat-nitro-table]]:max-w-full",
-                    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, {}) })
-                    ] })
-                  }
-                )
-              ]
-            }
-          ),
-          hasActions && /* @__PURE__ */ jsx(
-            MessageActionsBar,
-            {
-              ref: actionsBarRef,
-              actions,
-              isSelf
-            }
-          )
-        ] })
-      ]
-    }
+  const pluginRehype = plugins.flatMap(
+    (p) => p.rehypePlugins ?? []
   );
-});
-var sidebarItem = cva(
-  "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-start 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"
-      }
+  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
     },
-    defaultVariants: { active: false }
+    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 = React3.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 VirtualThread({
   items,
   participantById,
@@ -1024,32 +1168,28 @@ function VirtualThread({
   editable,
   onMessageEdited,
   defaultCopyFormat,
-  order,
-  conversationId,
+  onOpenMedia,
+  openMediaLabel,
+  playMediaLabel,
+  mediaErrorLabel,
+  mediaRetryLabel,
+  scrollRef,
+  contentRef,
   containerProps
 }) {
-  const parentRef = React2.useRef(null);
   const virtualizer = useVirtualizer({
     count: items.length,
-    getScrollElement: () => parentRef.current,
+    getScrollElement: () => scrollRef.current,
     // Rough first guess; real heights are measured via measureElement.
     estimateSize: () => 88,
     overscan: 10,
     getItemKey: (index) => items[index]?.id ?? index
   });
-  const count = items.length;
-  React2.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(
+  return /* @__PURE__ */ jsx("div", { ...containerProps, ref: scrollRef, children: /* @__PURE__ */ jsx(
     "div",
     {
+      ref: contentRef,
       style: {
         height: virtualizer.getTotalSize(),
         position: "relative",
@@ -1081,7 +1221,12 @@ function VirtualThread({
                 onReferenceClick,
                 editable,
                 onMessageEdited,
-                defaultCopyFormat
+                defaultCopyFormat,
+                onOpenMedia,
+                openMediaLabel,
+                playMediaLabel,
+                mediaErrorLabel,
+                mediaRetryLabel
               }
             ) })
           },
@@ -1093,6 +1238,11 @@ function VirtualThread({
 }
 function SuperChat({
   conversation,
+  view,
+  defaultView = "thread",
+  onViewChange,
+  mediaFeedProps,
+  mediaLabels,
   currentParticipantId,
   renderPlugins,
   renderTextContent,
@@ -1110,38 +1260,349 @@ function SuperChat({
   onReferenceClick,
   onBack
 }) {
-  const headingId = React2.useId();
-  React2.useEffect(() => {
+  const headingId = React3.useId();
+  const [internalView, setInternalView] = React3.useState({
+    conversationId: conversation.id,
+    view: defaultView
+  });
+  const activeView = view ?? (internalView.conversationId === conversation.id ? internalView.view : "thread");
+  const labels = {
+    backToConversation: "Back to conversation",
+    openMedia: "Open in media feed",
+    playMedia: "Play",
+    unknownAuthor: "Unknown",
+    ...mediaLabels
+  };
+  const mediaItems = React3.useMemo(() => {
+    const items = getConversationMediaItems(conversation);
+    return order === "desc" ? items.reverse() : items;
+  }, [conversation, order]);
+  const [mediaSelection, setMediaSelection] = React3.useState();
+  const [manualPlaybackRequest, setManualPlaybackRequest] = React3.useState();
+  const playbackRequestCounter = React3.useRef(0);
+  const mediaFeedRef = React3.useRef(null);
+  const backToConversationRef = React3.useRef(null);
+  const focusMediaOnOpenRef = React3.useRef(false);
+  const focusThreadOnBackRef = React3.useRef(false);
+  const mediaReturnTargetRef = React3.useRef(void 0);
+  const mediaContextRef = React3.useRef({
+    conversation,
+    view,
+    onViewChange,
+    mediaFeedProps,
+    mediaItems
+  });
+  mediaContextRef.current = {
+    conversation,
+    view,
+    onViewChange,
+    mediaFeedProps,
+    mediaItems
+  };
+  const setView = React3.useCallback((next) => {
+    const context = mediaContextRef.current;
+    if (context.view === void 0)
+      setInternalView({ conversationId: context.conversation.id, view: next });
+    context.onViewChange?.(next, { conversation: context.conversation });
+  }, []);
+  const handleMediaSelection = React3.useCallback((item) => {
+    setMediaSelection({ conversationId: item.conversationId, itemId: item.id });
+    mediaContextRef.current.mediaFeedProps?.onActiveItemChange?.(item);
+  }, []);
+  const handleOpenMedia = React3.useCallback(
+    (messageId, attachmentId, play = false) => {
+      const item = mediaContextRef.current.mediaItems.find(
+        (candidate) => candidate.message.id === messageId && candidate.attachment.id === attachmentId
+      );
+      if (!item) return;
+      handleMediaSelection(item);
+      mediaReturnTargetRef.current = {
+        conversationId: item.conversationId,
+        messageId,
+        attachmentId
+      };
+      focusMediaOnOpenRef.current = true;
+      setManualPlaybackRequest(
+        play ? {
+          conversationId: item.conversationId,
+          itemId: item.id,
+          requestId: ++playbackRequestCounter.current
+        } : void 0
+      );
+      setView("media");
+    },
+    [handleMediaSelection, setView]
+  );
+  const handleBackToConversation = React3.useCallback(() => {
+    focusMediaOnOpenRef.current = false;
+    focusThreadOnBackRef.current = true;
+    setManualPlaybackRequest(void 0);
+    setView("thread");
+  }, [setView]);
+  const hostPlaybackRequest = mediaFeedProps?.playbackRequest;
+  const hostPlaybackKey = hostPlaybackRequest ? `${hostPlaybackRequest.itemId}\0${hostPlaybackRequest.requestId}` : void 0;
+  React3.useEffect(() => {
+    if (hostPlaybackKey === void 0) return;
+    setManualPlaybackRequest(void 0);
+  }, [hostPlaybackKey]);
+  React3.useEffect(() => {
+    if (internalView.conversationId !== conversation.id) {
+      setInternalView({ conversationId: conversation.id, view: "thread" });
+    }
+    if (mediaReturnTargetRef.current?.conversationId !== conversation.id) {
+      mediaReturnTargetRef.current = void 0;
+      focusMediaOnOpenRef.current = false;
+      focusThreadOnBackRef.current = false;
+      setManualPlaybackRequest(void 0);
+    }
+  }, [conversation.id, internalView.conversationId]);
+  React3.useEffect(() => {
+    if (activeView !== "media" || !focusMediaOnOpenRef.current) return;
+    const target = mediaFeedRef.current?.querySelector(
+      'article[tabindex="0"]'
+    ) ?? mediaFeedRef.current?.querySelector('[role="feed"]');
+    if (target) focusMediaOnOpenRef.current = false;
+    (target ?? backToConversationRef.current)?.focus({ preventScroll: true });
+  }, [
+    activeView,
+    mediaFeedProps?.loading,
+    mediaFeedProps?.error,
+    mediaItems.length
+  ]);
+  React3.useEffect(() => {
     notifyComposerMigrationOnce("SuperChat");
   }, []);
-  const renderText = React2.useMemo(
+  const renderText = React3.useMemo(
     () => renderTextContent ?? createMarkdownRenderer({
       plugins: renderPlugins,
       trusted: trustedContent
     }),
     [renderTextContent, renderPlugins, trustedContent]
   );
-  const threadRef = React2.useRef(null);
-  React2.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 = React2.useMemo(() => {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const {
+    containerRef: threadRef,
+    contentRef: threadContentRef,
+    isAtBottom,
+    scrollToBottom,
+    anchorToTurnStart,
+    followIfPinned,
+    stopFollowing
+  } = useStickToBottom({
+    disabled: order === "desc" || activeView === "media"
+  });
+  React3.useEffect(() => {
+    if (activeView !== "thread") return;
+    setManualPlaybackRequest(void 0);
+    if (!focusThreadOnBackRef.current) return;
+    focusThreadOnBackRef.current = false;
+    const source = mediaReturnTargetRef.current;
+    const launchId = source ? JSON.stringify([source.messageId, source.attachmentId]) : void 0;
+    const launcher = source?.conversationId === conversation.id ? Array.from(
+      threadRef.current?.querySelectorAll(
+        "[data-media-launch-id]"
+      ) ?? []
+    ).find((button) => button.dataset.mediaLaunchId === launchId) : void 0;
+    (launcher ?? threadRef.current)?.focus({ preventScroll: true });
+  }, [activeView, conversation.id, threadRef]);
+  const [hasNewBelow, setHasNewBelow] = React3.useState(false);
+  const [turnStartId, setTurnStartId] = React3.useState(null);
+  const [turnMinHeight, setTurnMinHeight] = React3.useState();
+  const anchoredTurnRef = React3.useRef(null);
+  const threadSnapshotRef = React3.useRef(void 0);
+  const atBottomRef = React3.useRef(isAtBottom);
+  atBottomRef.current = isAtBottom;
+  const pendingMediaOwnSendRef = React3.useRef(false);
+  const pendingMediaAppendRef = React3.useRef(false);
+  React3.useEffect(() => {
+    threadSnapshotRef.current = void 0;
+    pendingMediaOwnSendRef.current = false;
+    pendingMediaAppendRef.current = false;
+    setTurnStartId(null);
+    anchoredTurnRef.current = null;
+    if (order === "desc") {
+      const el = threadRef.current;
+      if (el) el.scrollTop = 0;
+    } else {
+      scrollToBottom("auto");
+    }
+    setHasNewBelow(false);
+  }, [conversation.id, order]);
+  const threadLength = conversation.thread.length;
+  const prevThreadLengthRef = React3.useRef(threadLength);
+  const prevMessageIdsRef = React3.useRef(
+    new Set(conversation.thread.map((message) => message.id))
+  );
+  const policyConversationRef = React3.useRef(conversation.id);
+  const policyBaselinedRef = React3.useRef(false);
+  React3.useEffect(() => {
+    if (!policyBaselinedRef.current || policyConversationRef.current !== conversation.id) {
+      policyBaselinedRef.current = true;
+      policyConversationRef.current = conversation.id;
+      prevThreadLengthRef.current = threadLength;
+      prevMessageIdsRef.current = new Set(
+        conversation.thread.map((message) => message.id)
+      );
+      if (order !== "desc" && [...conversation.thread].sort(byTime).at(-1)?.status === "streaming") {
+        stopFollowing();
+      }
+      return;
+    }
+    if (threadLength === prevThreadLengthRef.current) return;
+    const grew = threadLength > prevThreadLengthRef.current;
+    prevThreadLengthRef.current = threadLength;
+    if (grew && activeView === "media") pendingMediaAppendRef.current = true;
+    if (order === "desc") {
+      const el = threadRef.current;
+      if (el) el.scrollTop = 0;
+      return;
+    }
+    const prevIds = prevMessageIdsRef.current;
+    let turnStart;
+    if (grew && currentParticipantId) {
+      for (const message of [...conversation.thread].sort(byTime)) {
+        if (!prevIds.has(message.id) && message.participantId === currentParticipantId) {
+          turnStart = message.id;
+        }
+      }
+    }
+    if (turnStart) {
+      if (activeView === "media") pendingMediaOwnSendRef.current = true;
+      if (virtualized) {
+        scrollToBottom("auto");
+      } else {
+        setTurnStartId(turnStart);
+      }
+    } else if (grew) {
+      const newest = [...conversation.thread].sort(byTime).at(-1);
+      if (newest?.status === "streaming") {
+        followIfPinned("auto");
+        stopFollowing();
+      } else if (!followIfPinned("auto")) {
+        setHasNewBelow(true);
+      }
+    } else {
+      followIfPinned("auto");
+    }
+  }, [threadLength, order, isAtBottom, conversation.id, activeView]);
+  React3.useLayoutEffect(() => {
+    if (activeView !== "thread") return;
+    const container = threadRef.current;
+    if (!container) return;
+    const snapshot = threadSnapshotRef.current;
+    const sameThread = snapshot?.conversationId === conversation.id && snapshot.order === order;
+    const ownSend = pendingMediaOwnSendRef.current;
+    const appended = pendingMediaAppendRef.current;
+    pendingMediaOwnSendRef.current = false;
+    pendingMediaAppendRef.current = false;
+    if (order === "desc") {
+      container.scrollTop = sameThread && !appended ? snapshot.scrollTop : 0;
+    } else if (ownSend && !virtualized) ; else if (sameThread && !ownSend && (!snapshot.atBottom || !appended)) {
+      container.scrollTop = snapshot.scrollTop;
+      if (!snapshot.atBottom) stopFollowing();
+    } else {
+      scrollToBottom("auto");
+      if ([...conversation.thread].sort(byTime).at(-1)?.status === "streaming")
+        stopFollowing();
+    }
+    return () => {
+      threadSnapshotRef.current = {
+        conversationId: conversation.id,
+        order,
+        scrollTop: container.scrollTop,
+        atBottom: atBottomRef.current
+      };
+    };
+  }, [conversation.id, order, activeView, virtualized]);
+  React3.useLayoutEffect(() => {
+    if (!turnStartId || anchoredTurnRef.current === turnStartId) return;
+    const container = threadRef.current;
+    if (!container) return;
+    const reserve = Math.max(0, container.clientHeight - 32);
+    if (turnMinHeight !== reserve) {
+      setTurnMinHeight(reserve);
+      return;
+    }
+    const target = container.querySelector(
+      '[data-slot="superchat-turn"]'
+    );
+    if (target) {
+      anchorToTurnStart(target, prefersReducedMotion ? "auto" : "smooth");
+      anchoredTurnRef.current = turnStartId;
+    }
+  }, [
+    turnStartId,
+    turnMinHeight,
+    anchorToTurnStart,
+    prefersReducedMotion,
+    threadRef,
+    activeView
+  ]);
+  React3.useEffect(() => {
+    prevMessageIdsRef.current = new Set(
+      conversation.thread.map((message) => message.id)
+    );
+  });
+  React3.useEffect(() => {
+    if (isAtBottom) setHasNewBelow(false);
+  }, [isAtBottom]);
+  const newestMessage = React3.useMemo(
+    () => [...conversation.thread].sort(byTime).at(-1),
+    [conversation]
+  );
+  const raiseNewBelow = React3.useCallback(() => {
+    if (order !== "desc") setHasNewBelow(true);
+  }, [order]);
+  const resumeFollowing = React3.useCallback(() => {
+    if (order !== "desc") scrollToBottom("auto");
+  }, [order, scrollToBottom]);
+  useStreamEndedBelowFold(
+    newestMessage,
+    isAtBottom,
+    raiseNewBelow,
+    resumeFollowing
+  );
+  const handleJumpToBottom = React3.useCallback(() => {
+    scrollToBottom(prefersReducedMotion ? "auto" : "smooth");
+  }, [scrollToBottom, prefersReducedMotion]);
+  const participantById = React3.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     conversation.participants.forEach((p) => map.set(p.id, p));
     return map;
   }, [conversation]);
-  const orderedThread = React2.useMemo(() => {
+  const orderedThread = React3.useMemo(() => {
     const sorted = [...conversation.thread].sort(byTime);
     return order === "desc" ? sorted.reverse() : sorted;
   }, [conversation, order]);
-  const onMessageEditedRef = React2.useRef(onMessageEdited);
+  const turnIndex = React3.useMemo(
+    () => turnStartId && order !== "desc" ? orderedThread.findIndex((message) => message.id === turnStartId) : -1,
+    [orderedThread, turnStartId, order]
+  );
+  const renderMessageRow = (m) => /* @__PURE__ */ jsx(
+    MessageRow,
+    {
+      message: m,
+      participant: participantById.get(m.participantId),
+      isSelf: !!currentParticipantId && m.participantId === currentParticipantId,
+      renderText,
+      linkBuilder,
+      onReferenceClick,
+      editable,
+      onMessageEdited: handleMessageEdited,
+      defaultCopyFormat,
+      onOpenMedia: handleOpenMedia,
+      openMediaLabel: labels.openMedia,
+      playMediaLabel: labels.playMedia,
+      mediaErrorLabel: mediaFeedProps?.labels?.mediaError,
+      mediaRetryLabel: mediaFeedProps?.labels?.retry
+    },
+    m.id
+  );
+  const onMessageEditedRef = React3.useRef(onMessageEdited);
   onMessageEditedRef.current = onMessageEdited;
-  const conversationRef = React2.useRef(conversation);
+  const conversationRef = React3.useRef(conversation);
   conversationRef.current = conversation;
-  const handleMessageEdited = React2.useCallback(
+  const handleMessageEdited = React3.useCallback(
     (messageId, text) => {
       onMessageEditedRef.current?.(messageId, text, {
         conversation: conversationRef.current
@@ -1150,7 +1611,7 @@ function SuperChat({
     []
   );
   const editable = !readOnly && !!onMessageEdited;
-  const mentionOptions = React2.useMemo(
+  const mentionOptions = React3.useMemo(
     () => conversation.participants.filter((p) => p.kind !== "system").map((p) => ({
       id: p.id,
       label: p.name,
@@ -1160,17 +1621,17 @@ function SuperChat({
     })),
     [conversation.participants]
   );
-  const composerAccept = React2.useMemo(
+  const composerAccept = React3.useMemo(
     () => acceptTokensFor(acceptedFileTypes),
     [acceptedFileTypes]
   );
-  const [draft, setDraft] = React2.useState("");
-  const draftEpochRef = React2.useRef(0);
-  const handleDraftChange = React2.useCallback((value) => {
+  const [draft, setDraft] = React3.useState("");
+  const draftEpochRef = React3.useRef(0);
+  const handleDraftChange = React3.useCallback((value) => {
     draftEpochRef.current += 1;
     setDraft(value);
   }, []);
-  const handleComposerSend = React2.useCallback(
+  const handleComposerSend = React3.useCallback(
     async (message) => {
       const epoch = draftEpochRef.current;
       try {
@@ -1266,55 +1727,129 @@ function SuperChat({
             ]
           }
         ),
-        virtualized ? /* @__PURE__ */ jsx(
-          VirtualThread,
+        activeView === "media" ? /* @__PURE__ */ jsxs(
+          "div",
           {
-            items: orderedThread,
-            participantById,
-            currentParticipantId,
-            renderText,
-            linkBuilder,
-            onReferenceClick,
-            editable,
-            onMessageEdited: handleMessageEdited,
-            defaultCopyFormat,
-            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"
-            }
+            "data-slot": "superchat-media-view",
+            className: "flex min-h-0 flex-1 flex-col",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "px-4 pt-2", children: /* @__PURE__ */ jsx(ButtonGroup, { className: "justify-start", children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ref: backToConversationRef,
+                  variant: "ghost",
+                  size: "sm",
+                  leftIcon: /* @__PURE__ */ jsx(
+                    ArrowLeft,
+                    {
+                      className: "size-4 rtl:rotate-180",
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  onClick: handleBackToConversation,
+                  children: labels.backToConversation
+                }
+              ) }) }),
+              /* @__PURE__ */ createElement(
+                MediaFeed,
+                {
+                  ...mediaFeedProps,
+                  ref: mediaFeedRef,
+                  key: conversation.id,
+                  items: mediaItems,
+                  getId: (item) => item.id,
+                  getMedia: (item) => item.attachment,
+                  getTitle: (item) => item.attachment.title ?? "",
+                  getCaption: (item) => item.attachment.caption ?? item.message.text,
+                  getAuthor: (item) => ({
+                    name: item.participant?.name ?? labels.unknownAuthor,
+                    avatar: item.participant?.avatar
+                  }),
+                  activeItemId: mediaFeedProps?.activeItemId ?? (mediaSelection?.conversationId === conversation.id ? mediaSelection.itemId : void 0),
+                  onActiveItemChange: handleMediaSelection,
+                  playbackRequest: manualPlaybackRequest?.conversationId === conversation.id ? manualPlaybackRequest : mediaFeedProps?.playbackRequest,
+                  className: cn("min-h-0 flex-1", mediaFeedProps?.className)
+                }
+              )
+            ]
           }
-        ) : /* @__PURE__ */ jsx(
+        ) : /* @__PURE__ */ jsxs(
           "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,
-                defaultCopyFormat
-              },
-              m.id
-            ))
+            "data-slot": "superchat-thread-viewport",
+            className: "relative flex min-h-0 flex-1 flex-col",
+            children: [
+              virtualized ? /* @__PURE__ */ jsx(
+                VirtualThread,
+                {
+                  items: orderedThread,
+                  participantById,
+                  currentParticipantId,
+                  renderText,
+                  linkBuilder,
+                  onReferenceClick,
+                  editable,
+                  onMessageEdited: handleMessageEdited,
+                  defaultCopyFormat,
+                  onOpenMedia: handleOpenMedia,
+                  openMediaLabel: labels.openMedia,
+                  playMediaLabel: labels.playMedia,
+                  mediaErrorLabel: mediaFeedProps?.labels?.mediaError,
+                  mediaRetryLabel: mediaFeedProps?.labels?.retry,
+                  scrollRef: threadRef,
+                  contentRef: threadContentRef,
+                  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 overflow-y-auto p-4",
+                  children: /* @__PURE__ */ jsxs("div", { ref: threadContentRef, className: "space-y-4", children: [
+                    (turnIndex === -1 ? orderedThread : orderedThread.slice(0, turnIndex)).map(renderMessageRow),
+                    turnIndex !== -1 && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "data-slot": "superchat-turn",
+                        className: "space-y-4",
+                        style: { minHeight: turnMinHeight },
+                        children: orderedThread.slice(turnIndex).map(renderMessageRow)
+                      }
+                    )
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(AnimatedPresence, { children: order !== "desc" && !isAtBottom && /* @__PURE__ */ jsx(
+                Animated,
+                {
+                  preset: "fade",
+                  mode: "presence",
+                  className: "absolute inset-x-0 bottom-0 z-20",
+                  children: /* @__PURE__ */ jsx(
+                    JumpToBottomButton,
+                    {
+                      dataSlot: "superchat-jump-to-bottom",
+                      hasNewMessages: hasNewBelow,
+                      onClick: handleJumpToBottom
+                    }
+                  )
+                },
+                "jump-to-bottom"
+              ) })
+            ]
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1324,6 +1859,7 @@ function SuperChat({
             onValueChange: handleDraftChange,
             onSend: handleComposerSend,
             disabled: readOnly,
+            className: "px-4 pb-4",
             placeholder: readOnly ? "Read-only conversation" : "Type a message\u2026 use @ to address an agent",
             mentionOptions,
             allowAttachments: !readOnly,
@@ -1345,12 +1881,14 @@ function SuperChatConversations({
   onConversationOpened,
   onNewConversation
 }) {
-  const [internalActive, setInternalActive] = React2.useState(
+  const [internalActive, setInternalActive] = React3.useState(
     defaultActiveConversationId ?? conversations[0]?.id
   );
+  const [hasMounted, setHasMounted] = React3.useState(false);
+  React3.useEffect(() => setHasMounted(true), []);
   const requestedId = activeConversationId ?? internalActive;
   const activeId = conversations.some((c) => c.id === requestedId) ? requestedId : conversations[0]?.id;
-  const sortedConversations = React2.useMemo(
+  const sortedConversations = React3.useMemo(
     () => [...conversations].sort((a, b) => lastActivityOf(b) - lastActivityOf(a)),
     [conversations]
   );
@@ -1402,10 +1940,21 @@ function SuperChatConversations({
                       /* @__PURE__ */ jsx("span", { className: "block truncate font-medium", children: c.title }),
                       last?.text && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-neutral-600 dark:text-neutral-400", children: last.text })
                     ] }),
-                    !!c.unread && /* @__PURE__ */ jsxs("span", { className: "bg-primary-600 ms-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" })
-                    ] })
+                    /* @__PURE__ */ jsx(AnimatedPresence, { initial: hasMounted, children: !!c.unread && /* @__PURE__ */ jsxs(
+                      Animated,
+                      {
+                        as: "span",
+                        preset: "pop",
+                        mode: "presence",
+                        "data-slot": "superchat-unread-badge",
+                        className: "bg-primary-600 ms-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" })
+                        ]
+                      },
+                      "unread"
+                    ) })
                   ]
                 }
               ) }, c.id);
@@ -1418,6 +1967,11 @@ function SuperChatConversations({
 }
 function SuperChatInbox({
   conversations,
+  view,
+  defaultView,
+  onViewChange,
+  mediaFeedProps,
+  mediaLabels,
   activeConversationId,
   defaultActiveConversationId,
   currentParticipantId,
@@ -1439,13 +1993,13 @@ function SuperChatInbox({
   onNewConversation,
   onReferenceClick
 }) {
-  const [internalActive, setInternalActive] = React2.useState(
+  const [internalActive, setInternalActive] = React3.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] = React2.useState("list");
+  const [mobileView, setMobileView] = React3.useState("list");
   const handleOpen = (c) => {
     if (activeConversationId === void 0) setInternalActive(c.id);
     setMobileView("chat");
@@ -1479,6 +2033,11 @@ function SuperChatInbox({
           SuperChat,
           {
             conversation: active,
+            view,
+            defaultView,
+            onViewChange,
+            mediaFeedProps,
+            mediaLabels,
             currentParticipantId,
             renderPlugins,
             renderTextContent,
@@ -1514,6 +2073,6 @@ function SuperChatInbox({
   );
 }
 
-export { SuperChat, SuperChatConversations, SuperChatInbox, createMarkdownRenderer };
+export { SuperChat, SuperChatConversations, SuperChatInbox, createMarkdownRenderer, getConversationMediaItems };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map