@parallelworks/ui 0.76.0 → 0.77.0

package/dist/ai/adapter/types.d.ts

@@ -28,6 +28,7 @@ export interface ToolApprovalAnswer {
     toolCallId: string;
     allowed: boolean;
     feedback?: string;
+    tool?: string;
 }
 export interface StreamHandlers {
     onContent: (content: string) => void;

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

@@ -0,0 +1,2 @@
+/** An agent session's working line for the provider's reply, naming its current step. */
+export default function ChatActivity(): import("react").JSX.Element | null;

package/dist/ai/components/ChatActivity.js

@@ -0,0 +1,31 @@
+import { toolHeaderFor } from "../agent/toolfmt.js";
+import { useChatConfig } from "../core/config.js";
+import { useChat, useChatStream } from "../core/ChatProvider.js";
+import ActivityLine from "./agent/ActivityLine.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { DateTime } from "luxon";
+//#region src/ai/components/ChatActivity.tsx
+/** An agent session's working line for the provider's reply, naming its current step. */
+function ChatActivity() {
+	const { isStreaming, tools } = useChat();
+	const { streamingParts } = useChatStream();
+	const { strings } = useChatConfig();
+	const [startedAt, setStartedAt] = useState(null);
+	useEffect(() => {
+		setStartedAt(isStreaming ? DateTime.now().toUTC().toISO() : null);
+	}, [isStreaming]);
+	if (!isStreaming) return null;
+	const waiting = streamingParts.some((p) => p.kind === "approval" && !p.resolved);
+	const running = streamingParts.findLast((p) => p.kind === "tool_call" && p.status === "running");
+	let word;
+	if (waiting) word = strings.activity.waitingForAnswer;
+	else if (running?.kind === "tool_call") word = tools.find((t) => t.id === running.name)?.label ?? toolHeaderFor(running.name).label;
+	return /* @__PURE__ */ jsx(ActivityLine, {
+		testId: "chat-activity",
+		startedAt,
+		word
+	});
+}
+//#endregion
+export { ChatActivity as default };

package/dist/ai/components/SessionView.js

@@ -4,6 +4,7 @@ import DragOverlay from "./DragOverlay.js";
 import ChatInput from "./ChatInput.js";
 import { escapeClosesLayer } from "../core/useKeyboardShortcuts.js";
 import ChatMessageList from "./ChatMessageList.js";
+import ChatActivity from "./ChatActivity.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 //#region src/ai/components/SessionView.tsx
@@ -36,9 +37,11 @@ function SessionView({ sessionKey, messages, allMessages, streamingMessage, queu
 		inputRef.current?.addFiles(files);
 	}, []);
 	const { isDragging, dragHandlers } = useDragDrop({ onFilesDropped });
+	const activity = composer?.activity ?? (!turn && running ? /* @__PURE__ */ jsx(ChatActivity, {}) : void 0);
 	const input = /* @__PURE__ */ jsx(ChatInput, {
 		ref: inputRef,
 		...composer,
+		activity,
 		onSend,
 		conversationId: sessionKey,
 		disabled: loading || !!composer?.disabled,
@@ -87,7 +90,7 @@ function SessionView({ sessionKey, messages, allMessages, streamingMessage, queu
 					...footer ? { footer } : {},
 					...label ? { label } : {},
 					...flush ? { flush } : {},
-					...workingIndicator !== void 0 ? { workingIndicator } : {},
+					workingIndicator: workingIndicator ?? !activity,
 					inputElement: input
 				}),
 				error && input

package/dist/ai/components/agent/AgentMessageParts.d.ts

@@ -20,7 +20,7 @@ type RenderItem = {
     kind: 'rollup';
     members: RunMember[];
 };
-export declare function buildRenderItems(parts: MessagePart[]): RenderItem[];
+export declare function buildRenderItems(parts: MessagePart[], hostDrawn?: (toolName: string) => boolean): RenderItem[];
 export default function AgentMessageParts({ message, isStreaming, onApprovalAnswer, }: {
     message: PartRendererProps['message'];
     isStreaming?: boolean;

package/dist/ai/components/agent/AgentMessageParts.js

@@ -232,7 +232,10 @@ function ToolStatusDot({ part }) {
 }
 /** A part's toggle row: its status mark and name, across the transcript's width. */
 var rowSummaryClasses = "min-h-6 w-full";
-function ToolCallBlock({ part }) {
+/** A call's row: its status and signature, opening to its full arguments and
+*  result. `children` is a host's drawing of the call, in place of the
+*  one-line summary. */
+function ToolCallBlock({ part, children }) {
 	const { strings } = useChatConfig();
 	const t = strings.agentTranscript;
 	const [expanded, setExpanded] = useState(false);
@@ -279,7 +282,11 @@ function ToolCallBlock({ part }) {
 					children: fullToolArgs(header.arg, part.args)
 				}), /* @__PURE__ */ jsx(ResultBody, { part })]
 			}),
-			!isDiff && !expanded && part.status !== "waiting" && /* @__PURE__ */ jsx("div", {
+			children && /* @__PURE__ */ jsx("div", {
+				className: "ml-5 mt-1.5 min-w-0",
+				children
+			}),
+			!children && !isDiff && !expanded && part.status !== "waiting" && /* @__PURE__ */ jsx("div", {
 				className: cx("ml-5 mt-0.5 truncate text-[13px]", part.status === "error" ? "text-(--theme-error-text)" : "theme-muted-text"),
 				children: summary
 			}),
@@ -735,6 +742,21 @@ function TextBlock({ part, isStreaming }) {
 }
 function PartDispatch(props) {
 	const { slots } = useChatConfig();
+	const part = props.part;
+	const Tool = part.kind === "tool_call" ? slots.toolRenderers?.[part.name] : void 0;
+	if (Tool && part.kind === "tool_call") {
+		const approval = props.message.parts?.find((p) => p.kind === "approval" && p.id === part.id);
+		return /* @__PURE__ */ jsx(ToolCallBlock, {
+			part,
+			children: /* @__PURE__ */ jsx(Tool, {
+				part,
+				message: props.message,
+				...approval ? { approval } : {},
+				...props.isStreaming !== void 0 ? { isStreaming: props.isStreaming } : {},
+				...props.onApprovalAnswer ? { onApprovalAnswer: props.onApprovalAnswer } : {}
+			})
+		});
+	}
 	const Override = slots.partRenderers?.[props.part.kind];
 	if (Override) return /* @__PURE__ */ jsx(Override, { ...props });
 	return /* @__PURE__ */ jsx(BuiltinPart, {
@@ -783,7 +805,7 @@ function mergeReasoning(parts) {
 		...durationMs > 0 ? { durationMs } : {}
 	};
 }
-function buildRenderItems(parts) {
+function buildRenderItems(parts, hostDrawn = () => false) {
 	const items = [];
 	let run = [];
 	const emitThoughts = (members) => {
@@ -825,9 +847,11 @@ function buildRenderItems(parts) {
 		run = [];
 	};
 	const decided = new Set(parts.flatMap((p) => p.kind === "tool_call" && p.decision ? [p.id] : []));
+	const drawnByHost = new Set(parts.flatMap((p) => p.kind === "tool_call" && hostDrawn(p.name) ? [p.id] : []));
 	parts.forEach((part, index) => {
 		if (part.kind === "approval" && part.resolved && decided.has(part.id)) return;
-		if (part.kind === "reasoning" || part.kind === "tool_call" && part.status === "ok" && !part.decision && isGroupableTool(part.name)) {
+		if (part.kind === "approval" && drawnByHost.has(part.id)) return;
+		if (part.kind === "reasoning" || part.kind === "tool_call" && part.status === "ok" && !part.decision && !drawnByHost.has(part.id) && isGroupableTool(part.name)) {
 			run.push({
 				part,
 				index
@@ -871,7 +895,9 @@ function RollupGroup({ members, message }) {
 }
 function AgentMessageParts({ message, isStreaming, onApprovalAnswer }) {
 	const parts = message.parts ?? [];
-	const items = useMemo(() => buildRenderItems(parts), [parts]);
+	const { slots } = useChatConfig();
+	const toolRenderers = slots.toolRenderers;
+	const items = useMemo(() => buildRenderItems(parts, (name) => !!toolRenderers?.[name]), [parts, toolRenderers]);
 	const lastIndex = parts.length - 1;
 	return /* @__PURE__ */ jsx("div", {
 		className: "w-full",

package/dist/ai/core/ChatProvider.js

@@ -637,6 +637,14 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 				at: DateTime.now().toUTC().toISO()
 			}
 		});
+		const instead = answer.allowed ? answer.instead : void 0;
+		if (instead) {
+			pausedParts = pausedParts.map((p) => p.kind === "tool_call" && p.id === approvalId ? {
+				...p,
+				name: instead
+			} : p);
+			updatePaused({ parts: pausedParts });
+		}
 		streamingToConversationRef.current = targetConversationId;
 		startStreaming(targetConversationId);
 		try {
@@ -652,7 +660,8 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 					messageId: paused.id,
 					toolCallId: approvalId,
 					allowed: answer.allowed,
-					...answer.denyMessage ? { feedback: answer.denyMessage } : {}
+					...answer.denyMessage ? { feedback: answer.denyMessage } : {},
+					...instead ? { tool: instead } : {}
 				}
 			}, paused.id, (message) => updatePaused({ error: message }), (delta) => {
 				if (delta.type !== "tool_end" || delta.id !== approvalId) return false;

package/dist/ai/core/config.d.ts

@@ -1,13 +1,21 @@
 import { type ComponentType, type MouseEventHandler, type ReactNode } from 'react';
 import type { Components } from 'streamdown';
 import { type ChatStrings } from '../strings.js';
-import type { ApprovalAnswerValue, ChatLinkTarget, ChatMessage, CspKind, MessagePart, MessagePartKind } from '../types.js';
+import type { ApprovalAnswerValue, ApprovalPart, ChatLinkTarget, ChatMessage, CspKind, MessagePart, MessagePartKind, ToolCallPart } from '../types.js';
 export interface PartRendererProps {
     part: MessagePart;
     message: ChatMessage;
     isStreaming?: boolean;
     onApprovalAnswer?: (id: string, answer: ApprovalAnswerValue) => void;
 }
+export interface ToolRendererProps {
+    part: ToolCallPart;
+    approval?: ApprovalPart;
+    message: ChatMessage;
+    isStreaming?: boolean;
+    /** Absent when the reader may not answer, such as a call someone else asked for. */
+    onApprovalAnswer?: (id: string, answer: ApprovalAnswerValue) => void;
+}
 export interface ChatLinkProps {
     target: ChatLinkTarget;
     className?: string;
@@ -27,6 +35,7 @@ export interface ChatUIConfig {
         composerUsage?: ReactNode;
         providerIcon?: (cspKind: CspKind, className?: string) => ReactNode;
         partRenderers?: Partial<Record<MessagePartKind, ComponentType<PartRendererProps>>>;
+        toolRenderers?: Record<string, ComponentType<ToolRendererProps>>;
     };
     strings?: {
         [S in keyof ChatStrings]?: Partial<ChatStrings[S]>;

package/dist/ai/index.d.ts

@@ -27,7 +27,7 @@ export { type SlashCommandOption, type SlashMenuConfig, slashMatches, } from './
 export type { ComposerPastes, PasteUploadResult, } from './components/usePasteCards.js';
 export { ChatProvider, type ChatProviderProps, type ChatStream, useChat, useChatStream, } from './core/ChatProvider.js';
 export { type ChatAction, type ChatState, chatReducer, initialState, } from './core/chatReducer.js';
-export type { PartRendererProps } from './core/config.js';
+export type { PartRendererProps, ToolRendererProps } from './core/config.js';
 export { type ChatLinkProps, type ChatUIConfig, resolveChatConfig, useChatConfig, } from './core/config.js';
 export { FOCUS_SIDEBAR_SEARCH_EVENT } from './core/events.js';
 export { getGreeting } from './core/greeting.js';

package/dist/ai/strings.d.ts

@@ -91,6 +91,8 @@ export interface ChatStrings {
         stop: string;
         /** The status words an agent's working line picks from, one per turn. */
         words: readonly string[];
+        /** The working line while a call waits for the reader to allow it. */
+        waitingForAnswer: string;
     };
     emptyState: {
         greeting: string | null;

package/dist/ai/strings.js

@@ -116,7 +116,8 @@ var defaultChatStrings = {
 			"Crunching",
 			"Forging",
 			"Cooking"
-		]
+		],
+		waitingForAnswer: "Waiting for your answer"
 	},
 	emptyState: {
 		greeting: null,

package/dist/ai/types.d.ts

@@ -100,6 +100,9 @@ export type ApprovalAnswerValue = {
     allowed: boolean;
     allowDir?: boolean;
     denyMessage?: string;
+    /** A sibling tool to run in place of the one asked for, with the same
+     *  arguments, such as destroying a cluster the model asked to stop. */
+    instead?: string;
 } | {
     kind: 'ask';
     text: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.76.0",
+  "version": "0.77.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": {