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

package/dist/components/SuperChat/index.js

@@ -1,295 +1,110 @@
 import { TextRenderContext } from '../../chunk-I6CY5C6A.js';
 export { TextRenderContext, useTextRenderContext } from '../../chunk-I6CY5C6A.js';
-import { ChatBubble, MCPToolCallDisplay, AITypingIndicator, SparklesIcon, CloseIcon, JumpToBottomButton } from '../../chunk-TZJQB4P2.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 { 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-VSQF22GL.js';
 import '../../chunk-BKSPDTX4.js';
-import { usePrefersReducedMotion } from '../../chunk-HB7C7NB5.js';
+import { usePrefersReducedMotion } from '../../chunk-XDU65GLW.js';
+import { Button } from '../../chunk-7YO7DNUV.js';
 import { Badge } from '../../chunk-BMSG4NBH.js';
+import '../../chunk-GVM6DTR5.js';
 import { AnimatedPresence, Animated } from '../../chunk-F4N67NAF.js';
 import { cn } from '../../chunk-TQONQSJO.js';
 import '../../chunk-PX6F3LHL.js';
 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);
-      }
-    }
-    node.children = next;
-  };
-  return (tree) => splitNode(tree);
-}
-function baseSanitizeSchema() {
-  const schema = JSON.parse(JSON.stringify(defaultSchema));
-  const attributes = schema.attributes ?? {};
-  const allowClass = (tag) => {
-    const existing = attributes[tag] ?? [];
-    const withoutClass = existing.filter(
-      (a) => !(Array.isArray(a) && a[0] === "className")
-    );
-    attributes[tag] = [...withoutClass, "className"];
-  };
-  allowClass("code");
-  allowClass("pre");
-  allowClass("span");
-  allowClass("div");
-  schema.attributes = attributes;
-  return schema;
-}
-function mergeSanitizeSchema(base, extra) {
-  if (!extra) return base;
-  const out = { ...base };
-  if (Array.isArray(extra.tagNames)) {
-    const a = base.tagNames ?? [];
-    out.tagNames = Array.from(/* @__PURE__ */ new Set([...a, ...extra.tagNames]));
-  }
-  if (extra.attributes && typeof extra.attributes === "object") {
-    const baseAttrs = {
-      ...base.attributes ?? {}
-    };
-    for (const [tag, attrs] of Object.entries(
-      extra.attributes
-    )) {
-      baseAttrs[tag] = [...baseAttrs[tag] ?? [], ...attrs];
-    }
-    out.attributes = baseAttrs;
-  }
-  if (extra.protocols && typeof extra.protocols === "object") {
-    const baseProtocols = {
-      ...base.protocols ?? {}
-    };
-    for (const [attr, protocols] of Object.entries(
-      extra.protocols
-    )) {
-      baseProtocols[attr] = Array.from(
-        /* @__PURE__ */ new Set([...baseProtocols[attr] ?? [], ...protocols])
-      );
-    }
-    out.protocols = baseProtocols;
-  }
-  for (const [k, v] of Object.entries(extra)) {
-    if (k === "tagNames" || k === "attributes" || k === "protocols") continue;
-    out[k] = v;
-  }
-  return out;
-}
-function baseComponents() {
-  return {
-    a: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsx(
-      "a",
-      {
-        ...props,
-        className: cn(
-          "text-primary-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__ */ jsx(
-      "pre",
-      {
-        ...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",
+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",
           {
-            ...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__ */ 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
+        ) : (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
+          }
+        ) })
+      ]
+    }
   );
-  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 formatTime(time) {
   return new Date(time).toLocaleTimeString(void 0, {
     hour: "numeric",
@@ -652,10 +467,15 @@ var MessageRow = React3.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.useState(false);
   const [draft, setDraft] = React3.useState(message.text ?? "");
   const [editMinWidth, setEditMinWidth] = React3.useState();
@@ -1016,6 +836,19 @@ ${block.text}
                           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, {}) })
                       ] })
                     }
@@ -1025,22 +858,306 @@ ${block.text}
             ]
           }
         )
