Skip to content

webui: Client-side implementation of tool calling (with two tools) #18059

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
coder543 wants to merge 5 commits into
base: master
Choose a base branch
from
Open

webui: Client-side implementation of tool calling (with two tools) #18059

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0a428ff
webui: Client-side implementation of tool calling with calculator too…
coder543 Dec 15, 2025
1bbf328
enhance context retention between tool calls, fix lints
coder543 Dec 15, 2025
ca11511
Fix message stats for combined messages
coder543 Dec 15, 2025
f7f6040
smoother auto-scroll handling
coder543 Dec 15, 2025
90ec9d1
improve tool calling outside of reasoning blocks, improve code interp…
coder543 Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified tools/server/public/index.html.gz
View file
Open in desktop
Binary file not shown.
27 changes: 27 additions & 0 deletions tools/server/webui/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions tools/server/webui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
"@tailwindcss/forms": "^0.5.9",
"@tailwindcss/typography": "^0.5.15",
"@tailwindcss/vite": "^4.0.0",
"@testing-library/svelte": "^5.2.9",
"@types/node": "^22",
"@vitest/browser": "^3.2.3",
"bits-ui": "^2.14.4",
Expand Down
3 changes: 2 additions & 1 deletion tools/server/webui/playwright.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import { defineConfig } from '@playwright/test';

export default defineConfig({
webServer: {
command: 'npm run build && http-server ../public -p 8181',
command:
'npm run build && gzip -dc ../public/index.html.gz > ../public/index.html && http-server ../public -p 8181',
port: 8181,
timeout: 120000,
reuseExistingServer: false
Expand Down
36 changes: 30 additions & 6 deletions tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import ChatMessageAssistant from './ChatMessageAssistant.svelte';
import ChatMessageUser from './ChatMessageUser.svelte';
import ChatMessageSystem from './ChatMessageSystem.svelte';
import { conversationsStore } from '$lib/stores/conversations.svelte';

interface Props {
class?: string;
Expand All @@ -22,6 +23,7 @@
onNavigateToSibling?: (siblingId: string) => void;
onRegenerateWithBranching?: (message: DatabaseMessage, modelOverride?: string) => void;
siblingInfo?: ChatMessageSiblingInfo | null;
toolParentIds?: string[];
}

let {
Expand All @@ -35,9 +37,21 @@
onEditUserMessagePreserveResponses,
onNavigateToSibling,
onRegenerateWithBranching,
siblingInfo = null
siblingInfo = null,
toolParentIds
}: Props = $props();

type MessageWithToolExtras = DatabaseMessage & {
_actionTargetId?: string;
_toolMessagesCollected?: { toolCallId?: string | null; parsed: unknown }[];
};

const actionTargetId = $derived((message as MessageWithToolExtras)._actionTargetId ?? message.id);

function getActionTarget(): DatabaseMessage {
return conversationsStore.activeMessages.find((m) => m.id === actionTargetId) ?? message;
}

let deletionInfo = $state<{
totalCount: number;
userMessages: number;
Expand Down Expand Up @@ -95,12 +109,14 @@
}

function handleConfirmDelete() {
onDelete?.(message);
const target = getActionTarget();
onDelete?.(target);
showDeleteDialog = false;
}

async function handleDelete() {
deletionInfo = await chatStore.getDeletionInfo(message.id);
const target = getActionTarget();
deletionInfo = await chatStore.getDeletionInfo(target.id);
showDeleteDialog = true;
}

Expand Down Expand Up @@ -136,11 +152,13 @@
}

function handleRegenerate(modelOverride?: string) {
onRegenerateWithBranching?.(message, modelOverride);
const target = getActionTarget();
onRegenerateWithBranching?.(target, modelOverride);
}

function handleContinue() {
onContinueAssistantMessage?.(message);
const target = getActionTarget();
onContinueAssistantMessage?.(target);
}

function handleSaveEdit() {
Expand Down Expand Up @@ -213,7 +231,7 @@
{showDeleteDialog}
{siblingInfo}
/>
{:else}
{:else if message.role === 'assistant'}
<ChatMessageAssistant
bind:textareaElement
class={className}
Expand All @@ -240,5 +258,11 @@
{siblingInfo}
{thinkingContent}
{toolCallContent}
toolParentIds={toolParentIds ?? [message.id]}
toolMessagesCollected={(message as MessageWithToolExtras)._toolMessagesCollected}
/>
{:else if message.role === 'tool'}
<!-- Tool messages are rendered inline inside their parent assistant's reasoning block.
Skip standalone rendering to avoid duplicate bubbles. -->
<!-- Intentionally left blank -->
{/if}
Loading