@floegence/floe-webapp-core 0.56.17 → 0.57.1

package/dist/chat-media.d.ts

@@ -0,0 +1 @@
+export * from './components/chat/markdown/media';

package/dist/chat-media.js

@@ -0,0 +1,8 @@
+import { markdownMediaKind as e, markdownMediaPlaceholder as o, readMarkdownMediaPlaceholder as r, safeMarkdownMediaURL as n, sandboxedMarkdownHtml as M } from "./components/chat/markdown/media.js";
+export {
+  e as markdownMediaKind,
+  o as markdownMediaPlaceholder,
+  r as readMarkdownMediaPlaceholder,
+  n as safeMarkdownMediaURL,
+  M as sandboxedMarkdownHtml
+};

package/dist/chat.css

@@ -1843,3 +1843,37 @@ pre.chat-md-code-block *::selection,
 }
 
 } /* End of @layer components */
+
+@layer components {
+  .chat-media { position: relative; display: flex; flex-direction: column; width: fit-content; max-width: min(100%, 42rem); min-width: 0; margin: .8rem 0 1rem; color: var(--foreground); text-align: left; }
+  .chat-media[data-media-kind="html"] { width: 100%; }
+  .chat-media[data-media-kind="video"] { width: min(100%, 36rem); }
+  .chat-media[data-media-kind="audio"] { width: min(100%, 28rem); }
+  .chat-media-header { display: flex; align-items: center; min-width: 0; padding: .4rem .15rem 0; }
+  .chat-media-heading { min-width: 0; }
+  .chat-media-kind { display: none; }
+  .chat-media-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .6875rem; line-height: 1.5; color: var(--muted-foreground); }
+  .chat-media-actions { position: absolute; top: .5rem; right: .5rem; display: flex; align-items: center; gap: .15rem; padding: .2rem; border-radius: .55rem; background: rgb(24 24 24 / .78); color: white; opacity: 0; transform: translateY(-2px); transition: opacity 120ms ease, transform 120ms ease; }
+  .chat-media:hover .chat-media-actions, .chat-media:focus-within .chat-media-actions { opacity: 1; transform: none; }
+  .chat-media-action { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border: 0; padding: 0; border-radius: .35rem; background: transparent; color: inherit; cursor: pointer; }
+  .chat-media-action:hover { background: rgb(255 255 255 / .16); }
+  .chat-media-action svg, .chat-media-retry svg { width: .95rem; height: .95rem; }
+  .chat-media-action:focus-visible { outline: 2px solid white; outline-offset: -2px; }
+  .chat-media-image-button:focus-visible, .chat-media-retry:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
+  .chat-media-placeholder { display: flex; align-items: center; justify-content: center; gap: .75rem; width: min(22rem, 100%); min-height: 7rem; padding: 1rem; border-radius: .75rem; background: var(--muted); font-size: .75rem; color: var(--muted-foreground); }
+  .chat-media-retry { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .65rem; border-radius: .4rem; cursor: pointer; color: var(--foreground); }
+  .chat-media-retry:hover { background: var(--background); }
+  .chat-media-image-button { display: block; max-width: 100%; padding: 0; border: 0; border-radius: .75rem; overflow: hidden; cursor: zoom-in; background: transparent; }
+  .chat-media-image { display: block; width: auto; height: auto; max-width: 100%; max-height: 28rem; object-fit: contain; margin: 0; border: 0; border-radius: .75rem; }
+  .chat-media-video { display: block; width: 100%; max-width: 100%; max-height: 28rem; border: 0; border-radius: .75rem; background: #111; }
+  .chat-media-audio { display: block; width: min(28rem, 100%); }
+  .chat-media-html { display: block; width: 100%; height: 22rem; border: 0; border-radius: .75rem; background: white; color-scheme: light; }
+  .chat-media-expanded { max-width: 100%; }
+  .chat-media-expanded .chat-media-html { height: min(70vh, 48rem); }
+  .chat-media-dialog { width: min(92vw, 80rem); max-width: 80rem; }
+  .chat-media-dialog-body { min-height: 0; overflow: auto; }
+  .chat-media-full-image { display: block; max-width: 100%; max-height: 75vh; margin: auto; object-fit: contain; }
+  @media (hover: none) { .chat-media-actions { opacity: 1; transform: none; } }
+  @media (prefers-reduced-motion: reduce) { .chat-media-actions { transition: none; } }
+  @media (max-width: 480px) { .chat-media-html { height: 18rem; } }
+}

