@athenaintel/react 0.56.0 → 0.57.0

package/dist/chat-ui/index.cjs

@@ -36,6 +36,7 @@ const runningIndicator = require("./messages/running-indicator.cjs");
 const signInCard = require("./auth/sign-in-card.cjs");
 const runtimeMessage = require("./messages/runtime-message.cjs");
 const wakeMarker = require("./messages/wake-marker.cjs");
+const inboundChannelMessage = require("./messages/inbound-channel-message.cjs");
 const handoffArrivalDivider = require("./messages/handoff-arrival-divider.cjs");
 const answerLabel = require("./messages/answer-label.cjs");
 const voiceDelegationCard = require("./messages/voice-delegation-card.cjs");
@@ -147,6 +148,9 @@ exports.SignInTextField = signInCard.SignInTextField;
 exports.RuntimeMessageCard = runtimeMessage.RuntimeMessageCard;
 exports.WakeMarkerCard = wakeMarker.WakeMarkerCard;
 exports.WakeMarkerMessage = wakeMarker.WakeMarkerMessage;
+exports.InboundChannelLine = inboundChannelMessage.InboundChannelLine;
+exports.InboundChannelSubject = inboundChannelMessage.InboundChannelSubject;
+exports.withInboundMessageBody = inboundChannelMessage.withInboundMessageBody;
 exports.HandoffArrivalAfterMessage = handoffArrivalDivider.HandoffArrivalAfterMessage;
 exports.HandoffArrivalDivider = handoffArrivalDivider.HandoffArrivalDivider;
 exports.HandoffArrivalScope = handoffArrivalDivider.HandoffArrivalScope;

package/dist/chat-ui/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chat-ui/index.d.ts

@@ -46,6 +46,7 @@ export { TextShimmerLoader, ThreadRunningIndicator, } from "./messages/running-i
 export { SignInCard, SignInConsent, SignInFallbackSection, SignInSecondaryButton, SignInSelect, SignInTextField, } from "./auth/sign-in-card";
 export { RuntimeMessageCard, type RuntimeMessageCardProps } from "./messages/runtime-message";
 export { WakeMarkerCard, type WakeMarkerCardProps, WakeMarkerMessage, } from "./messages/wake-marker";
+export { InboundChannelLine, InboundChannelSubject, withInboundMessageBody, } from "./messages/inbound-channel-message";
 export { HandoffArrivalAfterMessage, HandoffArrivalDivider, type HandoffArrivalDividerProps, HandoffArrivalScope, } from "./messages/handoff-arrival-divider";
 export { AnswerLabel, type AnswerLabelProps, AnswerLabelScope, type AnswerLabelScopeProps, } from "./messages/answer-label";
 export { VoiceDelegationCard, type VoiceDelegationCardProps, VoiceDelegationMessage, } from "./messages/voice-delegation-card";

package/dist/chat-ui/index.js

@@ -34,6 +34,7 @@ import { TextShimmerLoader, ThreadRunningIndicator } from "./messages/running-in
 import { SignInCard, SignInConsent, SignInFallbackSection, SignInSecondaryButton, SignInSelect, SignInTextField } from "./auth/sign-in-card.js";
 import { RuntimeMessageCard } from "./messages/runtime-message.js";
 import { WakeMarkerCard, WakeMarkerMessage } from "./messages/wake-marker.js";
+import { InboundChannelLine, InboundChannelSubject, withInboundMessageBody } from "./messages/inbound-channel-message.js";
 import { HandoffArrivalAfterMessage, HandoffArrivalDivider, HandoffArrivalScope } from "./messages/handoff-arrival-divider.js";
 import { AnswerLabel, AnswerLabelScope } from "./messages/answer-label.js";
 import { VoiceDelegationCard, VoiceDelegationMessage } from "./messages/voice-delegation-card.js";
