@ai-matrx/messaging 0.15.9 → 0.15.11

package/dist/react.cjs

@@ -361,7 +361,7 @@ function splitText(content) {
 }
 function summarizeText(content, maxLength = 140) {
   const parts = splitText(content).map(
-    (segment) => segment.type === "text" ? segment.value : segment.type === "reference" ? segment.reference.label : (
+    (segment) => segment.type === "text" ? segment.value.replace(/```[^\n]*\n([\s\S]*?)```/g, "$1").replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/\[([^\]]+)\]\([^)]*\)/g, "$1").replace(/^\s{0,3}(?:#{1,6}\s+|>\s*|[-*+]\s+|\d+\.\s+)/gm, "").replace(/([*_`~])\1*(.*?)\1+/g, "$2") : segment.type === "reference" ? segment.reference.label : (
       // A fence we cannot read still SAYS something. Collapsing it to
       // nothing is how a reference-only message becomes an inbox row that
       // reads "No messages yet" — a screen telling a lie.
@@ -830,8 +830,7 @@ function projectMessageAction(value) {
     payload: jsonObject(record["payload"])
   };
 }
-function projectAttachments(metadata) {
-  const raw = metadata["attachments"];
+function projectAttachmentList(raw) {
   if (!Array.isArray(raw)) return [];
   const attachments = [];
   for (const entry of raw) {
@@ -853,8 +852,13 @@ function projectAttachments(metadata) {
   }
   return attachments;
 }
+function projectAttachments(metadata) {
+  return projectAttachmentList(metadata["attachments"]);
+}
 function projectReferences(metadata) {
-  const raw = metadata["references"];
+  return projectReferenceList(metadata["references"]);
+}
+function projectReferenceList(raw) {
   if (!Array.isArray(raw)) return [];
   const references = [];
   for (const entry of raw) {
@@ -873,6 +877,35 @@ function projectReferences(metadata) {
   }
   return references;
 }
+function projectBroadcastMessage(value) {
+  const operation = "projectBroadcastMessage";
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    throw invalidResponse(operation, "broadcast payload was not an object");
+  }
+  const record = value;
+  const kindRaw = str(record, "kind") ?? str(record, "messageType") ?? "text";
+  const stateRaw = str(record, "deliveryState") ?? str(record, "status") ?? "sent";
+  const metadata = jsonObject(record["metadata"]);
+  return {
+    id: requiredStr(record, "id", operation),
+    conversationId: requiredStr(record, "conversationId", operation),
+    senderId: requiredStr(record, "senderId", operation),
+    organizationId: requiredStr(record, "organizationId", operation),
+    content: typeof record["content"] === "string" ? record["content"] : "",
+    kind: MESSAGE_KINDS.has(kindRaw) ? kindRaw : "text",
+    deliveryState: DELIVERY_STATES.has(stateRaw) ? stateRaw : "sent",
+    replyToId: str(record, "replyToId"),
+    clientMessageId: str(record, "clientMessageId"),
+    createdAt: requiredStr(record, "createdAt", operation),
+    editedAt: str(record, "editedAt"),
+    deletedAt: str(record, "deletedAt"),
+    deletedForEveryone: bool(record, "deletedForEveryone", false),
+    action: projectMessageAction(record["action"]),
+    attachments: projectAttachmentList(record["attachments"]),
+    references: projectReferenceList(record["references"]),
+    metadata
+  };
+}
 function projectMessage(row, fallbackOrganizationId) {
   const operation = "projectMessage";
   const metadata = jsonObject(row["metadata"]);
@@ -1346,6 +1379,7 @@ function createMessagingEngine(options) {
     store,
     outbox,
     identity,
+    reportDiagnostic: report,
     async start() {
       if (options.archiveFilter !== void 0) {
         store.setArchiveFilter(options.archiveFilter);
@@ -1487,8 +1521,11 @@ function createMessagingEngine(options) {
           {
             event: MESSAGING_EVENTS.message,
             onMessage: ({ data }) => {
-              if (typeof data !== "object" || data === null) return;
-              store.ingest(data);
+              try {
+                store.ingest(projectBroadcastMessage(data));
+              } catch (error) {
+                reportError(error, "broadcastMessage");
+              }
             }
           }
         ],
@@ -2397,6 +2434,7 @@ function MessagingRuntime(props) {
   }, [renderers]);
   const renderReference = props.renderReference ?? null;
   const renderFence = props.renderFence ?? null;
+  const renderAttachment = props.renderAttachment ?? null;
   const wrapMessage = props.wrapMessage ?? null;
   const wrapConversationRow = props.wrapConversationRow ?? null;
   const host = (0, import_react.useMemo)(() => {
@@ -2410,6 +2448,7 @@ function MessagingRuntime(props) {
       actionRenderers: rendererMap,
       renderReference,
       renderFence,
+      renderAttachment,
       wrapMessage,
       wrapConversationRow
     };
@@ -2420,6 +2459,7 @@ function MessagingRuntime(props) {
     rendererMap,
     renderReference,
     renderFence,
+    renderAttachment,
     wrapMessage,
     wrapConversationRow
   ]);
@@ -2631,11 +2671,117 @@ function useConversation(id) {
     }
   };
 }
+var EMPTY_COMPOSER_SESSION = {
+  drafts: {},
+  replies: {},
+  additions: {}
+};
+var emptyComposerSnapshot = () => EMPTY_COMPOSER_SESSION;
+var subscribeToNothing = () => () => void 0;
+var composerSessions = /* @__PURE__ */ new WeakMap();
+var composerStorageFailures = /* @__PURE__ */ new WeakSet();
+function composerStorageKey(engine) {
+  return `ai-matrx.messaging.composer.${engine.identity.userId}`;
+}
+function readComposerSession(engine) {
+  try {
+    if (typeof sessionStorage === "undefined") return EMPTY_COMPOSER_SESSION;
+    const serialized = sessionStorage.getItem(composerStorageKey(engine));
+    if (serialized === null) return EMPTY_COMPOSER_SESSION;
+    const parsed = JSON.parse(serialized);
+    if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+      throw new Error("saved composer state was not an object");
+    }
+    const source = parsed;
+    const drafts = {};
+    if (typeof source["drafts"] === "object" && source["drafts"] !== null) {
+      for (const [id, value] of Object.entries(source["drafts"])) {
+        if (typeof value === "string") drafts[id] = value;
+      }
+    }
+    const replies = {};
+    if (typeof source["replies"] === "object" && source["replies"] !== null) {
+      for (const [id, value] of Object.entries(source["replies"])) {
+        if (value === null) replies[id] = null;
+        else replies[id] = projectBroadcastMessage(value);
+      }
+    }
+    const additions = {};
+    if (typeof source["additions"] === "object" && source["additions"] !== null) {
+      for (const [id, value] of Object.entries(source["additions"])) {
+        if (!Array.isArray(value)) continue;
+        additions[id] = value.filter((item) => {
+          if (typeof item !== "object" || item === null || Array.isArray(item)) return false;
+          const record = item;
+          return typeof record["id"] === "string" && typeof record["label"] === "string";
+        });
+      }
+    }
+    return { drafts, replies, additions };
+  } catch (error) {
+    if (!composerStorageFailures.has(engine)) {
+      composerStorageFailures.add(engine);
+      engine.reportDiagnostic({
+        level: "warn",
+        message: `A saved message draft could not be restored: ${String(error?.message ?? error)}`,
+        remedy: "The current draft remains usable. Re-add any missing attachments before sending."
+      });
+    }
+    return EMPTY_COMPOSER_SESSION;
+  }
+}
+function writeComposerSession(engine, snapshot) {
+  try {
+    if (typeof sessionStorage === "undefined") return;
+    sessionStorage.setItem(composerStorageKey(engine), JSON.stringify(snapshot));
+  } catch (error) {
+    if (!composerStorageFailures.has(engine)) {
+      composerStorageFailures.add(engine);
+      engine.reportDiagnostic({
+        level: "warn",
+        message: `The current message draft could not be saved for reload recovery: ${String(error?.message ?? error)}`,
+        remedy: "Keep this tab open until the message is sent, or copy the draft before reloading."
+      });
+    }
+  }
+}
+function getComposerSession(engine) {
+  const existing = composerSessions.get(engine);
+  if (existing !== void 0) return existing;
+  let snapshot = readComposerSession(engine);
+  const listeners = /* @__PURE__ */ new Set();
+  const store = {
+    getSnapshot: () => snapshot,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    update: (change) => {
+      snapshot = change(snapshot);
+      writeComposerSession(engine, snapshot);
+      listeners.forEach((listener) => listener());
+    }
+  };
+  composerSessions.set(engine, store);
+  return store;
+}
 function useComposer(conversationId) {
   const host = useMessagingHost();
-  const [drafts, setDrafts] = (0, import_react3.useState)({});
-  const [replyTo, setReplyTo] = (0, import_react3.useState)(null);
-  const value = conversationId === null ? "" : drafts[conversationId] ?? "";
+  const session = host === null ? null : getComposerSession(host.engine);
+  const composer = (0, import_react3.useSyncExternalStore)(
+    session?.subscribe ?? subscribeToNothing,
+    session?.getSnapshot ?? emptyComposerSnapshot,
+    emptyComposerSnapshot
+  );
+  const replyTo = conversationId === null ? null : composer.replies[conversationId] ?? null;
+  const additions = conversationId === null ? [] : composer.additions[conversationId] ?? [];
+  const setReplyTo = (message) => {
+    if (conversationId !== null) session?.update((current) => ({
+      ...current,
+      replies: { ...current.replies, [conversationId]: message }
+    }));
+  };
+  const value = conversationId === null ? "" : composer.drafts[conversationId] ?? "";
   const typing = (0, import_react4.useTyping)(
     {
       topic: conversationId === null ? "" : conversationTopic(conversationId),
@@ -2646,26 +2792,57 @@ function useComposer(conversationId) {
   const setValue = (0, import_react3.useCallback)(
     (next) => {
       if (conversationId === null) return;
-      setDrafts((current) => ({ ...current, [conversationId]: next }));
+      session?.update((current) => ({
+        ...current,
+        drafts: { ...current.drafts, [conversationId]: next }
+      }));
     },
-    [conversationId]
+    [conversationId, session]
   );
   return {
     value,
     setValue,
-    canSend: value.trim().length > 0 && conversationId !== null && host !== null,
+    additions,
+    add: (item) => {
+      if (conversationId !== null) session?.update((current) => ({
+        ...current,
+        additions: {
+          ...current.additions,
+          [conversationId]: [
+            ...(current.additions[conversationId] ?? []).filter((existing) => existing.id !== item.id),
+            item
+          ]
+        }
+      }));
+    },
+    removeAddition: (id) => {
+      if (conversationId !== null) session?.update((current) => ({
+        ...current,
+        additions: {
+          ...current.additions,
+          [conversationId]: (current.additions[conversationId] ?? []).filter((item) => item.id !== id)
+        }
+      }));
+    },
+    canSend: (value.trim().length > 0 || additions.length > 0) && conversationId !== null && host !== null,
     send: () => {
-      if (host === null || conversationId === null) return;
-      const content = value.trim();
-      if (content.length === 0) return;
+      if (host === null || conversationId === null || session === null) return;
+      const content = [value.trim(), ...additions.map((item) => item.content ?? "")].filter(Boolean).join("\n\n");
+      const attachments = additions.flatMap((item) => item.attachment ? [item.attachment] : []);
+      if (content.length === 0 && attachments.length === 0) return;
       const draft = {
         conversationId,
         content,
+        attachments,
         ...replyTo !== null ? { replyToId: replyTo.id } : {}
       };
       host.engine.send(draft);
-      setDrafts((current) => ({ ...current, [conversationId]: "" }));
-      setReplyTo(null);
+      session.update((current) => ({
+        ...current,
+        drafts: { ...current.drafts, [conversationId]: "" },
+        replies: { ...current.replies, [conversationId]: null },
+        additions: { ...current.additions, [conversationId]: [] }
+      }));
       typing.stopTyping();
     },
     onKeystroke: typing.onKeystroke,
@@ -3176,6 +3353,7 @@ function ConversationList(props) {
   } = useConversations();
   const RowChrome = useMessagingHost()?.wrapConversationRow ?? null;
   const [query, setQuery] = (0, import_react5.useState)("");
+  const favoritePageRequestCount = (0, import_react5.useRef)(null);
   const showingArchive = archiveFilter === "archived";
   const archiveReveal = (0, import_react5.useMemo)(() => {
     if (showingArchive) {
@@ -3201,6 +3379,51 @@ function ConversationList(props) {
       (item) => item.displayName.toLowerCase().includes(needle) || (item.lastMessageContent ?? "").toLowerCase().includes(needle)
     );
   }, [conversations, query]);
+  const loadNextPage = () => {
+    if (favoritePageRequestCount.current === conversations.length) return;
+    favoritePageRequestCount.current = conversations.length;
+    loadMore();
+  };
+  const hasUnloadedFavorites = (props.pinnedConversationIds ?? []).some(
+    (id) => !conversations.some((item) => String(item.conversation.id) === id)
+  );
+  (0, import_react5.useEffect)(() => {
+    if (!hasUnloadedFavorites || !hasMore || isInitialLoading || loadError !== null || favoritePageRequestCount.current === conversations.length) {
+      return;
+    }
+    loadNextPage();
+  }, [
+    conversations,
+    hasMore,
+    hasUnloadedFavorites,
+    isInitialLoading,
+    loadError,
+    loadMore,
+    loadNextPage
+  ]);
+  const { favoriteItems, otherPinnedItems, unpinnedItems } = (0, import_react5.useMemo)(() => {
+    const visibleById = new Map(
+      visible.map((item) => [String(item.conversation.id), item])
+    );
+    const pinnedItems = (props.pinnedConversationIds ?? []).map((id) => visibleById.get(id)).filter((item) => item !== void 0);
+    const uniquePinnedItems = Array.from(
+      new Map(pinnedItems.map((item) => [item.conversation.id, item])).values()
+    ).sort((left, right) => {
+      const byRecency = Date.parse(right.sortAt) - Date.parse(left.sortAt);
+      return Number.isNaN(byRecency) || byRecency === 0 ? String(left.conversation.id).localeCompare(String(right.conversation.id)) : byRecency;
+    });
+    const pinnedIds = new Set(uniquePinnedItems.map((item) => item.conversation.id));
+    return {
+      favoriteItems: uniquePinnedItems.slice(0, 3),
+      otherPinnedItems: uniquePinnedItems.slice(3),
+      unpinnedItems: visible.filter((item) => !pinnedIds.has(item.conversation.id))
+    };
+  }, [visible, props.pinnedConversationIds]);
+  const selectItem = (item) => {
+    select(item.conversation.id);
+    props.onSelect?.(item.conversation.id);
+  };
+  const wrapRow = (item, row) => RowChrome !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RowChrome, { conversation: item, children: row }) : row;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `mx-msg__list${props.className !== void 0 ? ` ${props.className}` : ""}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-msg__search", children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SearchIcon, { style: { color: "var(--mx-msg-text-faint)" } }),
@@ -3256,33 +3479,67 @@ function ConversationList(props) {
           title: query.length > 0 ? "No matches" : showingArchive ? "No archived conversations" : "No conversations yet",
           body: query.length > 0 ? "Try a different name or word." : showingArchive ? "Archiving a conversation moves it here." : "Start one and it will appear here."
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "mx-msg__rows", children: visible.map((item) => {
-        const row = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          ConversationRow,
-          {
-            summary: item,
-            isActive: item.conversation.id === activeConversationId,
-            onSelect: () => {
-              select(item.conversation.id);
-              props.onSelect?.(item.conversation.id);
+      ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        favoriteItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "mx-msg__favorites", "aria-label": "Favorite conversations", children: favoriteItems.map((item) => {
+          const row = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            ConversationFavorite,
+            {
+              summary: item,
+              isActive: item.conversation.id === activeConversationId,
+              onSelect: () => selectItem(item)
             }
-          }
-        );
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: RowChrome !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RowChrome, { conversation: item, children: row }) : row }, item.conversation.id);
-      }) }),
+          );
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: wrapRow(item, row) }, item.conversation.id);
+        }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "mx-msg__rows", children: [...otherPinnedItems, ...unpinnedItems].map((item) => {
+          const row = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            ConversationRow,
+            {
+              summary: item,
+              isActive: item.conversation.id === activeConversationId,
+              onSelect: () => selectItem(item)
+            }
+          );
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: wrapRow(item, row) }, item.conversation.id);
+        }) })
+      ] }),
       hasMore && !isInitialLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "button",
         {
           type: "button",
           className: "mx-msg__chip",
           style: { margin: "8px auto", display: "block" },
-          onClick: loadMore,
+          onClick: loadNextPage,
           children: "Load older conversations"
         }
       ) : null
     ] })
   ] });
 }
+function ConversationFavorite(props) {
+  const { summary } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: "mx-msg__favorite",
+      "aria-current": props.isActive,
+      "aria-label": `Open favorite conversation with ${summary.displayName}`,
+      onClick: props.onSelect,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Avatar,
+          {
+            name: summary.displayName,
+            imageUrl: summary.displayImageUrl,
+            seed: summary.conversation.id
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-msg__favorite-name", children: summary.displayName })
+      ]
+    }
+  );
+}
 function ConversationRow(props) {
   const { summary } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -3457,6 +3714,8 @@ function ConversationView(props) {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             MessageGroupView,
             {
+              allMessages: messages,
+              showAuthor: conversation.summary?.conversation.type !== "direct",
               messages: group.messages,
               actor,
               isMine,
@@ -3488,37 +3747,41 @@ function MessageGroupView(props) {
   const first = props.messages[0];
   if (first === void 0) return null;
   const actor = props.actor;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `mx-msg__group${props.isMine ? " mx-msg__group--mine" : ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      Avatar,
-      {
-        name: actor.displayName,
-        imageUrl: actor.avatarUrl,
-        seed: actor.isAgent ? `agent:${actor.displayName}` : actor.principalUserId,
-        small: true
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-msg__group-body", children: [
-      !props.isMine || actor.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-msg__author", children: [
-        actor.displayName,
-        actor.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AgentTag, {}) : null,
-        actor.onBehalfOfName !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { fontWeight: 400, color: "var(--mx-msg-text-faint)" }, children: [
-          "via ",
-          actor.onBehalfOfName
-        ] }) : null
-      ] }) : null,
-      props.messages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        MessageBubble,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-msg__group-time", children: formatMessageTime(first.createdAt) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `mx-msg__group${props.isMine ? " mx-msg__group--mine" : ""}`, children: [
+      props.showAuthor || actor.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        Avatar,
         {
-          message,
-          isMine: props.isMine,
-          isLast: index === props.messages.length - 1,
-          onRetry: props.onRetry,
-          onReply: props.onReply,
-          failedEntryId: message.clientMessageId !== null ? props.failedEntryIdByClientId.get(message.clientMessageId) ?? null : null
-        },
-        message.id
-      ))
+          name: actor.displayName,
+          imageUrl: actor.avatarUrl,
+          seed: actor.isAgent ? `agent:${actor.displayName}` : actor.principalUserId,
+          small: true
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-msg__group-body", children: [
+        props.showAuthor && !props.isMine || actor.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-msg__author", children: [
+          actor.displayName,
+          actor.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AgentTag, {}) : null,
+          actor.onBehalfOfName !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { fontWeight: 400, color: "var(--mx-msg-text-faint)" }, children: [
+            "via ",
+            actor.onBehalfOfName
+          ] }) : null
+        ] }) : null,
+        props.messages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          MessageBubble,
+          {
+            message,
+            replyTo: props.allMessages.find((parent) => parent.id === message.replyToId),
+            isMine: props.isMine,
+            isLast: index === props.messages.length - 1,
+            onRetry: props.onRetry,
+            onReply: props.onReply,
+            failedEntryId: message.clientMessageId !== null ? props.failedEntryIdByClientId.get(message.clientMessageId) ?? null : null
+          },
+          message.id
+        ))
+      ] })
     ] })
   ] });
 }
