@parallelworks/ui 0.68.0 → 0.69.0

package/README.md

@@ -858,6 +858,18 @@ The chat's links (each conversation, a new chat, attachments, and the
 these links, so `navigation` handles only the moves that aren't clicks, such as
 keyboard shortcuts.
 
+`ChatThread` is `SessionView` bound to the chat provider. A host with its own
+transcript, such as an agent session fed by an event stream, renders
+`SessionView` with its messages, streaming and queued messages, and callbacks:
+`onSend`, and `turn` (`running`, `onStop`) for a turn the provider doesn't run.
+What it leaves out it doesn't offer: `onEdit`, `onRegenerate`, `onRetry` and
+`onNavigateBranch` turn on editing, regenerating, retrying and branches.
+Escape stops the running turn either way. `queueDelivery` says when a queued
+message reaches the model, per message when it takes a function. `composer`
+passes `ChatInput`'s props; `ComposerControls` takes `model` and `allocation`
+as a `BoundSetting` for a session that owns its own, and `tools={false}` keeps
+the chat's tools out of a composer they don't apply to.
+
 `ChatLayout sidebarMode="auto"` shows the conversation list as a drawer over
 the thread when the chat is narrower than `drawerBelowPx` (`DRAWER_BELOW_PX`, 896, by default),
 measured on the chat's own box; `"drawer"` always does, and `"inline"` (the

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

@@ -1,3 +1,9 @@
+import type { BoundSetting } from '../types.js';
 /** Which allocation an organization model bills, with its spend so far. Shows
  *  only for an organization model, and picks the first allocation for it. */
-export default function AllocationSelector(): import("react").JSX.Element | null;
+export default function AllocationSelector({ model, allocation, }?: {
+    /** The model a session owns, which decides whether it bills an allocation. */
+    model?: string | null | undefined;
+    /** The allocation a session owns, in place of the chat's own selection. */
+    allocation?: BoundSetting | undefined;
+}): import("react").JSX.Element | null;

package/dist/ai/components/AllocationSelector.js

@@ -15,22 +15,28 @@ var dollars = new Intl.NumberFormat(void 0, {
 var money = (amount) => dollars.format(amount);
 /** Which allocation an organization model bills, with its spend so far. Shows
 *  only for an organization model, and picks the first allocation for it. */
-function AllocationSelector() {
-	const { adapter, selectedProvider, selectedAllocation, setSelectedAllocation } = useChat();
+function AllocationSelector({ model, allocation } = {}) {
+	const chat = useChat();
 	const t = useChatConfig().strings.allocationPicker;
+	const { adapter } = chat;
+	const bound = allocation !== void 0;
+	const selectedProvider = bound ? model ?? null : chat.selectedProvider;
+	const selectedAllocation = bound ? allocation.value ?? null : chat.selectedAllocation;
 	const isOrgProvider = isOrgModel(selectedProvider);
 	const allocationsAdapter = adapter.allocations;
 	const { data: allocations } = useSWR(isOrgProvider && allocationsAdapter ? ["ai-chat-allocations"] : null, () => allocationsAdapter?.list());
 	const first = allocations?.[0];
 	useEffect(() => {
+		if (bound) return;
 		if (!isOrgProvider) {
-			if (selectedAllocation) setSelectedAllocation(null);
-		} else if (first && !selectedAllocation) setSelectedAllocation(first.name);
+			if (selectedAllocation) chat.setSelectedAllocation(null);
+		} else if (first && !selectedAllocation) chat.setSelectedAllocation(first.name);
 	}, [
+		bound,
 		isOrgProvider,
 		first,
 		selectedAllocation,
-		setSelectedAllocation
+		chat.setSelectedAllocation
 	]);
 	if (!isOrgProvider || !allocations?.length) return null;
 	const selected = allocations.find((a) => a.name === selectedAllocation);
@@ -43,7 +49,8 @@ function AllocationSelector() {
 				label: a.name
 			})),
 			value: selectedAllocation,
-			onValueChange: setSelectedAllocation,
+			disabled: !!allocation?.disabled,
+			onValueChange: (name) => bound ? name && allocation.onChange(name) : chat.setSelectedAllocation(name),
 			trigger: /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				className: chipClassName,

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

@@ -42,6 +42,9 @@ interface ChatInputProps {
         onStop: () => void;
         stopping?: boolean;
     };
+    /** False where the chat's tools do not apply, such as starting an agent
+     *  session, which brings its own. */
+    tools?: boolean;
     pastes?: ComposerPastes | undefined;
     ref?: Ref<ChatInputHandle> | undefined;
 }
@@ -49,5 +52,5 @@ export interface ChatInputHandle {
     addFiles: (files: FileList | File[]) => void;
     focus: () => void;
 }
