@workerdeck/ui 0.7.0 → 0.9.0

package/build/index.d.mts

@@ -603,11 +603,16 @@ interface TranscriptProps {
   /** Builds the download URL for a delivered file (see FileCard). Typically
    * `(path) => client.sessionFileUrl(sessionId, path)`. */
   fileUrl?: (path: string) => string;
+  /** Builds the URL for an uploaded attachment. Typically
+   * `(id) => client.attachmentUrl(sessionId, id)`. Same-origin and
+   * cookie-authenticated, which is what lets an `<img src>` render one. */
+  attachmentUrl?: (attachmentId: string) => string;
   className?: string;
 }
 declare function Transcript({
   state,
   fileUrl,
+  attachmentUrl,
   className
 }: TranscriptProps): _$react.JSX.Element;
 //#endregion

package/build/index.mjs

@@ -5015,11 +5015,14 @@ function NoticeRow({ item }) {
 		children: item.text
 	});
 }
-function TranscriptItemView({ item, fileUrl }) {
+function TranscriptItemView({ item, fileUrl, attachmentUrl }) {
 	switch (item.kind) {
-		case "user": return /* @__PURE__ */ jsx(Message, {
+		case "user": return /* @__PURE__ */ jsxs(Message, {
 			from: "user",
-			children: /* @__PURE__ */ jsx(MessageContent, { children: item.text })
+			children: [item.attachments?.length ? /* @__PURE__ */ jsx(SentAttachments, {
+				attachments: item.attachments,
+				attachmentUrl
+			}) : null, item.text ? /* @__PURE__ */ jsx(MessageContent, { children: item.text }) : null]
 		});
 		case "assistant_text": return /* @__PURE__ */ jsx(Message, {
 			from: "assistant",
@@ -5052,7 +5055,25 @@ function showLoader(state) {
 	if (last.kind === "thinking" && last.id === "streaming-thinking") return false;
 	return last.kind !== "turn_result" || state.status === "running";
 }
-function Transcript({ state, fileUrl, className }) {
+/** Files sent with a message: thumbnails for images, named chips for the rest.
+* References only — the bytes are fetched from the gateway. */
+function SentAttachments({ attachments, attachmentUrl }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "mb-1 flex flex-wrap justify-end gap-1.5",
+		children: attachments.map((attachment) => {
+			const href = attachmentUrl?.(attachment.id);
+			return attachment.mediaType.startsWith("image/") && href ? /* @__PURE__ */ jsx("img", {
+				src: href,
+				alt: attachment.name,
+				className: "size-20 rounded-md border border-border object-cover"
+			}, attachment.id) : /* @__PURE__ */ jsx("span", {
+				className: "rounded-full border border-border bg-surface px-2.5 py-1 text-body-xs text-fg-3",
+				children: attachment.name
+			}, attachment.id);
+		})
+	});
+}
+function Transcript({ state, fileUrl, attachmentUrl, className }) {
 	return /* @__PURE__ */ jsxs(Conversation, {
 		className,
 		children: [/* @__PURE__ */ jsxs(ConversationContent, { children: [state.items.length === 0 && state.status !== "starting" ? /* @__PURE__ */ jsx("div", {
@@ -5060,7 +5081,8 @@ function Transcript({ state, fileUrl, className }) {
 			children: "No messages yet."
 		}) : state.items.map((item) => /* @__PURE__ */ jsx(TranscriptItemView, {
 			item,
-			fileUrl
+			fileUrl,
+			attachmentUrl
 		}, `${item.kind}:${item.id}`)), showLoader(state) ? /* @__PURE__ */ jsx(Loader, { label: state.status === "starting" ? "Starting session…" : void 0 }) : null] }), /* @__PURE__ */ jsx(ConversationScrollButton, {})]
 	});
 }
@@ -5123,7 +5145,8 @@ function SessionPanel({ client, sessionId, header, className }) {
 			}) : null,
 			/* @__PURE__ */ jsx(Transcript, {
 				state,
-				fileUrl: sessionId ? (path) => client.sessionFileUrl(sessionId, path) : void 0
+				fileUrl: sessionId ? (path) => client.sessionFileUrl(sessionId, path) : void 0,
+				attachmentUrl: sessionId ? (id) => client.attachmentUrl(sessionId, id) : void 0
 			}),
 			state.pendingApprovals.length > 0 ? /* @__PURE__ */ jsx("div", {
 				className: "px-3 pb-2",