@parallelworks/ui 0.26.0 → 0.27.0

package/dist/ai/components/ChatMessage.js

@@ -6,13 +6,13 @@ import { FaUndoAlt } from "../../icons/fa/FaUndoAlt.js";
 import { FiCopy } from "../../icons/fi/FiCopy.js";
 import { FiDownload } from "../../icons/fi/FiDownload.js";
 import { FiFile } from "../../icons/fi/FiFile.js";
-import { LuChevronRight } from "../../icons/lu/LuChevronRight.js";
 import { MdRefresh } from "../../icons/md/MdRefresh.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 { ReasoningBody, ReasoningToggle } from "./Reasoning.js";
 import AgentMessageParts from "./agent/AgentMessageParts.js";
 import BranchNavigator from "./BranchNavigator.js";
 import { UserMessageText } from "./PastedText.js";
@@ -49,6 +49,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, isEditing = fa
 	const isOtherUser = !!otherAuthor;
 	const isRightAligned = isUser && !isOtherUser;
 	const hasError = !!message.error;
+	const hasPastes = !!message.pastes?.length;
 	const hasReasoning = !!message.reasoning;
 	const toolCallCount = message.parts?.filter((p) => p.kind === "tool_call").length ?? 0;
 	const showReasoningButton = !isUser && !isStreaming && hasReasoning;
@@ -61,6 +62,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, isEditing = fa
 	const contentRef = useRef(null);
 	const [collapsible, setCollapsible] = useState(false);
 	const [expanded, setExpanded] = useState(false);
+	const [reasoningOpen, setReasoningOpen] = useState(false);
 	useEffect(() => {
 		if (isUser || isStreaming || !contentRef.current) return;
 		const el = contentRef.current;
@@ -100,7 +102,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, isEditing = fa
 	};
 	const hasParts = !!message.parts?.length;
 	if (hasParts && !message.content) return /* @__PURE__ */ jsx("div", {
-		className: cx("group py-5 w-full", !flush && "px-4"),
+		className: cx("group py-3 w-full", !flush && "px-4"),
 		children: /* @__PURE__ */ jsx(AgentMessageParts, {
 			message,
 			isStreaming,
@@ -121,7 +123,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, isEditing = fa
 	};
 	return /* @__PURE__ */ jsx("div", {
 		role: "none",
-		className: cx("group py-5 w-full", !flush && "px-4"),
+		className: cx("group w-full", isUser ? "pt-8 pb-5" : "py-3", !flush && "px-4"),
 		onMouseEnter: () => setShowActions(true),
 		onMouseLeave: () => setShowActions(false),
 		onFocus: () => setShowActions(true),
@@ -133,20 +135,20 @@ function ChatMessage({ message, allMessages, isStreaming = false, isEditing = fa
 				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",
+				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
 			}), /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-end gap-2 mt-3",
+				className: "flex items-center justify-end gap-2 mt-2.5",
 				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)",
+					className: "px-4 py-1.5 text-sm font-medium rounded-full transition-colors chat-tint hover:chat-tint-strong 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)",
+					className: "px-4 py-1.5 text-sm font-medium rounded-full transition-colors hover:opacity-85 disabled:opacity-50 disabled:cursor-not-allowed bg-(--theme-panel) text-(--theme-panel-bg)",
 					children: t.send
 				})]
 			})]
