@parallelworks/ui 0.50.0 → 0.52.0

package/dist/ai/components/AttachmentUpload.js

@@ -7,7 +7,7 @@ import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import { ATTACHMENTS_INFINITE_KEY } from "./attachmentKeys.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
+import { useCallback, useImperativeHandle, useRef, useState } from "react";
 import { mutate } from "swr";
 //#region src/ai/components/AttachmentUpload.tsx
 var DEFAULT_MAX_FILE_SIZE = 26214400;
@@ -18,7 +18,7 @@ function getFileIcon(mimeType) {
 	if (mimeType === "application/pdf") return PdfIcon;
 	return FileIcon;
 }
-var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, attachments, onAttachmentsChange, disabled = false, maxFiles = DEFAULT_MAX_FILES, maxFileSize = DEFAULT_MAX_FILE_SIZE }, ref) {
+function AttachmentUpload({ conversationId, attachments, onAttachmentsChange, disabled = false, maxFiles = DEFAULT_MAX_FILES, maxFileSize = DEFAULT_MAX_FILE_SIZE, ref }) {
 	const { adapter } = useChat();
 	const t = useChatConfig().strings.attachmentUpload;
 	const { common } = useStrings();
@@ -125,7 +125,7 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 			children: attachments.map((attachment, index) => {
 				const Icon = getFileIcon(attachment.mimeType);
 				return /* @__PURE__ */ jsxs("div", {
-					className: cx("flex items-center gap-2 px-2 py-1 rounded border theme-border theme-muted-panel", attachment.error && "border-red-500"),
+					className: cx("flex items-center gap-2 px-2 py-1 rounded border theme-border theme-muted-panel", attachment.error && "border-(--theme-error)"),
 					children: [
 						/* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 theme-muted-text" }),
 						/* @__PURE__ */ jsx("span", {
@@ -137,22 +137,22 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 							children: formatBytes(attachment.size)
 						}),
 						attachment.uploading && /* @__PURE__ */ jsx("span", {
-							className: "text-xs text-blue-500 animate-pulse",
+							className: "text-xs theme-muted-text animate-pulse",
 							children: t.uploading
 						}),
 						attachment.error && /* @__PURE__ */ jsx("span", {
 							role: "img",
 							"aria-label": attachment.error,
 							title: attachment.error,
-							children: /* @__PURE__ */ jsx(WarningIcon, { className: "h-3.5 w-3.5 text-red-500" })
+							children: /* @__PURE__ */ jsx(WarningIcon, { className: "h-3.5 w-3.5 text-(--theme-error)" })
 						}),
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							onClick: () => handleRemove(index),
-							className: "p-0.5 rounded hover:bg-red-500/10",
+							className: "p-0.5 rounded hover:bg-(--theme-error-muted)",
 							title: common.remove,
 							disabled,
-							children: /* @__PURE__ */ jsx(TrashIcon, { className: "w-3 h-3 text-red-500" })
+							children: /* @__PURE__ */ jsx(TrashIcon, { className: "w-3 h-3 text-(--theme-error)" })
 						})
 					]
 				}, attachment.id || index);
@@ -162,7 +162,7 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 			onDragOver: handleDragOver,
 			onDragLeave: handleDragLeave,
 			onDrop: handleDrop,
-			className: cx("relative block w-full border-2 border-dashed rounded-lg p-3 text-center transition-colors", isDragging ? "border-blue-500 bg-blue-500/10" : "theme-border hover:theme-border", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
+			className: cx("relative block w-full border-2 border-dashed rounded-lg p-3 text-center transition-colors", isDragging ? "border-(--theme-accent) bg-(--theme-accent)/10" : "theme-border hover:theme-border", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
 			onClick: disabled ? void 0 : handleClick,
 			children: [/* @__PURE__ */ jsxs("span", {
 				className: "flex items-center justify-center gap-2 text-sm theme-muted-text",
@@ -173,6 +173,6 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 			})]
 		})]
 	})] });
-});
+}
 //#endregion
 export { AttachmentUpload as default };

package/dist/ai/components/BlockedGroupBanner.js

