Skip to content

Commit 539f245

Browse files
allozaurallozaur
authored
ui: Move Settings and MCP Servers routes to dialog-based views (ggml-org#27744)
* ui : open MCP servers in a dialog from the chat form Replace the MCP servers submenu with a single "MCP Servers" item that opens a new DialogMcpServers dialog instead of navigating to the /mcp-servers route. Assisted-by: pi * ui : browse MCP resources from the server card Make the Resources capability badge clickable so it opens the MCP resources browser dialog, and drop the page-only chrome from SettingsMcpServers. Assisted-by: pi * ui : remove mcp-servers route and sidebar entry MCP servers are now managed in a dialog, so drop the dedicated route and the sidebar icon that navigated to it. Assisted-by: pi * ui : remove unused MCP servers submenu component The submenu was replaced by the MCP servers dialog, so delete the component and its export. Assisted-by: pi * feat(ui): add DialogSettingsChat dialog * refactor(ui): switch SettingsChat to in-app section navigation * feat(ui): open settings as dialog from sidebar * refactor(ui): remove settings route and URL-based settings navigation * fix(ui): adjust MCP dialogs for new base sizing * chore: Formatting & linting
1 parent 0379a19 commit 539f245

33 files changed

Lines changed: 306 additions & 540 deletions

‎tools/ui/src/lib/components/app/chat/ChatForm/ChatForm.svelte‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
ChatFormInputFileInputInvisible,
99
ChatFormMcpResourcesList,
1010
ChatFormPickers,
11-
DialogMcpResourcesBrowser
11+
DialogMcpResourcesBrowser,
12+
DialogMcpServers
1213
} from '$lib/components/app';
1314
import {
1415
CLIPBOARD_CONTENT_QUOTE_PREFIX,
@@ -183,6 +184,9 @@
183184
let isResourceDialogOpen = $state(false);
184185
let preSelectedResourceUri = $state<string | undefined>(undefined);
185186
187+
// MCP Servers Dialog State
188+
let isMcpServersDialogOpen = $state(false);
189+
186190
let currentConfig = $derived(settingsStore.config);
187191
188192
let pasteLongTextToFileLength = $derived.by(() => {
@@ -618,6 +622,7 @@
618622
onFileUpload={handleFileUpload}
619623
onMcpPromptClick={showMcpPromptButton ? () => pickers.openPromptPicker() : undefined}
620624
onMcpResourcesClick={() => (isResourceDialogOpen = true)}
625+
onMcpSettingsClick={() => (isMcpServersDialogOpen = true)}
621626
onMicClick={handleMicClick}
622627
{onStop}
623628
onSystemPromptClick={() => onSystemPromptClick?.({ files: uploadedFiles, message: value })}
@@ -656,3 +661,5 @@
656661
}}
657662
preSelectedUri={preSelectedResourceUri}
658663
/>
664+
665+
<DialogMcpServers bind:open={isMcpServersDialogOpen} />

‎tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte‎

Lines changed: 9 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
<script lang="ts">
2-
import { File, FolderOpen, MessageSquare, Plus, Zap } from '@lucide/svelte';
3-
import {
4-
ChatFormActionAddMcpServersSubmenu,
5-
ChatFormActionAddReasoningSubmenu,
6-
ChatFormActionAddToolsSubmenu
7-
} from '$lib/components/app';
2+
import { File, MessageSquare, Plus } from '@lucide/svelte';
3+
import { ChatFormActionAddToolsSubmenu, McpLogo } from '$lib/components/app';
84
import { buttonVariants } from '$lib/components/ui/button';
95
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
106
import * as Tooltip from '$lib/components/ui/tooltip';
@@ -31,11 +27,6 @@
3127
// must not restore focus to the trigger on close
3228
let suppressCloseAutoFocus = false;
3329
34-
function handleMcpSettingsClick() {
35-
dropdownOpen = false;
36-
chatFormActions.onMcpSettingsClick?.();
37-
}
38-
3930
const attachmentMenu = useAttachmentMenu(
4031
() => ({
4132
hasAudioModality: chatFormActions.hasAudioModality,
@@ -93,10 +84,6 @@
9384
}
9485
}}
9586
>
96-
<ChatFormActionAddReasoningSubmenu />
97-
98-
<DropdownMenu.Separator />
99-
10087
<DropdownMenu.Sub>
10188
<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
10289
<File class={ICON_CLASS_DEFAULT} />
@@ -156,31 +143,14 @@
156143

157144
<ChatFormActionAddToolsSubmenu />
158145

159-
<ChatFormActionAddMcpServersSubmenu onMcpSettingsClick={handleMcpSettingsClick} />
160-
161-
{#if chatFormActions.hasMcpPromptsSupport}
162-
<DropdownMenu.Separator />
163-
164-
<DropdownMenu.Item
165-
class="flex cursor-pointer items-center gap-2"
166-
onclick={chatFormActions.onMcpPromptClick}
167-
>
168-
<Zap class={ICON_CLASS_DEFAULT} />
169-
170-
<span>MCP Prompt</span>
171-
</DropdownMenu.Item>
172-
{/if}
173-
174-
{#if chatFormActions.hasMcpResourcesSupport}
175-
<DropdownMenu.Item
176-
class="flex cursor-pointer items-center gap-2"
177-
onclick={chatFormActions.onMcpResourcesClick}
178-
>
179-
<FolderOpen class={ICON_CLASS_DEFAULT} />
146+
<DropdownMenu.Item
147+
class="flex cursor-pointer items-center gap-2"
148+
onclick={chatFormActions.onMcpSettingsClick}
149+
>
150+
<McpLogo class={ICON_CLASS_DEFAULT} />
180151

181-
<span>MCP Resources</span>
182-
</DropdownMenu.Item>
183-
{/if}
152+
<span>MCP Servers</span>
153+
</DropdownMenu.Item>
184154
</DropdownMenu.Content>
185155
</DropdownMenu.Root>
186156
</div>

‎tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpServersSubmenu.svelte‎

Lines changed: 0 additions & 152 deletions
This file was deleted.

‎tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpSubmenu.svelte‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<script lang="ts">
2+
import { FolderOpen, Server, Zap } from '@lucide/svelte';
3+
import { McpLogo } from '$lib/components/app';
4+
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
5+
import { ICON_CLASS_DEFAULT } from '$lib/constants';
6+
import { getChatFormActionsContext } from '$lib/contexts';
7+
8+
const chatFormActions = getChatFormActionsContext();
9+
10+
function handleServersClick() {
11+
chatFormActions.onMcpSettingsClick?.();
12+
}
13+
</script>
14+
15+
<DropdownMenu.Sub>
16+
<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
17+
<McpLogo class={ICON_CLASS_DEFAULT} />
18+
19+
<span>MCP</span>
20+
</DropdownMenu.SubTrigger>
21+
22+
<DropdownMenu.SubContent class="w-48">
23+
<DropdownMenu.Item class="flex cursor-pointer items-center gap-2" onclick={handleServersClick}>
24+
<Server class={ICON_CLASS_DEFAULT} />
25+
26+
<span>Servers</span>
27+
</DropdownMenu.Item>
28+
29+
{#if chatFormActions.hasMcpPromptsSupport}
30+
<DropdownMenu.Item
31+
class="flex cursor-pointer items-center gap-2"
32+
onclick={chatFormActions.onMcpPromptClick}
33+
>
34+
<Zap class={ICON_CLASS_DEFAULT} />
35+
36+
<span>Prompts</span>
37+
</DropdownMenu.Item>
38+
{/if}
39+
40+
{#if chatFormActions.hasMcpResourcesSupport}
41+
<DropdownMenu.Item
42+
class="flex cursor-pointer items-center gap-2"
43+
onclick={chatFormActions.onMcpResourcesClick}
44+
>
45+
<FolderOpen class={ICON_CLASS_DEFAULT} />
46+
47+
<span>Resources</span>
48+
</DropdownMenu.Item>
49+
{/if}
50+
</DropdownMenu.SubContent>
51+
</DropdownMenu.Sub>

‎tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script lang="ts">
22
import { SkipForward, Square } from '@lucide/svelte';
3-
import { goto } from '$app/navigation';
43
import { page } from '$app/state';
54
import {
65
ChatFormActionModels,
@@ -10,7 +9,7 @@
109
ChatFormContextGauge
1110
} from '$lib/components/app';
1211
import { Button } from '$lib/components/ui/button';
13-
import { ICON_CLASS_DEFAULT, ROUTES } from '$lib/constants';
12+
import { ICON_CLASS_DEFAULT } from '$lib/constants';
1413
import { setChatFormActionsContext } from '$lib/contexts';
1514
import { FileTypeCategory, MessageRole } from '$lib/enums';
1615
import { ChatService } from '$lib/services';
@@ -34,6 +33,7 @@
3433
onSystemPromptClick?: () => void;
3534
onMcpPromptClick?: () => void;
3635
onMcpResourcesClick?: () => void;
36+
onMcpSettingsClick?: () => void;
3737
}
3838
3939
let {
@@ -47,6 +47,7 @@
4747
onFileUpload,
4848
onMcpPromptClick,
4949
onMcpResourcesClick,
50+
onMcpSettingsClick,
5051
onMicClick,
5152
onStop,
5253
onSystemPromptClick,
@@ -163,7 +164,7 @@
163164
return onMcpResourcesClick;
164165
},
165166
get onMcpSettingsClick() {
166-
return () => goto(ROUTES.MCP_SERVERS);
167+
return onMcpSettingsClick;
167168
},
168169
get onSystemPromptClick() {
169170
return onSystemPromptClick;

‎tools/ui/src/lib/components/app/chat/index.ts‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -221,25 +221,17 @@ export { default as ChatFormActionModels } from './ChatForm/ChatFormActions/Chat
221221
export { default as ChatFormActionAddToolsSubmenu } from './ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddToolsSubmenu.svelte';
222222

223223
/**
224-
* Dropdown submenu for managing MCP servers in the chat form.
224+
* Dropdown submenu for MCP prompts and resources in the chat form.
225225
*
226-
* Displays a searchable list of enabled MCP servers with toggle switches
227-
* to enable/disable each server for chat. Shows server favicon, health status,
228-
* and a "Manage MCP Servers" settings link.
229-
*
230-
* Features:
231-
* - Search/filter servers by name or URL
232-
* - Per-server toggle to enable/disable for chat
233-
* - Health check indicator (shows "Error" badge for failed servers)
234-
* - Server favicon display
235-
* - Settings link to manage MCP server configuration
226+
* Shows an "MCP" sub-menu item with entries for MCP Prompts and MCP
227+
* Resources. Only visible when the server supports them.
236228
*
237229
* @example
238230
* ```svelte
239-
* <ChatFormActionAddMcpServersSubmenu onMcpSettingsClick={handleMcpSettingsClick} />
231+
* <ChatFormActionAddMcpSubmenu />
240232
* ```
241233
*/
242-
export { default as ChatFormActionAddMcpServersSubmenu } from './ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpServersSubmenu.svelte';
234+
export { default as ChatFormActionAddMcpSubmenu } from './ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpSubmenu.svelte';
243235

244236
/**
245237
* Dropdown submenu for selecting reasoning effort level.

‎tools/ui/src/lib/components/app/dialogs/DialogMcpResourcesBrowser.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -253,7 +253,7 @@
253253
</script>
254254

255255
<Dialog.Root onOpenChange={handleOpenChange} {open}>
256-
<Dialog.Content class="max-h-[80vh] !max-w-4xl overflow-hidden p-0">
256+
<Dialog.Content class="max-h-[80vh] md:max-w-4xl! w-full! overflow-hidden p-0">
257257
<Dialog.Header class="border-b border-border/30 px-6 py-4">
258258
<Dialog.Title class="flex items-center gap-2">
259259
<FolderOpen class="h-5 w-5" />

0 commit comments

Comments
 (0)