@@ -83,6 +84,8 @@ export {
   HandoffCursorReveal,
   HistoryEdgeRow,
   IconButton,
+  InboundChannelLine,
+  InboundChannelSubject,
   MESSAGE_ARRIVAL_ANIMATION_CLASS,
   MarkdownText,
   MentionAuthCtx,
@@ -167,6 +170,7 @@ export {
   useReadThreadReadingCursor,
   useStatewireApprovalRequest,
   useStatewireToolOutputs,
-  webpageMentionFingerprint
+  webpageMentionFingerprint,
+  withInboundMessageBody
 };
 //# sourceMappingURL=index.js.map

package/dist/chat-ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chat-ui/messages/inbound-channel-message.cjs

@@ -0,0 +1,219 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("@assistant-ui/react");
+const lucideReact = require("lucide-react");
+const require$$0 = require("react");
+const collapsible = require("../../ui/collapsible.cjs");
+const inboundChannelReader = require("./inbound-channel-reader.cjs");
+const inboundChannel = require("../../agent-runtime/src/inbound-channel.cjs");
+const cnfast = require("cnfast");
+const SlackMark = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 2447.6 2452.5", className, "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsxRuntime.jsxs("g", { clipRule: "evenodd", fillRule: "evenodd", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z",
+      fill: "#36c5f0"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z",
+      fill: "#2eb67d"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z",
+      fill: "#ecb22e"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0",
+      fill: "#e01e5a"
+    }
+  )
+] }) });
+const TeamsMark = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 2228.833 2073.333", className, "aria-hidden": "true", focusable: "false", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      fill: "#5059C9",
+      d: "M1554.637 777.5h575.713c54.391 0 98.483 44.092 98.483 98.483v524.398c0 199.901-162.051 361.952-361.952 361.952h-1.711c-199.901.028-361.975-162-362.004-361.901V828.971c0-28.427 23.044-51.471 51.471-51.471z"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { fill: "#5059C9", cx: "1943.75", cy: "440.583", r: "233.25" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { fill: "#7B83EB", cx: "1218.083", cy: "336.917", r: "336.917" }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      fill: "#7B83EB",
+      d: "M1667.323 777.5H717.01c-53.743 1.33-96.257 45.931-95.01 99.676v598.105c-7.505 322.519 247.657 590.16 570.167 598.053 322.51-7.893 577.671-275.534 570.167-598.053V877.176c1.245-53.745-41.268-98.346-95.011-99.676z"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      fill: "#4B53BC",
+      d: "M95.01 466.5h950.312c52.473 0 95.01 42.538 95.01 95.01v950.312c0 52.473-42.538 95.01-95.01 95.01H95.01c-52.473 0-95.01-42.538-95.01-95.01V561.51c0-52.472 42.538-95.01 95.01-95.01z"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#FFF", d: "M820.211 828.193H630.241v517.297H509.211V828.193H320.123V727.844h500.088z" })
+] });
+const ChannelMark = ({
+  kind,
+  className
+}) => {
+  switch (kind) {
+    case "slack":
+      return /* @__PURE__ */ jsxRuntime.jsx(SlackMark, { className });
+    case "teams":
+      return /* @__PURE__ */ jsxRuntime.jsx(TeamsMark, { className });
+    case "email":
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MailIcon, { className: cnfast.cn("text-sky-600", className), "aria-hidden": "true" });
+    case "sms":
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareIcon, { className: cnfast.cn("text-emerald-600", className), "aria-hidden": "true" });
+    case "api":
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CodeIcon, { className: cnfast.cn("text-muted-foreground", className), "aria-hidden": "true" });
+    case "voice_memo":
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AudioLinesIcon, { className: cnfast.cn("text-violet-600", className), "aria-hidden": "true" });
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareIcon, { className: cnfast.cn("text-muted-foreground", className), "aria-hidden": "true" });
+  }
+};
+function firstText(parts) {
+  if (!Array.isArray(parts)) return "";
+  for (const part of parts) {
+    if (typeof part === "object" && part !== null && part.type === "text" && typeof part.text === "string") {
+      return part.text;
+    }
+  }
+  return "";
+}
+const InboundChannelFacts = ({ message }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    className: "flex w-full min-w-0 flex-col gap-2 rounded-xl border border-border bg-background px-3 py-2.5 text-left text-xs",
+    "data-slot": "inbound-channel-facts",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "What the agent received with this message" }),
+      message.facts.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1", children: message.facts.map((fact, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "contents", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "whitespace-nowrap text-muted-foreground", children: fact.label }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground [overflow-wrap:anywhere]", children: fact.value })
+      ] }, `${fact.key}-${index}`)) }) : null,
+      message.quoted ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Earlier in the thread" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-pre-wrap border-border border-l-2 pl-2 text-foreground [overflow-wrap:anywhere]", children: message.quoted })
+      ] }) : null
+    ]
+  }
+);
+const InboundChannelSource = ({
+  message,
+  className
+}) => {
+  const [open, setOpen] = require$$0.useState(false);
+  const origin = message.origin;
+  const name = origin.senderName;
+  const handle = origin.senderHandle;
+  const primary = name ?? handle ?? origin.label;
+  const secondary = name && handle ? handle : null;
+  const channelLine = [origin.label, origin.place].filter(Boolean).join(" · ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    collapsible.Collapsible,
+    {
+      open,
+      onOpenChange: setOpen,
+      className: cnfast.cn("flex w-full min-w-0 flex-col items-end gap-1", className),
+      "data-slot": "inbound-channel",
+      "data-channel": origin.kind,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/inbound-channel relative flex min-w-0 max-w-full justify-end", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            collapsible.CollapsibleTrigger,
+            {
+              "data-testid": "inbound-channel-source",
+              className: "flex min-w-0 max-w-full items-center gap-1.5 rounded-md px-1.5 py-0.5 text-muted-foreground text-xs transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ChannelMark, { kind: origin.kind, className: "size-3.5 shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium text-foreground/80", children: primary }),
+                secondary ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: secondary }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: `, via ${channelLine}. Show what the agent received` }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  lucideReact.ChevronDownIcon,
+                  {
+                    className: cnfast.cn("size-3 shrink-0 transition-transform", open && "rotate-180"),
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            }
+          ),
+          open ? null : /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "aria-hidden": "true",
+              "data-slot": "inbound-channel-card",
+              className: "pointer-events-none absolute top-full right-0 z-20 mt-1 flex w-max max-w-xs flex-col gap-0.5 rounded-md bg-foreground px-3 py-1.5 text-left text-background text-xs opacity-0 shadow-md transition-opacity delay-0 group-focus-within/inbound-channel:opacity-100 group-hover/inbound-channel:opacity-100 group-hover/inbound-channel:delay-300",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5 font-medium", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ChannelMark, { kind: origin.kind, className: "size-3.5 shrink-0" }),
+                  channelLine
+                ] }),
+                name ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: name }) : null,
+                handle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-80", children: handle }) : null,
+                origin.subject ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-80", children: `${origin.kind === "voice_memo" ? "Memo" : "Subject"}: ${origin.subject}` }) : null
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(collapsible.CollapsibleContent, { className: "w-full min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(InboundChannelFacts, { message }) })
+      ]
+    }
+  );
+};
+const InboundChannelLine = ({ className }) => {
+  const custom = react.useAuiState((s) => {
+    var _a;
+    return (_a = s.message.metadata) == null ? void 0 : _a.custom;
+  });
+  const parts = react.useAuiState((s) => s.message.parts);
+  const message = require$$0.useMemo(
+    () => inboundChannel.isInboundChannelMessage(custom) ? inboundChannelReader.readInboundChannelMessage({ custom, text: firstText(parts) }) : null,
+    [custom, parts]
+  );
+  return message ? /* @__PURE__ */ jsxRuntime.jsx(InboundChannelSource, { message, className }) : null;
+};
+const InboundChannelSubject = () => {
+  const subject = react.useAuiState((s) => {
+    var _a;
+    return inboundChannel.inboundEmailSubject((_a = s.message.metadata) == null ? void 0 : _a.custom);
+  });
+  if (!subject) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 font-semibold", "data-slot": "inbound-channel-subject", children: subject });
+};
+const wrappedTextComponents = /* @__PURE__ */ new WeakMap();
+function withInboundMessageBody(Text) {
+  const cached = wrappedTextComponents.get(Text);
+  if (cached) return cached;
+  const InboundMessageBodyText = (props) => {
+    const custom = react.useAuiState((s) => {
+      var _a;
+      return (_a = s.message.metadata) == null ? void 0 : _a.custom;
+    });
+    const text = require$$0.useMemo(() => inboundChannel.inboundMessageBody({ custom, text: props.text }), [custom, props.text]);
+    return /* @__PURE__ */ jsxRuntime.jsx(Text, { ...props, text });
+  };
+  wrappedTextComponents.set(Text, InboundMessageBodyText);
+  return InboundMessageBodyText;
+}
+exports.ChannelMark = ChannelMark;
+exports.InboundChannelLine = InboundChannelLine;
+exports.InboundChannelSource = InboundChannelSource;
+exports.InboundChannelSubject = InboundChannelSubject;
+exports.withInboundMessageBody = withInboundMessageBody;
+//# sourceMappingURL=inbound-channel-message.cjs.map

