ui: Agentic Content UX improvements (#25450)
* feat: Add shimmer text animation for processing state indicators * feat: Redesign CollapsibleContentBlock component with improved UX * feat: Add conditional setting display support with dependsOn field * feat: Add showAgenticTurnStats setting for per-turn statistics * feat: Update ChatMessageAgenticContent with improved UI and new features * feat: Enhance file read tool UI/UX * feat: Refine styling of collapsible content and code preview blocks * feat: add terminal variant to CollapsibleContentBlock * feat: add built-in tools UI registry * feat: extract ChatMessageReasoningBlock and ChatMessageToolCallBlock * refactor: simplify ChatMessageAgenticContent to use extracted blocks * fix: correct markdown content block margin spacing * fix: reorganize SettingsChatFields layout and reset button positioning * fix: use direct map access in agentic store session methods * refactor: remove reasoning preview/throttle system from CollapsibleContentBlock * feat: add auto-scroll to reasoning block and remove showThoughtInProgress * feat: add ChatMessageToolCallDateTime component and support for new tool types * feat: improve auto-scroll reliability in reasoning block with RAF coalescing and MutationObserver * feat: show MCP server favicon for tools without a built-in icon * feat: add search-results parsing utilities and tests * feat: add ChatMessageToolCallSearchResults component * feat: integrate search results rendering into ChatMessageAgenticContent * feat: display tool call input alongside output in ChatMessageToolCallBlock * style: use muted foreground color in reasoning block content * chore: Format * feat: Refine reasoning block layout and make pending thoughts display configurable * feat: Stream tool call code blocks with auto-scroll and handle partial JSON * feat: add streaming permission gate infrastructure * feat: wire permission gate into the agentic loop * fix: bail out on abort and skip already-approved tool calls * fix: clear partial tool calls on abort and savePartialResponse * test: cover partial tool call cleanup end-to-end * refactor: Remove streaming permission gate logic * fix: Correct autoscroll and streaming gates for tool calls and reasoning blocks * refactor: Chat Message Assistant componentization * fix: Show health metadata for disabled MCP servers and promote connections on enable * fix: Inherit global enabled state for missing MCP per-chat overrides * refactor: Cleanup * refactor: Split ChatMessageToolCallBlock into dedicated components * feat: Add live streaming and auto-scroll for tool execution output * feat: Add line numbers and change markers to file edit diffs * chore: Formatting * feat: Add type definitions and utilities for recommended MCP servers * feat: Add recommended MCP servers configuration and storage key * feat: Add McpServerCardCompact component for recommended servers * feat: Add recommended servers section to Add New Server dialog * feat: Update McpServerForm to support authorization requirements * feat: Add select-none classes for text selection prevention * feat: Add recommended MCP server icon assets * refactor: Store dismissed MCP recommendations as a boolean flag * feat: Render tool results as JSON or Markdown based on detected content type * feat: UI improvement * feat: Render search block early and update heading to show execution state * fix: Prevent non-web-search tools from triggering the search UI block * refactor: Cleanup * refactor: Extract hardcoded icon size classes into shared constants * refactor: Extract hardcoded tool result separator into a shared constant * refactor: Tool Calls UI/logic * refactor: Cleanup * refactor: Cleanup * refactor: Cleanup
This commit is contained in:
Aleksander Grygier
@@ -26,12 +26,12 @@ import { mcpStore } from '$lib/stores/mcp.svelte';
|
||||
import { modelsStore } from '$lib/stores/models.svelte';
|
||||
import { toolsStore } from '$lib/stores/tools.svelte';
|
||||
import { permissionsStore } from '$lib/stores/permissions.svelte';
|
||||
import { ToolSource, ToolPermissionDecision } from '$lib/enums';
|
||||
import { BuiltInTool, ToolSource, ToolPermissionDecision } from '$lib/enums';
|
||||
import { SvelteMap } from 'svelte/reactivity';
|
||||
import { ToolsService } from '$lib/services/tools.service';
|
||||
import { SandboxService } from '$lib/services/sandbox.service';
|
||||
import { isAbortError } from '$lib/utils';
|
||||
import { DEFAULT_AGENTIC_CONFIG, NEWLINE_SEPARATOR } from '$lib/constants';
|
||||
import { DEFAULT_AGENTIC_CONFIG, NEWLINE } from '$lib/constants';
|
||||
import {
|
||||
IMAGE_MIME_TO_EXTENSION,
|
||||
DATA_URI_BASE64_REGEX,
|
||||
@@ -86,7 +86,8 @@ function createDefaultSession(): AgenticSession {
|
||||
totalToolCalls: 0,
|
||||
lastError: null,
|
||||
streamingToolCall: null,
|
||||
pendingPermissionRequest: null
|
||||
pendingPermissionRequest: null,
|
||||
executingToolCallId: null
|
||||
};
|
||||
}
|
||||
|
||||
@@ -187,23 +188,27 @@ class AgenticStore {
|
||||
}
|
||||
|
||||
isRunning(conversationId: string): boolean {
|
||||
return this.getSession(conversationId).isRunning;
|
||||
return this._sessions.get(conversationId)?.isRunning ?? false;
|
||||
}
|
||||
|
||||
currentTurn(conversationId: string): number {
|
||||
return this.getSession(conversationId).currentTurn;
|
||||
return this._sessions.get(conversationId)?.currentTurn ?? 0;
|
||||
}
|
||||
|
||||
totalToolCalls(conversationId: string): number {
|
||||
return this.getSession(conversationId).totalToolCalls;
|
||||
return this._sessions.get(conversationId)?.totalToolCalls ?? 0;
|
||||
}
|
||||
|
||||
lastError(conversationId: string): Error | null {
|
||||
return this.getSession(conversationId).lastError;
|
||||
return this._sessions.get(conversationId)?.lastError ?? null;
|
||||
}
|
||||
|
||||
streamingToolCall(conversationId: string): { name: string; arguments: string } | null {
|
||||
return this.getSession(conversationId).streamingToolCall;
|
||||
return this._sessions.get(conversationId)?.streamingToolCall ?? null;
|
||||
}
|
||||
|
||||
executingToolCallId(conversationId: string): string | null {
|
||||
return this._sessions.get(conversationId)?.executingToolCallId ?? null;
|
||||
}
|
||||
|
||||
pendingPermissionRequest(
|
||||
@@ -489,6 +494,7 @@ class AgenticStore {
|
||||
onCompletionId,
|
||||
onAssistantTurnComplete,
|
||||
createToolResultMessage,
|
||||
updateToolResultMessage,
|
||||
createAssistantMessage,
|
||||
onFlowComplete,
|
||||
onTimings,
|
||||
@@ -574,6 +580,7 @@ class AgenticStore {
|
||||
onToolCallChunk: (serialized: string) => {
|
||||
try {
|
||||
turnToolCalls = JSON.parse(serialized) as ApiChatCompletionToolCall[];
|
||||
|
||||
onToolCallsStreaming?.(turnToolCalls);
|
||||
|
||||
if (turnToolCalls.length > 0 && turnToolCalls[0]?.function) {
|
||||
@@ -651,6 +658,21 @@ class AgenticStore {
|
||||
throw normalizedError;
|
||||
}
|
||||
|
||||
// If the abort landed while ChatService.sendMessage was still resolving, the
|
||||
// outer catch above never fires because ChatService swallows the AbortError
|
||||
// and returns normally. Bail out here so a half-received tool_call (truncated
|
||||
// arguments JSON) is not persisted as if it were complete.
|
||||
if (signal?.aborted) {
|
||||
await onAssistantTurnComplete?.(
|
||||
turnContent,
|
||||
turnReasoningContent || undefined,
|
||||
this.buildFinalTimings(capturedTimings, agenticTimings),
|
||||
undefined
|
||||
);
|
||||
onFlowComplete?.(this.buildFinalTimings(capturedTimings, agenticTimings));
|
||||
return;
|
||||
}
|
||||
|
||||
// === Steering check: if a user message was queued during this turn, exit the flow.
|
||||
// The caller (chatStore) will consume the pending message and re-send it normally.
|
||||
if (this._steeringMessages.has(conversationId)) {
|
||||
@@ -768,15 +790,49 @@ class AgenticStore {
|
||||
const toolStartTime = performance.now();
|
||||
const toolSource = toolsStore.getToolSource(toolName);
|
||||
|
||||
let result: string;
|
||||
let result = '';
|
||||
let toolSuccess = true;
|
||||
let createdToolResultMessageId: string | null = null;
|
||||
|
||||
// Streaming tools (currently only exec_shell_command): mark
|
||||
// the session so the matching renderer can switch to live mode.
|
||||
// Cleared unconditionally below.
|
||||
this.updateSession(conversationId, { executingToolCallId: toolCall.id });
|
||||
|
||||
if (permission === ToolPermissionDecision.DENY) {
|
||||
result = 'Tool execution was denied by the user.';
|
||||
toolSuccess = false;
|
||||
} else {
|
||||
try {
|
||||
if (toolSource === ToolSource.BUILTIN) {
|
||||
if (
|
||||
toolSource === ToolSource.BUILTIN &&
|
||||
toolName === BuiltInTool.EXEC_SHELL_COMMAND &&
|
||||
createToolResultMessage &&
|
||||
updateToolResultMessage
|
||||
) {
|
||||
const args = this.parseToolArguments(toolCall.function.arguments);
|
||||
const msg = await createToolResultMessage(toolCall.id, '');
|
||||
createdToolResultMessageId = msg.id;
|
||||
|
||||
let accumulated = '';
|
||||
for await (const ev of ToolsService.streamTool(toolName, args, signal)) {
|
||||
if (ev.chunk !== null) {
|
||||
accumulated += ev.chunk;
|
||||
await updateToolResultMessage(msg.id, accumulated);
|
||||
}
|
||||
if (ev.done) {
|
||||
if (ev.error) {
|
||||
accumulated = accumulated
|
||||
? `${accumulated}\nError: ${ev.error}`
|
||||
: `Error: ${ev.error}`;
|
||||
await updateToolResultMessage(msg.id, accumulated);
|
||||
toolSuccess = false;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
result = accumulated;
|
||||
} else if (toolSource === ToolSource.BUILTIN) {
|
||||
const args = this.parseToolArguments(toolCall.function.arguments);
|
||||
const executionResult = await ToolsService.executeTool(toolName, args, signal);
|
||||
|
||||
@@ -801,14 +857,24 @@ class AgenticStore {
|
||||
}
|
||||
} catch (error) {
|
||||
if (isAbortError(error)) {
|
||||
this.updateSession(conversationId, { executingToolCallId: null });
|
||||
onFlowComplete?.(this.buildFinalTimings(capturedTimings, agenticTimings));
|
||||
return;
|
||||
}
|
||||
result = `Error: ${error instanceof Error ? error.message : String(error)}`;
|
||||
// Carry the partial stream contents already mirrored to the UI -
|
||||
// they show up as live output even if the stream broke off mid-run.
|
||||
result = result
|
||||
? `${result}\nError: ${error instanceof Error ? error.message : String(error)}`
|
||||
: `Error: ${error instanceof Error ? error.message : String(error)}`;
|
||||
toolSuccess = false;
|
||||
if (createdToolResultMessageId && updateToolResultMessage) {
|
||||
await updateToolResultMessage(createdToolResultMessageId, result);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.updateSession(conversationId, { executingToolCallId: null });
|
||||
|
||||
const toolDurationMs = performance.now() - toolStartTime;
|
||||
const toolTiming: ChatMessageToolCallTiming = {
|
||||
name: toolCall.function.name,
|
||||
@@ -829,9 +895,19 @@ class AgenticStore {
|
||||
|
||||
const { cleanedResult, attachments } = this.extractBase64Attachments(result);
|
||||
|
||||
// Create the tool result message in the DB
|
||||
// For streaming tools the result message was created empty
|
||||
// at the start of execution and updated in place as chunks
|
||||
// arrived via updateToolResultMessage. Skip the second
|
||||
// create call - just attach any base64 attachments found in
|
||||
// the final accumulator (rare, since chunks usually don't
|
||||
// carry image data URIs) and emit the attachments callback.
|
||||
let toolResultMessage: DatabaseMessage | undefined;
|
||||
if (createToolResultMessage) {
|
||||
if (createdToolResultMessageId) {
|
||||
toolResultMessage = { id: createdToolResultMessageId } as DatabaseMessage;
|
||||
if (attachments.length > 0 && updateToolResultMessage) {
|
||||
await updateToolResultMessage(createdToolResultMessageId, cleanedResult, attachments);
|
||||
}
|
||||
} else if (createToolResultMessage) {
|
||||
toolResultMessage = await createToolResultMessage(
|
||||
toolCall.id,
|
||||
cleanedResult,
|
||||
@@ -926,7 +1002,7 @@ class AgenticStore {
|
||||
return { cleanedResult: result, attachments: [] };
|
||||
}
|
||||
|
||||
const lines = result.split(NEWLINE_SEPARATOR);
|
||||
const lines = result.split(NEWLINE);
|
||||
const attachments: DatabaseMessageExtra[] = [];
|
||||
let attachmentIndex = 0;
|
||||
|
||||
@@ -957,7 +1033,7 @@ class AgenticStore {
|
||||
return line;
|
||||
});
|
||||
|
||||
return { cleanedResult: cleanedLines.join(NEWLINE_SEPARATOR), attachments };
|
||||
return { cleanedResult: cleanedLines.join(NEWLINE), attachments };
|
||||
}
|
||||
|
||||
private buildAttachmentName(mimeType: string, index: number): string {
|
||||
@@ -1032,3 +1108,7 @@ export function agenticClearSteeringMessage(conversationId: string) {
|
||||
export function agenticIsAnyRunning() {
|
||||
return agenticStore.isAnyRunning;
|
||||
}
|
||||
|
||||
export function agenticExecutingToolCallId(conversationId: string) {
|
||||
return agenticStore.executingToolCallId(conversationId);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user