@parallelworks/ui 0.18.0 → 0.19.1

package/dist/ai/components/ChatInput.js

@@ -0,0 +1,265 @@
+import { ArrowUpIcon, AttachmentIcon, StopSolidIcon } from "../../icons.js";
+import { useChatConfig } from "../core/config.js";
+import { useChat } from "../core/ChatProvider.js";
+import AttachmentUpload from "./AttachmentUpload.js";
+import useDragDrop from "../core/useDragDrop.js";
+import { ComposerContext, ComposerSettings } from "./ComposerChrome.js";
+import DragOverlay from "./DragOverlay.js";
+import { SlashMenu, useSlashMenu } from "./SlashMenu.js";
+import cx from "classnames";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/ChatInput.tsx
+var DRAFT_STORAGE_PREFIX = "aiChatDraft:";
+var DRAFT_MAX_LENGTH = 1e4;
+function draftKey(conversationId) {
+	return `${DRAFT_STORAGE_PREFIX}${conversationId ?? "new"}`;
+}
+function readDraft(conversationId) {
+	try {
+		return window.localStorage.getItem(draftKey(conversationId)) ?? "";
+	} catch {
+		return "";
+	}
+}
+function storeDraft(conversationId, text) {
+	try {
+		if (!text || text.length > DRAFT_MAX_LENGTH) window.localStorage.removeItem(draftKey(conversationId));
+		else window.localStorage.setItem(draftKey(conversationId), text);
+	} catch {}
+}
+function clearDraft(conversationId) {
+	try {
+		window.localStorage.removeItem(draftKey(conversationId));
+	} catch {}
+}
+/** An optional box that is still empty should not wear the filled look of
+*  one waiting to send something. */
+function sendability({ hasText, canFlushQueue, allowEmpty, disabled, modelReady, pendingCount }) {
+	const canSend = (hasText || canFlushQueue || allowEmpty) && !disabled && modelReady && pendingCount === 0;
+	return {
+		canSend,
+		emphasised: canSend && (hasText || !allowEmpty)
+	};
+}
+function keyAction(e, empty, canEditLast) {
+	if (e.key === "Enter" && !e.shiftKey) return "send";
+	if (e.key === "ArrowUp" && empty && canEditLast) return "editLast";
+	return null;
+}
+function AttachButton({ open, disabled, label, onClick }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		disabled,
+		className: cx("flex-shrink-0 p-3 ml-1 mb-1 rounded-xl transition-colors", open ? "text-blue-600" : "theme-muted-text hover:theme-text", "disabled:opacity-50 disabled:cursor-not-allowed"),
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx(AttachmentIcon, { className: "h-5 w-5" })
+	});
+}
+function SendButton({ onClick, enabled, emphasised, label, testId }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		disabled: !enabled,
+		"data-testid": testId,
+		className: cx("p-2.5 rounded-xl transition-all duration-200", emphasised ? "theme-element hover:opacity-90" : "theme-muted-panel theme-muted-text", !enabled && "cursor-not-allowed"),
+		"aria-label": label,
+		title: label,
+		children: /* @__PURE__ */ jsx(ArrowUpIcon, { className: "h-4 w-4" })
+	});
+}
+/** A host-driven turn stands in for the provider's stream and queue. */
+function streamControls(chat, turn) {
+	if (turn) return {
+		isStreaming: turn.running,
+		stopStreaming: turn.onStop,
+		queuedCount: 0
+	};
+	return {
+		isStreaming: chat.isStreaming,
+		stopStreaming: chat.stopStreaming,
+		queuedCount: chat.queuedMessages.length
+	};
+}
+var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEditLastMessage, flush = false, allowEmpty = false, attachments: attachmentsWanted = true, requireModel = true, inputLabel, sendLabel, sendTestId, slash, context, settingsLeft, settingsRight, turn }, ref) {
+	const [input, setInput] = useState(() => readDraft(conversationId));
+	const [attachments, setAttachments] = useState([]);
+	const [showAttachments, setShowAttachments] = useState(false);
+	const textareaRef = useRef(null);
+	const attachmentUploadRef = useRef(null);
+	const chat = useChat();
+	const { adapter, flushQueuedMessages, isSelectedModelAvailable } = chat;
+	const { isStreaming, stopStreaming, queuedCount } = streamControls(chat, turn);
+	const t = useChatConfig().strings.input;
+	const effectivePlaceholder = placeholder ?? t.placeholder;
+	const attachmentsAvailable = attachmentsWanted && !!adapter.attachments;
+	useImperativeHandle(ref, () => ({
+		addFiles: (files) => {
+			setShowAttachments(true);
+			setTimeout(() => {
+				attachmentUploadRef.current?.addFiles(files);
+			}, 0);
+		},
+		focus: () => {
+			textareaRef.current?.focus();
+		}
+	}), []);
+	useEffect(() => {
+		if (textareaRef.current) {
+			textareaRef.current.style.height = "auto";
+			textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+		}
+	}, [input]);
+	const previousConversationRef = useRef(conversationId);
+	useEffect(() => {
+		if (previousConversationRef.current !== conversationId) {
+			previousConversationRef.current = conversationId;
+			setInput(readDraft(conversationId));
+		}
+	}, [conversationId]);
+	const setInputAndPersist = (value) => {
+		setInput(value);
+		storeDraft(conversationId, value);
+	};
+	const uploadedCount = attachments.filter((a) => a.uploaded).length;
+	const pendingCount = attachments.length - uploadedCount;
+	const canFlushQueue = !isStreaming && queuedCount > 0 && !disabled;
+	const { canSend, emphasised } = sendability({
+		hasText: input.trim().length > 0,
+		canFlushQueue,
+		allowEmpty,
+		disabled,
+		modelReady: isSelectedModelAvailable || !requireModel,
+		pendingCount
+	});
+	const handleSubmit = () => {
+		if (!canSend) return;
+		if (!input.trim() && canFlushQueue) {
+			flushQueuedMessages();
+			return;
+		}
+		const uploaded = attachments.filter((a) => a.uploaded && a.id);
+		const attachmentIds = uploaded.map((a) => a.id);
+		const meta = {};
+		for (const a of uploaded) meta[a.id] = {
+			filename: a.filename,
+			contentType: a.mimeType,
+			size: a.size
+		};
+		onSend(input.trim(), attachmentIds.length > 0 ? attachmentIds : void 0, attachmentIds.length > 0 ? meta : void 0);
+		setInput("");
+		clearDraft(conversationId);
+		setAttachments([]);
+		setShowAttachments(false);
+	};
+	const slashMenu = useSlashMenu(input, slash, setInputAndPersist);
+	const handleKeyDown = (e) => {
+		if (slashMenu.handleKey(e)) return;
+		const action = keyAction(e, input.trim() === "", !!onEditLastMessage);
+		if (action === "send") {
+			e.preventDefault();
+			handleSubmit();
+		} else if (action === "editLast") {
+			e.preventDefault();
+			onEditLastMessage?.();
+		}
+	};
+	const handleFilesDropped = useCallback((files) => {
+		setShowAttachments(true);
+		setTimeout(() => {
+			attachmentUploadRef.current?.addFiles(files);
+		}, 0);
+	}, []);
+	const handlePaste = (e) => {
+		if (!attachmentsAvailable) return;
+		const files = Array.from(e.clipboardData?.files ?? []);
+		if (files.length === 0) return;
+		e.preventDefault();
+		handleFilesDropped(files);
+	};
+	const { isDragging, dragHandlers } = useDragDrop({ onFilesDropped: handleFilesDropped });
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("relative", !flush && "px-4 pb-6 pt-2 bg-(--theme-panel-bg)"),
+		...attachmentsAvailable ? dragHandlers : {},
+		children: [isDragging && /* @__PURE__ */ jsx(DragOverlay, { className: "rounded-2xl" }), /* @__PURE__ */ jsxs("div", {
+			className: cx(!flush && "w-full max-w-[50rem] mx-auto px-4"),
+			children: [
+				showAttachments && attachmentsAvailable && /* @__PURE__ */ jsx("div", {
+					className: "mb-3 p-3 rounded-2xl border theme-border shadow-sm bg-(--theme-panel-bg)",
+					children: /* @__PURE__ */ jsx(AttachmentUpload, {
+						ref: attachmentUploadRef,
+						conversationId,
+						attachments,
+						onAttachmentsChange: setAttachments,
+						maxFiles: 10
+					})
+				}),
+				context && /* @__PURE__ */ jsx(ComposerContext, { children: context }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "relative",
+					children: [slash && slashMenu.open && /* @__PURE__ */ jsx(SlashMenu, {
+						label: slash.label,
+						matches: slashMenu.matches,
+						active: slashMenu.active,
+						onChoose: (name) => {
+							slashMenu.choose(name);
+							textareaRef.current?.focus();
+						}
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cx("relative flex items-end gap-2", "rounded-3xl border shadow-sm", "px-2 overflow-hidden", "transition-all duration-200", "focus-within:shadow-md", "theme-border", "bg-(--theme-panel-bg)"),
+						children: [attachmentsAvailable && /* @__PURE__ */ jsx(AttachButton, {
+							open: showAttachments,
+							disabled,
+							label: t.attachFiles,
+							onClick: () => setShowAttachments(!showAttachments)
+						}), /* @__PURE__ */ jsx("div", {
+							className: "flex-1 relative max-h-[200px] overflow-y-auto",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex items-end",
+								children: [/* @__PURE__ */ jsx("textarea", {
+									ref: textareaRef,
+									value: input,
+									onChange: (e) => setInputAndPersist(e.target.value),
+									onKeyDown: handleKeyDown,
+									onPaste: handlePaste,
+									placeholder: effectivePlaceholder,
+									"aria-label": inputLabel,
+									disabled,
+									rows: 1,
+									className: cx("theme-text", "flex-1 resize-none py-3.5 px-2 pr-3", "bg-transparent border-0", "placeholder:theme-muted-text", "focus:outline-none focus:ring-0", "disabled:opacity-50 disabled:cursor-not-allowed", "text-base leading-relaxed", "overflow-hidden")
+								}), /* @__PURE__ */ jsx("div", {
+									className: "flex-shrink-0 p-1.5 mr-1 sticky bottom-1 flex items-center",
+									children: isStreaming && !input.trim() ? /* @__PURE__ */ jsx("button", {
+										type: "button",
+										onClick: stopStreaming,
+										disabled: turn?.stopping,
+										className: cx("p-2.5 rounded-xl", "theme-muted-panel", "hover:theme-hover", "transition-colors"),
+										"aria-label": t.stopGenerating,
+										title: t.stopGenerating,
+										children: /* @__PURE__ */ jsx(StopSolidIcon, { className: "h-4 w-4" })
+									}) : /* @__PURE__ */ jsx(SendButton, {
+										onClick: handleSubmit,
+										enabled: canSend,
+										emphasised,
+										label: sendLabel ?? t.sendMessage,
+										testId: sendTestId
+									})
+								})]
+							})
+						})]
+					})]
+				}),
+				!flush && /* @__PURE__ */ jsx(ComposerSettings, {
+					left: /* @__PURE__ */ jsxs(Fragment$1, { children: [settingsLeft, uploadedCount > 0 && /* @__PURE__ */ jsx("span", {
+						className: "text-[11px] theme-muted-text",
+						children: t.filesAttached(uploadedCount)
+					})] }),
+					children: settingsRight
+				})
+			]
+		})]
+	});
+});
+//#endregion
+export { ChatInput as default };

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

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export default function ChatLayout({ children, sidebarActions, }: {
+    children: ReactNode;
+    sidebarActions?: boolean;
+}): import("react").JSX.Element;