package/dist/chat-ui/messages/inbound-channel-message.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"inbound-channel-message.cjs","sources":["../../../src/chat-ui/messages/inbound-channel-message.tsx"],"sourcesContent":["/**\n * A user turn that came in over a channel (Slack, email, a text, Microsoft\n * Teams, the Programmatic API, a voice memo), drawn as the words that were\n * sent under a line naming the channel and the sender.\n *\n * The channel's routing block (`<inbound-message-context>`: the facts the\n * agent is told, such as Slack ids, the numbers a text went between and how a\n * reply is delivered) leaves the bubble. The line above the bubble opens it\n * as a labelled list, and hovering the line shows the channel, the place and\n * the sender in full. Every host that renders the SDK's user message gets\n * this; a host with its own user message composes it from\n * `InboundChannelLine`, `InboundChannelSubject` and `withInboundMessageBody`\n * (or `UserMessageText`). Only a message with the `inbound_channel` envelope\n * is a channel message: tags someone types show as typed.\n *\n * The hover card is CSS, not a Radix tooltip, and the glyphs are icons the\n * chat already draws: a host that splits `node_modules` into startup vendor\n * chunks (the Office pane) would otherwise load a tooltip stack at startup for\n * a line it rarely shows.\n */\nimport { type TextMessagePartComponent, useAuiState } from \"@assistant-ui/react\";\nimport {\n  inboundEmailSubject,\n  inboundMessageBody,\n  isInboundChannelMessage,\n} from \"@athenaintel/agent-runtime\";\nimport { AudioLinesIcon, ChevronDownIcon, CodeIcon, MailIcon, MessageSquareIcon } from \"lucide-react\";\nimport { type FC, useMemo, useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"../../ui/collapsible\";\nimport {\n  type InboundChannelKind,\n  type InboundChannelMessage,\n  readInboundChannelMessage,\n} from \"./inbound-channel-reader\";\n\n/** Slack's four-colour mark. */\nconst SlackMark: FC<{ className?: string }> = ({ className }) => (\n  <svg viewBox=\"0 0 2447.6 2452.5\" className={className} aria-hidden=\"true\" focusable=\"false\">\n    <g clipRule=\"evenodd\" fillRule=\"evenodd\">\n      <path\n        d=\"m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z\"\n        fill=\"#36c5f0\"\n      />\n      <path\n        d=\"m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z\"\n        fill=\"#2eb67d\"\n      />\n      <path\n        d=\"m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z\"\n        fill=\"#ecb22e\"\n      />\n      <path\n        d=\"m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0\"\n        fill=\"#e01e5a\"\n      />\n    </g>\n  </svg>\n);\n\n/** Microsoft Teams' mark: the two people and the T tile, in flat colour. */\nconst TeamsMark: FC<{ className?: string }> = ({ className }) => (\n  <svg viewBox=\"0 0 2228.833 2073.333\" className={className} aria-hidden=\"true\" focusable=\"false\">\n    <path\n      fill=\"#5059C9\"\n      d=\"M1554.637 777.5h575.713c54.391 0 98.483 44.092 98.483 98.483v524.398c0 199.901-162.051 361.952-361.952 361.952h-1.711c-199.901.028-361.975-162-362.004-361.901V828.971c0-28.427 23.044-51.471 51.471-51.471z\"\n    />\n    <circle fill=\"#5059C9\" cx=\"1943.75\" cy=\"440.583\" r=\"233.25\" />\n    <circle fill=\"#7B83EB\" cx=\"1218.083\" cy=\"336.917\" r=\"336.917\" />\n    <path\n      fill=\"#7B83EB\"\n      d=\"M1667.323 777.5H717.01c-53.743 1.33-96.257 45.931-95.01 99.676v598.105c-7.505 322.519 247.657 590.16 570.167 598.053 322.51-7.893 577.671-275.534 570.167-598.053V877.176c1.245-53.745-41.268-98.346-95.011-99.676z\"\n    />\n    <path\n      fill=\"#4B53BC\"\n      d=\"M95.01 466.5h950.312c52.473 0 95.01 42.538 95.01 95.01v950.312c0 52.473-42.538 95.01-95.01 95.01H95.01c-52.473 0-95.01-42.538-95.01-95.01V561.51c0-52.472 42.538-95.01 95.01-95.01z\"\n    />\n    <path fill=\"#FFF\" d=\"M820.211 828.193H630.241v517.297H509.211V828.193H320.123V727.844h500.088z\" />\n  </svg>\n);\n\n/**\n * The channel's mark at the size `className` gives: Slack's and Teams' own\n * logos, a tinted glyph for email, texts, the API and voice memos, a speech\n * bubble for any other channel. Decorative: the line it sits on names the\n * channel.\n */\nexport const ChannelMark: FC<{ kind: InboundChannelKind; className?: string }> = ({\n  kind,\n  className,\n}) => {\n  switch (kind) {\n    case \"slack\":\n      return <SlackMark className={className} />;\n    case \"teams\":\n      return <TeamsMark className={className} />;\n    case \"email\":\n      return <MailIcon className={cn(\"text-sky-600\", className)} aria-hidden=\"true\" />;\n    case \"sms\":\n      return <MessageSquareIcon className={cn(\"text-emerald-600\", className)} aria-hidden=\"true\" />;\n    case \"api\":\n      return <CodeIcon className={cn(\"text-muted-foreground\", className)} aria-hidden=\"true\" />;\n    case \"voice_memo\":\n      return <AudioLinesIcon className={cn(\"text-violet-600\", className)} aria-hidden=\"true\" />;\n    default:\n      return <MessageSquareIcon className={cn(\"text-muted-foreground\", className)} aria-hidden=\"true\" />;\n  }\n};\n\n/** The first text part's words: where a channel's routing block sits. */\nfunction firstText(parts: unknown): string {\n  if (!Array.isArray(parts)) return \"\";\n  for (const part of parts) {\n    if (\n      typeof part === \"object\" &&\n      part !== null &&\n      (part as { type?: unknown }).type === \"text\" &&\n      typeof (part as { text?: unknown }).text === \"string\"\n    ) {\n      return (part as { text: string }).text;\n    }\n  }\n  return \"\";\n}\n\n/** Everything the agent read with the message, labelled; the thread a mention came in below it. */\nconst InboundChannelFacts: FC<{ message: InboundChannelMessage }> = ({ message }) => (\n  <div\n    className=\"flex w-full min-w-0 flex-col gap-2 rounded-xl border border-border bg-background px-3 py-2.5 text-left text-xs\"\n    data-slot=\"inbound-channel-facts\"\n  >\n    <p className=\"text-muted-foreground\">What the agent received with this message</p>\n    {message.facts.length > 0 ? (\n      <dl className=\"grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1\">\n        {message.facts.map((fact, index) => (\n          <div key={`${fact.key}-${index}`} className=\"contents\">\n            <dt className=\"whitespace-nowrap text-muted-foreground\">{fact.label}</dt>\n            <dd className=\"text-foreground [overflow-wrap:anywhere]\">{fact.value}</dd>\n          </div>\n        ))}\n      </dl>\n    ) : null}\n    {message.quoted ? (\n      <div className=\"flex flex-col gap-1\">\n        <p className=\"text-muted-foreground\">Earlier in the thread</p>\n        <p className=\"whitespace-pre-wrap border-border border-l-2 pl-2 text-foreground [overflow-wrap:anywhere]\">\n          {message.quoted}\n        </p>\n      </div>\n    ) : null}\n  </div>\n);\n\n/**\n * The line above a channel message's bubble: the channel's mark, the sender's\n * name and address (an email address, a phone number), and a chevron that\n * opens what the agent received. Hovering or focusing it shows a card with\n * the channel, the place and the sender in full, while the facts are closed.\n */\nexport const InboundChannelSource: FC<{ message: InboundChannelMessage; className?: string }> = ({\n  message,\n  className,\n}) => {\n  const [open, setOpen] = useState(false);\n  const origin = message.origin;\n  const name = origin.senderName;\n  const handle = origin.senderHandle;\n  const primary = name ?? handle ?? origin.label;\n  const secondary = name && handle ? handle : null;\n  const channelLine = [origin.label, origin.place].filter(Boolean).join(\" · \");\n\n  return (\n    <Collapsible\n      open={open}\n      onOpenChange={setOpen}\n      className={cn(\"flex w-full min-w-0 flex-col items-end gap-1\", className)}\n      data-slot=\"inbound-channel\"\n      data-channel={origin.kind}\n    >\n      <div className=\"group/inbound-channel relative flex min-w-0 max-w-full justify-end\">\n        <CollapsibleTrigger\n          data-testid=\"inbound-channel-source\"\n          className=\"flex min-w-0 max-w-full items-center gap-1.5 rounded-md px-1.5 py-0.5 text-muted-foreground text-xs transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          <ChannelMark kind={origin.kind} className=\"size-3.5 shrink-0\" />\n          <span className=\"truncate font-medium text-foreground/80\">{primary}</span>\n          {secondary ? <span className=\"truncate\">{secondary}</span> : null}\n          <span className=\"sr-only\">{`, via ${channelLine}. Show what the agent received`}</span>\n          <ChevronDownIcon\n            className={cn(\"size-3 shrink-0 transition-transform\", open && \"rotate-180\")}\n            aria-hidden=\"true\"\n          />\n        </CollapsibleTrigger>\n        {/* The hover card: what the line says, in full (the button's own text\n            carries it for screen readers). Shown below the line, over the\n            bubble, after a short rest, and never while the facts are open. */}\n        {open ? null : (\n          <div\n            aria-hidden=\"true\"\n            data-slot=\"inbound-channel-card\"\n            className=\"pointer-events-none absolute top-full right-0 z-20 mt-1 flex w-max max-w-xs flex-col gap-0.5 rounded-md bg-foreground px-3 py-1.5 text-left text-background text-xs opacity-0 shadow-md transition-opacity delay-0 group-focus-within/inbound-channel:opacity-100 group-hover/inbound-channel:opacity-100 group-hover/inbound-channel:delay-300\"\n          >\n            <span className=\"flex items-center gap-1.5 font-medium\">\n              <ChannelMark kind={origin.kind} className=\"size-3.5 shrink-0\" />\n              {channelLine}\n            </span>\n            {name ? <span>{name}</span> : null}\n            {handle ? <span className=\"opacity-80\">{handle}</span> : null}\n            {origin.subject ? (\n              <span className=\"opacity-80\">\n                {`${origin.kind === \"voice_memo\" ? \"Memo\" : \"Subject\"}: ${origin.subject}`}\n              </span>\n            ) : null}\n          </div>\n        )}\n      </div>\n      <CollapsibleContent className=\"w-full min-w-0\">\n        <InboundChannelFacts message={message} />\n      </CollapsibleContent>\n    </Collapsible>\n  );\n};\n\n/**\n * The line above the bubble for the assistant-ui message in scope; nothing\n * for a message without the `inbound_channel` envelope. Selects the raw\n * metadata and parts (stable for a settled message) and derives in `useMemo`.\n */\nexport const InboundChannelLine: FC<{ className?: string }> = ({ className }) => {\n  const custom = useAuiState((s) => s.message.metadata?.custom);\n  const parts = useAuiState((s) => s.message.parts);\n  const message = useMemo(\n    () =>\n      isInboundChannelMessage(custom)\n        ? readInboundChannelMessage({ custom, text: firstText(parts) })\n        : null,\n    [custom, parts],\n  );\n  return message ? <InboundChannelSource message={message} className={className} /> : null;\n};\n\n/** An email's subject, the bubble's first line. Nothing for any other message. */\nexport const InboundChannelSubject: FC = () => {\n  const subject = useAuiState((s) => inboundEmailSubject(s.message.metadata?.custom));\n  if (!subject) return null;\n  return (\n    <div className=\"mb-1 font-semibold\" data-slot=\"inbound-channel-subject\">\n      {subject}\n    </div>\n  );\n};\n\nconst wrappedTextComponents = new WeakMap<TextMessagePartComponent, TextMessagePartComponent>();\n\n/**\n * `Text` showing a channel message's words without the routing block the\n * agent read ahead of them. Any other text passes through unchanged, tags a\n * person typed included. Cached per component, so a host's part map keeps a\n * stable identity.\n */\nexport function withInboundMessageBody(Text: TextMessagePartComponent): TextMessagePartComponent {\n  const cached = wrappedTextComponents.get(Text);\n  if (cached) return cached;\n  const InboundMessageBodyText: TextMessagePartComponent = (props) => {\n    const custom = useAuiState((s) => s.message.metadata?.custom);\n    const text = useMemo(() => inboundMessageBody({ custom, text: props.text }), [custom, props.text]);\n    return <Text {...props} text={text} />;\n  };\n  wrappedTextComponents.set(Text, InboundMessageBodyText);\n  return InboundMessageBodyText;\n}\n"],"names":["jsx","jsxs","MailIcon","cn","MessageSquareIcon","CodeIcon","AudioLinesIcon","useState","Collapsible","CollapsibleTrigger","ChevronDownIcon","CollapsibleContent","useAuiState","useMemo","isInboundChannelMessage","readInboundChannelMessage","inboundEmailSubject","inboundMessageBody"],"mappings":"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"}