@@ -1,8 +1,8 @@
-import { WarningIcon } from "../../icons.js";
+import { Callout } from "../../components/Callout.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import { getProviderKeyFromModelId } from "./ModelSelector.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/ai/components/BlockedGroupBanner.tsx
 function BlockedGroupBanner() {
 	const { strings } = useChatConfig();
@@ -11,18 +11,12 @@ function BlockedGroupBanner() {
 	const providerKey = getProviderKeyFromModelId(selectedProvider);
 	const provider = providers.find((p) => `${p.user}:${p.name}` === providerKey);
 	if (!provider?.groupBlocked || !provider.group) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "mx-4 mt-2 flex items-start gap-3 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20",
-		children: [/* @__PURE__ */ jsx(WarningIcon, { className: "w-4 h-4 text-amber-500 shrink-0 mt-0.5" }), /* @__PURE__ */ jsxs("div", {
-			className: "flex-1 min-w-0",
-			children: [/* @__PURE__ */ jsx("p", {
-				className: "text-sm font-medium text-amber-700",
-				children: strings.blockedGroup.title.replace("{group}", provider.group)
-			}), /* @__PURE__ */ jsx("p", {
-				className: "text-xs text-amber-600/80 mt-0.5",
-				children: strings.blockedGroup.message
-			})]
-		})]
+	return /* @__PURE__ */ jsx(Callout, {
+		tone: "warning",
+		size: "sm",
+		className: "mx-4 mt-2",
+		title: strings.blockedGroup.title(provider.group),
+		children: strings.blockedGroup.message
 	});
 }
 //#endregion

package/dist/ai/components/BranchNavigator.js

@@ -1,4 +1,5 @@
 import { ChevronLeftIcon, ChevronRightIcon } from "../../icons.js";
+import { IconButton } from "../../components/IconButton.js";
 import { useChatConfig } from "../core/config.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
@@ -26,14 +27,13 @@ function BranchNavigator({ messages, currentMessageId, onNavigate }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "inline-flex items-center text-xs theme-muted-text",
 		children: [
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
+			/* @__PURE__ */ jsx(IconButton, {
+				label: t.previous,
 				onClick: handlePrev,
 				disabled: !hasPrev,
-				className: "p-1.5 rounded-md transition-colors enabled:hover:chat-tint enabled:hover:theme-text disabled:opacity-30 disabled:cursor-not-allowed",
-				title: t.previous,
-				"aria-label": t.previous,
-				children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-3.5 h-3.5" })
+				size: "md",
+				className: "size-7 hover:not-disabled:not-aria-disabled:chat-tint disabled:opacity-30",
+				icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
 			}),
 			/* @__PURE__ */ jsxs("span", {
 				className: "min-w-[3ch] text-center tabular-nums",
@@ -43,14 +43,13 @@ function BranchNavigator({ messages, currentMessageId, onNavigate }) {
 					siblings.length
 				]
 			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
+			/* @__PURE__ */ jsx(IconButton, {
+				label: t.next,
 				onClick: handleNext,
 				disabled: !hasNext,
-				className: "p-1.5 rounded-md transition-colors enabled:hover:chat-tint enabled:hover:theme-text disabled:opacity-30 disabled:cursor-not-allowed",
-				title: t.next,
-				"aria-label": t.next,
-				children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3.5 h-3.5" })
+				size: "md",
+				className: "size-7 hover:not-disabled:not-aria-disabled:chat-tint disabled:opacity-30",
+				icon: /* @__PURE__ */ jsx(ChevronRightIcon, {})
 			})
 		]
 	});

package/dist/ai/components/ChatEmptyState.js

@@ -1,12 +1,13 @@
 import { AddIcon, CloudIcon } from "../../icons.js";
 import { keyedByContent } from "../../components/keys.js";
 import { useStrings } from "../../components/Provider.js";
+import { Button } from "../../components/Button.js";
+import { Callout } from "../../components/Callout.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import BlockedGroupBanner from "./BlockedGroupBanner.js";
 import { getGreeting } from "../core/greeting.js";
 import useDragDrop from "../core/useDragDrop.js";
-import { NoticeCard } from "../ui/Notice.js";
 import { ComposerControls, ConnectToolsLink } from "./ComposerChrome.js";
 import DragOverlay from "./DragOverlay.js";
 import ChatInput from "./ChatInput.js";
@@ -79,26 +80,18 @@ function ChatEmptyState({ targetSession }) {
 				/* @__PURE__ */ jsx(ProviderIssueBanner, {}),
 				sessionUnreachable && !sessionBannerDismissed && /* @__PURE__ */ jsx("div", {
 					className: "mx-4 mt-2",
-					children: /* @__PURE__ */ jsxs(NoticeCard, {
+					children: /* @__PURE__ */ jsx(Callout, {
 						tone: "warning",
+						size: "sm",
+						title: t.sessionUnreachableTitle(targetSession?.split(":").pop() ?? ""),
+						action: /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => refreshModels(),
+							children: common.retry
+						}),
 						onDismiss: () => setSessionBannerDismissed(true),
-						dismissLabel: common.dismiss,
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								className: "block font-medium",
-								children: t.sessionUnreachableTitle(targetSession?.split(":").pop() ?? "")
-							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "mt-0.5 block",
-								children: t.sessionUnreachableBody
-							}),
-							/* @__PURE__ */ jsx("button", {
-								type: "button",
-								onClick: () => refreshModels(),
-								className: "mt-1 font-medium underline-offset-2 hover:underline",
-								children: common.retry
-							})
-						]
+						children: t.sessionUnreachableBody
 					})
 				}),
 				/* @__PURE__ */ jsxs("div", {

package/dist/ai/components/ChatInput.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ReactNode, type Ref } from 'react';
 import type { AttachmentMeta, MessagePaste } from '../types.js';
 import { type SlashMenuConfig } from './SlashMenu.js';
 import { type ComposerPastes } from './usePasteCards.js';
@@ -43,10 +43,11 @@ interface ChatInputProps {
         stopping?: boolean;
     };
     pastes?: ComposerPastes | undefined;
+    ref?: Ref<ChatInputHandle> | undefined;
 }
 export interface ChatInputHandle {
     addFiles: (files: FileList | File[]) => void;
     focus: () => void;
 }
