@ai-matrx/messaging 0.10.1 → 0.10.2

package/dist/react.cjs

@@ -73,6 +73,7 @@ __export(react_exports, {
   createOutbox: () => createOutbox,
   createReadCache: () => createReadCache,
   createWebOutboxStorage: () => createWebOutboxStorage,
+  effectiveActorKey: () => effectiveActorKey,
   extractReferences: () => extractReferences,
   formatConversationTime: () => formatConversationTime,
   formatDateSeparator: () => formatDateSeparator,
@@ -2048,18 +2049,20 @@ function groupMessages(messages, args = {}) {
   let current = null;
   let previousDay = null;
   for (const message of messages) {
+    const actorKey = args.actorKey?.(message) ?? `principal:${message.senderId}`;
     const day = message.createdAt.slice(0, 10);
     const startsNewDay = day !== previousDay;
     previousDay = day;
     const last = current?.messages.at(-1);
     const withinWindow = last !== void 0 && Math.abs(Date.parse(message.createdAt) - Date.parse(last.createdAt)) <= windowMs;
-    if (current !== null && current.senderId === message.senderId && withinWindow && !startsNewDay) {
+    if (current !== null && current.senderId === message.senderId && current.actorKey === actorKey && withinWindow && !startsNewDay) {
       current.messages.push(message);
       continue;
     }
     if (current !== null) groups.push(current);
     current = {
       senderId: message.senderId,
+      actorKey,
       messages: [message],
       dateSeparator: startsNewDay ? formatDateSeparator(message.createdAt, now, args.locale) : null
     };
@@ -2381,19 +2384,36 @@ var import_react5 = require("react");
 
 // src/core/actor.ts
 function readActorHint(metadata) {
-  const raw = metadata["actor"];
-  if (typeof raw !== "object" || raw === null || Array.isArray(raw)) return null;
-  const record = raw;
-  const agentId = record["agentId"] ?? record["agent_id"];
-  if (typeof agentId !== "string" || agentId.length === 0) return null;
-  const name = record["agentName"] ?? record["agent_name"];
-  const avatar = record["agentAvatarUrl"] ?? record["agent_avatar_url"];
+  const envelope = metadata;
+  const raw = envelope["actor"];
+  if (typeof raw === "object" && raw !== null && !Array.isArray(raw)) {
+    const record = raw;
+    const agentId = record["agentId"] ?? record["agent_id"];
+    if (typeof agentId !== "string" || agentId.length === 0) return null;
+    const name2 = record["agentName"] ?? record["agent_name"];
+    const avatar2 = record["agentAvatarUrl"] ?? record["agent_avatar_url"];
+    return {
+      agentId,
+      ...typeof name2 === "string" && name2.length > 0 ? { agentName: name2 } : {},
+      ...typeof avatar2 === "string" && avatar2.length > 0 ? { agentAvatarUrl: avatar2 } : {}
+    };
+  }
+  const actorKind = envelope["actor_kind"] ?? envelope["actorKind"];
+  if (actorKind !== "agent") return null;
+  const id = envelope["actor_id"] ?? envelope["actorId"];
+  const name = envelope["actor_label"] ?? envelope["actorLabel"];
+  const avatar = envelope["actor_avatar_url"] ?? envelope["actorAvatarUrl"];
   return {
-    agentId,
+    ...typeof id === "string" && id.length > 0 ? { agentId: id } : {},
     ...typeof name === "string" && name.length > 0 ? { agentName: name } : {},
     ...typeof avatar === "string" && avatar.length > 0 ? { agentAvatarUrl: avatar } : {}
   };
 }
+function effectiveActorKey(message) {
+  const hint = readActorHint(message.metadata);
+  if (hint === null) return `principal:${message.senderId}`;
+  return `agent:${hint.agentId ?? hint.agentName ?? "anonymous"}`;
+}
 function resolveActor(message, sender) {
   const hint = readActorHint(message.metadata);
   const humanName = sender?.displayName ?? message.senderId;
@@ -2789,7 +2809,7 @@ function ConversationView(props) {
   );
   const anyOnline = others.some((participant) => online.has(participant.userId));
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `mx-msg__thread${props.className !== void 0 ? ` ${props.className}` : ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("header", { className: "mx-msg__header", children: [
+    props.showHeader !== false ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("header", { className: "mx-msg__header", children: [
       props.onBack !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "button",
         {
@@ -2824,8 +2844,8 @@ function ConversationView(props) {
           children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UsersIcon, {})
         }
       ) : null })
-    ] }),
-    ai.available.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-msg__ai-bar", children: ai.available.map((capability) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    ] }) : null,
+    props.showAi !== false && ai.available.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-msg__ai-bar", children: ai.available.map((capability) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "button",
       {
         type: "button",
@@ -2839,7 +2859,7 @@ function ConversationView(props) {
       },
       capability
     )) }) : null,
-    ai.isRunning ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-msg__ai-output", "aria-busy": "true", "aria-live": "polite", children: ai.partialText.length > 0 ? ai.partialText : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    props.showAi !== false && ai.isRunning ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-msg__ai-output", "aria-busy": "true", "aria-live": "polite", children: ai.partialText.length > 0 ? ai.partialText : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-msg__ai-output-label", children: ai.activeCapability !== null ? `${AI_LABELS[ai.activeCapability]}\u2026` : "Working\u2026" }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "span",
@@ -2848,7 +2868,7 @@ function ConversationView(props) {
           style: { display: "block", height: 11, width: "72%" }
         }
       )
-    ] }) }) : ai.error !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-msg__ai-output", style: { color: "var(--mx-msg-danger)" }, children: ai.error }) : ai.result !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "mx-msg__ai-output", children: [
+    ] }) }) : props.showAi !== false && ai.error !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-msg__ai-output", style: { color: "var(--mx-msg-danger)" }, children: ai.error }) : props.showAi !== false && ai.result !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "mx-msg__ai-output", children: [
       ai.result.text,
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "button",
@@ -2873,26 +2893,24 @@ function ConversationView(props) {
           children: "Load earlier messages"
         }
       ) : null,
-      groupMessages(messages).map((group) => {
+      groupMessages(messages, { actorKey: effectiveActorKey }).map((group) => {
         const first = group.messages[0];
         if (first === void 0) return null;
-        const isMine = group.senderId === selfId;
         const sender = conversation.participants.find(
           (participant) => participant.userId === group.senderId
         ) ?? null;
+        const actor = resolveActor(first, sender);
+        const isMine = group.senderId === selfId && !actor.isAgent;
         return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
           group.dateSeparator !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-msg__day", children: group.dateSeparator }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             MessageGroupView,
             {
               messages: group.messages,
-              sender,
+              actor,
               isMine,
               onRetry: conversation.retry,
               onReply: composer.setReplyTo,
-              pendingIds: new Set(
-                conversation.pending.filter((entry) => entry.state === "failed").map((entry) => entry.clientMessageId)
-              ),
               failedEntryIdByClientId: new Map(
                 conversation.pending.map((entry) => [entry.clientMessageId, entry.id])
               )
@@ -2905,13 +2923,20 @@ function ConversationView(props) {
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TypingDots, {}),
       typists.label
     ] }) : null }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ComposerView, { composer, disabled: false })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ComposerView,
+      {
+        composer,
+        disabled: false,
+        ...props.renderComposerInput !== void 0 ? { renderInput: props.renderComposerInput } : {}
+      }
+    )
   ] });
 }
 function MessageGroupView(props) {
   const first = props.messages[0];
   if (first === void 0) return null;
-  const actor = resolveActor(first, props.sender);
+  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,
@@ -3098,7 +3123,24 @@ function ComposerView(props) {
         }
       )
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-msg__composer-row", children: [
+    props.renderInput !== void 0 ? props.renderInput({
+      value: composer.value,
+      disabled: props.disabled,
+      canSend: composer.canSend,
+      placeholder: "Write a reply\u2026",
+      onChange: (value) => {
+        composer.setValue(value);
+        composer.onKeystroke();
+      },
+      onKeyDown: (event) => {
+        if (event.key !== "Enter" || event.shiftKey) return;
+        const isTouch = typeof globalThis.matchMedia === "function" && globalThis.matchMedia("(pointer: coarse)").matches;
+        if (isTouch) return;
+        event.preventDefault();
+        composer.send();
+      },
+      onSubmit: composer.send
+    }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-msg__composer-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "textarea",
         {