package/dist/chat-ui/messages/inbound-channel-message.d.ts

@@ -0,0 +1,60 @@
+/**
+ * A user turn that came in over a channel (Slack, email, a text, Microsoft
+ * Teams, the Programmatic API, a voice memo), drawn as the words that were
+ * sent under a line naming the channel and the sender.
+ *
+ * The channel's routing block (`<inbound-message-context>`: the facts the
+ * agent is told, such as Slack ids, the numbers a text went between and how a
+ * reply is delivered) leaves the bubble. The line above the bubble opens it
+ * as a labelled list, and hovering the line shows the channel, the place and
+ * the sender in full. Every host that renders the SDK's user message gets
+ * this; a host with its own user message composes it from
+ * `InboundChannelLine`, `InboundChannelSubject` and `withInboundMessageBody`
+ * (or `UserMessageText`). Only a message with the `inbound_channel` envelope
+ * is a channel message: tags someone types show as typed.
+ *
+ * The hover card is CSS, not a Radix tooltip, and the glyphs are icons the
+ * chat already draws: a host that splits `node_modules` into startup vendor
+ * chunks (the Office pane) would otherwise load a tooltip stack at startup for
+ * a line it rarely shows.
+ */
+import { type TextMessagePartComponent } from "@assistant-ui/react";
+import { type FC } from "react";
+import { type InboundChannelKind, type InboundChannelMessage } from "./inbound-channel-reader";
+/**
+ * The channel's mark at the size `className` gives: Slack's and Teams' own
+ * logos, a tinted glyph for email, texts, the API and voice memos, a speech
+ * bubble for any other channel. Decorative: the line it sits on names the
+ * channel.
+ */
+export declare const ChannelMark: FC<{
+    kind: InboundChannelKind;
+    className?: string;
+}>;
+/**
+ * The line above a channel message's bubble: the channel's mark, the sender's
+ * name and address (an email address, a phone number), and a chevron that
+ * opens what the agent received. Hovering or focusing it shows a card with
+ * the channel, the place and the sender in full, while the facts are closed.
+ */
+export declare const InboundChannelSource: FC<{
+    message: InboundChannelMessage;
+    className?: string;
+}>;
+/**
+ * The line above the bubble for the assistant-ui message in scope; nothing
+ * for a message without the `inbound_channel` envelope. Selects the raw
+ * metadata and parts (stable for a settled message) and derives in `useMemo`.
+ */
+export declare const InboundChannelLine: FC<{
+    className?: string;
+}>;
+/** An email's subject, the bubble's first line. Nothing for any other message. */
+export declare const InboundChannelSubject: FC;
+/**
+ * `Text` showing a channel message's words without the routing block the
+ * agent read ahead of them. Any other text passes through unchanged, tags a
+ * person typed included. Cached per component, so a host's part map keeps a
+ * stable identity.
+ */
+export declare function withInboundMessageBody(Text: TextMessagePartComponent): TextMessagePartComponent;

