webui: Server tools (#21237)

* wip: server_tools * feat: Integrate with `/tools` endpoint * feat: Builtin + MCP + JSON Schema Tools WIP * refactor * displayName -> display_name * snake_case everywhere * rm redundant field * feat: Improvements * chore: update webui build output * refactor: Updates after server updates * chore: update webui build output * change arg to --tools all * feat: UI improvements * chore: update webui build output * add readme mention * llama-gen-docs * chore: update webui build output * chore: update webui build output * chore: update webui build output * feat: Reorganize settings sections * feat: Separate dialogs for MCP Servers Settings and Import/Export * feat: WIP * feat: WIP * feat: WIP * feat: WIP * feat: WIP * feat: WIP * WIP on allozaur/20677-webui-server-tools * feat: UI improvements * chore: Update package lock * chore: Run `npm audit fix` * feat: UI WIP * feat: UI * refactor: Desktop Icon Strip DRY * feat: Cleaner rendering and transition for ChatScreen * feat: UI improvements * feat: UI improvement * feat: Remove MCP Server "enable" switch from Tools submenu * chore: Run `npm audit fix` * feat: WIP * feat: Logic improvements * refactor: Cleanup * refactor: DRY * test: Fix Chat Sidebar UI Tests * chore: Update package lock * refactor: Cleanup * feat: Chat Message Action Card with Continue and Permission flow implementations * feat: Add agentic steering messages, draft messages and improve chat UX * fix: Search results UI * test: Fix unit test * feat: UI/UX improvements * refactor: Simplify `useToolsPanel` access in components * feat: Implement Processing Info Context API * feat: Implement 'Go back to chat' functionality for settings * feat: Enhance MCP Server management in Chat Form Attachments * style: Minor UI and branding adjustments * chore: Update webui static build output * chore: Formatting, linting & type checks * feat: Draft messages logic * feat: UI improvements * feat: Steering Messages improvements * refactor: Cleanup * refactor: Cleanup * feat: Improve UI * refactor: Settings navigation hook * refactor: DRY code * refactor: DRY ChatMessageUser UI components * refactor: Desktop Icon Strip DRY * refactor: Tools & permissions * fix: Navigation condition * refactor: Cleanup * refactor: Cleanup * refactor: Cleanup * fix: preserve reasoning_content in agentic flow --------- Co-authored-by: Xuan Son Nguyen <son@huggingface.co>
2026-04-28 14:35:49 +03:00
parent 19821178be
commit f42e29fdf1
138 changed files with 11345 additions and 8326 deletions
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
-	import Page from '../../../src/routes/+page.svelte';
+	import Page from '../../../src/routes/(chat)/+page.svelte';

 	let sidebarOpen = $state(false);
 </script>
@@ -1,19 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { ChatSettings } from '$lib/components/app';
-	import { fn } from 'storybook/test';
-
-	const { Story } = defineMeta({
-		title: 'Components/ChatSettings',
-		component: ChatSettings,
-		parameters: {
-			layout: 'fullscreen'
-		},
-		args: {
-			onClose: fn(),
-			onSave: fn()
-		}
-	});
-</script>
-
-<Story name="Default" />
@@ -11,6 +11,12 @@
 			layout: 'centered'
 		}
 	});
+</script>
+
+<script lang="ts">
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+
+	let sidebarOpen = $state(true);

 	// Mock conversations for the sidebar
 	const mockConversations: DatabaseConversation[] = [
@@ -58,9 +64,11 @@
 		}, 0));
 	}}
 >
-	<div class="flex-column h-full h-screen w-72 bg-background">
-		<ChatSidebar />
-	</div>
+	<Sidebar.Provider bind:open={sidebarOpen}>
+		<div class="flex-column h-full h-screen w-72 bg-background">
+			<ChatSidebar />
+		</div>
+	</Sidebar.Provider>
 </Story>

 <Story
@@ -77,9 +85,11 @@
 		userEvent.click(searchTrigger);
 	}}
 >
-	<div class="flex-column h-full h-screen w-72 bg-background">
-		<ChatSidebar />
-	</div>
+	<Sidebar.Provider bind:open={sidebarOpen}>
+		<div class="flex-column h-full h-screen w-72 bg-background">
+			<ChatSidebar />
+		</div>
+	</Sidebar.Provider>
 </Story>

 <Story
@@ -91,7 +101,9 @@
 		conversationsStore.conversations = [];
 	}}
 >
-	<div class="flex-column h-full h-screen w-72 bg-background">
-		<ChatSidebar />
-	</div>
+	<Sidebar.Provider bind:open={sidebarOpen}>
+		<div class="flex-column h-full h-screen w-72 bg-background">
+			<ChatSidebar />
+		</div>
+	</Sidebar.Provider>
 </Story>
@@ -85,7 +85,7 @@ describe('deriveAgenticSections', () => {
 				{ id: 'call_1', type: 'function', function: { name: 'bash', arguments: '{}' } }
 			])
 		});
-		const sections = deriveAgenticSections(msg, []);
+		const sections = deriveAgenticSections(msg, [], [], true);
 		expect(sections).toHaveLength(1);
 		expect(sections[0].type).toBe(AgenticSectionType.TOOL_CALL_PENDING);
 		expect(sections[0].toolName).toBe('bash');