From 515b99363256a8501ce72621e4c627a62f80c780 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Sat, 22 Aug 2026 13:11:56 +0200
Subject: [PATCH] ui: show modality icons instead of file submenu in chat add
 menu

Assisted-by: pi
---
 .../ChatFormActionAddDropdown.svelte          | 85 +++++++++----------
 1 file changed, 38 insertions(+), 47 deletions(-)

diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte
index 5ff3c6a908..0fb4ae9919 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte
@@ -1,17 +1,13 @@
 <script lang="ts">
-	import { File, MessageSquare, Plus } from '@lucide/svelte';
+	import { File, Image, MessageSquare, Mic, Plus, Video } from '@lucide/svelte';
 	import { ChatFormActionAddToolsSubmenu, McpLogo } from '$lib/components/app';
 	import { buttonVariants } from '$lib/components/ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { cn } from '$lib/components/ui/utils';
-	import {
-		ATTACHMENT_FILE_ITEMS,
-		ATTACHMENT_TOOLTIP_TEXT,
-		ICON_CLASS_DEFAULT,
-		TOOLTIP_DELAY_DURATION
-	} from '$lib/constants';
+	import { ATTACHMENT_FILE_ITEMS, ATTACHMENT_TOOLTIP_TEXT, ICON_CLASS_DEFAULT } from '$lib/constants';
 	import { getChatFormActionsContext } from '$lib/contexts';
+	import { AttachmentAction, AttachmentItemEnabledWhen } from '$lib/enums';
 	import { useAttachmentMenu } from '$lib/hooks/use-attachment-menu.svelte';
 
 	interface Props {
@@ -45,6 +41,19 @@
 			dropdownOpen = false;
 		}
 	);
+
+	const FILE_MODALITY_ICONS: Record<string, { icon: typeof Image; label: string }> = {
+		[AttachmentItemEnabledWhen.HAS_VISION_MODALITY]: { icon: Image, label: 'Vision' },
+		[AttachmentItemEnabledWhen.HAS_AUDIO_MODALITY]: { icon: Mic, label: 'Audio' },
+		[AttachmentItemEnabledWhen.HAS_VIDEO_MODALITY]: { icon: Video, label: 'Video' }
+	};
+
+	const supportedModalities = $derived.by(
+		() =>
+			ATTACHMENT_FILE_ITEMS.filter((item) => attachmentMenu.isItemEnabled(item.enabledWhen))
+				.map((item) => FILE_MODALITY_ICONS[item.enabledWhen ?? ''])
+				.filter((modality) => modality !== undefined)
+	);
 </script>
 
 <div class="flex items-center gap-1 {className}">
@@ -84,50 +93,32 @@
 				}
 			}}
 		>
-			<DropdownMenu.Sub>
-				<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
-					<File class={ICON_CLASS_DEFAULT} />
+			<DropdownMenu.Item
+				class="flex cursor-pointer items-center gap-2"
+				onclick={() => attachmentMenu.callbacks[AttachmentAction.FILE_UPLOAD]()}
+			>
+				<File class={ICON_CLASS_DEFAULT} />
 
+				<span class="flex min-w-0 items-center gap-2">
 					<span>Add files</span>
-				</DropdownMenu.SubTrigger>
 
-				<DropdownMenu.SubContent class="w-48">
-					{#each ATTACHMENT_FILE_ITEMS as item (item.id)}
-						{@const enabled = attachmentMenu.isItemEnabled(item.enabledWhen)}
-						{#if enabled}
-							<DropdownMenu.Item
-								class="{item.class ?? ''} flex cursor-pointer items-center gap-2"
-								onclick={() => attachmentMenu.callbacks[item.action]()}
-							>
-								<item.icon class={ICON_CLASS_DEFAULT} />
+					{#if supportedModalities.length > 0}
+						<span class="flex items-center gap-0.75 text-muted-foreground">
+							{#each supportedModalities as modality (modality.label)}
+								<Tooltip.Root>
+									<Tooltip.Trigger>
+										<modality.icon class="size-2.75" />
+									</Tooltip.Trigger>
 
-								<span>{item.label}</span>
-							</DropdownMenu.Item>
-						{:else if item.disabledTooltip}
-							<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
-								<Tooltip.Trigger tabindex={-1}>
-									{#snippet child({ props })}
-										<div {...props} class="cursor-default">
-											<DropdownMenu.Item
-												class="{item.class ?? ''} flex items-center gap-2"
-												disabled
-											>
-												<item.icon class={ICON_CLASS_DEFAULT} />
-
-												<span>{item.label}</span>
-											</DropdownMenu.Item>
-										</div>
-									{/snippet}
-								</Tooltip.Trigger>
-
-								<Tooltip.Content side="right">
-									<p>{item.disabledTooltip}</p>
-								</Tooltip.Content>
-							</Tooltip.Root>
-						{/if}
-					{/each}
-				</DropdownMenu.SubContent>
-			</DropdownMenu.Sub>
+									<Tooltip.Content>
+										<p>{modality.label}</p>
+									</Tooltip.Content>
+								</Tooltip.Root>
+							{/each}
+						</span>
+					{/if}
+				</span>
+			</DropdownMenu.Item>
 
 			<DropdownMenu.Item
 				class="flex cursor-pointer items-center gap-2"