package/dist/ai/components/ChatLayout.js

@@ -0,0 +1,15 @@
+import { KeyboardShortcutsProvider } from "../core/KeyboardShortcutsProvider.js";
+import ChatSidebar from "./ChatSidebar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/ChatLayout.tsx
+function ChatLayout({ children, sidebarActions = true }) {
+	return /* @__PURE__ */ jsx(KeyboardShortcutsProvider, { children: /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full",
+		children: [/* @__PURE__ */ jsx(ChatSidebar, { actions: sidebarActions }), /* @__PURE__ */ jsx("main", {
+			className: "flex-1 flex flex-col min-w-0",
+			children
+		})]
+	}) });
+}
+//#endregion
+export { ChatLayout as default };

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

@@ -0,0 +1,24 @@
+import type { ApprovalAnswerValue, AttachmentRef, ChatMessage as Message } from '../types.js';
+interface ChatMessageProps {
+    message: Message;
+    allMessages: Message[];
+    isStreaming?: boolean;
+    isEditing?: boolean;
+    showAuthor?: boolean | undefined;
+    currentUsername?: string | undefined;
+    attachmentDownloadUrl?: ((id: string) => string) | undefined;
+    onOpenAttachment?: ((attachment: AttachmentRef) => void) | undefined;
+    onNavigateBranch?: ((messageId: string) => void) | undefined;
+    onEdit?: ((messageId: string) => void) | undefined;
+    onSaveEdit?: ((messageId: string, content: string) => void) | undefined;
+    onCancelEdit?: (() => void) | undefined;
+    onRegenerate?: ((messageId: string) => void) | undefined;
+    onRetry?: ((messageId: string) => void) | undefined;
+    onOpenReasoning?: ((reasoning: string, duration: number | null) => void) | undefined;
+    onApprovalAnswer?: ((id: string, answer: ApprovalAnswerValue) => void) | undefined;
+    /** Drops the row's horizontal padding, for hosts that constrain the column themselves. */
+    flush?: boolean | undefined;
+}
+declare function ChatMessage({ message, allMessages, isStreaming, isEditing, showAuthor, currentUsername, attachmentDownloadUrl, onOpenAttachment, onNavigateBranch, onEdit, onSaveEdit, onCancelEdit, onRegenerate, onRetry, onOpenReasoning, onApprovalAnswer, flush, }: ChatMessageProps): import("react").JSX.Element | null;
+declare const _default: import("react").MemoExoticComponent<typeof ChatMessage>;
+export default _default;

