@mieweb/ui 0.10.0-dev.9 → 0.11.0-dev.0

package/dist/components/SuperChat/index.cjs

@@ -1,31 +1,45 @@
 'use strict';
 
 var chunkJFLC7SHM_cjs = require('../../chunk-JFLC7SHM.cjs');
-var chunkFS4VZUFV_cjs = require('../../chunk-FS4VZUFV.cjs');
-var chunkX4XPNTCZ_cjs = require('../../chunk-X4XPNTCZ.cjs');
-var chunkSGFYA22I_cjs = require('../../chunk-SGFYA22I.cjs');
-var chunkJEIW7BSV_cjs = require('../../chunk-JEIW7BSV.cjs');
+var chunkXRVMYT5G_cjs = require('../../chunk-XRVMYT5G.cjs');
+var chunkU2RS574O_cjs = require('../../chunk-U2RS574O.cjs');
+var chunkAJPFQF3H_cjs = require('../../chunk-AJPFQF3H.cjs');
+require('../../chunk-GLXTVCHN.cjs');
+var chunkKQ6GLYFZ_cjs = require('../../chunk-KQ6GLYFZ.cjs');
+require('../../chunk-ZNUMOJOI.cjs');
+var chunkPINIBEIU_cjs = require('../../chunk-PINIBEIU.cjs');
+require('../../chunk-PJ6CC53R.cjs');
 require('../../chunk-VBWRH4UW.cjs');
 var chunkVPTASZ2O_cjs = require('../../chunk-VPTASZ2O.cjs');
-require('../../chunk-PJ6CC53R.cjs');
+require('../../chunk-254QK722.cjs');
+require('../../chunk-P22YCUVM.cjs');
+require('../../chunk-Q3YVLO52.cjs');
+var chunkGKDHMNUA_cjs = require('../../chunk-GKDHMNUA.cjs');
+require('../../chunk-LC3JL2HB.cjs');
 require('../../chunk-I44YNYI6.cjs');
 require('../../chunk-Z5S5JEJD.cjs');
+require('../../chunk-NNEFAUHV.cjs');
+require('../../chunk-FHY3K6PL.cjs');
 require('../../chunk-FSGEDDF2.cjs');
 require('../../chunk-AOHJILLU.cjs');
-require('../../chunk-FHY3K6PL.cjs');
+require('../../chunk-SCV7C55E.cjs');
 require('../../chunk-L7L5S2HO.cjs');
-var chunk6HFFWEM3_cjs = require('../../chunk-6HFFWEM3.cjs');
-var chunkYVL3XATO_cjs = require('../../chunk-YVL3XATO.cjs');
-require('../../chunk-NV2CWBI2.cjs');
+var chunkYW2AKBLS_cjs = require('../../chunk-YW2AKBLS.cjs');
+require('../../chunk-Z3WMDVMR.cjs');
+var chunk7E46YDOT_cjs = require('../../chunk-7E46YDOT.cjs');
+require('../../chunk-EACNRR3C.cjs');
+var chunkANMX7YDL_cjs = require('../../chunk-ANMX7YDL.cjs');
+require('../../chunk-DXEPYK3I.cjs');
+var chunkIEY3ZJIT_cjs = require('../../chunk-IEY3ZJIT.cjs');
 var chunkS5RVSXDV_cjs = require('../../chunk-S5RVSXDV.cjs');
 require('../../chunk-EUAMEVVI.cjs');
 var React3 = require('react');