package/dist/chat-ui/messages/inbound-channel-message.js

@@ -0,0 +1,219 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAuiState } from "@assistant-ui/react";
+import { ChevronDownIcon, MessageSquareIcon, AudioLinesIcon, CodeIcon, MailIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "../../ui/collapsible.js";
+import { readInboundChannelMessage } from "./inbound-channel-reader.js";
+import { isInboundChannelMessage, inboundEmailSubject, inboundMessageBody } from "../../agent-runtime/src/inbound-channel.js";
+import { cn } from "cnfast";
+const SlackMark = ({ className }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 2447.6 2452.5", className, "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsxs("g", { clipRule: "evenodd", fillRule: "evenodd", children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z",
+      fill: "#36c5f0"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z",
+      fill: "#2eb67d"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z",
+      fill: "#ecb22e"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0",
+      fill: "#e01e5a"
+    }
+  )
+] }) });
+const TeamsMark = ({ className }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 2228.833 2073.333", className, "aria-hidden": "true", focusable: "false", children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "#5059C9",
+      d: "M1554.637 777.5h575.713c54.391 0 98.483 44.092 98.483 98.483v524.398c0 199.901-162.051 361.952-361.952 361.952h-1.711c-199.901.028-361.975-162-362.004-361.901V828.971c0-28.427 23.044-51.471 51.471-51.471z"
+    }
+  ),
+  /* @__PURE__ */ jsx("circle", { fill: "#5059C9", cx: "1943.75", cy: "440.583", r: "233.25" }),
+  /* @__PURE__ */ jsx("circle", { fill: "#7B83EB", cx: "1218.083", cy: "336.917", r: "336.917" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "#7B83EB",
+      d: "M1667.323 777.5H717.01c-53.743 1.33-96.257 45.931-95.01 99.676v598.105c-7.505 322.519 247.657 590.16 570.167 598.053 322.51-7.893 577.671-275.534 570.167-598.053V877.176c1.245-53.745-41.268-98.346-95.011-99.676z"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "#4B53BC",
+      d: "M95.01 466.5h950.312c52.473 0 95.01 42.538 95.01 95.01v950.312c0 52.473-42.538 95.01-95.01 95.01H95.01c-52.473 0-95.01-42.538-95.01-95.01V561.51c0-52.472 42.538-95.01 95.01-95.01z"
+    }
+  ),
+  /* @__PURE__ */ jsx("path", { fill: "#FFF", d: "M820.211 828.193H630.241v517.297H509.211V828.193H320.123V727.844h500.088z" })
+] });
+const ChannelMark = ({
+  kind,
+  className
+}) => {
+  switch (kind) {
+    case "slack":
+      return /* @__PURE__ */ jsx(SlackMark, { className });
+    case "teams":
+      return /* @__PURE__ */ jsx(TeamsMark, { className });
+    case "email":
+      return /* @__PURE__ */ jsx(MailIcon, { className: cn("text-sky-600", className), "aria-hidden": "true" });
+    case "sms":
+      return /* @__PURE__ */ jsx(MessageSquareIcon, { className: cn("text-emerald-600", className), "aria-hidden": "true" });
+    case "api":
+      return /* @__PURE__ */ jsx(CodeIcon, { className: cn("text-muted-foreground", className), "aria-hidden": "true" });
+    case "voice_memo":
+      return /* @__PURE__ */ jsx(AudioLinesIcon, { className: cn("text-violet-600", className), "aria-hidden": "true" });
+    default:
+      return /* @__PURE__ */ jsx(MessageSquareIcon, { className: cn("text-muted-foreground", className), "aria-hidden": "true" });
+  }
+};
+function firstText(parts) {
+  if (!Array.isArray(parts)) return "";
+  for (const part of parts) {
+    if (typeof part === "object" && part !== null && part.type === "text" && typeof part.text === "string") {
+      return part.text;
+    }
+  }
+  return "";
+}
+const InboundChannelFacts = ({ message }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: "flex w-full min-w-0 flex-col gap-2 rounded-xl border border-border bg-background px-3 py-2.5 text-left text-xs",
+    "data-slot": "inbound-channel-facts",
+    children: [
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "What the agent received with this message" }),
+      message.facts.length > 0 ? /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1", children: message.facts.map((fact, index) => /* @__PURE__ */ jsxs("div", { className: "contents", children: [
+        /* @__PURE__ */ jsx("dt", { className: "whitespace-nowrap text-muted-foreground", children: fact.label }),
+        /* @__PURE__ */ jsx("dd", { className: "text-foreground [overflow-wrap:anywhere]", children: fact.value })
+      ] }, `${fact.key}-${index}`)) }) : null,
+      message.quoted ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Earlier in the thread" }),
+        /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap border-border border-l-2 pl-2 text-foreground [overflow-wrap:anywhere]", children: message.quoted })
+      ] }) : null
+    ]
+  }
+);
+const InboundChannelSource = ({
+  message,
+  className
+}) => {
+  const [open, setOpen] = useState(false);
+  const origin = message.origin;
+  const name = origin.senderName;
+  const handle = origin.senderHandle;
+  const primary = name ?? handle ?? origin.label;
+  const secondary = name && handle ? handle : null;
+  const channelLine = [origin.label, origin.place].filter(Boolean).join(" · ");
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      open,
+      onOpenChange: setOpen,
+      className: cn("flex w-full min-w-0 flex-col items-end gap-1", className),
+      "data-slot": "inbound-channel",
+      "data-channel": origin.kind,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "group/inbound-channel relative flex min-w-0 max-w-full justify-end", children: [
+          /* @__PURE__ */ jsxs(
+            CollapsibleTrigger,
+            {
+              "data-testid": "inbound-channel-source",
+              className: "flex min-w-0 max-w-full items-center gap-1.5 rounded-md px-1.5 py-0.5 text-muted-foreground text-xs transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: [
+                /* @__PURE__ */ jsx(ChannelMark, { kind: origin.kind, className: "size-3.5 shrink-0" }),
+                /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-foreground/80", children: primary }),
+                secondary ? /* @__PURE__ */ jsx("span", { className: "truncate", children: secondary }) : null,
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: `, via ${channelLine}. Show what the agent received` }),
+                /* @__PURE__ */ jsx(
+                  ChevronDownIcon,
+                  {
+                    className: cn("size-3 shrink-0 transition-transform", open && "rotate-180"),
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            }
+          ),
+          open ? null : /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "aria-hidden": "true",
+              "data-slot": "inbound-channel-card",
+              className: "pointer-events-none absolute top-full right-0 z-20 mt-1 flex w-max max-w-xs flex-col gap-0.5 rounded-md bg-foreground px-3 py-1.5 text-left text-background text-xs opacity-0 shadow-md transition-opacity delay-0 group-focus-within/inbound-channel:opacity-100 group-hover/inbound-channel:opacity-100 group-hover/inbound-channel:delay-300",
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 font-medium", children: [
+                  /* @__PURE__ */ jsx(ChannelMark, { kind: origin.kind, className: "size-3.5 shrink-0" }),
+                  channelLine
+                ] }),
+                name ? /* @__PURE__ */ jsx("span", { children: name }) : null,
+                handle ? /* @__PURE__ */ jsx("span", { className: "opacity-80", children: handle }) : null,
+                origin.subject ? /* @__PURE__ */ jsx("span", { className: "opacity-80", children: `${origin.kind === "voice_memo" ? "Memo" : "Subject"}: ${origin.subject}` }) : null
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(CollapsibleContent, { className: "w-full min-w-0", children: /* @__PURE__ */ jsx(InboundChannelFacts, { message }) })
+      ]
+    }
+  );
+};
+const InboundChannelLine = ({ className }) => {
+  const custom = useAuiState((s) => {
+    var _a;
+    return (_a = s.message.metadata) == null ? void 0 : _a.custom;
+  });
+  const parts = useAuiState((s) => s.message.parts);
+  const message = useMemo(
+    () => isInboundChannelMessage(custom) ? readInboundChannelMessage({ custom, text: firstText(parts) }) : null,
+    [custom, parts]
+  );
+  return message ? /* @__PURE__ */ jsx(InboundChannelSource, { message, className }) : null;
+};
+const InboundChannelSubject = () => {
+  const subject = useAuiState((s) => {
+    var _a;
+    return inboundEmailSubject((_a = s.message.metadata) == null ? void 0 : _a.custom);
+  });
+  if (!subject) return null;
+  return /* @__PURE__ */ jsx("div", { className: "mb-1 font-semibold", "data-slot": "inbound-channel-subject", children: subject });
+};
+const wrappedTextComponents = /* @__PURE__ */ new WeakMap();
+function withInboundMessageBody(Text) {
+  const cached = wrappedTextComponents.get(Text);
+  if (cached) return cached;
+  const InboundMessageBodyText = (props) => {
+    const custom = useAuiState((s) => {
+      var _a;
+      return (_a = s.message.metadata) == null ? void 0 : _a.custom;
+    });
+    const text = useMemo(() => inboundMessageBody({ custom, text: props.text }), [custom, props.text]);
+    return /* @__PURE__ */ jsx(Text, { ...props, text });
+  };
+  wrappedTextComponents.set(Text, InboundMessageBodyText);
+  return InboundMessageBodyText;
+}
+export {
+  ChannelMark,
+  InboundChannelLine,
+  InboundChannelSource,
+  InboundChannelSubject,
+  withInboundMessageBody
+};
+//# sourceMappingURL=inbound-channel-message.js.map