package/dist/ai/components/ChatMessage.js

@@ -0,0 +1,338 @@
+import { CheckIcon, ChevronRightIcon, CopyIcon, DownloadFileIcon, EditIcon, ErrorIcon, FileIcon, RefreshIcon, RetryIcon } from "../../icons.js";
+import { durationToAbsHumanDuration } from "../../duration.js";
+import { useChatConfig } from "../core/config.js";
+import { formatFileSize } from "../utils.js";
+import Markdown from "../ui/Markdown.js";
+import { chatProseClasses } from "../ui/prose.js";
+import AgentMessageParts from "./agent/AgentMessageParts.js";
+import BranchNavigator from "./BranchNavigator.js";
+import { Avatar } from "../ui/Avatar.js";
+import cx from "classnames";
+import { memo, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DateTime, Duration } from "luxon";
+//#region src/ai/components/ChatMessage.tsx
+function formatDuration(ms) {
+	if (!ms) return "";
+	return durationToAbsHumanDuration(Duration.fromMillis(ms));
+}
+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 a = document.createElement("a");
+	a.href = url;
+	a.download = filename;
+	document.body.appendChild(a);
+	a.click();
+	document.body.removeChild(a);
+}
+function ChatMessage({ message, allMessages, isStreaming = 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";
+	const isOtherUser = isUser && showAuthor && !!message.author && !!currentUsername && message.author.username !== currentUsername;
+	const isRightAligned = isUser && !isOtherUser;
+	const hasError = !!message.error;
+	const hasReasoning = !!message.reasoning;
+	const toolCallCount = message.parts?.filter((p) => p.kind === "tool_call").length ?? 0;
+	const showReasoningButton = !isUser && !isStreaming && hasReasoning;
+	const showTurnDurationLabel = !isUser && !isStreaming && !hasReasoning && (!!message.reasoningDuration || toolCallCount > 0);
+	const t = useChatConfig().strings.messageMeta;
+	const [copied, setCopied] = useState(false);
+	const [showActions, setShowActions] = useState(false);
+	const [editContent, setEditContent] = useState(message.content || "");
+	const textareaRef = useRef(null);
+	const contentRef = useRef(null);
+	const [collapsible, setCollapsible] = useState(false);
+	const [expanded, setExpanded] = useState(false);
+	useEffect(() => {
+		if (isUser || isStreaming || !contentRef.current) return;
+		const el = contentRef.current;
+		const measure = () => setCollapsible(el.scrollHeight > COLLAPSE_THRESHOLD);
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [isUser, isStreaming]);
+	useEffect(() => {
+		if (isEditing && textareaRef.current) {
+			textareaRef.current.focus();
+			textareaRef.current.select();
+			const maxHeight = 200;
+			textareaRef.current.style.height = "auto";
+			textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, maxHeight)}px`;
+		}
+	}, [isEditing]);
+	useEffect(() => {
+		if (!isEditing) setEditContent(message.content || "");
+	}, [isEditing, message.content]);
+	const handleSave = () => {
+		if (editContent.trim() && onSaveEdit) onSaveEdit(message.id, editContent.trim());
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			handleSave();
+		} else if (e.key === "Escape") onCancelEdit?.();
+	};
+	const handleTextareaChange = (e) => {
+		setEditContent(e.target.value);
+		e.target.style.height = "auto";
+		const maxHeight = 200;
+		e.target.style.height = `${Math.min(e.target.scrollHeight, maxHeight)}px`;
+	};
+	const hasParts = !!message.parts?.length;
+	if (hasParts && !message.content) return /* @__PURE__ */ jsx("div", {
+		className: cx("group py-5 w-full", !flush && "px-4"),
+		children: /* @__PURE__ */ jsx(AgentMessageParts, {
+			message,
+			isStreaming,
+			onApprovalAnswer
+		})
+	});
+	if (isTool) return null;
+	if (!isUser && !message.content && message.toolCalls?.length) return null;
+	const timestamp = parseTimestamp(message.timestamp);
+	const totalTokens = message.tokensUsed?.total_tokens;
+	const collapsed = !isUser && collapsible && !expanded && !isStreaming;
+	const copyToClipboard = async () => {
+		if (message.content) {
+			await navigator.clipboard.writeText(message.content);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 2e3);
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "none",
+		className: cx("group py-5 w-full", !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", {
+				ref: textareaRef,
+				value: editContent,
+				onChange: handleTextareaChange,
+				onKeyDown: handleKeyDown,
+				className: "w-full min-h-[100px] max-h-[200px] overflow-y-auto p-4 rounded-xl theme-input resize-none focus:outline-none focus:ring-2 focus:ring-blue-500",
+				placeholder: t.editPlaceholder
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-end gap-2 mt-3",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onCancelEdit,
+					className: "px-4 py-1.5 text-sm font-medium rounded-full transition-colors bg-(--theme-muted-panel-bg) text-(--theme-panel)",
+					children: t.cancel
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: handleSave,
+					disabled: !editContent.trim(),
+					className: "px-4 py-1.5 text-sm font-medium rounded-full transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-(--theme-panel) text-(--theme-panel-bg)",
+					children: t.send
+				})]
+			})]
+		}) : /* @__PURE__ */ jsx("div", {
+			className: cx("flex gap-3 w-full", isRightAligned ? "flex-row-reverse" : "flex-row"),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cx("flex-1 min-w-0 space-y-1", isRightAligned && "relative flex flex-col items-end"),
+				children: [
+					showReasoningButton && /* @__PURE__ */ jsx("div", {
+						className: "mb-2",
+						children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => onOpenReasoning?.(message.reasoning || "", message.reasoningDuration ?? null),
+							className: "flex items-center gap-x-1 text-sm theme-muted-text hover:theme-text transition-colors",
+							children: [/* @__PURE__ */ jsx("span", { children: message.reasoningDuration ? `Thought for ${formatDuration(message.reasoningDuration)}` : "Thought process" }), /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3.5 h-3.5" })]
+						})
+					}),
+					showTurnDurationLabel && /* @__PURE__ */ jsx("div", {
+						className: "mb-2",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "flex items-center gap-x-1.5 text-sm theme-muted-text",
+							children: /* @__PURE__ */ jsx("span", { children: message.reasoningDuration ? `Thought for ${formatDuration(message.reasoningDuration)}` : `Ran ${toolCallCount} tool ${toolCallCount === 1 ? "call" : "calls"}` })
+						})
+					}),
+					!isUser && hasParts && /* @__PURE__ */ jsx("div", {
+						className: "mb-1",
+						children: /* @__PURE__ */ jsx(AgentMessageParts, {
+							message,
+							isStreaming,
+							onApprovalAnswer
+						})
+					}),
+					isOtherUser && /* @__PURE__ */ jsx("span", {
+						className: "text-xs theme-muted-text",
+						children: message.author.name || message.author.username
+					}),
+					message.content ? isUser && isOtherUser ? /* @__PURE__ */ jsxs("div", {
+						className: "flex items-end gap-2",
+						children: [/* @__PURE__ */ jsx(Avatar, {
+							src: message.author.avatarUrl ?? void 0,
+							name: message.author.name || message.author.username,
+							size: "sm",
+							className: "flex-shrink-0 mb-0.5"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "px-4 py-2.5 chat-ink rounded-2xl rounded-bl-md max-w-[70%] inline-block whitespace-pre-wrap text-base leading-6 bg-[color-mix(in_oklab,var(--theme-panel)_6%,transparent)]",
+							children: message.content
+						})]
+					}) : isUser ? /* @__PURE__ */ jsx("div", {
+						className: "px-4 py-2.5 chat-ink rounded-2xl rounded-br-md max-w-[70%] inline-block whitespace-pre-wrap text-base leading-6 bg-[color-mix(in_oklab,var(--theme-panel)_6%,transparent)]",
+						children: message.content
+					}) : /* @__PURE__ */ jsx("div", {
+						ref: contentRef,
+						className: cx(chatProseClasses, collapsed && "chat-message-clamp"),
+						children: /* @__PURE__ */ jsx(Markdown, {
+							isStreaming,
+							children: message.content
+						})
+					}) : null,
+					!isUser && collapsible && !isStreaming && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setExpanded((e) => !e),
+						className: "text-xs font-medium theme-muted-text hover:theme-text transition-colors",
+						children: expanded ? t.showLess : t.showMore
+					}),
+					message.stopped && !isStreaming && /* @__PURE__ */ jsx("span", {
+						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" }), t.retry]
+							})
+						]
+					}),
+					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: [
+											"(",
+											formatFileSize(att.size),
+											")"
+										]
+									}) : null,
+									/* @__PURE__ */ jsx(DownloadFileIcon, { 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: [
+											"(",
+											formatFileSize(att.size),
+											")"
+										]
+									}) : null
+								]
+							}, att.id);
+						})
+					}),
+					!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")),
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: copyToClipboard,
+								className: "p-1.5 rounded-lg hover:theme-hover theme-muted-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" })
+							}),
+							isUser && !isOtherUser && onEdit && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => onEdit(message.id),
+								className: "p-1.5 rounded-lg hover:theme-hover theme-muted-text transition-colors",
+								title: t.edit,
+								children: /* @__PURE__ */ jsx(EditIcon, { className: "w-4 h-4" })
+							}),
+							!isUser && onRegenerate && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => onRegenerate(message.id),
+								className: "p-1.5 rounded-lg hover:theme-hover theme-muted-text transition-colors",
+								title: t.regenerate,
+								children: /* @__PURE__ */ jsx(RefreshIcon, { className: "w-4 h-4" })
+							}),
+							!isUser && onNavigateBranch && /* @__PURE__ */ jsx(BranchNavigator, {
+								messages: allMessages,
+								currentMessageId: message.id,
+								onNavigate: onNavigateBranch
+							}),
+							(timestamp || !isUser && (message.model || totalTokens)) && /* @__PURE__ */ jsxs("span", {
+								className: cx("chat-meta flex items-center gap-2 ml-2 text-[11px] theme-muted-text transition-opacity duration-150 select-none", showActions ? "opacity-100" : "opacity-0"),
+								children: [
+									timestamp && /* @__PURE__ */ jsx("span", {
+										title: timestamp.toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
+										children: timestamp.toRelative()
+									}),
+									!isUser && message.model && /* @__PURE__ */ jsx("span", { children: message.model }),
+									!isUser && totalTokens ? /* @__PURE__ */ jsx("span", {
+										title: message.tokensUsed?.prompt_tokens !== void 0 && message.tokensUsed?.completion_tokens !== void 0 ? t.tokensBreakdown(message.tokensUsed.prompt_tokens, message.tokensUsed.completion_tokens) : void 0,
+										children: t.tokens(totalTokens)
+									}) : null
+								]
+							})
+						]
+					})
+				]
+			})
+		})
+	});
+}
+var ChatMessage_default = memo(ChatMessage);
+//#endregion
+export { ChatMessage_default as default };