+var lucideReact = require('lucide-react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
 var Markdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
 var rehypeSanitize = require('rehype-sanitize');
-var jsxRuntime = require('react/jsx-runtime');
-var classVarianceAuthority = require('class-variance-authority');
-var lucideReact = require('lucide-react');
 var reactVirtual = require('@tanstack/react-virtual');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -53,269 +67,74 @@ var Markdown__default = /*#__PURE__*/_interopDefault(Markdown);
 var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
 var rehypeSanitize__default = /*#__PURE__*/_interopDefault(rehypeSanitize);
 
-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(rehypeSanitize.defaultSchema));
-  const attributes = schema.attributes ?? {};
-  const allowClass = (tag) => {
-    const existing = attributes[tag] ?? [];
-    const withoutClass = existing.filter(
-      (a) => !(Array.isArray(a) && a[0] === "className")
-    );
-    attributes[tag] = [...withoutClass, "className"];
-  };
-  allowClass("code");
-  allowClass("pre");
-  allowClass("span");
-  allowClass("div");
-  schema.attributes = attributes;
-  return schema;
-}
-function mergeSanitizeSchema(base, extra) {
-  if (!extra) return base;
-  const out = { ...base };
-  if (Array.isArray(extra.tagNames)) {
-    const a = base.tagNames ?? [];
-    out.tagNames = Array.from(/* @__PURE__ */ new Set([...a, ...extra.tagNames]));
-  }
-  if (extra.attributes && typeof extra.attributes === "object") {
-    const baseAttrs = {
-      ...base.attributes ?? {}
-    };
-    for (const [tag, attrs] of Object.entries(
-      extra.attributes
-    )) {
-      baseAttrs[tag] = [...baseAttrs[tag] ?? [], ...attrs];
-    }
-    out.attributes = baseAttrs;
-  }
-  if (extra.protocols && typeof extra.protocols === "object") {
-    const baseProtocols = {
-      ...base.protocols ?? {}
-    };
-    for (const [attr, protocols] of Object.entries(
-      extra.protocols
-    )) {
-      baseProtocols[attr] = Array.from(
-        /* @__PURE__ */ new Set([...baseProtocols[attr] ?? [], ...protocols])
-      );
-    }
-    out.protocols = baseProtocols;
-  }
-  for (const [k, v] of Object.entries(extra)) {
-    if (k === "tagNames" || k === "attributes" || k === "protocols") continue;
-    out[k] = v;
-  }
-  return out;
-}
-function baseComponents() {
-  return {
-    a: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-      "a",
-      {
-        ...props,
-        className: chunkS5RVSXDV_cjs.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
-      }
-    ),
-    pre: ({ node: _node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-      "pre",
-      {
-        ...props,
-        tabIndex: 0,
-        className: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.jsx(
-        "code",
-        {
-          ...props,
-          className: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.jsx(
-          "input",
+function MessageMedia({
+  attachment,
+  onOpen,
+  openLabel,
+  playLabel,
+  errorLabel,
+  retryLabel,
+  launchId
+}) {
+  const playable = attachment.kind !== "image";
+  const actionLabel = playable ? playLabel : openLabel;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "superchat-message-media",
+      className: "mt-3 flex w-72 max-w-full flex-col gap-2",
+      children: [
+        attachment.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: attachment.title }),
+        attachment.kind === "image" && attachment.src ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
           {
-            ...props,
-            "aria-label": props["aria-label"] ?? (props["aria-labelledby"] ? void 0 : "Task list item")
+            src: attachment.src,
+            alt: attachment.alt ?? attachment.title ?? "",
+            loading: "lazy",
+            className: "max-h-72 w-full rounded-lg object-contain"
           }
-        );
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx("input", { ...props });
-    },
-    table: ({ node: _node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-2 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "table",
-      {
-        ...props,
-        className: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.jsx("ul", { ...props, className: chunkS5RVSXDV_cjs.cn("list-disc ps-5", props.className) }),
-    ol: ({ node: _node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { ...props, className: chunkS5RVSXDV_cjs.cn("list-decimal ps-5", props.className) }),
-    li: ({ node: _node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { ...props, className: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.jsx(
-      "h1",
-      {
-        ...props,
-        className: chunkS5RVSXDV_cjs.cn("mt-3 mb-1 text-xl font-semibold", props.className),
-        children
-      }
-    ),
-    h2: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-      "h2",
-      {
-        ...props,
-        className: chunkS5RVSXDV_cjs.cn("mt-3 mb-1 text-lg font-semibold", props.className),
-        children
-      }
-    ),
-    h3: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-      "h3",
-      {
-        ...props,
-        className: chunkS5RVSXDV_cjs.cn("mt-2 mb-1 text-base font-semibold", props.className),
-        children
-      }
-    ),
-    h4: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-      "h4",
-      {
-        ...props,
-        className: chunkS5RVSXDV_cjs.cn("mt-2 mb-1 text-sm font-semibold", props.className),
-        children
-      }
-    ),
-    h5: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-      "h5",
-      {
-        ...props,
-        className: chunkS5RVSXDV_cjs.cn("mt-2 mb-1 text-sm font-semibold", props.className),
-        children
-      }
-    ),
-    h6: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-      "h6",
-      {
-        ...props,
-        className: chunkS5RVSXDV_cjs.cn(
-          "mt-2 mb-1 text-xs font-semibold tracking-wide uppercase",
-          props.className
-        ),
-        children
-      }
-    ),
-    hr: ({ node: _node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-      "hr",
-      {
-        ...props,
-        className: chunkS5RVSXDV_cjs.cn(
-          "my-2 border-neutral-300 dark:border-neutral-600",
-          props.className
-        )
-      }
-    )
-  };
-}
-function createMarkdownRenderer(options = {}) {
-  const { plugins = [], trusted = false } = options;
-  const remarkPlugins = [
-    remarkGfm__default.default,
-    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__default.default, sanitizeSchema]];
-  const components = plugins.reduce(
-    (acc, p) => ({ ...acc, ...p.components }),
-    baseComponents()
-  );
-  const MarkdownRenderer = (text, ctx) => /* @__PURE__ */ jsxRuntime.jsx(
-    MarkdownContent,
-    {
-      text,
-      messageId: ctx.messageId,
-      streaming: ctx.streaming,
-      remarkPlugins,
-      rehypePlugins,
-      components
-    },
-    ctx.messageId
+        ) : (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__ */ jsxRuntime.jsx("div", { className: "bg-background overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+            chunkKQ6GLYFZ_cjs.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-sm", children: attachment.caption }),
+        onOpen && /* @__PURE__ */ jsxRuntime.jsx(chunkXRVMYT5G_cjs.ButtonGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          chunkANMX7YDL_cjs.Button,
+          {
+            "data-media-launch-id": launchId,
+            variant: "secondary",
+            size: "sm",
+            leftIcon: playable ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "size-4", "aria-hidden": "true" }) : void 0,
+            "aria-label": playable && attachment.title ? `${playLabel} ${attachment.title}` : actionLabel,
+            onClick: () => onOpen(playable),
+            children: actionLabel
+          }
+        ) })
+      ]
+    }
   );
