-
+
+
+ (showMcpDialog = true)}
+ {onFileUpload}
+ />
+
+ {#if hasMcpServers}
+
+
+
+
+
+
+
+ (showMcpDialog = true)}
+ >
+
+
+
+ {/if}
+
+
+
+
+
+
+
+ {#each displayedMcpServers() as server (server.id)}
+ {@const healthState = mcpGetHealthCheckState(server.id)}
+ {@const hasError = healthState.status === 'error'}
+ {@const isEnabledForChat = isServerEnabledForChat(server)}
+ {@const hasOverride = hasPerChatOverride(server.id)}
+
+
+ toggleServerForChat(server.id, server.enabled)}
+ disabled={hasError}
+ class={hasOverride ? 'ring-2 ring-primary/50 ring-offset-1' : ''}
+ />
+
+ {/each}
+ {#if displayedMcpServers().length === 0}
+
+ {#if getFaviconUrl(server)}
+ })
{
+ (e.currentTarget as HTMLImageElement).style.display = 'none';
+ }}
+ />
+ {/if}
+ {getServerDisplayName(server)}
+ {#if hasError}
+ Error
+ {:else if server.enabled}
+ Global
+ {/if}
+
+
+ No servers found
+
+ {/if}
+
+ {#each sections as section, index (index)}
+ {#if section.type === 'text'}
+
+
+ toggleExpanded(index, isPending)}
+ >
+
+
+
+
+
+
+ {/if}
+ {/each}
+
+
+
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte
index 220276fc9e3..9eedf8a4e30 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte
@@ -69,29 +69,6 @@
return null;
});
- let toolCallContent = $derived.by((): ApiChatCompletionToolCall[] | string | null => {
- if (message.role === 'assistant') {
- const trimmedToolCalls = message.toolCalls?.trim();
-
- if (!trimmedToolCalls) {
- return null;
- }
-
- try {
- const parsed = JSON.parse(trimmedToolCalls);
-
- if (Array.isArray(parsed)) {
- return parsed as ApiChatCompletionToolCall[];
- }
- } catch {
- // Harmony-only path: fall back to the raw string so issues surface visibly.
- }
-
- return trimmedToolCalls;
- }
- return null;
- });
-
function handleCancelEdit() {
isEditing = false;
editedContent = message.content;
@@ -281,6 +258,5 @@
{showDeleteDialog}
{siblingInfo}
{thinkingContent}
- {toolCallContent}
/>
{/if}
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageActions.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageActions.svelte
index 3cb48157d8c..dbd9b982285 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageActions.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageActions.svelte
@@ -5,6 +5,7 @@
ChatMessageBranchingControls,
DialogConfirmation
} from '$lib/components/app';
+ import { Switch } from '$lib/components/ui/switch';
interface Props {
role: 'user' | 'assistant';
@@ -26,6 +27,9 @@
onConfirmDelete: () => void;
onNavigateToSibling?: (siblingId: string) => void;
onShowDeleteDialogChange: (show: boolean) => void;
+ showRawOutputSwitch?: boolean;
+ rawOutputEnabled?: boolean;
+ onRawOutputToggle?: (enabled: boolean) => void;
}
let {
@@ -42,7 +46,10 @@
onRegenerate,
role,
siblingInfo = null,
- showDeleteDialog
+ showDeleteDialog,
+ showRawOutputSwitch = false,
+ rawOutputEnabled = false,
+ onRawOutputToggle
}: Props = $props();
function handleConfirmDelete() {
@@ -51,9 +58,9 @@
}
-
+
+ {:else if section.type === 'tool_call_streaming'}
+
+
+
+
+
+ {:else if section.type === 'tool_call' || section.type === 'tool_call_pending'}
+ {@const isPending = section.type === 'tool_call_pending'}
+
+
+
+ {#if isPending}
+
+
+
+
+ {#if section.toolArgs && section.toolArgs !== '{}'}
+
+
+
+ {/if}
+
+ Arguments:
+
+
+
+ Result:
+ {#if isPending}
+
+ {#if section.toolResult}
+
+
+
+ {:else if isPending}
+ {section.toolResult}
+ Waiting for result...
+
+ {/if}
+
+
+
+ {#if showRawOutputSwitch}
+
@@ -81,6 +88,16 @@
+ Show raw output
+ onRawOutputToggle?.(checked)}
+ />
+
+ {/if}
{messageContent || ''}
+ {:else if isAgenticContent}
+
+ (editUrl = v)}
+ onHeadersChange={(v) => (editHeaders = v)}
+ urlError={editUrl ? urlError : null}
+ id={server.id}
+ />
+
+ {:else}
+
+
+
+
+
+ Configure Server
+
+ {#if server.url.trim()}
+
+ {/if}
+
+
+
+
+
+
+
+
+ {#if isError && errorMessage}
+
+ {#if faviconUrl}
+ 
{
+ (e.currentTarget as HTMLImageElement).style.display = 'none';
+ }}
+ />
+ {:else}
+
+
+
+ {displayName}
+ {#if server.url} + +
+
+ {errorMessage}
+ {/if} + + + {#if tools.length === 0 && server.url.trim()} +
+
+
+
+
+ {/if}
+ {/if}
+
+
+ {#if tools.length > 0}
+
+
+ {#if isExpanded}
+
+
+
+
+
+
+
+
+ {#each tools as tool (tool.name)}
+
+
+ {tool.name}
+ {#if tool.description}
+
+ {/each}
+ {tool.description}
+ {/if} +
+
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatSettings/McpSettingsSection.svelte b/tools/server/webui/src/lib/components/app/chat/ChatSettings/McpSettingsSection.svelte
new file mode 100644
index 00000000000..3d5a7200578
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/chat/ChatSettings/McpSettingsSection.svelte
@@ -0,0 +1,180 @@
+
+
+
+
+ onUrlChange(e.currentTarget.value)}
+ class={urlError ? 'border-destructive' : ''}
+ />
+ {#if urlError}
+
+
+ {urlError}
+ {/if} +
+
+
+
+ Custom Headers (optional)
+
+
+
+
+ {#if headerPairs.length > 0}
+
+ {#each headerPairs as pair, index (index)}
+
+ {:else}
+
+ updatePairKey(index, e.currentTarget.value)}
+ class="flex-1"
+ />
+
+
+
+ {/each}
+ No custom headers configured.
+ {/if} +
+
+ (newServerUrl = v)}
+ onHeadersChange={(v) => (newServerHeaders = v)}
+ urlError={newServerUrl ? newServerUrlError : null}
+ id="new-server"
+ />
+
+ {/if}
+
+ {#if servers.length === 0 && !isAddingServer}
+
diff --git a/tools/server/webui/src/lib/components/app/dialogs/DialogMcpServersSettings.svelte b/tools/server/webui/src/lib/components/app/dialogs/DialogMcpServersSettings.svelte
new file mode 100644
index 00000000000..ab6f7d91cba
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/dialogs/DialogMcpServersSettings.svelte
@@ -0,0 +1,75 @@
+
+
+
+
+
+
+ {#if isAddingServer}
+
+
+
+ {#if !isAddingServer}
+
+ {/if}
+ Manage Servers
+
+
+ Add New Server
+
+
+
+
+
+ No MCP Servers configured yet. Add one to enable agentic features.
+
+ {/if}
+
+
+ {#if servers.length > 0}
+
+ {#each servers as server (server.id)}
+ updateServer(server.id, { enabled })}
+ onUpdate={(updates) => updateServer(server.id, updates)}
+ onDelete={() => removeServer(server.id)}
+ />
+ {/each}
+
+ {/if}
+
+
+
+
+ Add and configure MCP servers to enable agentic tool execution capabilities.
+
+
+
+
+
+
+
+
+
+
+ + .use(remarkLiteralHtml) // Treat raw HTML as literal text with preserved indentation + .use(remarkRehype) // Convert Markdown AST to rehype + .use(rehypeHighlight) // Add syntax highlighting + .use(rehypeRestoreTableHtml) // Restore limited HTML (e.g.,
,
- ) inside Markdown tables
+ .use(rehypeEnhanceLinks) // Add target="_blank" to links
+ .use(rehypeEnhanceCodeBlocks) // Wrap code blocks with header and actions
+ .use(rehypeStringify, { allowDangerousHtml: true }); // Convert to HTML string
+ }
+
+ // Default processor with math/LaTeX support
return remark()
.use(remarkGfm) // GitHub Flavored Markdown
.use(remarkMath) // Parse $inline$ and $$block$$ math
@@ -298,6 +314,60 @@
}
}
+ /**
+ * Attaches error handlers to images to show fallback UI when loading fails (e.g., CORS).
+ * Uses data-error-bound attribute to prevent duplicate bindings.
+ */
+ function setupImageErrorHandlers() {
+ if (!containerRef) return;
+
+ const images = containerRef.querySelectorAll
+
+ External image cannot be displayed
+
+ Open in new tab
+
+
+
+ `;
+
+ // Replace image with fallback
+ img.parentNode?.replaceChild(fallback, img);
+ }
+
/**
* Converts a single HAST node to an enhanced HTML string.
* Applies link and code block enhancements to the output.
@@ -366,6 +436,7 @@
if ((hasRenderedBlocks || hasUnstableBlock) && containerRef) {
setupCodeBlockActions();
+ setupImageErrorHandlers();
}
});
@@ -405,8 +476,8 @@
}
/* Base typography styles */
- div :global(p:not(:last-child)) {
- margin-bottom: 1rem;
+ div :global(p) {
+ margin-block: 1rem;
line-height: 1.75;
}
@@ -867,4 +938,53 @@
background: var(--muted);
}
}
+
+ /* Image load error fallback */
+ div :global(.image-load-error) {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 1.5rem 0;
+ padding: 1.5rem;
+ border-radius: 0.5rem;
+ background: var(--muted);
+ border: 1px dashed var(--border);
+ }
+
+ div :global(.image-error-content) {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.75rem;
+ color: var(--muted-foreground);
+ text-align: center;
+ }
+
+ div :global(.image-error-content svg) {
+ opacity: 0.5;
+ }
+
+ div :global(.image-error-text) {
+ font-size: 0.875rem;
+ }
+
+ div :global(.image-error-link) {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.375rem;
+ padding: 0.5rem 1rem;
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: var(--primary);
+ background: var(--background);
+ border: 1px solid var(--border);
+ border-radius: 0.375rem;
+ text-decoration: none;
+ transition: all 0.2s ease;
+ }
+
+ div :global(.image-error-link:hover) {
+ background: var(--muted);
+ border-color: var(--primary);
+ }
diff --git a/tools/server/webui/src/lib/components/app/misc/McpLogo.svelte b/tools/server/webui/src/lib/components/app/misc/McpLogo.svelte
new file mode 100644
index 00000000000..9f73db84d61
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/misc/McpLogo.svelte
@@ -0,0 +1,111 @@
+
+
+
diff --git a/tools/server/webui/src/lib/components/ui/card/card.svelte b/tools/server/webui/src/lib/components/ui/card/card.svelte
index c40d14309f9..b9dcd2de6f4 100644
--- a/tools/server/webui/src/lib/components/ui/card/card.svelte
+++ b/tools/server/webui/src/lib/components/ui/card/card.svelte
@@ -1,6 +1,7 @@