@@ -155,14 +157,13 @@ function ChatMessage({ message, allMessages, isStreaming = false, isEditing = fa
 			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", {
+					showReasoningButton && /* @__PURE__ */ jsxs("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(LuChevronRight, { className: "w-3.5 h-3.5" })]
-						})
+						children: [/* @__PURE__ */ jsx(ReasoningToggle, {
+							open: reasoningOpen,
+							onToggle: () => onOpenReasoning ? onOpenReasoning(message.reasoning || "", message.reasoningDuration ?? null) : setReasoningOpen((o) => !o),
+							children: message.reasoningDuration ? `Thought for ${formatDuration(message.reasoningDuration)}` : "Thought process"
+						}), reasoningOpen && /* @__PURE__ */ jsx(ReasoningBody, { children: /* @__PURE__ */ jsx(Markdown, { children: message.reasoning || "" }) })]
 					}),
 					showTurnDurationLabel && /* @__PURE__ */ jsx("div", {
 						className: "mb-2",
@@ -190,14 +191,14 @@ function ChatMessage({ message, allMessages, isStreaming = false, isEditing = fa
 							name: otherAuthor.name || otherAuthor.username,
 							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 wrap-break-word text-[1rem] leading-6 bg-[color-mix(in_oklab,var(--theme-panel)_6%,transparent)]",
+							className: cx("px-4 py-2.5 chat-ink rounded-[1.25rem] max-w-[80%] inline-block whitespace-pre-wrap wrap-break-word text-[1rem] leading-6 chat-tint", hasPastes && "chat-bubble-roomy"),
 							children: /* @__PURE__ */ jsx(UserMessageText, {
 								content: message.content,
 								pastes: message.pastes
 							})
 						})]
 					}) : 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 wrap-break-word text-[1rem] leading-6 bg-[color-mix(in_oklab,var(--theme-panel)_6%,transparent)]",