package/dist/chat.js

@@ -1,95 +1,103 @@
 import { AttachmentPreview as o } from "./components/chat/input/AttachmentPreview.js";
-import { BlockRenderer as f } from "./components/chat/blocks/BlockRenderer.js";
-import { ChatContainer as m } from "./components/chat/ChatContainer.js";
+import { BlockRenderer as a } from "./components/chat/blocks/BlockRenderer.js";
+import { ChatContainer as f } from "./components/chat/ChatContainer.js";
 import { ChatInput as n } from "./components/chat/input/ChatInput.js";
-import { ChatProvider as p, useChatContext as x } from "./components/chat/ChatProvider.js";
-import { ChecklistBlock as s } from "./components/chat/blocks/ChecklistBlock.js";
-import { CodeBlock as d } from "./components/chat/blocks/CodeBlock.js";
-import { CodeDiffBlock as u } from "./components/chat/blocks/CodeDiffBlock.js";
+import { ChatProvider as d, useChatContext as p } from "./components/chat/ChatProvider.js";
+import { ChecklistBlock as c } from "./components/chat/blocks/ChecklistBlock.js";
+import { CodeBlock as s } from "./components/chat/blocks/CodeBlock.js";
+import { CodeDiffBlock as g } from "./components/chat/blocks/CodeDiffBlock.js";
 import { ConnectionStatus as h } from "./components/chat/status/ConnectionStatus.js";
-import { DEFAULT_VIRTUAL_LIST_CONFIG as B } from "./components/chat/types.js";
-import { FileBlock as S } from "./components/chat/blocks/FileBlock.js";
+import { DEFAULT_VIRTUAL_LIST_CONFIG as C } from "./components/chat/types.js";
+import { FileBlock as W } from "./components/chat/blocks/FileBlock.js";
 import { ImageBlock as D } from "./components/chat/blocks/ImageBlock.js";
 import { MarkdownBlock as v } from "./components/chat/blocks/MarkdownBlock.js";
