WebUI: Replace illegal nested button elements (#21026)

* remove/replace nested button elements

* map rest props to outer element

* solve TODO

* chore: update webui build output

diff --git a/tools/server/public/index.html.gz b/tools/server/public/index.html.gz
index 5e7326a5844aa61f5860d9ce7b6be7b197ff280e..ffeed79ff7064764fa59591a0150d9842ee40df6 100644 (file)
Binary files a/tools/server/public/index.html.gz and b/tools/server/public/index.html.gz differ

diff --git a/tools/server/webui/src/lib/components/app/models/ModelId.svelte b/tools/server/webui/src/lib/components/app/models/ModelId.svelte
index 5fda493429df45dc31d2987a508642d99315000d..272b697c4638d7b3abc8ff7f15ff9e4c89eb12ac 100644 (file)
--- a/tools/server/webui/src/lib/components/app/models/ModelId.svelte
+++ b/tools/server/webui/src/lib/components/app/models/ModelId.svelte
@@ -18,7 +18,8 @@
                showRaw = undefined,
                aliases,
                tags,
-               class: className = ''
+               class: className = '',
+               ...rest
        }: Props = $props();
 
        const badgeClass =
@@ -36,9 +37,9 @@
 </script>
 
 {#if resolvedShowRaw}
-       <TruncatedText class="font-medium {className}" showTooltip={false} text={modelId} />
+       <TruncatedText class="font-medium {className}" showTooltip={false} text={modelId} {...rest} />
 {:else}
-       <span class="flex min-w-0 flex-wrap items-center gap-1 {className}">
+       <span class="flex min-w-0 flex-wrap items-center gap-1 {className}" {...rest}>
                <span class="min-w-0 truncate font-medium">
                        {#if showOrgName && parsed.orgName && !(aliases && aliases.length > 0)}{parsed.orgName}/{/if}{displayName}
                </span>

diff --git a/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte b/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte
index 0ed6e5c1ddb3a811613531da754990d27be28e8e..ccda78690cf44eff0a2ffb2ece52ef257e17ec4f 100644 (file)
--- a/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte
+++ b/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte
@@ -271,50 +271,49 @@
                {#if isRouter}
                        <DropdownMenu.Root bind:open={isOpen} onOpenChange={handleOpenChange}>
                                <DropdownMenu.Trigger
+                                       class={cn(
+                                               `inline-grid cursor-pointer grid-cols-[1fr_auto_1fr] items-center gap-1.5 rounded-sm bg-muted-foreground/10 px-1.5 py-1 text-xs transition hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60`,
+                                               !isCurrentModelInCache
+                                                       ? 'bg-red-400/10 !text-red-400 hover:bg-red-400/20 hover:text-red-400'
+                                                       : forceForegroundText
+                                                               ? 'text-foreground'
+                                                               : isHighlightedCurrentModelActive
+                                                                       ? 'text-foreground'
+                                                                       : 'text-muted-foreground',
+                                               isOpen ? 'text-foreground' : ''
+                                       )}
+                                       style="max-width: min(calc(100cqw - 9rem), 20rem)"
                                        disabled={disabled || updating}
-                                       onclick={(e) => {
-                                               e.preventDefault();
-                                               e.stopPropagation();
-                                       }}
                                >
-                                       <button
-                                               type="button"
-                                               class={cn(
-                                                       `inline-grid cursor-pointer grid-cols-[1fr_auto_1fr] items-center gap-1.5 rounded-sm bg-muted-foreground/10 px-1.5 py-1 text-xs transition hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60`,
-                                                       !isCurrentModelInCache
-                                                               ? 'bg-red-400/10 !text-red-400 hover:bg-red-400/20 hover:text-red-400'
-                                                               : forceForegroundText
-                                                                       ? 'text-foreground'
-                                                                       : isHighlightedCurrentModelActive
-                                                                               ? 'text-foreground'
-                                                                               : 'text-muted-foreground',
-                                                       isOpen ? 'text-foreground' : ''
-                                               )}
-                                               style="max-width: min(calc(100cqw - 9rem), 20rem)"
-                                               disabled={disabled || updating}
-                                       >
-                                               <Package class="h-3.5 w-3.5" />
-
-                                               {#if selectedOption}
-                                                       <Tooltip.Root>
-                                                               <Tooltip.Trigger class="min-w-0 overflow-hidden">
-                                                                       <ModelId modelId={selectedOption.model} class="min-w-0" showOrgName />
-                                                               </Tooltip.Trigger>
-
-                                                               <Tooltip.Content>
-                                                                       <p class="font-mono">{selectedOption.model}</p>
-                                                               </Tooltip.Content>
-                                                       </Tooltip.Root>
-                                               {:else}
-                                                       <span class="min-w-0 font-medium">Select model</span>
-                                               {/if}
-
-                                               {#if updating || isLoadingModel}
-                                                       <Loader2 class="h-3 w-3.5 animate-spin" />
-                                               {:else}
-                                                       <ChevronDown class="h-3 w-3.5" />
-                                               {/if}
-                                       </button>
+                                       <Package class="h-3.5 w-3.5" />
+
+                                       {#if selectedOption}
+                                               <Tooltip.Root>
+                                                       <Tooltip.Trigger>
+                                                               <!-- prevent another nested button element -->
+                                                               {#snippet child({ props })}
+                                                                       <ModelId
+                                                                               modelId={selectedOption.model}
+                                                                               class="min-w-0 overflow-hidden"
+                                                                               showOrgName
+                                                                               {...props}
+                                                                       />
+                                                               {/snippet}
+                                                       </Tooltip.Trigger>
+
+                                                       <Tooltip.Content>
+                                                               <p class="font-mono">{selectedOption.model}</p>
+                                                       </Tooltip.Content>
+                                               </Tooltip.Root>
+                                       {:else}
+                                               <span class="min-w-0 font-medium">Select model</span>
+                                       {/if}
+
+                                       {#if updating || isLoadingModel}
+                                               <Loader2 class="h-3 w-3.5 animate-spin" />
+                                       {:else}
+                                               <ChevronDown class="h-3 w-3.5" />
+                                       {/if}
                                </DropdownMenu.Trigger>
 
                                <DropdownMenu.Content
@@ -407,8 +406,16 @@
 
                                {#if selectedOption}
                                        <Tooltip.Root>
-                                               <Tooltip.Trigger class="min-w-0 overflow-hidden">
-                                                       <ModelId modelId={selectedOption.model} class="min-w-0" showOrgName />
+                                               <Tooltip.Trigger>
+                                                       <!-- prevent another nested button element -->
+                                                       {#snippet child({ props })}
+                                                               <ModelId
+                                                                       modelId={selectedOption.model}
+                                                                       class="min-w-0 overflow-hidden"
+                                                                       showOrgName
+                                                                       {...props}
+                                                               />
+                                                       {/snippet}
                                                </Tooltip.Trigger>
 
                                                <Tooltip.Content>