-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 default function ChatInput({ onSend, disabled, placeholder, conversationId, onEditLastMessage, allowEmpty, attachments: attachmentsWanted, requireModel, inputLabel, sendLabel, sendTestId, slash, notices, activity, context, reserveContext, settingsLeft, settingsRight, hint, turn, tools: toolsAllowed, pastes, ref, }: ChatInputProps): import("react").JSX.Element;
 export {};

package/dist/ai/components/ChatInput.js

@@ -58,7 +58,7 @@ function fitToContent(el) {
 	el.style.height = `${el.scrollHeight}px`;
 }
 var draftsSwept = false;
-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, tools: toolsAllowed = true, pastes, ref }) {
 	const [input, setInput] = useState(() => readDraft(conversationId));
 	useEffect(() => {
 		if (!draftsSwept) {
@@ -186,7 +186,7 @@ function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEd
 		if (pastes && handleTextPaste(e.clipboardData.getData("text/plain"))) e.preventDefault();
 	};
 	const { isDragging, dragHandlers } = useDragDrop({ onFilesDropped: handleFilesDropped });
-	const toolsAvailable = !turn && tools.length > 0;
+	const toolsAvailable = toolsAllowed && !turn && tools.length > 0;
 	const toolbar = attachmentsAvailable || toolsAvailable || !!settingsRight;
 	const action = isStreaming && !input.trim() ? /* @__PURE__ */ jsx("button", {
 		type: "button",
@@ -275,7 +275,7 @@ function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEd
 									attachmentsOpen: showAttachments && attachmentsAvailable,
 									onToggleAttachments: attachmentsAvailable ? () => setShowAttachments(!showAttachments) : void 0,
 									disabled,
-									withTools: !turn
+									withTools: toolsAllowed && !turn
 								}), /* @__PURE__ */ jsxs("div", {
 									className: "ml-auto flex min-w-0 items-center gap-1",
 									children: [/* @__PURE__ */ jsx("div", {

package/dist/ai/components/ChatMessage.js

@@ -85,19 +85,57 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 		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-3 w-full", !flush && "px-4"),
-		children: /* @__PURE__ */ jsx(AgentMessageParts, {
-			message,
-			isStreaming,
-			onApprovalAnswer
-		})
+	const timestamp = parseTimestamp(message.timestamp);
+	const totalTokens = message.tokensUsed?.total_tokens;
+	const meta = (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", "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 }),
+			!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
+		]
 	});
+	const hasParts = !!message.parts?.length;
+	if (hasParts && !message.content) {
+		const said = message.parts?.flatMap((p) => p.kind === "text" && p.text.trim() ? [p.text.trim()] : []).join("\n\n");
+		return /* @__PURE__ */ jsxs("div", {
+			className: cx("group py-3 w-full", !flush && "px-4"),
+			children: [/* @__PURE__ */ jsx(AgentMessageParts, {
+				message,
+				isStreaming,
+				onApprovalAnswer
+			}), !isUser && !isStreaming && (said || onRegenerate || meta) && /* @__PURE__ */ jsxs("div", {
+				className: "chat-actions -ml-1.5 mt-2 flex items-center gap-0.5",
+				children: [
+					said && /* @__PURE__ */ jsx(CopyButton, {
+						text: said,
+						label: t.copyLabel,
+						quiet: true,
+						size: "md",
+						className: actionClasses
+					}),
+					onRegenerate && /* @__PURE__ */ jsx(IconButton, {
+						label: t.regenerate,
+						onClick: () => onRegenerate(message.id),
+						size: "md",
+						className: actionClasses,
+						icon: /* @__PURE__ */ jsx(RetryIcon, {})
+					}),
+					onNavigateBranch && /* @__PURE__ */ jsx(BranchNavigator, {
+						messages: allMessages,
+						currentMessageId: message.id,
+						onNavigate: onNavigateBranch
+					}),
+					meta
+				]
+			})]
+		});
+	}
 	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 && !latest;
 	return /* @__PURE__ */ jsx("div", {
 		role: "none",
@@ -246,17 +284,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 								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-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 }),
-									!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
-								]
-							})
+							meta
 						]
 					})
 				]

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

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import type { ApprovalAnswerValue, ChatMessage as Message } from '../types.js';
+export type QueueDelivery = 'afterReply' | 'nextStep';
 interface ChatMessageListProps {
     messages: Message[];
     allMessages: Message[];
@@ -13,8 +14,9 @@ interface ChatMessageListProps {
     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';
+     *  host that steers the turn in progress. A host with both kinds says which
+     *  each message is. */
+    queueDelivery?: QueueDelivery | ((messageId: string) => QueueDelivery);
     editingMessageId?: string | null | undefined;
     showAuthor?: boolean;
     currentUsername?: string;

package/dist/ai/components/ChatMessageList.js

@@ -253,7 +253,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage: streamingMes
 					}, "streaming"),
 					queuedMessages?.map((msg) => {
 						const removable = canRemoveQueued?.(msg.id) ?? true;
-						const status = !removable ? strings.queue.handedOver : queueDelivery === "nextStep" ? strings.queue.waitingNextStep : strings.queue.waiting;
+						const status = !removable ? strings.queue.handedOver : (typeof queueDelivery === "function" ? queueDelivery(msg.id) : 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, {

package/dist/ai/components/ChatThread.js

@@ -1,19 +1,14 @@
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import BlockedGroupBanner from "./BlockedGroupBanner.js";
-import useDragDrop from "../core/useDragDrop.js";
 import { ComposerControls, ComposerUsage, ConnectToolsLink } from "./ComposerChrome.js";
-import DragOverlay from "./DragOverlay.js";
-import ChatInput from "./ChatInput.js";
 import ProviderIssueBanner from "./ProviderIssueBanner.js";
 import { ShareButton } from "./ShareDialog.js";
-import ChatMessageList from "./ChatMessageList.js";
+import SessionView from "./SessionView.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 //#region src/ai/components/ChatThread.tsx
 function ChatThread({ conversationId }) {
-	const chatInputRef = useRef(null);
-	const [editingState, setEditingState] = useState(null);
 	const { adapter, currentUser, currentConversation, loadConversation, loadProviders, sendMessage, retryMessage, isLoadingConversation, navigateToBranch, queuedMessages, removeQueuedMessage } = useChat();
 	const { slots, strings } = useChatConfig();
 	const requestedConversationIdRef = useRef(null);
@@ -28,98 +23,46 @@ function ChatThread({ conversationId }) {
 		loadConversation,
 		loadProviders
 	]);
-	const handleSendMessage = useCallback((content, attachmentIds, attachmentMeta) => {
+	const messages = currentConversation?.messages ?? [];
+	const canWrite = currentConversation?.canCollaborate !== false;
+	const onSend = useCallback((content, attachmentIds, attachmentMeta) => {
 		sendMessage(content, attachmentIds, void 0, attachmentMeta);
 	}, [sendMessage]);
-	const handleEditMessage = useCallback((messageId) => {
-		const message = (currentConversation?.messages || []).find((m) => m.id === messageId);
-		if (message && message.role === "user") setEditingState({
-			messageId: message.id,
-			parentId: message.parentId || null
-		});
-	}, [currentConversation?.messages]);
-	const handleSaveEdit = useCallback((_messageId, content) => {
-		if (!editingState) return;
-		sendMessage(content, void 0, editingState.parentId || void 0);
-		setEditingState(null);
-	}, [sendMessage, editingState]);
-	const handleCancelEdit = useCallback(() => {
-		setEditingState(null);
-	}, []);
-	const handleEditLastMessage = useCallback(() => {
-		const lastUserMessage = (currentConversation?.messages || []).findLast((m) => m.role === "user");
-		if (lastUserMessage) handleEditMessage(lastUserMessage.id);
-	}, [currentConversation?.messages, handleEditMessage]);
-	const handleNavigateBranch = useCallback((messageId) => {
-		navigateToBranch?.(messageId);
-	}, [navigateToBranch]);
-	const handleRegenerateMessage = useCallback((messageId) => {
-		const conversationMessages = currentConversation?.messages || [];
-		const assistantMessage = conversationMessages.find((m) => m.id === messageId);
-		if (assistantMessage?.role !== "assistant") return;
-		const userMessage = conversationMessages.find((m) => m.id === assistantMessage.parentId);
-		if (userMessage?.role !== "user") return;
-		sendMessage(userMessage.content || "", userMessage.attachments?.map((a) => a.id), userMessage.parentId || void 0);
-	}, [currentConversation?.messages, sendMessage]);
-	const handleRetryMessage = useCallback((messageId) => {
-		retryMessage(messageId);
-	}, [retryMessage]);
-	const handleFilesDropped = useCallback((files) => {
-		chatInputRef.current?.addFiles(files);
-	}, []);
-	const { isDragging, dragHandlers } = useDragDrop({ onFilesDropped: handleFilesDropped });
-	const attachmentsAvailable = !!adapter.attachments;
-	const messages = currentConversation?.messages || [];
+	const onEdit = useCallback((message, content) => {
+		sendMessage(content, void 0, message.parentId || void 0);
+	}, [sendMessage]);
+	const onRegenerate = useCallback((messageId) => {
+		const reply = messages.find((m) => m.id === messageId);
+		const asked = messages.find((m) => m.id === reply?.parentId);
+		if (reply?.role !== "assistant" || asked?.role !== "user") return;
+		sendMessage(asked.content || "", asked.attachments?.map((a) => a.id), asked.parentId || void 0);
+	}, [messages, sendMessage]);
 	const showAuthor = useMemo(() => {
 		return new Set(messages.flatMap((m) => m.author ? [m.author.username] : [])).size > 1 || currentConversation?.isOwner === false;
 	}, [messages, currentConversation?.isOwner]);
-	if (isLoadingConversation && !currentConversation) return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col h-full bg-(--theme-panel-bg)",
-		children: [/* @__PURE__ */ jsx("div", { className: "flex-1" }), /* @__PURE__ */ jsx(ChatInput, {
-			ref: chatInputRef,
-			onSend: handleSendMessage,
-			disabled: true,
-			conversationId,
-			settingsLeft: /* @__PURE__ */ jsx(ConnectToolsLink, {}),
+	return /* @__PURE__ */ jsx(SessionView, {
+		sessionKey: conversationId,
+		messages,
+		queuedMessages,
+		onRemoveQueued: removeQueuedMessage,
+		onSend,
+		...canWrite ? {
+			onEdit,
+			onRegenerate,
+			onRetry: (id) => void retryMessage(id)
+		} : {},
+		onNavigateBranch: navigateToBranch,
+		showAuthor,
+		currentUsername: currentUser.username,
+		loading: isLoadingConversation && !currentConversation,
+		dropFiles: !!adapter.attachments,
+		banners: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BlockedGroupBanner, {}), /* @__PURE__ */ jsx(ProviderIssueBanner, {})] }),
+		composer: {
+			disabled: isLoadingConversation || !canWrite,
+			...canWrite ? {} : { placeholder: strings.thread.viewOnly },
+			settingsLeft: /* @__PURE__ */ jsxs(Fragment, { children: [currentConversation && currentConversation.isOwner !== false && /* @__PURE__ */ jsx(ShareButton, { conversationId }), /* @__PURE__ */ jsx(ConnectToolsLink, {})] }),
 			settingsRight: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, {})] })
-		})]
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className: "flex h-full relative bg-(--theme-panel-bg)",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex-1 flex flex-col min-w-0",
-			...attachmentsAvailable ? dragHandlers : {},
-			children: [
-				isDragging && attachmentsAvailable && /* @__PURE__ */ jsx(DragOverlay, { className: "rounded-lg" }),
-				/* @__PURE__ */ jsx(BlockedGroupBanner, {}),
-				/* @__PURE__ */ jsx(ProviderIssueBanner, {}),
-				/* @__PURE__ */ jsx(ChatMessageList, {
-					messages,
-					allMessages: messages,
-					queuedMessages,
-					onRemoveQueued: removeQueuedMessage,
-					editingMessageId: editingState?.messageId,
-					showAuthor,
-					currentUsername: currentUser.username,
-					onNavigateBranch: handleNavigateBranch,
-					onEditMessage: currentConversation?.canCollaborate !== false ? handleEditMessage : void 0,
-					onRegenerateMessage: currentConversation?.canCollaborate !== false ? handleRegenerateMessage : void 0,
-					onRetryMessage: currentConversation?.canCollaborate !== false ? handleRetryMessage : void 0,
-					onSaveEdit: handleSaveEdit,
-					onCancelEdit: handleCancelEdit,
-					inputElement: /* @__PURE__ */ jsx(ChatInput, {
-						ref: chatInputRef,
-						onSend: handleSendMessage,
-						disabled: isLoadingConversation || currentConversation?.canCollaborate === false,
-						placeholder: currentConversation?.canCollaborate === false ? strings.thread.viewOnly : void 0,
-						conversationId,
-						onEditLastMessage: handleEditLastMessage,
-						settingsLeft: /* @__PURE__ */ jsxs(Fragment, { children: [currentConversation?.isOwner !== false && /* @__PURE__ */ jsx(ShareButton, { conversationId }), /* @__PURE__ */ jsx(ConnectToolsLink, {})] }),
-						settingsRight: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, {})] })
-					})
-				})
-			]
-		})
+		}
 	});
 }
 //#endregion

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { BoundSetting } from '../types.js';
 /** Where the turn runs, sitting above the composer the way the terminal shows
  *  it: the machine, the workspace, and whatever else names the place. */
 export declare function ComposerContext({ children }: {
@@ -19,8 +20,12 @@ export declare function ComposerUsage({ children }: {
 }): import("react").JSX.Element | null;
 /** The two selectors every surface carries, reading as text beside whatever
  *  the surface puts next to them. */
-export declare function ComposerControls({ targetSession }: {
+export declare function ComposerControls({ targetSession, model, allocation, }: {
     targetSession?: string | null | undefined;
+    /** A session's own model and allocation, for a session that keeps them
+     *  apart from the chat's selection. */
+    model?: BoundSetting | undefined;
+    allocation?: BoundSetting | undefined;
 }): import("react").JSX.Element;
 /** Where the reader manages the providers behind the model picker, at the
  *  foot of a conversation list. */

package/dist/ai/components/ComposerChrome.js

@@ -40,8 +40,14 @@ function ComposerUsage({ children }) {
 }
 /** The two selectors every surface carries, reading as text beside whatever
 *  the surface puts next to them. */
-function ComposerControls({ targetSession }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ModelSelector, { targetSession }), /* @__PURE__ */ jsx(AllocationSelector, {})] });
+function ComposerControls({ targetSession, model, allocation }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ModelSelector, {
+		targetSession,
+		model
+	}), /* @__PURE__ */ jsx(AllocationSelector, { ...allocation ? {
+		allocation,
+		model: model ? model.value : void 0
+	} : {} })] });
 }
 /** Where the reader manages the providers behind the model picker, at the
 *  foot of a conversation list. */

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