-import { MermaidBlock as T } from "./components/chat/blocks/MermaidBlock.js";
-import { MessageActions as L } from "./components/chat/message/MessageActions.js";
-import { MessageAvatar as E } from "./components/chat/message/MessageAvatar.js";
-import { MessageBubble as V } from "./components/chat/message/MessageBubble.js";
-import { MessageItem as H } from "./components/chat/message/MessageItem.js";
-import { MessageMeta as P } from "./components/chat/message/MessageMeta.js";
-import { ShellBlock as U } from "./components/chat/blocks/ShellBlock.js";
-import { StreamingCursor as O } from "./components/chat/status/StreamingCursor.js";
-import { SvgBlock as q } from "./components/chat/blocks/SvgBlock.js";
-import { TextBlock as J } from "./components/chat/blocks/TextBlock.js";
-import { ThinkingBlock as Q } from "./components/chat/blocks/ThinkingBlock.js";
-import { ToolCallBlock as Y } from "./components/chat/blocks/ToolCallBlock.js";
-import { VirtualMessageList as $ } from "./components/chat/message-list/VirtualMessageList.js";
-import { WorkingIndicator as er } from "./components/chat/status/WorkingIndicator.js";
-import { buildAssistantNoticeEvents as tr, createStreamEventBuilder as fr, isStreamEvent as ir } from "./components/chat/streamEvents.js";
-import { computeCodeDiff as ar, computeCodeDiffSync as nr, configureDiffWorker as kr, createDiffWorker as pr, hasDiffWorker as xr, terminateDiffWorker as cr, waitForDiffWorker as sr } from "./components/chat/hooks/useCodeDiff.js";
-import { configureMarkdownWorker as dr, createMarkdownWorker as gr, hasMarkdownWorker as ur, renderMarkdown as Mr, renderMarkdownSync as hr, terminateMarkdownWorker as Cr, waitForMarkdownWorker as Br } from "./components/chat/hooks/useMarkdown.js";
-import { configureMermaidWorker as Sr, configureSyncMermaid as wr, renderMermaid as Dr, terminateMermaidWorker as Ar, useMermaid as vr } from "./components/chat/hooks/useMermaid.js";
-import { configureShikiWorker as Tr, configureSyncHighlighter as Fr, highlightCode as Lr, terminateShikiWorker as yr, useCodeHighlight as Er } from "./components/chat/hooks/useCodeHighlight.js";
-import { useAttachments as Vr } from "./components/chat/hooks/useAttachments.js";
-import { useAutoScroll as Hr } from "./components/chat/hooks/useAutoScroll.js";
-import { useVirtualList as Pr } from "./components/chat/hooks/useVirtualList.js";
+import { MarkdownMedia as L } from "./components/chat/blocks/MarkdownMedia.js";
+import { MermaidBlock as F } from "./components/chat/blocks/MermaidBlock.js";
+import { MessageActions as y } from "./components/chat/message/MessageActions.js";
+import { MessageAvatar as P } from "./components/chat/message/MessageAvatar.js";
+import { MessageBubble as R } from "./components/chat/message/MessageBubble.js";
+import { MessageItem as V } from "./components/chat/message/MessageItem.js";
+import { MessageMeta as N } from "./components/chat/message/MessageMeta.js";
+import { ShellBlock as K } from "./components/chat/blocks/ShellBlock.js";
+import { StreamingCursor as j } from "./components/chat/status/StreamingCursor.js";
+import { SvgBlock as z } from "./components/chat/blocks/SvgBlock.js";
+import { TextBlock as Q } from "./components/chat/blocks/TextBlock.js";
+import { ThinkingBlock as Y } from "./components/chat/blocks/ThinkingBlock.js";
+import { ToolCallBlock as $ } from "./components/chat/blocks/ToolCallBlock.js";
+import { VirtualMessageList as er } from "./components/chat/message-list/VirtualMessageList.js";
+import { WorkingIndicator as tr } from "./components/chat/status/WorkingIndicator.js";
+import { buildAssistantNoticeEvents as ir, createStreamEventBuilder as fr, isStreamEvent as mr } from "./components/chat/streamEvents.js";
+import { computeCodeDiff as kr, computeCodeDiffSync as dr, configureDiffWorker as pr, createDiffWorker as xr, hasDiffWorker as cr, terminateDiffWorker as lr, waitForDiffWorker as sr } from "./components/chat/hooks/useCodeDiff.js";
+import { configureMarkdownWorker as gr, createMarkdownWorker as ur, hasMarkdownWorker as hr, renderMarkdown as wr, renderMarkdownSync as Cr, terminateMarkdownWorker as Br, waitForMarkdownWorker as Wr } from "./components/chat/hooks/useMarkdown.js";
+import { configureMermaidWorker as Dr, configureSyncMermaid as Ar, renderMermaid as vr, terminateMermaidWorker as Ir, useMermaid as Lr } from "./components/chat/hooks/useMermaid.js";
+import { configureShikiWorker as Fr, configureSyncHighlighter as br, highlightCode as yr, terminateShikiWorker as Er, useCodeHighlight as Pr } from "./components/chat/hooks/useCodeHighlight.js";
+import { markdownMediaKind as Rr, markdownMediaPlaceholder as Ur, readMarkdownMediaPlaceholder as Vr, safeMarkdownMediaURL as _r, sandboxedMarkdownHtml as Nr } from "./components/chat/markdown/media.js";
+import { useAttachments as Kr } from "./components/chat/hooks/useAttachments.js";
+import { useAutoScroll as jr } from "./components/chat/hooks/useAutoScroll.js";
+import { useVirtualList as zr } from "./components/chat/hooks/useVirtualList.js";
 export {
   o as AttachmentPreview,
-  f as BlockRenderer,
-  m as ChatContainer,
+  a as BlockRenderer,
+  f as ChatContainer,
   n as ChatInput,
-  p as ChatProvider,
-  s as ChecklistBlock,
-  d as CodeBlock,
-  u as CodeDiffBlock,
+  d as ChatProvider,
+  c as ChecklistBlock,
+  s as CodeBlock,
+  g as CodeDiffBlock,
   h as ConnectionStatus,
-  B as DEFAULT_VIRTUAL_LIST_CONFIG,
-  S as FileBlock,
+  C as DEFAULT_VIRTUAL_LIST_CONFIG,
+  W as FileBlock,
   D as ImageBlock,
   v as MarkdownBlock,
-  T as MermaidBlock,
-  L as MessageActions,
-  E as MessageAvatar,
-  V as MessageBubble,
-  H as MessageItem,
-  P as MessageMeta,
-  U as ShellBlock,
-  O as StreamingCursor,
-  q as SvgBlock,
-  J as TextBlock,
-  Q as ThinkingBlock,
-  Y as ToolCallBlock,
-  $ as VirtualMessageList,
-  er as WorkingIndicator,
-  tr as buildAssistantNoticeEvents,
-  ar as computeCodeDiff,
-  nr as computeCodeDiffSync,
-  kr as configureDiffWorker,
-  dr as configureMarkdownWorker,
-  Sr as configureMermaidWorker,
-  Tr as configureShikiWorker,
-  Fr as configureSyncHighlighter,
-  wr as configureSyncMermaid,
-  pr as createDiffWorker,
-  gr as createMarkdownWorker,
+  L as MarkdownMedia,
+  F as MermaidBlock,
+  y as MessageActions,
+  P as MessageAvatar,
+  R as MessageBubble,
+  V as MessageItem,
+  N as MessageMeta,
+  K as ShellBlock,
+  j as StreamingCursor,
+  z as SvgBlock,
+  Q as TextBlock,
+  Y as ThinkingBlock,
+  $ as ToolCallBlock,
+  er as VirtualMessageList,
+  tr as WorkingIndicator,
+  ir as buildAssistantNoticeEvents,
+  kr as computeCodeDiff,
+  dr as computeCodeDiffSync,
+  pr as configureDiffWorker,
+  gr as configureMarkdownWorker,
+  Dr as configureMermaidWorker,
+  Fr as configureShikiWorker,
+  br as configureSyncHighlighter,
+  Ar as configureSyncMermaid,
+  xr as createDiffWorker,
+  ur as createMarkdownWorker,
   fr as createStreamEventBuilder,
-  xr as hasDiffWorker,
-  ur as hasMarkdownWorker,
-  Lr as highlightCode,
-  ir as isStreamEvent,
-  Mr as renderMarkdown,
-  hr as renderMarkdownSync,
-  Dr as renderMermaid,
-  cr as terminateDiffWorker,
-  Cr as terminateMarkdownWorker,
-  Ar as terminateMermaidWorker,
-  yr as terminateShikiWorker,
-  Vr as useAttachments,
-  Hr as useAutoScroll,
-  x as useChatContext,
-  Er as useCodeHighlight,
-  vr as useMermaid,
-  Pr as useVirtualList,
+  cr as hasDiffWorker,
+  hr as hasMarkdownWorker,
+  yr as highlightCode,
+  mr as isStreamEvent,
+  Rr as markdownMediaKind,
+  Ur as markdownMediaPlaceholder,
+  Vr as readMarkdownMediaPlaceholder,
+  wr as renderMarkdown,
+  Cr as renderMarkdownSync,
+  vr as renderMermaid,
+  _r as safeMarkdownMediaURL,
+  Nr as sandboxedMarkdownHtml,
+  lr as terminateDiffWorker,
+  Br as terminateMarkdownWorker,
+  Ir as terminateMermaidWorker,
+  Er as terminateShikiWorker,
+  Kr as useAttachments,
+  jr as useAutoScroll,
+  p as useChatContext,
+  Pr as useCodeHighlight,
+  Lr as useMermaid,
+  zr as useVirtualList,
   sr as waitForDiffWorker,
-  Br as waitForMarkdownWorker
+  Wr as waitForMarkdownWorker
 };