+						className: cx("px-4 py-2.5 chat-ink rounded-[1.25rem] max-w-[80%] inline-block whitespace-pre-wrap wrap-break-word text-[1rem] leading-6 chat-bubble-user", hasPastes && "chat-bubble-roomy"),
 						children: /* @__PURE__ */ jsx(UserMessageText, {
 							content: message.content,
 							pastes: message.pastes
@@ -307,21 +308,21 @@ function ChatMessage({ message, allMessages, isStreaming = false, isEditing = fa
 							/* @__PURE__ */ jsx("button", {
 								type: "button",
 								onClick: copyToClipboard,
-								className: "p-1.5 rounded-lg hover:theme-hover theme-muted-text transition-colors",
+								className: "p-1.5 rounded-md hover:chat-tint theme-muted-text hover:theme-text transition-colors",
 								title: t.copy,
 								children: copied ? /* @__PURE__ */ jsx(FaCheck, { className: "w-4 h-4 text-green-500" }) : /* @__PURE__ */ jsx(FiCopy, { 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",
+								className: "p-1.5 rounded-md hover:chat-tint theme-muted-text hover:theme-text transition-colors",
 								title: t.edit,
 								children: /* @__PURE__ */ jsx(FaEdit, { 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",
+								className: "p-1.5 rounded-md hover:chat-tint theme-muted-text hover:theme-text transition-colors",
 								title: t.regenerate,
 								children: /* @__PURE__ */ jsx(MdRefresh, { className: "w-4 h-4" })
 							}),
@@ -331,7 +332,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, isEditing = fa
 								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"),
+								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"),
 								children: [
 									timestamp && /* @__PURE__ */ jsx("span", {
 										title: timestamp.toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),

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

@@ -6,8 +6,13 @@ interface ChatMessageListProps {
     streamingMessage?: Message | null;
     queuedMessages?: Message[];
     onRemoveQueued?: (id: string) => void;
-    /** Which queued messages can still be taken back; all of them when unset. */
+    /** Which queued messages can still be taken back; all of them when unset.
+     *  One that cannot has been handed to the running turn. */
     canRemoveQueued?: (id: string) => boolean;
+    /** When a queued message reaches the model: once the running reply
+     *  finishes (the chat provider's queue), or between the agent's steps for a
+     *  host that steers the turn in progress. */
+    queueDelivery?: 'afterReply' | 'nextStep';
     editingMessageId?: string | null | undefined;
     showAuthor?: boolean;
     currentUsername?: string;
@@ -33,5 +38,5 @@ interface ChatMessageListProps {
      *  for the first frame is not announced twice. */
     workingIndicator?: boolean;
 }
-export default function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessages, onRemoveQueued, canRemoveQueued, 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, 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 {};

package/dist/ai/components/ChatMessageList.js

@@ -1,17 +1,18 @@
-import { FiX } from "../../icons/fi/FiX.js";
-import { LuChevronRight } from "../../icons/lu/LuChevronRight.js";
+import { FaCheck } from "../../icons/fa/FaCheck.js";
+import { FiClock } from "../../icons/fi/FiClock.js";
 import { durationToAbsHumanDuration } from "../../duration.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import Markdown from "../ui/Markdown.js";
+import { ReasoningBody, ReasoningToggle } from "./Reasoning.js";
 import AgentMessageParts from "./agent/AgentMessageParts.js";
 import ChatMessage_default from "./ChatMessage.js";
 import cx from "classnames";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Duration } from "luxon";
 //#region src/ai/components/ChatMessageList.tsx
-function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessages, onRemoveQueued, canRemoveQueued, editingMessageId, showAuthor, currentUsername, onNavigateBranch, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onRetryMessage, onOpenReasoning, onApprovalAnswer, inputElement, isStreaming: isStreamingProp, flush, label, footer, workingIndicator = true }) {
+function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessages, onRemoveQueued, canRemoveQueued, queueDelivery = "afterReply", editingMessageId, showAuthor, currentUsername, onNavigateBranch, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onRetryMessage, onOpenReasoning, onApprovalAnswer, inputElement, isStreaming: isStreamingProp, flush, label, footer, workingIndicator = true }) {
 	const { adapter, isStreaming: providerStreaming, isThinking, streamingReasoning, streamingParts, thinkingStartTime } = useChat();
 	const isStreaming = isStreamingProp ?? providerStreaming;
 	const { strings } = useChatConfig();
@@ -39,6 +40,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 	const streamingMessageParts = streamingMessage?.parts;
 	const [elapsedTime, setElapsedTime] = useState(0);
 	const [finalThinkingDuration, setFinalThinkingDuration] = useState(null);
+	const [reasoningOpen, setReasoningOpen] = useState(false);
 	const wasThinkingRef = useRef(false);
 	useEffect(() => {
 		if (isThinking && !wasThinkingRef.current) {
@@ -53,6 +55,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 		if (!isStreaming) {
 			wasThinkingRef.current = false;
 			setFinalThinkingDuration(null);
+			setReasoningOpen(false);
 		}
 	}, [isStreaming]);
 	useEffect(() => {
@@ -143,7 +146,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 		bottomRef.current?.scrollIntoView({ behavior: "smooth" });
 	}, [messageCount, isStreaming]);
 	if (messages.length === 0 && !streamingMessage && !hasQueuedMessages) return /* @__PURE__ */ jsxs("div", {
-		className: "flex-1 overflow-y-auto flex flex-col bg-(--theme-panel-bg)",
+		className: "chat-thread flex-1 overflow-y-auto flex flex-col bg-(--theme-panel-bg)",
 		children: [
 			/* @__PURE__ */ jsx("div", { className: "flex-1" }),
 			footer && /* @__PURE__ */ jsx("div", {
@@ -163,10 +166,10 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 			"aria-relevant": "additions",
 			"aria-label": label
 		} : {},
-		className: "flex-1 overflow-y-auto theme-scrollbar flex flex-col bg-(--theme-panel-bg)",
+		className: "chat-thread flex-1 overflow-y-auto theme-scrollbar flex flex-col bg-(--theme-panel-bg)",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "w-full max-w-[50rem] mx-auto pt-10 pb-6 flex-1 px-4",
+				className: "w-full max-w-[50rem] mx-auto pt-4 pb-6 flex-1 px-4",
 				children: [
 					messages.map((message) => {
 						if (message.pseudo) return null;
@@ -196,37 +199,31 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 					}),
 					isStreaming && streamingReasoning && /* @__PURE__ */ jsx("div", {
 						className: "animate-chat-enter",
-						children: /* @__PURE__ */ jsx("div", {
-							className: "py-3 px-4",
-							children: /* @__PURE__ */ jsxs("div", {
-								className: "flex flex-col gap-2",
-								children: [/* @__PURE__ */ jsx("button", {
-									type: "button",
-									onClick: () => onOpenReasoning?.(streamingReasoning, finalThinkingDuration),
-									className: "flex items-center gap-x-2 text-left",
-									children: isThinking ? /* @__PURE__ */ jsx("div", {
-										className: "animate-shimmer text-shimmer flex items-center gap-x-2",
-										children: /* @__PURE__ */ jsx("span", { children: elapsedTime > 0 ? `${tThinking.label} (${elapsedTime}s)` : tThinking.ellipsis })
-									}) : /* @__PURE__ */ jsxs("div", {
-										className: "flex items-center gap-x-1 text-sm theme-muted-text hover:theme-text transition-colors",
-										children: [/* @__PURE__ */ jsx("span", { children: tThinking.thoughtFor(finalThinkingDuration ? durationToAbsHumanDuration(Duration.fromMillis(finalThinkingDuration)) : `${elapsedTime}s`) }), /* @__PURE__ */ jsx(LuChevronRight, { className: "w-3.5 h-3.5" })]
+						children: /* @__PURE__ */ jsxs("div", {
+							className: cx("pt-3", !flush && "px-4"),
+							children: [/* @__PURE__ */ jsx(ReasoningToggle, {
+								open: reasoningOpen,
+								shimmer: isThinking,
+								onToggle: () => onOpenReasoning ? onOpenReasoning(streamingReasoning, finalThinkingDuration) : setReasoningOpen((o) => !o),
+								children: isThinking ? elapsedTime > 0 ? `${tThinking.label} (${elapsedTime}s)` : tThinking.ellipsis : tThinking.thoughtFor(finalThinkingDuration ? durationToAbsHumanDuration(Duration.fromMillis(finalThinkingDuration)) : `${elapsedTime}s`)
+							}), reasoningOpen ? /* @__PURE__ */ jsx(ReasoningBody, { children: /* @__PURE__ */ jsx(Markdown, {
+								isStreaming: isThinking,
+								children: streamingReasoning
+							}) }) : isThinking && /* @__PURE__ */ jsx(ReasoningBody, {
+								className: "chat-reasoning-tail",
+								children: /* @__PURE__ */ jsx("div", {
+									ref: reasoningScrollRef,
+									className: "max-h-20 overflow-y-hidden",
+									children: /* @__PURE__ */ jsx(Markdown, {
+										isStreaming: true,
+										children: streamingReasoning
 									})
-								}), isThinking && /* @__PURE__ */ jsxs("div", {
-									className: "relative ml-6 pl-3 border-l-2 theme-border",
-									children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-0 h-3 bg-gradient-to-b from-(--theme-app-bg) to-transparent pointer-events-none z-[1]" }), /* @__PURE__ */ jsx("div", {
-										ref: reasoningScrollRef,
-										className: "text-sm theme-muted-text max-h-20 overflow-y-hidden pt-1",
-										children: /* @__PURE__ */ jsx(Markdown, {
-											isStreaming: true,
-											children: streamingReasoning
-										})
-									})]
-								})]
-							})
+								})
+							})]
 						})
 					}, "thinking"),
 					isStreaming && streamingParts.length > 0 && /* @__PURE__ */ jsx("div", {
-						className: "animate-chat-enter py-1 px-4",
+						className: cx("animate-chat-enter py-1", !flush && "px-4"),
 						children: /* @__PURE__ */ jsx(AgentMessageParts, {
 							message: {
 								id: "streaming-parts",
@@ -239,9 +236,9 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 					showWorkingIndicator && /* @__PURE__ */ jsx("div", {
 						className: "animate-chat-enter",
 						children: /* @__PURE__ */ jsx("div", {
-							className: "py-3 px-4",
+							className: cx("py-3", !flush && "px-4"),
 							children: /* @__PURE__ */ jsx("div", {
-								className: "animate-shimmer text-shimmer",
+								className: "animate-shimmer text-shimmer text-sm",
 								children: tThinking.ellipsis
 							})
 						})
@@ -258,23 +255,37 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 							onApprovalAnswer
 						})
 					}, "streaming"),
-					queuedMessages?.map((msg) => /* @__PURE__ */ jsxs("div", {
-						className: "group/queued relative animate-chat-enter opacity-60",
-						children: [/* @__PURE__ */ jsx(ChatMessage_default, {
-							message: msg,
-							allMessages,
-							flush,
-							attachmentDownloadUrl,
-							onOpenAttachment
-						}), onRemoveQueued && (canRemoveQueued?.(msg.id) ?? true) && /* @__PURE__ */ jsx("button", {
-							type: "button",
-							"aria-label": strings.queue.remove,
-							title: strings.queue.remove,
-							onClick: () => onRemoveQueued(msg.id),
-							className: "absolute top-1 right-1 rounded p-1 opacity-0 transition-opacity group-hover/queued:opacity-100 focus-visible:opacity-100 hover:bg-(--theme-hover) text-(--theme-muted-text-color)",
-							children: /* @__PURE__ */ jsx(FiX, { className: "h-3.5 w-3.5" })
-						})]
-					}, msg.id)),
+					queuedMessages?.map((msg) => {
+						const removable = canRemoveQueued?.(msg.id) ?? true;
+						const status = !removable ? strings.queue.handedOver : queueDelivery === "nextStep" ? strings.queue.waitingNextStep : strings.queue.waiting;
+						return /* @__PURE__ */ jsxs("div", {
+							className: cx("animate-chat-enter", removable && "chat-queued"),
+							children: [/* @__PURE__ */ jsx(ChatMessage_default, {
+								message: msg,
+								allMessages,
+								flush,
+								attachmentDownloadUrl,
+								onOpenAttachment
+							}), /* @__PURE__ */ jsxs("div", {
+								"data-testid": "queued-status",
+								className: cx("-mt-4 mb-2 flex items-center justify-end gap-2 text-xs theme-muted-text", !flush && "px-4"),
+								children: [
+									removable ? /* @__PURE__ */ jsx(FiClock, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(FaCheck, { className: "h-3 w-3" }),
+									/* @__PURE__ */ jsx("span", { children: status }),
+									onRemoveQueued && removable && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+										"aria-hidden": "true",
+										children: "·"
+									}), /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": strings.queue.remove,
+										onClick: () => onRemoveQueued(msg.id),
+										className: "rounded font-medium underline-offset-2 hover:theme-text hover:underline",
+										children: strings.queue.removeShort
+									})] })
+								]
+							})]
+						}, msg.id);
+					}),
 					footer,
 					/* @__PURE__ */ jsx("div", {
 						ref: bottomRef,
@@ -287,7 +298,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 				children: /* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: jumpToLatest,
-					className: "-translate-y-full rounded-full border theme-border bg-(--theme-panel-bg) px-3 py-1 text-xs shadow-sm hover:theme-hover",
+					className: "chat-composer -translate-y-full rounded-full bg-(--theme-panel-bg) px-3 py-1.5 text-xs font-medium theme-text transition-colors hover:bg-(--theme-muted-panel-bg)",
 					children: strings.chrome.jumpToLatest
 				})
 			}),

package/dist/ai/components/ChatSidebar.js

@@ -238,11 +238,11 @@ function ChatSidebar({ actions = true }) {
 					className: cx("absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize touch-none", resizing ? "bg-(--theme-element)" : "hover:bg-(--theme-border)")
 				}),
 				actions && /* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col gap-1 p-1.5",
+					className: "flex flex-col gap-0.5 px-2 pt-2 pb-1",
 					children: [/* @__PURE__ */ jsxs("button", {
 						type: "button",
 						onClick: handleNewChat,
-						className: cx("flex items-center h-9 px-2 gap-3 rounded-lg hover:theme-muted-panel", "transition-colors", !sidebarCollapsed && "border theme-border"),
+						className: "flex items-center h-9 px-2 gap-3 rounded-lg font-medium transition-colors hover:chat-tint",
 						title: tSidebar.newChat,
 						children: [/* @__PURE__ */ jsx(TbEdit, { className: cx("flex-shrink-0", "w-4 h-4") }), /* @__PURE__ */ jsx("span", {
 							className: cx("text-sm transition-opacity duration-200", sidebarCollapsed ? "opacity-0 w-0 overflow-hidden" : "opacity-100"),
@@ -250,7 +250,7 @@ function ChatSidebar({ actions = true }) {
 						})]
 					}), attachmentsAvailable && /* @__PURE__ */ jsxs(LinkComponent, {
 						target: { kind: "attachments" },
-						className: "flex items-center h-9 px-2 gap-3 rounded-lg hover:theme-muted-panel",
+						className: "flex items-center h-9 px-2 gap-3 rounded-lg transition-colors hover:chat-tint",
 						title: tSidebar.attachments,
 						children: [/* @__PURE__ */ jsx(FaRegFileImage, { className: "flex-shrink-0 w-4 h-4" }), /* @__PURE__ */ jsx("span", {
 							className: cx("text-sm transition-opacity duration-200", sidebarCollapsed ? "opacity-0 w-0 overflow-hidden" : "opacity-100"),
@@ -259,7 +259,7 @@ function ChatSidebar({ actions = true }) {
 					})]
 				}),
 				actions && !sidebarCollapsed && conversations.length > 0 && /* @__PURE__ */ jsx("div", {
-					className: "px-2 pb-1",
+					className: "px-2 pb-2",
 					children: /* @__PURE__ */ jsxs("div", {
 						className: "relative",
 						children: [/* @__PURE__ */ jsx(FaSearch, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 theme-muted-text pointer-events-none" }), /* @__PURE__ */ jsx("input", {
@@ -275,7 +275,7 @@ function ChatSidebar({ actions = true }) {
 							},
 							placeholder: strings.chrome.searchPlaceholder,
 							"aria-label": strings.chrome.searchLabel,
-							className: "w-full h-8 pl-8 pr-2 text-sm rounded-lg border theme-border bg-(--theme-input-bg) placeholder:theme-muted-text focus:outline-none focus:border-(--theme-element)"
+							className: "w-full h-9 pl-8 pr-2 text-sm rounded-lg border border-transparent chat-tint theme-text placeholder:theme-muted-text transition-colors focus:outline-none focus:border-(--theme-border) focus:bg-(--theme-panel-bg)"
 						})]
 					})
 				}),
@@ -320,7 +320,7 @@ function ChatSidebar({ actions = true }) {
 							kind: "external",
 							href: extraLinks.manageProviders
 						},
-						className: "flex min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-xs theme-muted-text hover:theme-hover",
+						className: "flex min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-xs theme-muted-text transition-colors hover:chat-tint hover:theme-text",
 						title: tSidebar.manageProviders,
 						children: [/* @__PURE__ */ jsx(IoSettingsOutline, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ jsx("span", {
 							className: "truncate",

package/dist/ai/components/ChatThread.js

@@ -1,8 +1,5 @@
-import { IoMdClose } from "../../icons/io/IoMdClose.js";
-import { TbBrain } from "../../icons/tb/TbBrain.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
-import Markdown from "../ui/Markdown.js";
 import BlockedGroupBanner from "./BlockedGroupBanner.js";
 import useDragDrop from "../core/useDragDrop.js";
 import { ComposerControls, ConnectToolsLink } from "./ComposerChrome.js";
@@ -11,25 +8,12 @@ import ChatInput from "./ChatInput.js";
 import ProviderIssueBanner from "./ProviderIssueBanner.js";
 import { ShareButton } from "./ShareDialog.js";
 import ChatMessageList from "./ChatMessageList.js";
-import cx from "classnames";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatThread.tsx
 function ChatThread({ conversationId }) {
 	const chatInputRef = useRef(null);
 	const [editingState, setEditingState] = useState(null);
-	const [reasoningDrawerOpen, setReasoningDrawerOpen] = useState(false);
-	const [selectedReasoning, setSelectedReasoning] = useState(null);
-	const handleOpenReasoning = useCallback((reasoning, duration) => {
-		if (reasoningDrawerOpen && selectedReasoning?.content === reasoning) setReasoningDrawerOpen(false);
-		else {
-			setSelectedReasoning({
-				content: reasoning,
-				duration
-			});
-			setReasoningDrawerOpen(true);
-		}
-	}, [reasoningDrawerOpen, selectedReasoning?.content]);
 	const { adapter, currentUser, currentConversation, loadConversation, loadProviders, sendMessage, retryMessage, isLoadingConversation, isStreaming, streamingContent, navigateToBranch, queuedMessages, removeQueuedMessage } = useChat();
 	const { slots, strings } = useChatConfig();
 	const requestedConversationIdRef = useRef(null);
@@ -111,9 +95,9 @@ function ChatThread({ conversationId }) {
 			settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [slots.composerUsage, /* @__PURE__ */ jsx(ComposerControls, {})] })
 		})]
 	});
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx("div", {
 		className: "flex h-full relative bg-(--theme-panel-bg)",
-		children: [/* @__PURE__ */ jsxs("div", {
+		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex-1 flex flex-col min-w-0",
 			...attachmentsAvailable ? dragHandlers : {},
 			children: [
@@ -135,7 +119,6 @@ function ChatThread({ conversationId }) {
 					onRetryMessage: currentConversation?.canCollaborate !== false ? handleRetryMessage : void 0,
 					onSaveEdit: handleSaveEdit,
 					onCancelEdit: handleCancelEdit,
-					onOpenReasoning: handleOpenReasoning,
 					inputElement: /* @__PURE__ */ jsx(ChatInput, {
 						ref: chatInputRef,
 						onSend: handleSendMessage,
@@ -148,50 +131,7 @@ function ChatThread({ conversationId }) {
 					})
 				})
 			]
-		}), /* @__PURE__ */ jsx("div", {
-			className: cx("flex-shrink-0 border-l theme-border flex flex-col h-full transition-[width] duration-300 ease-in-out overflow-hidden bg-(--theme-panel-bg)", reasoningDrawerOpen ? "w-[400px]" : "w-0 border-l-0"),
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "w-[400px] h-full flex flex-col",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center justify-between p-3 border-b theme-border",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2",
-						children: [
-							/* @__PURE__ */ jsx(TbBrain, { className: "w-5 h-5 theme-muted-text" }),
-							/* @__PURE__ */ jsx("span", {
-								className: "font-medium",
-								children: strings.thinking.activity
-							}),
-							selectedReasoning?.duration && /* @__PURE__ */ jsxs("span", {
-								className: "text-sm theme-muted-text",
-								children: [
-									"· ",
-									Math.round(selectedReasoning.duration / 1e3),
-									"s"
-								]
-							})
-						]
-					}), /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: () => setReasoningDrawerOpen(false),
-						className: "p-1 rounded hover:theme-hover transition-colors",
-						children: /* @__PURE__ */ jsx(IoMdClose, { className: "w-5 h-5 theme-muted-text" })
-					})]
-				}), /* @__PURE__ */ jsx("div", {
-					className: "flex-1 overflow-y-auto p-4",
-					children: selectedReasoning?.content && /* @__PURE__ */ jsxs("div", {
-						className: "space-y-4",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-2 text-sm font-medium theme-text",
-							children: [/* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-blue-500" }), /* @__PURE__ */ jsx("span", { children: strings.thinking.label })]
-						}), /* @__PURE__ */ jsx("div", {
-							className: "text-sm theme-muted-text leading-relaxed pl-4 border-l-2 theme-border",
-							children: /* @__PURE__ */ jsx(Markdown, { children: selectedReasoning.content })
-						})]
-					})
-				})]
-			})
-		})]
+		})
 	});
 }
 //#endregion