-      ]
-    }
-  );
-});
-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"
+      ]
+    }
+  );
+});
+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])
+      );
+    }
+    out.protocols = baseProtocols;
+  }
+  for (const [k, v] of Object.entries(extra)) {
+    if (k === "tagNames" || k === "attributes" || k === "protocols") continue;
+    out[k] = v;
+  }
+  return out;
+}
+function baseComponents() {
+  return {
+    a: ({ node: _node, children, ...props }) => /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...props,
+        className: cn(
+          "text-primary-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__ */ jsx(
+      "pre",
+      {
+        ...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
     },
-    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,
@@ -1051,6 +1168,11 @@ function VirtualThread({
   editable,
   onMessageEdited,
   defaultCopyFormat,
+  onOpenMedia,
+  openMediaLabel,
+  playMediaLabel,
+  mediaErrorLabel,
+  mediaRetryLabel,
   scrollRef,
   contentRef,
   containerProps
@@ -1099,7 +1221,12 @@ function VirtualThread({
                 onReferenceClick,
                 editable,
                 onMessageEdited,
-                defaultCopyFormat
+                defaultCopyFormat,
+                onOpenMedia,
+                openMediaLabel,
+                playMediaLabel,
+                mediaErrorLabel,
+                mediaRetryLabel
               }
             ) })
           },
@@ -1111,6 +1238,11 @@ function VirtualThread({
 }
 function SuperChat({
   conversation,
+  view,
+  defaultView = "thread",
+  onViewChange,
+  mediaFeedProps,
+  mediaLabels,
   currentParticipantId,
   renderPlugins,
   renderTextContent,
@@ -1129,6 +1261,114 @@ function SuperChat({
   onBack
 }) {
   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");
   }, []);
@@ -1148,12 +1388,36 @@ function SuperChat({
     anchorToTurnStart,
     followIfPinned,
     stopFollowing
-  } = useStickToBottom({ disabled: order === "desc" });
+  } = 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") {
@@ -1187,6 +1451,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;
@@ -1202,6 +1467,7 @@ function SuperChat({
       }
     }
     if (turnStart) {
+      if (activeView === "media") pendingMediaOwnSendRef.current = true;
       if (virtualized) {
         scrollToBottom("auto");
       } else {
@@ -1218,7 +1484,36 @@ function SuperChat({
     } else {
       followIfPinned("auto");
     }
-  }, [threadLength, order, isAtBottom, conversation.id]);
+  }, [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;
@@ -1240,7 +1535,8 @@ function SuperChat({
     turnMinHeight,
     anchorToTurnStart,
     prefersReducedMotion,
-    threadRef
+    threadRef,
+    activeView
   ]);
   React3.useEffect(() => {
     prevMessageIdsRef.current = new Set(
@@ -1293,7 +1589,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
   );
@@ -1426,7 +1727,53 @@ function SuperChat({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(
+        activeView === "media" ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "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__ */ jsxs(
           "div",
           {
             "data-slot": "superchat-thread-viewport",
@@ -1444,6 +1791,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: {
@@ -1615,6 +1967,11 @@ function SuperChatConversations({
 }
 function SuperChatInbox({
   conversations,
+  view,
+  defaultView,
+  onViewChange,
+  mediaFeedProps,
+  mediaLabels,
   activeConversationId,
   defaultActiveConversationId,
   currentParticipantId,
@@ -1676,6 +2033,11 @@ function SuperChatInbox({
           SuperChat,
           {
             conversation: active,
+            view,
+            defaultView,
+            onViewChange,
+            mediaFeedProps,
+            mediaLabels,
             currentParticipantId,
             renderPlugins,
             renderTextContent,
@@ -1711,6 +2073,6 @@ function SuperChatInbox({
   );
 }
 
-export { SuperChat, SuperChatConversations, SuperChatInbox, createMarkdownRenderer };
+export { SuperChat, SuperChatConversations, SuperChatInbox, createMarkdownRenderer, getConversationMediaItems };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map