package/dist/components/chat/blocks/MarkdownMedia.d.ts

@@ -0,0 +1,30 @@
+import { type Component } from 'solid-js';
+import { type MarkdownMediaSource } from '../markdown/media';
+export interface MarkdownMediaLabels {
+    image: string;
+    video: string;
+    audio: string;
+    html: string;
+    loading: string;
+    unavailable: string;
+    retry: string;
+    expand: string;
+    collapse: string;
+    open: string;
+    close: string;
+}
+export interface ResolvedMarkdownMedia {
+    /** Host-authorized media URL; HTML uses loadHTML instead. */
+    src?: string;
+    /** Optional host-authorized source link. */
+    openURL?: string;
+    loadHTML?: (signal: AbortSignal) => Promise<string>;
+}
+export interface MarkdownMediaProps {
+    source: MarkdownMediaSource;
+    labels: MarkdownMediaLabels;
+    resolve?: (source: MarkdownMediaSource, signal: AbortSignal) => Promise<ResolvedMarkdownMedia>;
+    class?: string;
+}
+/** Stable inline media with host-owned resource resolution and an isolated HTML document. */
+export declare const MarkdownMedia: Component<MarkdownMediaProps>;

package/dist/components/chat/blocks/MarkdownMedia.js

@@ -0,0 +1,220 @@
+import { use as V, insert as d, createComponent as o, effect as h, setAttribute as i, memo as j, className as B, template as c, delegateEvents as F } from "solid-js/web";
+import { createSignal as y, onMount as G, onCleanup as q, createMemo as J, createEffect as K, Switch as U, Match as f, Show as _ } from "solid-js";
+import { Dialog as P } from "../../ui/Dialog.js";
+import { Refresh as Q, Maximize as W, ExternalLink as X } from "../../icons/index.js";
+import { cn as Y } from "../../../utils/cn.js";
+import { sandboxedMarkdownHtml as A, safeMarkdownMediaURL as Z } from "../markdown/media.js";
+var p = /* @__PURE__ */ c("<span class=chat-media-placeholder role=status>"), ee = /* @__PURE__ */ c("<span class=chat-media-placeholder role=status><span></span><button type=button class=chat-media-retry>"), te = /* @__PURE__ */ c("<button type=button class=chat-media-image-button><img class=chat-media-image loading=lazy decoding=async referrerpolicy=no-referrer>", !0, !1, !1), re = /* @__PURE__ */ c("<video class=chat-media-video controls playsinline preload=metadata>"), ae = /* @__PURE__ */ c("<audio class=chat-media-audio controls preload=metadata>"), ne = /* @__PURE__ */ c("<iframe class=chat-media-html sandbox=allow-scripts referrerpolicy=no-referrer>"), le = /* @__PURE__ */ c("<button type=button class=chat-media-action>"), ie = /* @__PURE__ */ c("<img referrerpolicy=no-referrer class=chat-media-full-image>"), oe = /* @__PURE__ */ c("<span><span class=chat-media-header><span class=chat-media-heading><span class=chat-media-kind></span><span class=chat-media-title></span></span><span class=chat-media-actions>"), se = /* @__PURE__ */ c('<a class=chat-media-action target=_blank rel="noopener noreferrer">');
+async function de(a) {
+  const m = Z(a.src ?? "");
+  if (!m || a.kind === "html") throw new Error("A host resolver is required");
+  return {
+    src: m,
+    openURL: m
+  };
+}
+const fe = (a) => {
+  let m;
+  const [I, R] = y(!1);
+  G(() => {
+    if (typeof IntersectionObserver > "u") {
+      R(!0);
+      return;
+    }
+    const l = new IntersectionObserver((k) => {
+      k.some((s) => s.isIntersecting) && (R(!0), l.disconnect());
+    }, {
+      rootMargin: "400px"
+    });
+    l.observe(m), q(() => l.disconnect());
+  });
+  const [$, S] = y(), [O, C] = y(), [L, b] = y("loading"), [z, D] = y(0), [w, E] = y(!1), u = () => a.source.title || a.labels[a.source.kind], N = J(() => a.source);
+  return K(() => {
+    if (!I()) return;
+    const l = N(), k = a.resolve ?? de;
+    z();
+    const s = new AbortController();
+    q(() => s.abort()), S(void 0), C(void 0), b("loading"), E(!1), (async () => {
+      if (l.kind === "html" && l.html !== void 0) {
+        if (l.html.length > 1e6) throw new Error("HTML preview is too large");
+        s.signal.aborted || C(A(l.html));
+      } else {
+        const g = await k(l, s.signal);
+        if (s.signal.aborted) return;
+        if (l.kind === "html") {
+          if (!g.loadHTML) throw new Error("HTML loader is required");
+          const x = await g.loadHTML(s.signal);
+          if (s.signal.aborted) return;
+          if (x.length > 1e6) throw new Error("HTML preview is too large");
+          C(A(x));
+        } else if (!g.src) throw new Error("Media URL is required");
+        S(g);
+      }
+      s.signal.aborted || b("ready");
+    })().catch(() => {
+      s.signal.aborted || b("error");
+    });
+  }), (() => {
+    var l = oe(), k = l.firstChild, s = k.firstChild, g = s.firstChild, x = g.nextSibling, H = s.nextSibling, T = m;
+    return typeof T == "function" ? V(T, l) : m = l, d(l, o(U, {
+      get children() {
+        return [o(f, {
+          get when() {
+            return L() === "loading";
+          },
+          get children() {
+            var t = p();
+            return d(t, () => a.labels.loading), t;
+          }
+        }), o(f, {
+          get when() {
+            return L() === "error";
+          },
+          get children() {
+            var t = ee(), e = t.firstChild, r = e.nextSibling;
+            return d(e, () => a.labels.unavailable), r.$$click = () => D((n) => n + 1), d(r, o(Q, {}), null), d(r, () => a.labels.retry, null), t;
+          }
+        }), o(f, {
+          get when() {
+            return L() === "ready";
+          },
+          get children() {
+            return o(U, {
+              get children() {
+                return [o(f, {
+                  get when() {
+                    return a.source.kind === "image";
+                  },
+                  get children() {
+                    var t = te(), e = t.firstChild;
+                    return t.$$click = () => E(!0), e.addEventListener("error", () => b("error")), h((r) => {
+                      var n = `${a.labels.expand}: ${u()}`, v = $()?.src, M = u();
+                      return n !== r.e && i(t, "aria-label", r.e = n), v !== r.t && i(e, "src", r.t = v), M !== r.a && i(e, "alt", r.a = M), r;
+                    }, {
+                      e: void 0,
+                      t: void 0,
+                      a: void 0
+                    }), t;
+                  }
+                }), o(f, {
+                  get when() {
+                    return a.source.kind === "video";
+                  },
+                  get children() {
+                    var t = re();
+                    return t.addEventListener("error", () => b("error")), h((e) => {
+                      var r = $()?.src, n = u();
+                      return r !== e.e && i(t, "src", e.e = r), n !== e.t && i(t, "aria-label", e.t = n), e;
+                    }, {
+                      e: void 0,
+                      t: void 0
+                    }), t;
+                  }
+                }), o(f, {
+                  get when() {
+                    return a.source.kind === "audio";
+                  },
+                  get children() {
+                    var t = ae();
+                    return t.addEventListener("error", () => b("error")), h((e) => {
+                      var r = $()?.src, n = u();
+                      return r !== e.e && i(t, "src", e.e = r), n !== e.t && i(t, "aria-label", e.t = n), e;
+                    }, {
+                      e: void 0,
+                      t: void 0
+                    }), t;
+                  }
+                }), o(f, {
+                  get when() {
+                    return a.source.kind === "html";
+                  },
+                  get children() {
+                    var t = ne();
+                    return h((e) => {
+                      var r = u(), n = O();
+                      return r !== e.e && i(t, "title", e.e = r), n !== e.t && i(t, "srcdoc", e.t = n), e;
+                    }, {
+                      e: void 0,
+                      t: void 0
+                    }), t;
+                  }
+                })];
+              }
+            });
+          }
+        })];
+      }
+    }), k), d(g, () => a.labels[a.source.kind]), d(x, u), d(H, o(_, {
+      get when() {
+        return j(() => L() === "ready")() && ["image", "html"].includes(a.source.kind);
+      },
+      get children() {
+        var t = le();
+        return t.$$click = () => E(!w()), d(t, o(W, {})), h((e) => {
+          var r = w() ? a.labels.collapse : a.labels.expand, n = w() ? a.labels.collapse : a.labels.expand, v = w();
+          return r !== e.e && i(t, "aria-label", e.e = r), n !== e.t && i(t, "title", e.t = n), v !== e.a && i(t, "aria-expanded", e.a = v), e;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        }), t;
+      }
+    }), null), d(H, o(_, {
+      get when() {
+        return $()?.openURL;
+      },
+      children: (t) => (() => {
+        var e = se();
+        return d(e, o(X, {})), h((r) => {
+          var n = t(), v = a.labels.open, M = a.labels.open;
+          return n !== r.e && i(e, "href", r.e = n), v !== r.t && i(e, "aria-label", r.t = v), M !== r.a && i(e, "title", r.a = M), r;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        }), e;
+      })()
+    }), null), d(l, o(_, {
+      get when() {
+        return a.source.kind === "image";
+      },
+      get children() {
+        return o(P, {
+          get open() {
+            return w();
+          },
+          onOpenChange: E,
+          get title() {
+            return u();
+          },
+          get closeLabel() {
+            return a.labels.close;
+          },
+          class: "chat-media-dialog",
+          contentClass: "chat-media-dialog-body",
+          get children() {
+            var t = ie();
+            return h((e) => {
+              var r = $()?.src, n = u();
+              return r !== e.e && i(t, "src", e.e = r), n !== e.t && i(t, "alt", e.t = n), e;
+            }, {
+              e: void 0,
+              t: void 0
+            }), t;
+          }
+        });
+      }
+    }), null), h((t) => {
+      var e = Y("chat-media", w() && a.source.kind === "html" && "chat-media-expanded", a.class), r = a.source.kind, n = u();
+      return e !== t.e && B(l, t.e = e), r !== t.t && i(l, "data-media-kind", t.t = r), n !== t.a && i(x, "title", t.a = n), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), l;
+  })();
+};
+F(["click"]);
+export {
+  fe as MarkdownMedia
+};

package/dist/components/chat/index.d.ts

@@ -1,6 +1,8 @@
 export { ChatContainer, type ChatContainerProps } from './ChatContainer';
 export { ChatProvider, useChatContext, type ChatProviderProps, type ChatContextValue } from './ChatProvider';
 export * from './types';
+export { MarkdownMedia, type MarkdownMediaProps, type MarkdownMediaLabels, type ResolvedMarkdownMedia } from './blocks/MarkdownMedia';
+export { markdownMediaKind, markdownMediaPlaceholder, readMarkdownMediaPlaceholder, safeMarkdownMediaURL, sandboxedMarkdownHtml, type MarkdownMediaKind, type MarkdownMediaSource } from './markdown/media';
 export { createStreamEventBuilder, buildAssistantNoticeEvents, isStreamEvent, type StreamEventBuilder } from './streamEvents';
 export { VirtualMessageList, type VirtualMessageListProps } from './message-list';
 export { MessageItem, MessageBubble, MessageAvatar, MessageMeta, MessageActions, type MessageItemProps, type MessageBubbleProps, type MessageAvatarProps, type MessageMetaProps, type MessageActionsProps, } from './message';

package/dist/components/chat/markdown/media.d.ts

@@ -0,0 +1,16 @@
+export type MarkdownMediaKind = 'image' | 'video' | 'audio' | 'html';
+/** A display request, never an authorization or filesystem capability. */
+export interface MarkdownMediaSource {
+    kind: MarkdownMediaKind;
+    title: string;
+    src?: string;
+    html?: string;
+}
+export declare function markdownMediaKind(source: string): MarkdownMediaKind | undefined;
+/** Inert placeholder: mount trusted components only after Markdown has been rendered. */
+export declare function markdownMediaPlaceholder(source: MarkdownMediaSource): string;
+export declare function readMarkdownMediaPlaceholder(element: Element): MarkdownMediaSource | undefined;
+/** Remote display URLs only. Hosts resolve opaque/local references through their own authority. */
+export declare function safeMarkdownMediaURL(raw: string): string | undefined;
+/** The CSP precedes supplied markup; the opaque sandbox also denies shell/storage access. */
+export declare function sandboxedMarkdownHtml(html: string): string;

package/dist/components/chat/markdown/media.js

@@ -0,0 +1,42 @@
+function o(t) {
+  const e = t.split(/[?#]/, 1)[0].toLowerCase();
+  if (/\.(png|jpe?g|gif|webp|avif|svg)$/.test(e)) return "image";
+  if (/\.(mp4|webm|ogv|mov)$/.test(e)) return "video";
+  if (/\.(mp3|wav|ogg|m4a|aac|flac)$/.test(e)) return "audio";
+  if (/\.html?$/.test(e)) return "html";
+}
+function n(t) {
+  if (!t || typeof t != "object") return !1;
+  const e = t;
+  return ["image", "video", "audio", "html"].includes(e.kind) && typeof e.title == "string" && (typeof e.src == "string" && e.src.length > 0 && e.src.length <= 8192 && e.html === void 0 || e.kind === "html" && typeof e.html == "string" && e.html.length <= 1e6 && e.src === void 0);
+}
+function r(t) {
+  return n(t) ? `<span data-floe-markdown-media="${encodeURIComponent(JSON.stringify(t)).replace(/'/g, "%27")}"></span>` : "";
+}
+function a(t) {
+  try {
+    const e = JSON.parse(decodeURIComponent(t.getAttribute("data-floe-markdown-media") ?? ""));
+    return n(e) ? e : void 0;
+  } catch {
+    return;
+  }
+}
+function i(t) {
+  if (![...t].some((e) => e.charCodeAt(0) <= 32 || e.charCodeAt(0) === 127 || e === "\\"))
+    try {
+      const e = new URL(t);
+      return !["https:", "http:"].includes(e.protocol) || e.username || e.password ? void 0 : e.href;
+    } catch {
+      return;
+    }
+}
+function d(t) {
+  return `<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:; media-src data: blob:; font-src data:; connect-src 'none'; frame-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'"><meta name="referrer" content="no-referrer"><meta name="viewport" content="width=device-width, initial-scale=1"><style>html{color-scheme:light}body{margin:16px;font:14px/1.5 system-ui,sans-serif;overflow-wrap:anywhere}img,video,svg,canvas{max-width:100%}button,a,input,select{touch-action:manipulation}</style></head><body>${t}</body></html>`;
+}
+export {
+  o as markdownMediaKind,
+  r as markdownMediaPlaceholder,
+  a as readMarkdownMediaPlaceholder,
+  i as safeMarkdownMediaURL,
+  d as sandboxedMarkdownHtml
+};