-declare const ChatInput: import("react").ForwardRefExoticComponent<ChatInputProps & import("react").RefAttributes<ChatInputHandle>>;
-export default ChatInput;
+export default function ChatInput({ onSend, disabled, placeholder, conversationId, onEditLastMessage, allowEmpty, attachments: attachmentsWanted, requireModel, inputLabel, sendLabel, sendTestId, slash, notices, activity, context, reserveContext, settingsLeft, settingsRight, hint, turn, pastes, ref, }: ChatInputProps): import("react").JSX.Element;
+export {};

package/dist/ai/components/ChatInput.js

@@ -11,7 +11,7 @@ import { PasteFileCard } from "./PastedText.js";
 import { SlashMenu, useSlashMenu } from "./SlashMenu.js";
 import { usePasteCards } from "./usePasteCards.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 //#region src/ai/components/ChatInput.tsx
 /** An optional box that is still empty should not wear the filled look of
 *  one waiting to send something. */
@@ -19,7 +19,7 @@ function sendability({ hasText, canFlushQueue, allowEmpty, disabled, modelReady,
 	const canSend = (hasText || canFlushQueue || allowEmpty) && !disabled && modelReady && pendingCount === 0;
 	return {
 		canSend,
-		emphasised: canSend && (hasText || !allowEmpty)
+		emphasized: canSend && (hasText || !allowEmpty)
 	};
 }
 function keyAction(e, empty, canEditLast) {
@@ -39,13 +39,13 @@ function AttachButton({ open, disabled, label, onClick }) {
 		children: /* @__PURE__ */ jsx(AddIcon, { className: cx("h-5 w-5 transition-transform duration-200", open && "rotate-45") })
 	});
 }