package/dist/ai/components/ModelSelector.js

@@ -129,8 +129,8 @@ function ModelSelector({ targetSession, variant = "default" }) {
 	const targetSessionDisplayName = targetSession?.split(":").pop();
 	const targetSessionFound = targetSession && models.length > 0 ? models.some((m) => m.id.startsWith(`session:${targetSession}/`)) : false;
 	const targetSessionStatus = targetSession ? isLoadingModels ? "connecting" : hasLoadedModels && !targetSessionFound ? "offline" : null : null;
-	const boxClass = bare ? "flex items-center gap-1 rounded-md px-1.5 py-0.5 max-w-[280px]" : "flex items-center gap-2 px-3 h-8 rounded-lg min-w-[180px] max-w-[280px]";
-	const textClass = bare ? "text-[11px]" : "text-sm";
+	const boxClass = bare ? "flex items-center gap-1.5 rounded-full h-8 px-2.5 max-w-[280px]" : "flex items-center gap-2 px-3 h-8 rounded-lg min-w-[180px] max-w-[280px]";
+	const textClass = bare ? "text-[13px]" : "text-sm";
 	if (isLoadingModels && models.length === 0 && !targetSession) return /* @__PURE__ */ jsx("div", {
 		ref: containerRef,
 		className: "relative",
@@ -156,7 +156,7 @@ function ModelSelector({ targetSession, variant = "default" }) {
 				/* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: () => refreshModels(),
-					className: cx("flex items-center gap-1 text-blue-600 hover:underline ml-1", bare ? "text-[11px]" : "text-xs"),
+					className: "flex items-center gap-1 text-xs text-blue-600 hover:underline ml-1",
 					children: [/* @__PURE__ */ jsx(FaUndoAlt, { className: "h-2.5 w-2.5" }), "Retry"]
 				})
 			]
