Lumpiasty/llama.cpp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui: Agentic Content UX improvements (#25450)

Browse Source 
* 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
2026-07-15 20:31:45 +02:00
committed by GitHub
parent 3b53219361
commit 32beb244f5
146 changed files with 5960 additions and 1053 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/ui/src/lib/components/app/server/ServerErrorSplash.svelte
+10 -9
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
import { base } from '$app/paths';
import { AlertTriangle, RefreshCw, Key, CheckCircle, XCircle } from '@lucide/svelte';
import { goto } from '$app/navigation';
@@ -7,7 +8,7 @@
import Label from '$lib/components/ui/label/label.svelte';
import { serverStore, serverLoading } from '$lib/stores/server.svelte';
import { config, settingsStore } from '$lib/stores/settings.svelte';
import { SETTINGS_KEYS } from '$lib/constants';
import { AUTHORIZATION_HEADER, BEARER_PREFIX, SETTINGS_KEYS } from '$lib/constants';
import { ROUTES } from '$lib/constants/routes';
import { fade, fly, scale } from 'svelte/transition';
import { KeyboardKey } from '$lib/enums';
@@ -71,7 +72,7 @@
const response = await fetch(`${base}/props`, {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${apiKeyInput.trim()}`
[AUTHORIZATION_HEADER]: `${BEARER_PREFIX}${apiKeyInput.trim()}`
}
});
@@ -145,7 +146,7 @@
{#if isAccessDeniedError && !showApiKeyInput}
<div in:fly={{ y: 10, duration: 300, delay: 200 }} class="mb-4">
<Button onclick={handleShowApiKeyInput} variant="outline" class="w-full">
<Key class="h-4 w-4" />
<Key class={ICON_CLASS_DEFAULT} />
Enter API Key
</Button>
</div>
@@ -171,21 +172,21 @@
/>
{#if apiKeyState === 'validating'}
<div class="absolute top-1/2 right-3 -translate-y-1/2">
<RefreshCw class="h-4 w-4 animate-spin text-muted-foreground" />
<RefreshCw class="{ICON_CLASS_DEFAULT} animate-spin text-muted-foreground" />
</div>
{:else if apiKeyState === 'success'}
<div
class="absolute top-1/2 right-3 -translate-y-1/2"
in:scale={{ duration: 200, start: 0.8 }}
>
<CheckCircle class="h-4 w-4 text-green-500" />
<CheckCircle class="{ICON_CLASS_DEFAULT} text-green-500" />
</div>
{:else if apiKeyState === 'error'}
<div
class="absolute top-1/2 right-3 -translate-y-1/2"
in:scale={{ duration: 200, start: 0.8 }}
>
<XCircle class="h-4 w-4 text-destructive" />
<XCircle class="{ICON_CLASS_DEFAULT} text-destructive" />
</div>
{/if}
</div>
@@ -209,7 +210,7 @@
class="flex-1"
>
{#if apiKeyState === 'validating'}
<RefreshCw class="h-4 w-4 animate-spin" />
<RefreshCw class="{ICON_CLASS_DEFAULT} animate-spin" />
Validating...
{:else if apiKeyState === 'success'}
Success!
@@ -237,11 +238,11 @@
<div in:fly={{ y: 10, duration: 300, delay: 200 }}>
<Button onclick={handleRetryConnection} disabled={isServerLoading} class="w-full">
{#if isServerLoading}
<RefreshCw class="h-4 w-4 animate-spin" />
<RefreshCw class="{ICON_CLASS_DEFAULT} animate-spin" />
Connecting...
{:else}
<RefreshCw class="h-4 w-4" />
<RefreshCw class={ICON_CLASS_DEFAULT} />
Retry Connection
{/if}
tools/ui/src/lib/components/app/server/ServerStatus.svelte
+2 -1
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
import { AlertTriangle, Server } from '@lucide/svelte';
import { Badge } from '$lib/components/ui/badge';
import { Button } from '$lib/components/ui/button';
@@ -57,7 +58,7 @@
{#if showActions && error}
<Button variant="outline" size="sm" class="text-destructive">
<AlertTriangle class="h-4 w-4" />
<AlertTriangle class={ICON_CLASS_DEFAULT} />
{error}
</Button>