-function SendButton({ onClick, enabled, emphasised, label, testId }) {
+function SendButton({ onClick, enabled, emphasized, label, testId }) {
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		onClick,
 		disabled: !enabled,
 		"data-testid": testId,
-		className: cx("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-[background-color,color,transform] duration-150 active:scale-95", emphasised ? "theme-accent hover:opacity-90" : "chat-send-idle", !enabled && "cursor-not-allowed active:scale-100"),
+		className: cx("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-[background-color,color,transform] duration-150 active:scale-95", emphasized ? "theme-accent hover:opacity-90" : "chat-send-idle", !enabled && "cursor-not-allowed active:scale-100"),
 		"aria-label": label,
 		title: label,
 		children: /* @__PURE__ */ jsx(ArrowUpIcon, { className: "h-4 w-4" })
@@ -64,8 +64,12 @@ function streamControls(chat, turn) {
 		queuedCount: chat.queuedMessages.length
 	};
 }
+function fitToContent(el) {
+	el.style.height = "auto";
+	el.style.height = `${el.scrollHeight}px`;
+}
 var draftsSwept = false;
-var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEditLastMessage, allowEmpty = false, attachments: attachmentsWanted = true, requireModel = true, inputLabel, sendLabel, sendTestId, slash, notices, activity, context, reserveContext = false, settingsLeft, settingsRight = /* @__PURE__ */ jsx(ComposerControls, {}), hint, turn, pastes }, ref) {
+function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEditLastMessage, allowEmpty = false, attachments: attachmentsWanted = true, requireModel = true, inputLabel, sendLabel, sendTestId, slash, notices, activity, context, reserveContext = false, settingsLeft, settingsRight = /* @__PURE__ */ jsx(ComposerControls, {}), hint, turn, pastes, ref }) {
 	const [input, setInput] = useState(() => readDraft(conversationId));
 	useEffect(() => {
 		if (!draftsSwept) {
@@ -98,12 +102,22 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 			textareaRef.current?.focus();
 		}
 	}), []);
-	useEffect(() => {
-		if (textareaRef.current) {
-			textareaRef.current.style.height = "auto";
-			textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
-		}
+	useLayoutEffect(() => {
+		if (textareaRef.current) fitToContent(textareaRef.current);
 	}, [input]);
+	useLayoutEffect(() => {
+		const el = textareaRef.current;
+		if (!el || typeof ResizeObserver === "undefined") return;
+		let width = el.clientWidth;
+		const observer = new ResizeObserver(() => {
+			if (el.clientWidth !== width) {
+				width = el.clientWidth;
+				fitToContent(el);
+			}
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
 	const previousConversationRef = useRef(conversationId);
 	useEffect(() => {
 		if (previousConversationRef.current !== conversationId) {
@@ -119,7 +133,7 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 	const uploadedCount = attachments.filter((a) => a.uploaded).length;
 	const pendingCount = attachments.length - uploadedCount;
 	const canFlushQueue = !isStreaming && queuedCount > 0 && !disabled;
-	const { canSend, emphasised } = sendability({
+	const { canSend, emphasized } = sendability({
 		hasText: input.trim().length > 0 || cards.length > 0,
 		canFlushQueue,
 		allowEmpty,
@@ -195,7 +209,7 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 	}) : /* @__PURE__ */ jsx(SendButton, {
 		onClick: handleSubmit,
 		enabled: canSend,
-		emphasised,
+		emphasized,
 		label: sendLabel ?? t.sendMessage,
 		testId: sendTestId
 	});
@@ -297,6 +311,6 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 			] })]
 		})]
 	});
-});
+}
 //#endregion
 export { ChatInput as default };

package/dist/ai/components/ChatMessage.js

@@ -1,10 +1,12 @@
 import { cx } from "../../cx.js";
-import { CheckIcon, CopyIcon, DownloadIcon, EditIcon, ErrorIcon, FileIcon, RetryIcon } from "../../icons.js";
-import { safeUrl } from "../../safeUrl.js";
+import { EditIcon, RetryIcon } from "../../icons.js";
 import { useStrings } from "../../components/Provider.js";
-import { useCopy } from "../../components/useCopy.js";
 import { Avatar } from "../../components/Avatar.js";
-import { formatBytes, formatDuration } from "../../format.js";
+import { Button } from "../../components/Button.js";
+import { IconButton } from "../../components/IconButton.js";
+import { Callout } from "../../components/Callout.js";
+import { CopyButton } from "../../components/CopyButton.js";
+import { formatDuration } from "../../format.js";
 import { RelativeTime } from "../../components/relativeTime.js";
 import { useChatConfig } from "../core/config.js";
 import Markdown from "../ui/Markdown.js";
@@ -13,26 +15,19 @@ import { Reasoning } from "./Reasoning.js";
 import AgentMessageParts from "./agent/AgentMessageParts.js";
 import BranchNavigator from "./BranchNavigator.js";
 import { UserMessageText } from "./PastedText.js";
+import MessageAttachments from "./MessageAttachments.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useRef, useState } from "react";
 import { DateTime } from "luxon";
 //#region src/ai/components/ChatMessage.tsx
