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 authored and GitHub committed 2026-07-15 20:31:45 +02:00
1 parent 3b53219361
commit 32beb244f5
146 files changed
+5960 -1053

No files matched your search

+95 -15
View File
@@ -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);
}
+47 -8
View File
@@ -562,8 +562,14 @@ class ChatStore {
* Abort the current agentic flow signal without clearing loading state.
* Used by "Send immediately" to force the agentic loop to exit so that
* the pending steering message can be re-sent.
*
* Any tool calls captured mid-stream are dropped before the abort so the
* pending message (or a manual follow-up) does not re-send a half-received
* tool call with invalid JSON arguments to the server. Mirrors what the
* Stop button already does through stopGenerationForChat.
*/
abortCurrentFlow(convId: string): void {
async abortCurrentFlow(convId: string): Promise<void> {
await this.savePartialResponseIfNeeded(convId);
const c = this.abortControllers.get(convId);
if (c) {
c.abort();
@@ -1255,6 +1261,28 @@ class ChatStore {
lastCreatedInFlow = msg.id;
return msg;
},
updateToolResultMessage: async (
messageId: string,
content: string,
extras?: DatabaseMessageExtra[]
) => {
// Persist latest content + merged extras; mirror into the active
// store so the chat view sees live updates for streaming tools
// (e.g. exec_shell_command). The existing tool message node
// pointer stays put - the renderer is already scoped to it.
const updates: Partial<DatabaseMessage> = { content };
if (extras) {
const idx = conversationsStore.findMessageIndex(messageId);
const existing = idx >= 0 ? (conversationsStore.activeMessages[idx]?.extra ?? []) : [];
const merged = [...existing, ...extras];
updates.extra = merged;
}
if (conversationsStore.activeConversation?.id === convId) {
const idx = conversationsStore.findMessageIndex(messageId);
if (idx >= 0) conversationsStore.updateMessageAtIndex(idx, updates);
}
await DatabaseService.updateMessage(messageId, updates);
},
createAssistantMessage: async () => {
// Reset streaming state for new message
streamedContent = '';
@@ -1505,21 +1533,27 @@ class ChatStore {
const partialContent = streamingState.response;
const partialReasoning = lastMessage.reasoningContent || '';
// snapshot the streamed tool calls before clearing so we still know whether
// anything was captured when deciding to skip the DB write below
const hadPartialToolCalls = !!lastMessage.toolCalls?.trim();
// nothing to persist when both content and reasoning are empty (e.g. stop before any token)
if (!partialContent.trim() && !partialReasoning.trim()) return;
// nothing to persist when content, reasoning, and streamed tool calls are all empty
// (e.g. stop before any token). otherwise drop the partial tool call and write whatever
// was streamed: incomplete arguments (truncated JSON, missing closing quote) would
// otherwise be re-sent to the server on the next turn and rejected.
if (!partialContent.trim() && !partialReasoning.trim() && !hadPartialToolCalls) return;
try {
const updateData: {
content: string;
content?: string;
reasoningContent?: string;
toolCalls?: string;
timings?: ChatMessageTimings;
} = {
content: partialContent
toolCalls: ''
};
if (partialReasoning) {
updateData.reasoningContent = partialReasoning;
}
if (partialContent.trim()) updateData.content = partialContent;
if (partialReasoning.trim()) updateData.reasoningContent = partialReasoning;
const lastKnownState = this.getProcessingState(conversationId);
if (lastKnownState) {
updateData.timings = {
@@ -1535,9 +1569,14 @@ class ChatStore {
}
await DatabaseService.updateMessage(lastMessage.id, updateData);
lastMessage.content = partialContent;
// mirror the drop into the in-memory message so the next request sent via
// sendMessage (queued pending, Send immediately, or manual follow-up) reads
// the cleared value, not whatever the streaming widget had been showing
lastMessage.toolCalls = '';
if (updateData.timings) lastMessage.timings = updateData.timings;
} catch (error) {
lastMessage.content = partialContent;
lastMessage.toolCalls = '';
console.error('Failed to save partial response:', error);
}
}
@@ -16,7 +16,7 @@ import {
MCP_RESOURCE_ATTACHMENT_ID_PREFIX,
MCP_RESOURCE_CACHE_MAX_ENTRIES,
MCP_RESOURCE_CACHE_TTL_MS,
NEWLINE_SEPARATOR,
NEWLINE,
RESOURCE_UNKNOWN_TYPE,
BINARY_CONTENT_LABEL
} from '$lib/constants';
@@ -587,7 +587,7 @@ class MCPResourceStore {
name: resourceName,
uri: attachment.resource.uri,
serverName: attachment.resource.serverName,
content: contentParts.join(NEWLINE_SEPARATOR),
content: contentParts.join(NEWLINE),
mimeType: attachment.resource.mimeType
});
}
+76 -64
View File
@@ -205,6 +205,9 @@ class MCPStore {
server: MCPServerSettingsEntry,
perChatOverrides?: McpServerOverride[]
): boolean {
// Per-chat overrides win when present; missing entries inherit the
// server's own `enabled` flag so partial override lists are not all
// treated as disabled.
const override = perChatOverrides?.find((o) => o.serverId === server.id);
return override?.enabled ?? server.enabled;
}
@@ -348,7 +351,6 @@ class MCPStore {
}
clearHealthCheck(serverId: string): void {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { [serverId]: _removed, ...rest } = this._healthChecks;
this._healthChecks = rest;
}
@@ -939,6 +941,41 @@ class MCPStore {
return this.toolsIndex.get(toolName);
}
/**
* Resolve which configured MCP server owns a given tool name. Looks at
* active connections first (fast path), then falls back to per-server
* health-check data so server-side MCP proxies (where llama-server
* executes MCP tools but the browser does not hold a direct connection)
* still resolve tool names to their owning server.
*/
findServerForTool(toolName: string): string | undefined {
const fromIndex = this.toolsIndex.get(toolName);
if (fromIndex) return fromIndex;
for (const server of this.getServers()) {
const health = this._healthChecks[server.id];
if (!health || health.status !== HealthCheckStatus.SUCCESS) continue;
if (health.tools.some((tool) => tool.name === toolName)) {
return server.id;
}
}
return undefined;
}
/**
* Resolve the favicon URL for an MCP server by one of its tool names.
* Returns `null` if the tool is not provided by any configured MCP server,
* or if the owning server has no icon to show.
* Pair with {@link getServerFavicon} for direct server-id lookup.
*/
getServerFaviconForTool(toolName: string | undefined): string | null {
if (!toolName) return null;
const serverId = this.findServerForTool(toolName);
if (!serverId) return null;
return this.getServerFavicon(serverId);
}
hasPromptsSupport(): boolean {
for (const connection of this.connections.values()) {
if (connection.serverCapabilities?.prompts) {
@@ -955,44 +992,27 @@ class MCPStore {
* the user actually sends a message or uses prompts.
* @param perChatOverrides - Per-chat server overrides to filter by enabled servers.
* If provided (even empty array), only checks enabled servers.
* If undefined, checks all servers with successful health checks.
* If undefined, falls back to each server's own `enabled` flag.
*/
hasPromptsCapability(perChatOverrides?: McpServerOverride[]): boolean {
// If perChatOverrides is provided (even empty array), filter by enabled servers
let enabledServerIds: Set<string>;
if (perChatOverrides !== undefined) {
const enabledServerIds = new Set(
perChatOverrides.filter((o) => o.enabled).map((o) => o.serverId)
enabledServerIds = new Set(perChatOverrides.filter((o) => o.enabled).map((o) => o.serverId));
} else {
enabledServerIds = new Set(
this.getServers()
.filter((s) => s.enabled)
.map((s) => s.id)
);
}
// No enabled servers = no capability
if (enabledServerIds.size === 0) {
return false;
}
// Check health check states for enabled servers with prompts capability
for (const [serverId, state] of Object.entries(this._healthChecks)) {
if (!enabledServerIds.has(serverId)) continue;
if (
state.status === HealthCheckStatus.SUCCESS &&
state.capabilities?.server?.prompts !== undefined
) {
return true;
}
}
// Also check active connections as fallback
for (const [serverName, connection] of this.connections) {
if (!enabledServerIds.has(serverName)) continue;
if (connection.serverCapabilities?.prompts) {
return true;
}
}
if (enabledServerIds.size === 0) {
return false;
}
// No overrides provided - check all servers (global mode)
for (const state of Object.values(this._healthChecks)) {
for (const [serverId, state] of Object.entries(this._healthChecks)) {
if (!enabledServerIds.has(serverId)) continue;
if (
state.status === HealthCheckStatus.SUCCESS &&
state.capabilities?.server?.prompts !== undefined
@@ -1001,7 +1021,8 @@ class MCPStore {
}
}
for (const connection of this.connections.values()) {
for (const [serverName, connection] of this.connections) {
if (!enabledServerIds.has(serverName)) continue;
if (connection.serverCapabilities?.prompts) {
return true;
}
@@ -1518,43 +1539,26 @@ class MCPStore {
* the user actually sends a message or uses prompts.
* @param perChatOverrides - Per-chat server overrides to filter by enabled servers.
* If provided (even empty array), only checks enabled servers.
* If undefined, checks all servers with successful health checks.
* If undefined, falls back to each server's own `enabled` flag.
*/
hasResourcesCapability(perChatOverrides?: McpServerOverride[]): boolean {
// If perChatOverrides is provided (even empty array), filter by enabled servers
let enabledServerIds: Set<string>;
if (perChatOverrides !== undefined) {
const enabledServerIds = new Set(
perChatOverrides.filter((o) => o.enabled).map((o) => o.serverId)
enabledServerIds = new Set(perChatOverrides.filter((o) => o.enabled).map((o) => o.serverId));
} else {
enabledServerIds = new Set(
this.getServers()
.filter((s) => s.enabled)
.map((s) => s.id)
);
// No enabled servers = no capability
if (enabledServerIds.size === 0) {
return false;
}
// Check health check states for enabled servers with resources capability
for (const [serverId, state] of Object.entries(this._healthChecks)) {
if (!enabledServerIds.has(serverId)) continue;
if (
state.status === HealthCheckStatus.SUCCESS &&
state.capabilities?.server?.resources !== undefined
) {
return true;
}
}
// Also check active connections as fallback
for (const [serverName, connection] of this.connections) {
if (!enabledServerIds.has(serverName)) continue;
if (MCPService.supportsResources(connection)) {
return true;
}
}
}
if (enabledServerIds.size === 0) {
return false;
}
// No overrides provided - check all servers (global mode)
for (const state of Object.values(this._healthChecks)) {
for (const [serverId, state] of Object.entries(this._healthChecks)) {
if (!enabledServerIds.has(serverId)) continue;
if (
state.status === HealthCheckStatus.SUCCESS &&
state.capabilities?.server?.resources !== undefined
@@ -1563,7 +1567,8 @@ class MCPStore {
}
}
for (const connection of this.connections.values()) {
for (const [serverName, connection] of this.connections) {
if (!enabledServerIds.has(serverName)) continue;
if (MCPService.supportsResources(connection)) {
return true;
}
@@ -1573,14 +1578,20 @@ class MCPStore {
}
/**
* Get list of servers that support resources.
* Get list of enabled servers that support resources.
* Checks active connections first, then health check state as fallback.
*/
getServersWithResources(): string[] {
const enabledServerIds = new Set(
this.getServers()
.filter((s) => s.enabled)
.map((s) => s.id)
);
const servers: string[] = [];
// Check active connections
for (const [name, connection] of this.connections) {
if (!enabledServerIds.has(name)) continue;
if (MCPService.supportsResources(connection) && !servers.includes(name)) {
servers.push(name);
}
@@ -1588,6 +1599,7 @@ class MCPStore {
// Also check health check states for servers not yet connected
for (const [serverId, state] of Object.entries(this._healthChecks)) {
if (!enabledServerIds.has(serverId)) continue;
if (
!servers.includes(serverId) &&
state.status === HealthCheckStatus.SUCCESS &&