@@ -182,7 +182,7 @@ function ModelSelector({ targetSession, variant = "default" }) {
 			type: "button",
 			onClick: () => setIsOpen(!isOpen),
 			disabled: models.length === 0 && !targetSessionStatus && unreachableSessions.length === 0,
-			className: cx(boxClass, "transition-all cursor-pointer bg-transparent", "focus:outline-none", "disabled:opacity-50 disabled:cursor-not-allowed", bare ? "hover:theme-muted-panel" : "border theme-border hover:theme-hover"),
+			className: cx(boxClass, "transition-all cursor-pointer bg-transparent", "focus:outline-none", "disabled:opacity-50 disabled:cursor-not-allowed", bare ? "hover:chat-tint" : "border theme-border hover:theme-hover"),
 			children: [
 				!bare && /* @__PURE__ */ jsx(FaRobot, { className: cx("h-4 w-4 flex-shrink-0", targetSessionStatus === "connecting" ? "text-amber-500 animate-pulse" : "text-purple-500") }),
 				/* @__PURE__ */ jsx("div", {
@@ -192,12 +192,12 @@ function ModelSelector({ targetSession, variant = "default" }) {
 						children: [
 							/* @__PURE__ */ jsx("span", {
 								title: selectedModelName,
-								className: cx("truncate", bare ? "text-[11px] theme-muted-text" : "text-sm font-medium text-(--theme-panel)"),
+								className: cx("truncate", bare ? "text-[13px] font-medium theme-text" : "text-sm font-medium text-(--theme-panel)"),
 								children: selectedModelName
 							}),
 							selectedProviderName && /* @__PURE__ */ jsx("span", {
 								title: selectedProviderName,
-								className: cx("theme-muted-text truncate flex-shrink-0 max-w-[45%]", bare ? "text-[10px]" : "text-xs"),
+								className: "theme-muted-text truncate flex-shrink-0 max-w-[45%] text-xs",
 								children: selectedProviderName
 							}),
 							selectedModelIssue && /* @__PURE__ */ jsx(FaExclamationTriangle, {
@@ -206,7 +206,7 @@ function ModelSelector({ targetSession, variant = "default" }) {
 							})
 						]
 					}) : /* @__PURE__ */ jsx("span", {
-						className: cx(bare ? "text-[11px]" : "text-sm", targetSessionStatus === "connecting" ? "text-amber-600" : "theme-muted-text"),
+						className: cx(textClass, targetSessionStatus === "connecting" ? "text-amber-600" : "theme-muted-text"),
 						children: triggerText
 					})
 				}),

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

@@ -8,7 +8,9 @@ export declare function PasteFileCard({ id, lines, bytes, saving, error, onRemov
     error?: string | undefined;
     onRemove?: (() => void) | undefined;
 }): import("react").JSX.Element;
-/** A user message as typed: an inline paste as its text, one sent as its file as a card. */
+/** A user message as typed: an inline paste as a code block in the language
+ *  it reads as, one sent as its file as a card. The blank lines the composer puts around a
+ *  paste would stack on the block's own spacing, so they are dropped. */
 export declare function UserMessageText({ content, pastes, }: {
     content: string;
     pastes?: MessagePaste[] | null | undefined;