-  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 Markdown.defaultUrlTransform(url);
-};
-var MarkdownContent = React3__namespace.memo(function MarkdownContent2({
-  text,
-  messageId,
-  streaming,
-  remarkPlugins,
-  rehypePlugins,
-  components
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkJFLC7SHM_cjs.TextRenderContext.Provider, { value: { messageId, streaming }, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Markdown__default.default,
-    {
-      remarkPlugins,
-      rehypePlugins,
-      urlTransform: transformUrl,
-      components,
-      children: text
-    }
-  ) });
-});
 function formatTime(time) {
   return new Date(time).toLocaleTimeString(void 0, {
     hour: "numeric",
@@ -401,13 +220,13 @@ function ParticipantAvatar({
   const isAgent = participant?.kind === "agent";
   const backgroundColor = participant?.color ?? (isAgent ? "var(--mieweb-primary-700, #1f2937)" : "#64748b");
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkJEIW7BSV_cjs.Avatar,
+    chunkGKDHMNUA_cjs.Avatar,
     {
       size: "xs",
       src: participant?.avatar,
       alt: "",
       name: participant?.name ?? "?",
-      fallback: isAgent ? /* @__PURE__ */ jsxRuntime.jsx(chunkFS4VZUFV_cjs.SparklesIcon, { size: "sm" }) : void 0,
+      fallback: isAgent ? /* @__PURE__ */ jsxRuntime.jsx(chunkXRVMYT5G_cjs.SparklesIcon, { size: "sm" }) : void 0,
       style: { backgroundColor },
       "aria-hidden": "true",
       className: "shrink-0"
@@ -422,7 +241,7 @@ function ReferenceChip({
   const href = linkBuilder?.(reference);
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkYVL3XATO_cjs.Badge,
+      chunk7E46YDOT_cjs.Badge,
       {
         variant: "default",
         size: "sm",
@@ -548,7 +367,7 @@ function ActionMenuItem({
   item,
   onSelect
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkSGFYA22I_cjs.DropdownItem, { onClick: () => onSelect(item.onSelect), children: item.description ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col items-start", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkPINIBEIU_cjs.DropdownItem, { onClick: () => onSelect(item.onSelect), children: item.description ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col items-start", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-normal text-neutral-400", children: item.description })
   ] }) : item.label });
@@ -580,7 +399,7 @@ function FooterActionButton({
   );
   if (!action.submenu) return button;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkSGFYA22I_cjs.Dropdown,
+    chunkPINIBEIU_cjs.Dropdown,
     {
       open,
       onOpenChange: setOpen,
@@ -635,7 +454,7 @@ function MessageOverflowMenu({
         footerVisible && !open && "pointer-events-none invisible opacity-0"
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        chunkSGFYA22I_cjs.Dropdown,
+        chunkPINIBEIU_cjs.Dropdown,
         {
           open,
           onOpenChange: setOpen,
@@ -654,9 +473,9 @@ function MessageOverflowMenu({
             (action) => action.submenu ? (
               // Actions with variants collapse to just their submenu — a
               // top-level default item would duplicate the flyout's options.
-              /* @__PURE__ */ jsxRuntime.jsx(chunkSGFYA22I_cjs.DropdownSubmenu, { label: action.submenu.label, children: action.submenu.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(ActionMenuItem, { item, onSelect: select }, item.id)) }, action.id)
+              /* @__PURE__ */ jsxRuntime.jsx(chunkPINIBEIU_cjs.DropdownSubmenu, { label: action.submenu.label, children: action.submenu.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(ActionMenuItem, { item, onSelect: select }, item.id)) }, action.id)
             ) : /* @__PURE__ */ jsxRuntime.jsx(
-              chunkSGFYA22I_cjs.DropdownItem,
+              chunkPINIBEIU_cjs.DropdownItem,
               {
                 onClick: () => select(action.onSelect),
                 children: action.label
@@ -678,10 +497,15 @@ var MessageRow = React3__namespace.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 hasBody = !!message.text || (message.content?.length ?? 0) > 0 || (message.media?.length ?? 0) > 0;
   const [isEditing, setIsEditing] = React3__namespace.useState(false);
   const [draft, setDraft] = React3__namespace.useState(message.text ?? "");
   const [editMinWidth, setEditMinWidth] = React3__namespace.useState();
@@ -938,7 +762,7 @@ ${block.text}
                     isSelf ? "flex-row-reverse" : "flex-row"
                   ),
                   children: /* @__PURE__ */ jsxRuntime.jsx(
-                    chunkFS4VZUFV_cjs.ChatBubble,
+                    chunkXRVMYT5G_cjs.ChatBubble,
                     {
                       ref: bubbleRef,
                       "data-slot": "superchat-bubble",
@@ -1002,7 +826,7 @@ ${block.text}
                       ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                         message.content?.map((block, i) => {
                           if (block.type === "tool_use" && block.toolCall) {
-                            return /* @__PURE__ */ jsxRuntime.jsx(chunkFS4VZUFV_cjs.MCPToolCallDisplay, { toolCall: block.toolCall }, i);
+                            return /* @__PURE__ */ jsxRuntime.jsx(chunkXRVMYT5G_cjs.MCPToolCallDisplay, { toolCall: block.toolCall }, i);
                           }
                           if ((block.type === "text" || block.type === "thinking") && block.text) {
                             return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1042,7 +866,20 @@ ${block.text}
                           streaming,
                           role: participant?.kind === "human" ? "user" : "assistant"
                         }) }),
-                        streaming && !hasBody && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(chunkFS4VZUFV_cjs.AITypingIndicator, {}) })
+                        message.media?.map((attachment) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(chunkXRVMYT5G_cjs.AITypingIndicator, {}) })
                       ] })
                     }
                   )
@@ -1051,22 +888,306 @@ ${block.text}
             ]
           }
         )
-      ]
-    }
-  );
-});
-var sidebarItem = classVarianceAuthority.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"
+      ]
+    }
+  );
+});
+var sidebarItem = classVarianceAuthority.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(rehypeSanitize.defaultSchema));
+  const attributes = schema.attributes ?? {};
+  const allowClass = (tag) => {
+    const existing = attributes[tag] ?? [];
+    const withoutClass = existing.filter(
+      (a) => !(Array.isArray(a) && a[0] === "className")
+    );
+    attributes[tag] = [...withoutClass, "className"];
+  };
+  allowClass("code");
+  allowClass("pre");
+  allowClass("span");
+  allowClass("div");
+  schema.attributes = attributes;
+  return schema;
+}
+function mergeSanitizeSchema(base, extra) {
+  if (!extra) return base;
+  const out = { ...base };
+  if (Array.isArray(extra.tagNames)) {
+    const a = base.tagNames ?? [];
+    out.tagNames = Array.from(/* @__PURE__ */ new Set([...a, ...extra.tagNames]));
+  }
+  if (extra.attributes && typeof extra.attributes === "object") {
+    const baseAttrs = {
+      ...base.attributes ?? {}
+    };
+    for (const [tag, attrs] of Object.entries(
+      extra.attributes
+    )) {
+      baseAttrs[tag] = [...baseAttrs[tag] ?? [], ...attrs];
+    }
+    out.attributes = baseAttrs;
+  }
+  if (extra.protocols && typeof extra.protocols === "object") {
+    const baseProtocols = {
+      ...base.protocols ?? {}
+    };
+    for (const [attr, protocols] of Object.entries(
+      extra.protocols
+    )) {
+      baseProtocols[attr] = Array.from(
+        /* @__PURE__ */ new Set([...baseProtocols[attr] ?? [], ...protocols])
+      );
+    }
+    out.protocols = baseProtocols;
+  }
+  for (const [k, v] of Object.entries(extra)) {
+    if (k === "tagNames" || k === "attributes" || k === "protocols") continue;
+    out[k] = v;
+  }
+  return out;
+}
+function baseComponents() {
+  return {
+    a: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        ...props,
+        className: chunkS5RVSXDV_cjs.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
+      }
+    ),
+    pre: ({ node: _node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+      "pre",
+      {
+        ...props,
+        tabIndex: 0,
+        className: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.jsx(
+        "code",
+        {
+          ...props,
+          className: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ...props,
+            "aria-label": props["aria-label"] ?? (props["aria-labelledby"] ? void 0 : "Task list item")
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("input", { ...props });
+    },
+    table: ({ node: _node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-2 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "table",
+      {
+        ...props,
+        className: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.jsx("ul", { ...props, className: chunkS5RVSXDV_cjs.cn("list-disc ps-5", props.className) }),
+    ol: ({ node: _node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { ...props, className: chunkS5RVSXDV_cjs.cn("list-decimal ps-5", props.className) }),
+    li: ({ node: _node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { ...props, className: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.jsx(
+      "h1",
+      {
+        ...props,
+        className: chunkS5RVSXDV_cjs.cn("mt-3 mb-1 text-xl font-semibold", props.className),
+        children
+      }
+    ),
+    h2: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+      "h2",
+      {
+        ...props,
+        className: chunkS5RVSXDV_cjs.cn("mt-3 mb-1 text-lg font-semibold", props.className),
+        children
+      }
+    ),
+    h3: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+      "h3",
+      {
+        ...props,
+        className: chunkS5RVSXDV_cjs.cn("mt-2 mb-1 text-base font-semibold", props.className),
+        children
+      }
+    ),
+    h4: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+      "h4",
+      {
+        ...props,
+        className: chunkS5RVSXDV_cjs.cn("mt-2 mb-1 text-sm font-semibold", props.className),
+        children
+      }
+    ),
+    h5: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+      "h5",
+      {
+        ...props,
+        className: chunkS5RVSXDV_cjs.cn("mt-2 mb-1 text-sm font-semibold", props.className),
+        children
+      }
+    ),
+    h6: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+      "h6",
+      {
+        ...props,
+        className: chunkS5RVSXDV_cjs.cn(
+          "mt-2 mb-1 text-xs font-semibold tracking-wide uppercase",
+          props.className
+        ),
+        children
+      }
+    ),
+    hr: ({ node: _node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+      "hr",
+      {
+        ...props,
+        className: chunkS5RVSXDV_cjs.cn(
+          "my-2 border-neutral-300 dark:border-neutral-600",
+          props.className
+        )
       }
+    )
+  };
+}
+function createMarkdownRenderer(options = {}) {
+  const { plugins = [], trusted = false } = options;
+  const remarkPlugins = [
+    remarkGfm__default.default,
+    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__default.default, sanitizeSchema]];
+  const components = plugins.reduce(
+    (acc, p) => ({ ...acc, ...p.components }),
+    baseComponents()
+  );
+  const MarkdownRenderer = (text, ctx) => /* @__PURE__ */ jsxRuntime.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 Markdown.defaultUrlTransform(url);
+};
+var MarkdownContent = React3__namespace.memo(function MarkdownContent2({
+  text,
+  messageId,
+  streaming,
+  remarkPlugins,
+  rehypePlugins,
+  components
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkJFLC7SHM_cjs.TextRenderContext.Provider, { value: { messageId, streaming }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Markdown__default.default,
+    {
+      remarkPlugins,
+      rehypePlugins,
+      urlTransform: transformUrl,
+      components,
+      children: text
+    }
+  ) });
+});
 function VirtualThread({
   items,
   participantById,
@@ -1077,6 +1198,11 @@ function VirtualThread({
   editable,
   onMessageEdited,
   defaultCopyFormat,
+  onOpenMedia,
+  openMediaLabel,
+  playMediaLabel,
+  mediaErrorLabel,
+  mediaRetryLabel,
   scrollRef,
   contentRef,
   containerProps
@@ -1125,7 +1251,12 @@ function VirtualThread({
                 onReferenceClick,
                 editable,
                 onMessageEdited,
-                defaultCopyFormat
+                defaultCopyFormat,
+                onOpenMedia,
+                openMediaLabel,
+                playMediaLabel,
+                mediaErrorLabel,
+                mediaRetryLabel
               }
             ) })
           },
@@ -1137,6 +1268,11 @@ function VirtualThread({
 }
 function SuperChat({
   conversation,
+  view,
+  defaultView = "thread",
+  onViewChange,
+  mediaFeedProps,
+  mediaLabels,
   currentParticipantId,
   renderPlugins,
   renderTextContent,
@@ -1148,6 +1284,17 @@ function SuperChat({
   linkBuilder,
   defaultCopyFormat,
   className,
+  showHeader = true,
+  placeholder,
+  allowAttachments,
+  agents,
+  selectedAgent,
+  onAgentChange,
+  agentSelectorLabel,
+  modelSelectorProps,
+  isStreaming,
+  onStop,
+  stopLabel,
   onMessageSent,
   onMessageEdited,
   onConversationClosed,
@@ -1155,8 +1302,116 @@ function SuperChat({
   onBack
 }) {
   const headingId = React3__namespace.useId();
+  const [internalView, setInternalView] = React3__namespace.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__namespace.useMemo(() => {
+    const items = getConversationMediaItems(conversation);
+    return order === "desc" ? items.reverse() : items;
+  }, [conversation, order]);
+  const [mediaSelection, setMediaSelection] = React3__namespace.useState();
+  const [manualPlaybackRequest, setManualPlaybackRequest] = React3__namespace.useState();
+  const playbackRequestCounter = React3__namespace.useRef(0);
+  const mediaFeedRef = React3__namespace.useRef(null);
+  const backToConversationRef = React3__namespace.useRef(null);
+  const focusMediaOnOpenRef = React3__namespace.useRef(false);
+  const focusThreadOnBackRef = React3__namespace.useRef(false);
+  const mediaReturnTargetRef = React3__namespace.useRef(void 0);
+  const mediaContextRef = React3__namespace.useRef({
+    conversation,
+    view,
+    onViewChange,
+    mediaFeedProps,
+    mediaItems
+  });
+  mediaContextRef.current = {
+    conversation,
+    view,
+    onViewChange,
+    mediaFeedProps,
+    mediaItems
+  };
+  const setView = React3__namespace.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__namespace.useCallback((item) => {
+    setMediaSelection({ conversationId: item.conversationId, itemId: item.id });
+    mediaContextRef.current.mediaFeedProps?.onActiveItemChange?.(item);
+  }, []);
+  const handleOpenMedia = React3__namespace.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__namespace.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__namespace.useEffect(() => {
-    chunkX4XPNTCZ_cjs.notifyComposerMigrationOnce("SuperChat");
+    if (hostPlaybackKey === void 0) return;
+    setManualPlaybackRequest(void 0);
+  }, [hostPlaybackKey]);
+  React3__namespace.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__namespace.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__namespace.useEffect(() => {
+    chunkU2RS574O_cjs.notifyComposerMigrationOnce("SuperChat");
   }, []);
   const renderText = React3__namespace.useMemo(
     () => renderTextContent ?? createMarkdownRenderer({
@@ -1165,7 +1420,7 @@ function SuperChat({
     }),
     [renderTextContent, renderPlugins, trustedContent]
   );
-  const prefersReducedMotion = chunk6HFFWEM3_cjs.usePrefersReducedMotion();
+  const prefersReducedMotion = chunkYW2AKBLS_cjs.usePrefersReducedMotion();
   const {
     containerRef: threadRef,
     contentRef: threadContentRef,
@@ -1174,12 +1429,36 @@ function SuperChat({
     anchorToTurnStart,
     followIfPinned,
     stopFollowing
-  } = chunkVPTASZ2O_cjs.useStickToBottom({ disabled: order === "desc" });
+  } = chunkVPTASZ2O_cjs.useStickToBottom({
+    disabled: order === "desc" || activeView === "media"
+  });
+  React3__namespace.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__namespace.useState(false);
   const [turnStartId, setTurnStartId] = React3__namespace.useState(null);
   const [turnMinHeight, setTurnMinHeight] = React3__namespace.useState();
   const anchoredTurnRef = React3__namespace.useRef(null);
+  const threadSnapshotRef = React3__namespace.useRef(void 0);
+  const atBottomRef = React3__namespace.useRef(isAtBottom);
+  atBottomRef.current = isAtBottom;
+  const pendingMediaOwnSendRef = React3__namespace.useRef(false);
+  const pendingMediaAppendRef = React3__namespace.useRef(false);
   React3__namespace.useEffect(() => {
+    threadSnapshotRef.current = void 0;
+    pendingMediaOwnSendRef.current = false;
+    pendingMediaAppendRef.current = false;
     setTurnStartId(null);
     anchoredTurnRef.current = null;
     if (order === "desc") {
@@ -1213,6 +1492,7 @@ function SuperChat({
     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;
@@ -1228,6 +1508,7 @@ function SuperChat({
       }
     }
     if (turnStart) {
+      if (activeView === "media") pendingMediaOwnSendRef.current = true;
       if (virtualized) {
         scrollToBottom("auto");
       } else {
@@ -1244,7 +1525,36 @@ function SuperChat({
     } else {
       followIfPinned("auto");
     }
-  }, [threadLength, order, isAtBottom, conversation.id]);
+  }, [threadLength, order, isAtBottom, conversation.id, activeView]);
+  React3__namespace.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__namespace.useLayoutEffect(() => {
     if (!turnStartId || anchoredTurnRef.current === turnStartId) return;
     const container = threadRef.current;
@@ -1266,7 +1576,8 @@ function SuperChat({
     turnMinHeight,
     anchorToTurnStart,
     prefersReducedMotion,
-    threadRef
+    threadRef,
+    activeView
   ]);
   React3__namespace.useEffect(() => {
     prevMessageIdsRef.current = new Set(
@@ -1319,7 +1630,12 @@ function SuperChat({
       onReferenceClick,
       editable,
       onMessageEdited: handleMessageEdited,
-      defaultCopyFormat
+      defaultCopyFormat,
+      onOpenMedia: handleOpenMedia,
+      openMediaLabel: labels.openMedia,
+      playMediaLabel: labels.playMedia,
+      mediaErrorLabel: mediaFeedProps?.labels?.mediaError,
+      mediaRetryLabel: mediaFeedProps?.labels?.retry
     },
     m.id
   );
@@ -1387,7 +1703,7 @@ function SuperChat({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        showHeader ? /* @__PURE__ */ jsxRuntime.jsxs(
           "header",
           {
             "data-slot": "superchat-header",
@@ -1446,13 +1762,62 @@ function SuperChat({
                   onClick: () => onConversationClosed(conversation),
                   "aria-label": "Close conversation",
                   className: "rounded-md p-1 text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(chunkFS4VZUFV_cjs.CloseIcon, {})
+                  children: /* @__PURE__ */ jsxRuntime.jsx(chunkXRVMYT5G_cjs.CloseIcon, {})
                 }
               )
             ]
           }
+        ) : (
+          // Keeps the panel's aria-labelledby reference valid without a visible header.
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { id: headingId, className: "sr-only", children: conversation.title })
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        activeView === "media" ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-slot": "superchat-media-view",
+            className: "flex min-h-0 flex-1 flex-col",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(chunkXRVMYT5G_cjs.ButtonGroup, { className: "justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+                chunkANMX7YDL_cjs.Button,
+                {
+                  ref: backToConversationRef,
+                  variant: "ghost",
+                  size: "sm",
+                  leftIcon: /* @__PURE__ */ jsxRuntime.jsx(
+                    lucideReact.ArrowLeft,
+                    {
+                      className: "size-4 rtl:rotate-180",
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  onClick: handleBackToConversation,
+                  children: labels.backToConversation
+                }
+              ) }) }),
+              /* @__PURE__ */ React3.createElement(
+                chunkAJPFQF3H_cjs.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: chunkS5RVSXDV_cjs.cn("min-h-0 flex-1", mediaFeedProps?.className)
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             "data-slot": "superchat-thread-viewport",
@@ -1470,6 +1835,11 @@ function SuperChat({
                   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: {
@@ -1506,32 +1876,51 @@ function SuperChat({
                   ] })
                 }
               ),
-              order !== "desc" && !isAtBottom && /* @__PURE__ */ jsxRuntime.jsx(
-                chunkFS4VZUFV_cjs.JumpToBottomButton,
+              /* @__PURE__ */ jsxRuntime.jsx(chunkIEY3ZJIT_cjs.AnimatedPresence, { children: order !== "desc" && !isAtBottom && /* @__PURE__ */ jsxRuntime.jsx(
+                chunkIEY3ZJIT_cjs.Animated,
                 {
-                  dataSlot: "superchat-jump-to-bottom",
-                  hasNewMessages: hasNewBelow,
-                  onClick: handleJumpToBottom
-                }
-              )
+                  preset: "fade",
+                  mode: "presence",
+                  className: "absolute inset-x-0 bottom-0 z-20",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    chunkXRVMYT5G_cjs.JumpToBottomButton,
+                    {
+                      dataSlot: "superchat-jump-to-bottom",
+                      hasNewMessages: hasNewBelow,
+                      onClick: handleJumpToBottom
+                    }
+                  )
+                },
+                "jump-to-bottom"
+              ) })
             ]
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkX4XPNTCZ_cjs.ChatComposer,
+          chunkU2RS574O_cjs.ChatComposer,
           {
             value: draft,
             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",
+            placeholder: readOnly ? "Read-only conversation" : placeholder ?? "Type a message\u2026 use @ to address an agent",
             mentionOptions,
-            allowAttachments: !readOnly,
+            allowAttachments: !readOnly && (allowAttachments ?? true),
             acceptedFileTypes: composerAccept,
             maxFileSize: 25 * 1024 * 1024,
             maxLength: 1e5,
-            inputLabel: "Message"
+            inputLabel: "Message",
+            showAgentSelector: !!agents?.length,
+            agents,
+            selectedAgent,
+            onAgentChange,
+            agentSelectorLabel,
+            showModelSelector: !!modelSelectorProps,
+            modelSelectorProps,
+            isStreaming,
+            onStop,
+            stopLabel
           }
         )
       ]
@@ -1549,6 +1938,8 @@ function SuperChatConversations({
   const [internalActive, setInternalActive] = React3__namespace.useState(
     defaultActiveConversationId ?? conversations[0]?.id
   );
+  const [hasMounted, setHasMounted] = React3__namespace.useState(false);
+  React3__namespace.useEffect(() => setHasMounted(true), []);
   const requestedId = activeConversationId ?? internalActive;
   const activeId = conversations.some((c) => c.id === requestedId) ? requestedId : conversations[0]?.id;
   const sortedConversations = React3__namespace.useMemo(
@@ -1603,10 +1994,21 @@ function SuperChatConversations({
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate font-medium", children: c.title }),
                       last?.text && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-xs text-neutral-600 dark:text-neutral-400", children: last.text })
                     ] }),
-                    !!c.unread && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "sr-only", children: " unread messages" })
-                    ] })
+                    /* @__PURE__ */ jsxRuntime.jsx(chunkIEY3ZJIT_cjs.AnimatedPresence, { initial: hasMounted, children: !!c.unread && /* @__PURE__ */ jsxRuntime.jsxs(
+                      chunkIEY3ZJIT_cjs.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__ */ jsxRuntime.jsx("span", { className: "sr-only", children: " unread messages" })
+                        ]
+                      },
+                      "unread"
+                    ) })
                   ]
                 }
               ) }, c.id);
@@ -1619,6 +2021,11 @@ function SuperChatConversations({
 }
 function SuperChatInbox({
   conversations,
+  view,
+  defaultView,
+  onViewChange,
+  mediaFeedProps,
+  mediaLabels,
   activeConversationId,
   defaultActiveConversationId,
   currentParticipantId,
@@ -1680,6 +2087,11 @@ function SuperChatInbox({
           SuperChat,
           {
             conversation: active,
+            view,
+            defaultView,
+            onViewChange,
+            mediaFeedProps,
+            mediaLabels,
             currentParticipantId,
             renderPlugins,
             renderTextContent,
@@ -1727,5 +2139,6 @@ exports.SuperChat = SuperChat;
 exports.SuperChatConversations = SuperChatConversations;
 exports.SuperChatInbox = SuperChatInbox;
 exports.createMarkdownRenderer = createMarkdownRenderer;
+exports.getConversationMediaItems = getConversationMediaItems;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map