diff --git a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpPrompt.svelte b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpPrompt.svelte index c802f361ac..5fba2b3d19 100644 --- a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpPrompt.svelte +++ b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpPrompt.svelte @@ -32,7 +32,7 @@ {#if !readonly && onRemove}
onRemove?.()} />
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPicker.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPicker.svelte index f601c6dd4e..555a83f178 100644 --- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPicker.svelte +++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPicker.svelte @@ -41,6 +41,7 @@ let selectedIndex = $state(0); let internalSearchQuery = $state(''); let promptError = $state(null); + let selectedIndexBeforeArgumentForm = $state(null); let suggestions = $state>({}); let loadingSuggestions = $state>({}); @@ -99,12 +100,20 @@ } function handlePromptClick(prompt: MCPPromptInfo) { - const requiredArgs = prompt.arguments?.filter((arg) => arg.required) ?? []; + const args = prompt.arguments ?? []; - if (requiredArgs.length > 0) { + if (args.length > 0) { + selectedIndexBeforeArgumentForm = selectedIndex; selectedPrompt = prompt; promptArgs = {}; promptError = null; + + requestAnimationFrame(() => { + const firstInput = document.querySelector(`#arg-${args[0].name}`) as HTMLInputElement; + if (firstInput) { + firstInput.focus(); + } + }); } else { executePrompt(prompt, {}); } @@ -212,6 +221,14 @@ function handleArgKeydown(event: KeyboardEvent, argName: string) { const argSuggestions = suggestions[argName] ?? []; + // Handle Escape - return to prompt selection list + if (event.key === KeyboardKey.ESCAPE) { + event.preventDefault(); + event.stopPropagation(); + handleCancelArgumentForm(); + return; + } + if (argSuggestions.length === 0 || activeAutocomplete !== argName) return; if (event.key === KeyboardKey.ARROW_DOWN) { @@ -224,10 +241,6 @@ event.preventDefault(); event.stopPropagation(); selectSuggestion(argName, argSuggestions[autocompleteIndex]); - } else if (event.key === KeyboardKey.ESCAPE) { - event.preventDefault(); - suggestions[argName] = []; - activeAutocomplete = null; } } @@ -248,6 +261,11 @@ } function handleCancelArgumentForm() { + // Restore the previously selected prompt index + if (selectedIndexBeforeArgumentForm !== null) { + selectedIndex = selectedIndexBeforeArgumentForm; + selectedIndexBeforeArgumentForm = null; + } selectedPrompt = null; promptArgs = {}; promptError = null; @@ -259,8 +277,8 @@ if (event.key === KeyboardKey.ESCAPE) { event.preventDefault(); if (selectedPrompt) { - selectedPrompt = null; - promptArgs = {}; + // Return to prompt selection list, keeping the selected prompt active + handleCancelArgumentForm(); } else { onClose?.(); } diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerList.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerList.svelte index 0954335194..755904c29a 100644 --- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerList.svelte +++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerList.svelte @@ -39,7 +39,7 @@ if (selectedElement) { selectedElement.scrollIntoView({ behavior: 'smooth', - block: 'nearest', + block: 'center', inline: 'nearest' }); } diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageMcpPromptContent.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageMcpPromptContent.svelte index 2906a48f76..c80e9e8307 100644 --- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageMcpPromptContent.svelte +++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageMcpPromptContent.svelte @@ -79,11 +79,10 @@ let showArgBadges = $derived(hasArguments && !isLoading && !loadError); let isAttachment = $derived(variant === McpPromptVariant.ATTACHMENT); - let textSizeClass = $derived(isAttachment ? 'text-sm' : 'text-md'); + let textSizeClass = $derived(isAttachment ? 'text-xs' : 'text-md'); + let paddingClass = $derived(isAttachment ? 'px-3 py-2' : 'px-3.75 py-2.5'); let maxHeightStyle = $derived( - isAttachment - ? 'max-height: 10rem;' - : 'min-height: var(--min-message-height); max-height: var(--max-message-height);' + isAttachment ? 'max-height: 6rem;' : 'max-height: var(--max-message-height);' ); const serverFavicon = $derived(mcpStore.getServerFavicon(prompt.serverName)); @@ -146,7 +145,7 @@ class="relative overflow-hidden rounded-[1.125rem] border border-destructive/50 bg-destructive/10 backdrop-blur-md" >
{loadError} @@ -154,15 +153,17 @@ {:else if isLoading}
- - Loading prompt content... - +
+
+
+
+
{:else if hasContent} @@ -170,7 +171,7 @@ class="relative overflow-hidden rounded-[1.125rem] border border-purple-200 bg-purple-500/10 py-0 text-foreground backdrop-blur-md dark:border-purple-800 dark:bg-purple-500/20" >