@@ -1,8 +1,11 @@
+import type { BoundSetting } from '../types.js';
 export declare function getProviderKeyFromModelId(modelId: string): string;
 /** Picks the model a conversation runs on, grouped by provider. Sessions that
  *  are still connecting or not responding show as headings with their status,
  *  so the reader sees why their models are missing. */
-export default function ModelSelector({ targetSession, }: {
+export default function ModelSelector({ targetSession, model, }: {
     /** A session, as "owner:name", whose models the reader is waiting for. */
     targetSession?: string | null | undefined;
+    /** The model a session owns, in place of the chat's own selection. */
+    model?: BoundSetting | undefined;
 }): import("react").JSX.Element;

package/dist/ai/components/ModelSelector.js

@@ -50,11 +50,12 @@ function groupModelsByProvider(models) {
 /** Picks the model a conversation runs on, grouped by provider. Sessions that
 *  are still connecting or not responding show as headings with their status,
 *  so the reader sees why their models are missing. */
-function ModelSelector({ targetSession }) {
-	const { providers, models, unreachableSessions, providerIssues, selectedProvider, setSelectedProvider, isLoadingModels, hasLoadedModels, modelsError, refreshModels, currentUser } = useChat();
+function ModelSelector({ targetSession, model }) {
+	const { providers, models, unreachableSessions, providerIssues, selectedProvider: chatSelection, setSelectedProvider, isLoadingModels, hasLoadedModels, modelsError, refreshModels, currentUser } = useChat();
 	const { strings } = useChatConfig();
 	const { common } = useStrings();
 	const t = strings.modelPicker;
+	const selectedProvider = model ? model.value ?? null : chatSelection;
 	const targetSessionFound = !!targetSession && models.some((m) => m.id.startsWith(`session:${targetSession}/`));
 	const targetSessionStatus = !targetSession ? null : isLoadingModels ? "connecting" : hasLoadedModels && !targetSessionFound ? "offline" : null;
 	const groups = useMemo(() => {
@@ -128,8 +129,8 @@ function ModelSelector({ targetSession }) {
 		placeholder: t.search,
 		items: groups,
 		value: selectedProvider,
-		onValueChange: (id) => id && setSelectedProvider(id),
-		disabled: groups.length === 0,
+		onValueChange: (id) => id && (model ? model.onChange(id) : setSelectedProvider(id)),
+		disabled: groups.length === 0 || !!model?.disabled,
 		triggerTooltip: issue ? `${issueLabel(strings.providerIssue, issue)} \u2014 ${issueDetail(strings.providerIssue, issue)}` : void 0,
 		trigger: /* @__PURE__ */ jsxs("button", {
 			type: "button",

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

@@ -0,0 +1,56 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { ApprovalAnswerValue, AttachmentMeta, ChatMessage as Message } from '../types.js';
+import ChatInput from './ChatInput.js';
+import ChatMessageList from './ChatMessageList.js';
+type ComposerProps = Omit<ComponentProps<typeof ChatInput>, 'ref' | 'onSend' | 'turn' | 'conversationId' | 'onEditLastMessage'>;
+type ListProps = ComponentProps<typeof ChatMessageList>;
+export interface SessionViewProps {
+    /** Keys the composer's draft, so each conversation or session keeps its own. */
+    sessionKey: string;
+    messages: Message[];
+    /** Every message branch navigation and turn attribution look through;
+     *  defaults to `messages`. */
+    allMessages?: Message[];
+    streamingMessage?: Message | null;
+    queuedMessages?: Message[];
+    onRemoveQueued?: (id: string) => void;
+    canRemoveQueued?: (id: string) => boolean;
+    queueDelivery?: ListProps['queueDelivery'];
+    /** A turn the chat provider does not run, such as an agent session's: it
+     *  drives the composer's Stop and Escape in place of the provider's stream. */
+    turn?: {
+        running: boolean;
+        onStop: () => void;
+        stopping?: boolean;
+    };
+    onSend: (content: string, attachmentIds?: string[], attachmentMeta?: AttachmentMeta) => void;
+    /** Resends an edited user message as a new branch. Without it, messages
+     *  cannot be edited. */
+    onEdit?: (message: Message, content: string) => void;
+    onRegenerate?: (messageId: string) => void;
+    onRetry?: (messageId: string) => void;
+    onNavigateBranch?: (messageId: string) => void;
+    onApprovalAnswer?: (id: string, answer: ApprovalAnswerValue) => void;
+    showAuthor?: boolean;
+    currentUsername?: string;
+    /** Shown above the transcript, such as a blocked allocation or an
+     *  unreachable machine. */
+    banners?: ReactNode;
+    /** In place of the transcript, such as a failed load with a way to retry. */
+    error?: ReactNode;
+    /** Still loading the first messages: the transcript stays empty and the
+     *  composer disabled. */
+    loading?: boolean;
+    /** Files dropped anywhere on the view go to the composer's attachments. */
+    dropFiles?: boolean;
+    footer?: ReactNode;
+    label?: string;
+    flush?: boolean;
+    workingIndicator?: boolean;
+    composer?: ComposerProps;
+}
+/** One conversation or agent session: its transcript, with the composer at
+ *  the foot of the scrolling column. The host binds its own data and actions;
+ *  what it leaves out (editing, regenerating, branches) the view leaves out. */
+export default function SessionView({ sessionKey, messages, allMessages, streamingMessage, queuedMessages, onRemoveQueued, canRemoveQueued, queueDelivery, turn, onSend, onEdit, onRegenerate, onRetry, onNavigateBranch, onApprovalAnswer, showAuthor, currentUsername, banners, error, loading, dropFiles, footer, label, flush, workingIndicator, composer, }: SessionViewProps): import("react").JSX.Element;
+export {};

package/dist/ai/components/SessionView.js

@@ -0,0 +1,99 @@
+import { useChat } from "../core/ChatProvider.js";
+import useDragDrop from "../core/useDragDrop.js";
+import DragOverlay from "./DragOverlay.js";
+import ChatInput from "./ChatInput.js";
+import { escapeClosesLayer } from "../core/useKeyboardShortcuts.js";
+import ChatMessageList from "./ChatMessageList.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/ai/components/SessionView.tsx
+/** One conversation or agent session: its transcript, with the composer at
+*  the foot of the scrolling column. The host binds its own data and actions;
+*  what it leaves out (editing, regenerating, branches) the view leaves out. */
+function SessionView({ sessionKey, messages, allMessages, streamingMessage, queuedMessages, onRemoveQueued, canRemoveQueued, queueDelivery, turn, onSend, onEdit, onRegenerate, onRetry, onNavigateBranch, onApprovalAnswer, showAuthor, currentUsername, banners, error, loading = false, dropFiles = false, footer, label, flush, workingIndicator, composer }) {
+	const inputRef = useRef(null);
+	const [editingId, setEditingId] = useState(null);
+	const { isStreaming: providerStreaming, stopStreaming } = useChat();
+	const running = turn ? turn.running : providerStreaming;
+	const stop = turn ? turn.onStop : stopStreaming;
+	useEffect(() => {
+		if (!running) return;
+		const onKeyDown = (e) => {
+			if (e.key === "Escape" && !e.defaultPrevented && !escapeClosesLayer(e.target)) stop();
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [running, stop]);
+	const editable = (id) => messages.find((m) => m.id === id && m.role === "user");
+	const startEdit = useCallback((id) => {
+		if (messages.some((m) => m.id === id && m.role === "user")) setEditingId(id);
+	}, [messages]);
+	const editLast = useCallback(() => {
+		const last = messages.findLast((m) => m.role === "user");
+		if (last) setEditingId(last.id);
+	}, [messages]);
+	const onFilesDropped = useCallback((files) => {
+		inputRef.current?.addFiles(files);
+	}, []);
+	const { isDragging, dragHandlers } = useDragDrop({ onFilesDropped });
+	const input = /* @__PURE__ */ jsx(ChatInput, {
+		ref: inputRef,
+		...composer,
+		onSend,
+		conversationId: sessionKey,
+		disabled: loading || !!composer?.disabled,
+		...turn ? { turn } : {},
+		...onEdit ? { onEditLastMessage: editLast } : {}
+	});
+	if (loading && !error) return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full flex-col bg-(--theme-panel-bg)",
+		children: [
+			banners,
+			/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+			input
+		]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative flex h-full bg-(--theme-panel-bg)",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col",
+			...dropFiles ? dragHandlers : {},
+			children: [
+				isDragging && dropFiles && /* @__PURE__ */ jsx(DragOverlay, { className: "rounded-lg" }),
+				banners,
+				error ?? /* @__PURE__ */ jsx(ChatMessageList, {
+					messages,
+					allMessages: allMessages ?? messages,
+					...streamingMessage !== void 0 ? { streamingMessage } : {},
+					...queuedMessages ? { queuedMessages } : {},
+					...onRemoveQueued ? { onRemoveQueued } : {},
+					...canRemoveQueued ? { canRemoveQueued } : {},
+					...queueDelivery ? { queueDelivery } : {},
+					...turn ? { isStreaming: turn.running } : {},
+					editingMessageId: editingId,
+					...showAuthor !== void 0 ? { showAuthor } : {},
+					...currentUsername ? { currentUsername } : {},
+					...onNavigateBranch ? { onNavigateBranch } : {},
+					onEditMessage: onEdit ? startEdit : void 0,
+					onSaveEdit: (id, content) => {
+						const message = editable(id);
+						if (message && onEdit) onEdit(message, content);
+						setEditingId(null);
+					},
+					onCancelEdit: () => setEditingId(null),
+					onRegenerateMessage: onRegenerate,
+					onRetryMessage: onRetry,
+					...onApprovalAnswer ? { onApprovalAnswer } : {},
+					...footer ? { footer } : {},
+					...label ? { label } : {},
+					...flush ? { flush } : {},
+					...workingIndicator !== void 0 ? { workingIndicator } : {},
+					inputElement: input
+				}),
+				error && input
+			]
+		})
+	});
+}
+//#endregion
+export { SessionView as default };

package/dist/ai/core/useKeyboardShortcuts.js

@@ -44,10 +44,6 @@ function useKeyboardShortcuts(options = {}) {
 		if (!enabled) return;
 		const handleKeyDown = (e) => {
 			const cmdKey = isMac() ? e.metaKey : e.ctrlKey;
-			if (e.key === "Escape") {
-				if (!escapeClosesLayer(e.target)) handleStopGeneration();
-				return;
-			}
 			if (cmdKey && e.shiftKey && e.key === "O") {
 				e.preventDefault();
 				handleNewConversation();
@@ -69,8 +65,7 @@ function useKeyboardShortcuts(options = {}) {
 	}, [
 		enabled,
 		handleNewConversation,
-		handleCopyLastResponse,
-		handleStopGeneration
+		handleCopyLastResponse
 	]);
 	return {
 		getLastUserMessage,

package/dist/ai/index.d.ts

@@ -21,6 +21,7 @@ export { type ConversationGroupKey, groupConversationsByDate, useConversationAct
 export { default as DragOverlay } from './components/DragOverlay.js';
 export { default as ModelSelector, getProviderKeyFromModelId, } from './components/ModelSelector.js';
 export { default as ProviderIssueBanner } from './components/ProviderIssueBanner.js';
+export { default as SessionView, type SessionViewProps } from './components/SessionView.js';
 export { default as ShareDialog, ShareButton, } from './components/ShareDialog.js';
 export { type SlashCommandOption, type SlashMenuConfig, slashMatches, } from './components/SlashMenu.js';
 export type { ComposerPastes, PasteUploadResult, } from './components/usePasteCards.js';

package/dist/ai/index.js

@@ -43,6 +43,7 @@ import ChatSidebar from "./components/ChatSidebar.js";
 import ChatLayout, { CHAT_COLUMN_SCOPE, ConversationLayout, DRAWER_BELOW_PX } from "./components/ChatLayout.js";
 import ChatMessage_default from "./components/ChatMessage.js";
 import ChatMessageList from "./components/ChatMessageList.js";
+import SessionView from "./components/SessionView.js";
 import ChatThread from "./components/ChatThread.js";
 import { NoticeBar, NoticeCard, OutputCard } from "./ui/Notice.js";
-export { AGENT_COLOR_NAMES, ActivityLine, AgentMessageParts, AllocationSelector, ApprovalBlock, AttachmentManager, AttachmentUpload, BlockedGroupBanner, BranchNavigator, CHAT_COLUMN_SCOPE, ChatAdapterError, ChatEmptyState, ChatInput, ChatLayout, ChatMessageList, ChatMessage_default as ChatMessageView, ChatProvider, ChatSidebar, ChatStage, ChatThread, ComposerContext, ComposerControls, ComposerSettings, ComposerUsage, ConnectToolsLink, ConversationLayout, ConversationSidebar, DEFAULT_PERMISSION_MODE, DRAWER_BELOW_PX, DragOverlay, FOCUS_SIDEBAR_SEARCH_EVENT, INTERRUPTED_NOTICE, KeyboardShortcutsProvider, MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, ManageProvidersLink, ModelSelector, NAMED_PERMISSION_MODES, NoticeBar, NoticeCard, OutputCard, PermissionPicker, ProviderIssueBanner, RenameDialog, ShareButton, ShareDialog, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarRowTitle, SidebarToggle, agentColorHex, agentTypeLabel, applyPartDelta, askQuestionFromArgs, bashExitCode, chatReducer, clampPermissionMode, classifyPseudoUserMessage, clip, computeEditDiff, computeWriteRows, defaultChatStrings, defaultToolStrings, editSummary, finalizeParts, firstNonEmptyLine, fullToolArgs, getGreeting, getProviderKeyFromModelId, groupConversationsByDate, hiddenTranscriptTool, initialState, interruptionNotice, isEditDiffTool, isGroupableTool, isMac, isNamedPermissionMode, isOrgModel, languageForPath, lineDelta, parseEditArgs, parseSubagentNotice, pasteInlineMaxBytes, permissionModesUpTo, planFromArgs, providerIssueFor, resolveChatConfig, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, sidebarDrawerProps, slashMatches, subagentDeliveryLine, summarizeToolArgs, taskCallFromArgs, thinkingHeading, tokenizeDiffLines, toolHeaderFor, toolSummary, useChat, useChatConfig, useChatStream, useConversationActions, useDragDrop, useKeyboardShortcuts, useRowDialogs, wordEmphasisRanges };
+export { AGENT_COLOR_NAMES, ActivityLine, AgentMessageParts, AllocationSelector, ApprovalBlock, AttachmentManager, AttachmentUpload, BlockedGroupBanner, BranchNavigator, CHAT_COLUMN_SCOPE, ChatAdapterError, ChatEmptyState, ChatInput, ChatLayout, ChatMessageList, ChatMessage_default as ChatMessageView, ChatProvider, ChatSidebar, ChatStage, ChatThread, ComposerContext, ComposerControls, ComposerSettings, ComposerUsage, ConnectToolsLink, ConversationLayout, ConversationSidebar, DEFAULT_PERMISSION_MODE, DRAWER_BELOW_PX, DragOverlay, FOCUS_SIDEBAR_SEARCH_EVENT, INTERRUPTED_NOTICE, KeyboardShortcutsProvider, MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, ManageProvidersLink, ModelSelector, NAMED_PERMISSION_MODES, NoticeBar, NoticeCard, OutputCard, PermissionPicker, ProviderIssueBanner, RenameDialog, SessionView, ShareButton, ShareDialog, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarRowTitle, SidebarToggle, agentColorHex, agentTypeLabel, applyPartDelta, askQuestionFromArgs, bashExitCode, chatReducer, clampPermissionMode, classifyPseudoUserMessage, clip, computeEditDiff, computeWriteRows, defaultChatStrings, defaultToolStrings, editSummary, finalizeParts, firstNonEmptyLine, fullToolArgs, getGreeting, getProviderKeyFromModelId, groupConversationsByDate, hiddenTranscriptTool, initialState, interruptionNotice, isEditDiffTool, isGroupableTool, isMac, isNamedPermissionMode, isOrgModel, languageForPath, lineDelta, parseEditArgs, parseSubagentNotice, pasteInlineMaxBytes, permissionModesUpTo, planFromArgs, providerIssueFor, resolveChatConfig, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, sidebarDrawerProps, slashMatches, subagentDeliveryLine, summarizeToolArgs, taskCallFromArgs, thinkingHeading, tokenizeDiffLines, toolHeaderFor, toolSummary, useChat, useChatConfig, useChatStream, useConversationActions, useDragDrop, useKeyboardShortcuts, useRowDialogs, wordEmphasisRanges };

package/dist/ai/types.d.ts

@@ -1,3 +1,10 @@
+/** A turn setting a session owns, shown in place of the chat's own selection. */
+export interface BoundSetting {
+    value: string | null | undefined;
+    onChange: (value: string) => void;
+    /** The session cannot take a change right now, such as while it is unreachable. */
+    disabled?: boolean | undefined;
+}
 export interface ChatUser {
     id: string;
     username: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.68.0",
+  "version": "0.69.0",
   "description": "React UI components: a theme contract, icons, brand logos, primitives, lists, forms, a job graph, a code editor, a log viewer, a file explorer and an AI chat, each on its own subpath",
   "license": "Apache-2.0",
   "repository": {