@@ -3539,7 +3802,12 @@ function MessageBubble(props) {
     message.deliveryState === "failed" ? "mx-msg__bubble--failed" : ""
   ].filter(Boolean).join(" ");
   const bubble = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: classes, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: classes, title: formatMessageTime(message.createdAt), children: [
+      message.replyToId !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("blockquote", { className: "mx-msg__quoted-reply", children: props.replyTo ? props.replyTo.deletedAt ? "Message deleted" : summarizeText(props.replyTo.content, 180) || "Attachment" : "Earlier message" }) : null,
+      message.attachments.map((attachment) => {
+        const RenderAttachment = props.renderAttachment ?? host?.renderAttachment;
+        return RenderAttachment ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RenderAttachment, { attachment }, attachment.fileId) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ReferenceCard, { reference: { entityType: "file", entityId: attachment.fileId, label: attachment.fileName }, onOpen: host?.openReference ?? null }, attachment.fileId);
+      }),
       splitText(message.content).map(
         (segment, index) => segment.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-msg__markdown", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default, import_remark_breaks.default], children: segment.value }) }, index) : segment.type === "fence" ? HostFence !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HostFence, { body: segment.body }, `fence:${index}`) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UnreadableReference, {}, `fence:${index}`) : HostReference !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           HostReference,
@@ -3579,7 +3847,7 @@ function MessageBubble(props) {
       {
         className: `mx-msg__meta${message.deliveryState === "failed" ? " mx-msg__meta--failed" : ""}`,
         children: [
-          props.isLast ? formatMessageTime(message.createdAt) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-msg__message-time", children: props.isLast ? formatMessageTime(message.createdAt) : null }),
           message.editedAt !== null ? " \xB7 edited" : null,
           isMine ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DeliveryTick, { state: message.deliveryState }) : null,
           message.deliveryState === "failed" && props.failedEntryId != null && props.onRetry !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -3674,6 +3942,9 @@ function ComposerView(props) {
       )
     ] }) : null,
     props.renderInput !== void 0 ? props.renderInput({
+      additions: composer.additions,
+      add: composer.add,
+      removeAddition: composer.removeAddition,
       value: composer.value,
       disabled: props.disabled,
       canSend: composer.canSend,