+/** A message action: the chat's square, tinted from the ink on hover. */
+var actionClasses = "size-7 hover:not-disabled:not-aria-disabled:chat-tint";
 var COLLAPSE_THRESHOLD = 680;
 function parseTimestamp(iso) {
 	if (!iso) return null;
 	const dt = DateTime.fromISO(iso);
 	return dt.isValid ? dt : null;
 }
-function triggerDownload(url, filename) {
-	const href = safeUrl(url);
-	if (!href) return;
-	const a = document.createElement("a");
-	a.href = href;
-	a.download = filename;
-	document.body.appendChild(a);
-	a.click();
-	document.body.removeChild(a);
-}
 function ChatMessage({ message, allMessages, isStreaming = false, latest = false, isEditing = false, showAuthor = false, currentUsername, attachmentDownloadUrl, onOpenAttachment, onNavigateBranch, onEdit, onSaveEdit, onCancelEdit, onRegenerate, onRetry, onOpenReasoning, onApprovalAnswer, flush }) {
 	const isUser = message.role === "user";
 	const isTool = message.role === "tool";
@@ -47,8 +42,6 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 	const showTurnDurationLabel = !isUser && !isStreaming && !hasReasoning && (!!message.reasoningDuration || toolCallCount > 0);
 	const { messageMeta: t, thinking: tThinking } = useChatConfig().strings;
 	const { common } = useStrings();
-	const { copy, copied } = useCopy();
-	const [showActions, setShowActions] = useState(false);
 	const [editContent, setEditContent] = useState(message.content || "");
 	const textareaRef = useRef(null);
 	const contentRef = useRef(null);
@@ -106,16 +99,9 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 	const timestamp = parseTimestamp(message.timestamp);
 	const totalTokens = message.tokensUsed?.total_tokens;
 	const collapsed = !isUser && collapsible && !expanded && !isStreaming && !latest;
-	const copyToClipboard = async () => {
-		if (message.content) await copy(message.content, { quiet: true });
-	};
 	return /* @__PURE__ */ jsx("div", {
 		role: "none",
 		className: cx("group w-full", isUser ? "pt-8 pb-5" : "py-3", !flush && "px-4"),
-		onMouseEnter: () => setShowActions(true),
-		onMouseLeave: () => setShowActions(false),
-		onFocus: () => setShowActions(true),
-		onBlur: () => setShowActions(false),
 		children: isEditing ? /* @__PURE__ */ jsxs("div", {
 			className: "w-full",
 			children: [/* @__PURE__ */ jsx("textarea", {
@@ -124,7 +110,8 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 				onChange: handleTextareaChange,
 				onKeyDown: handleKeyDown,
 				className: "chat-composer block w-full min-h-[100px] max-h-[200px] overflow-y-auto px-4 py-3.5 rounded-[1.25rem] bg-(--theme-panel-bg) theme-text text-[1rem] leading-relaxed resize-none focus:outline-none",
-				placeholder: t.editPlaceholder
+				placeholder: t.editPlaceholder,
+				"aria-label": t.edit
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center justify-end gap-2 mt-2.5",
 				children: [/* @__PURE__ */ jsx("button", {
@@ -212,110 +199,47 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 						className: "inline-flex items-center mt-1 text-[11px] italic theme-muted-text",
 						children: t.stopped
 					}),
-					hasError && /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2 mt-2 p-3 rounded-lg bg-red-500/10 border border-red-500/30",
-						children: [
-							/* @__PURE__ */ jsx(ErrorIcon, { className: "w-4 h-4 text-red-600 flex-shrink-0" }),
-							/* @__PURE__ */ jsx("span", {
-								className: "text-sm text-red-700 flex-1",
-								children: message.error
-							}),
-							onRetry && /* @__PURE__ */ jsxs("button", {
-								type: "button",
-								onClick: () => onRetry(message.id),
-								className: "flex items-center gap-1 px-2 py-1 text-xs font-medium text-red-700 hover:bg-red-500/15 rounded transition-colors",
-								children: [/* @__PURE__ */ jsx(RetryIcon, { className: "w-3 h-3" }), common.retry]
-							})
-						]
+					hasError && /* @__PURE__ */ jsx(Callout, {
+						tone: "error",
+						size: "sm",
+						className: "mt-2",
+						action: onRetry && /* @__PURE__ */ jsxs(Button, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => onRetry(message.id),
+							children: [/* @__PURE__ */ jsx(RetryIcon, {}), common.retry]
+						}),
+						children: message.error
 					}),
-					message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsx("div", {
-						className: "mt-3 flex flex-wrap gap-2",
-						children: message.attachments.map((att) => {
-							const isImage = att.contentType?.startsWith("image/");
-							const downloadUrl = att.id && attachmentDownloadUrl ? attachmentDownloadUrl(att.id) : void 0;
-							if (isImage && downloadUrl) return /* @__PURE__ */ jsx("div", {
-								className: "block rounded-lg overflow-hidden border theme-border",
-								...onOpenAttachment ? {
-									onClick: () => onOpenAttachment(att),
-									role: "button",
-									style: { cursor: "pointer" }
-								} : {},
-								children: /* @__PURE__ */ jsx("img", {
-									src: downloadUrl,
-									alt: att.filename || "Image attachment",
-									className: "max-w-[200px] max-h-[200px] object-cover",
-									loading: "lazy"
-								})
-							}, att.id);
-							if (downloadUrl) return /* @__PURE__ */ jsxs("button", {
-								type: "button",
-								onClick: () => onOpenAttachment ? onOpenAttachment(att) : triggerDownload(downloadUrl, att.filename || "File"),
-								className: "inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-lg bg-(--theme-muted-panel-bg) hover:theme-hover transition-colors cursor-pointer",
-								children: [
-									/* @__PURE__ */ jsx(FileIcon, { className: "w-3.5 h-3.5 flex-shrink-0" }),
-									/* @__PURE__ */ jsx("span", {
-										className: "truncate max-w-[150px]",
-										children: att.filename || "File"
-									}),
-									att.size ? /* @__PURE__ */ jsxs("span", {
-										className: "theme-muted-text",
-										children: [
-											"(",
-											formatBytes(att.size),
-											")"
-										]
-									}) : null,
-									/* @__PURE__ */ jsx(DownloadIcon, { className: "w-3 h-3 flex-shrink-0" })
-								]
-							}, att.id);
-							return /* @__PURE__ */ jsxs("div", {
-								className: "inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-lg bg-(--theme-muted-panel-bg) theme-muted-text",
-								...onOpenAttachment ? {
-									onClick: () => onOpenAttachment(att),
-									role: "button",
-									style: { cursor: "pointer" }
-								} : {},
-								children: [
-									/* @__PURE__ */ jsx(FileIcon, { className: "w-3.5 h-3.5 flex-shrink-0" }),
-									/* @__PURE__ */ jsx("span", {
-										className: "truncate max-w-[150px]",
-										children: att.filename || "File"
-									}),
-									att.size ? /* @__PURE__ */ jsxs("span", {
-										className: "theme-muted-text",
-										children: [
-											"(",
-											formatBytes(att.size),
-											")"
-										]
-									}) : null
-								]
-							}, att.id);
-						})
+					message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsx(MessageAttachments, {
+						attachments: message.attachments,
+						downloadUrl: attachmentDownloadUrl,
+						onOpen: onOpenAttachment,
+						className: isRightAligned ? "justify-end" : void 0
 					}),
 					!isStreaming && !isEditing && /* @__PURE__ */ jsxs("div", {
-						className: cx("chat-actions flex items-center gap-0.5 transition-opacity duration-150", isRightAligned ? "absolute right-0 top-full -mr-1.5 mt-0.5" : "-ml-1.5 mt-2", isRightAligned && (showActions ? "opacity-100" : "opacity-0 pointer-events-none")),
+						className: cx("chat-actions flex items-center gap-0.5 transition-opacity duration-150", isRightAligned ? "absolute right-0 top-full -mr-1.5 mt-0.5" : "-ml-1.5 mt-2", isRightAligned && "pointer-events-none opacity-0 group-focus-within:pointer-events-auto group-focus-within:opacity-100 group-hover:pointer-events-auto group-hover:opacity-100"),
 						children: [
-							/* @__PURE__ */ jsx("button", {
-								type: "button",
-								onClick: copyToClipboard,
-								className: "p-1.5 rounded-md hover:chat-tint theme-muted-text hover:theme-text transition-colors",
-								title: t.copy,
-								children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-green-500" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "w-4 h-4" })
+							message.content && /* @__PURE__ */ jsx(CopyButton, {
+								text: message.content ?? "",
+								label: t.copyLabel,
+								quiet: true,
+								size: "md",
+								className: actionClasses
 							}),
-							isUser && !isOtherUser && onEdit && /* @__PURE__ */ jsx("button", {
-								type: "button",
+							isUser && !isOtherUser && onEdit && /* @__PURE__ */ jsx(IconButton, {
+								label: t.edit,
 								onClick: () => onEdit(message.id),
-								className: "p-1.5 rounded-md hover:chat-tint theme-muted-text hover:theme-text transition-colors",
-								title: t.edit,
-								children: /* @__PURE__ */ jsx(EditIcon, { className: "w-4 h-4" })
+								size: "md",
+								className: actionClasses,
+								icon: /* @__PURE__ */ jsx(EditIcon, {})
 							}),
-							!isUser && onRegenerate && /* @__PURE__ */ jsx("button", {
-								type: "button",
+							!isUser && onRegenerate && /* @__PURE__ */ jsx(IconButton, {
+								label: t.regenerate,
 								onClick: () => onRegenerate(message.id),
-								className: "p-1.5 rounded-md hover:chat-tint theme-muted-text hover:theme-text transition-colors",
-								title: t.regenerate,
-								children: /* @__PURE__ */ jsx(RetryIcon, { className: "w-4 h-4" })
+								size: "md",
+								className: actionClasses,
+								icon: /* @__PURE__ */ jsx(RetryIcon, {})
 							}),
 							!isUser && onNavigateBranch && /* @__PURE__ */ jsx(BranchNavigator, {
 								messages: allMessages,
@@ -323,7 +247,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 								onNavigate: onNavigateBranch
 							}),
 							(timestamp || !isUser && (message.model || totalTokens)) && /* @__PURE__ */ jsxs("span", {
-								className: cx("chat-meta flex items-center gap-2 ml-2 text-xs tabular-nums theme-muted-text transition-opacity duration-150 select-none", showActions ? "opacity-100" : "opacity-0"),
+								className: cx("chat-meta flex items-center gap-2 ml-2 text-xs tabular-nums theme-muted-text transition-opacity duration-150 select-none", "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"),
 								children: [
 									/* @__PURE__ */ jsx(RelativeTime, { value: timestamp }),
 									!isUser && message.model && /* @__PURE__ */ jsx("span", { children: message.model }),

package/dist/ai/components/ChatMessageList.d.ts

@@ -3,6 +3,8 @@ import type { ApprovalAnswerValue, ChatMessage as Message } from '../types.js';
 interface ChatMessageListProps {
     messages: Message[];
     allMessages: Message[];
+    /** The reply being written. Left unset, the list shows the chat provider's
+     *  own stream; a host that streams elsewhere passes its reply, or null. */
     streamingMessage?: Message | null;
     queuedMessages?: Message[];
     onRemoveQueued?: (id: string) => void;
@@ -30,7 +32,8 @@ interface ChatMessageListProps {
     isStreaming?: boolean;
     /** Rows without their own side padding, for a host that pads the column. */
     flush?: boolean;
-    /** Names the list as a live log for assistive technology. */
+    /** Names the list, a live log, for assistive technology. Defaults to the
+     *  chat strings' `thread.label`. */
     label?: string;
     /** Rendered after the last message, inside the scrolling column. */
     footer?: ReactNode;
@@ -38,5 +41,5 @@ interface ChatMessageListProps {
      *  for the first frame is not announced twice. */
     workingIndicator?: boolean;
 }
-export default function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessages, onRemoveQueued, canRemoveQueued, queueDelivery, editingMessageId, showAuthor, currentUsername, onNavigateBranch, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onRetryMessage, onOpenReasoning, onApprovalAnswer, inputElement, isStreaming: isStreamingProp, flush, label, footer, workingIndicator, }: ChatMessageListProps): import("react").JSX.Element;
+export default function ChatMessageList({ messages, allMessages, streamingMessage: streamingMessageProp, queuedMessages, onRemoveQueued, canRemoveQueued, queueDelivery, editingMessageId, showAuthor, currentUsername, onNavigateBranch, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onRetryMessage, onOpenReasoning, onApprovalAnswer, inputElement, isStreaming: isStreamingProp, flush, label, footer, workingIndicator, }: ChatMessageListProps): import("react").JSX.Element;
 export {};