feat: Allows sending messages with attachments only

Updates the chat form to enable sending messages even if the text input is empty, as long as there are uploaded files attached.

Also adds tooltips to the microphone and attachment buttons to indicate if the current model does not support audio or vision, respectively.
Hides the card from the user's message if the message content is empty.

Author: allozaur

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte

@@ -159,7 +159,7 @@
 		<ChatFormActionButtons
 			{disabled}
 			{isLoading}
-			canSend={message.trim().length > 0}
+			canSend={message.trim().length > 0 || uploadedFiles.length > 0}
 			onFileUpload={handleFileUpload}
 			onStop={handleStop}
 		/>

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActionButtons.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
 	import { Square, Paperclip, Mic, ArrowUp } from '@lucide/svelte';
+	import { supportsAudio, supportsVision } from '$lib/stores/server.svelte';
+	import * as Tooltip from '$lib/components/ui/tooltip';
 
 	interface Props {
 		disabled?: boolean;
@@ -9,6 +11,7 @@
 		onFileUpload?: () => void;
 		onStop?: () => void;
 		onMicClick?: () => void;
+		isRecording?: boolean;
 		class?: string;
 	}
 
@@ -19,20 +22,34 @@
 		onFileUpload,
 		onStop,
 		onMicClick,
+		isRecording = false,
 		class: className = ''
 	}: Props = $props();
 </script>
 
 <div class="flex items-center justify-between gap-1 {className}">
-	<Button
-		type="button"
-		class="text-muted-foreground bg-transparent hover:bg-foreground/10 hover:text-foreground h-8 w-8 rounded-full p-0"
-		disabled={disabled || isLoading}
-		onclick={onFileUpload}
-	>
-		<span class="sr-only">Attach files</span>
-		<Paperclip class="h-4 w-4" />
-	</Button>
+	<div class="flex items-center gap-1">
+		<Tooltip.Root>
+			<Tooltip.Trigger>
+				<Button
+					type="button"
+					class="text-muted-foreground bg-transparent hover:bg-foreground/10 hover:text-foreground h-8 w-8 rounded-full p-0 {!supportsVision()
+						? 'opacity-50 cursor-not-allowed'
+						: ''}"
+					disabled={disabled || isLoading || !supportsVision()}
+					onclick={onFileUpload}
+				>
+					<span class="sr-only">Attach files</span>
+					<Paperclip class="h-4 w-4" />
+				</Button>
+			</Tooltip.Trigger>
+			{#if !supportsVision()}
+				<Tooltip.Content>
+					<p>Current model does not support vision</p>
+				</Tooltip.Content>
+			{/if}
+		</Tooltip.Root>
+	</div>
 
 	<div class="flex gap-2">
 		{#if isLoading}
@@ -45,15 +62,29 @@
 				<Square class="h-8 w-8 fill-destructive stroke-destructive" />
 			</Button>
 		{:else}
-			<Button
-				type="button"
-				class="text-muted-foreground bg-transparent hover:bg-foreground/10 hover:text-foreground h-8 w-8 rounded-full p-0"
-				disabled={disabled || isLoading}
-				onclick={onMicClick}
-			>
-				<span class="sr-only">Start recording</span>
-				<Mic class="h-8 w-8" />
-			</Button>
+			<Tooltip.Root>
+				<Tooltip.Trigger>
+					<Button
+						type="button"
+						class="h-8 w-8 rounded-full p-0 {isRecording
+							? 'bg-red-500 hover:bg-red-600 text-white animate-pulse'
+							: 'text-muted-foreground bg-transparent hover:bg-foreground/10 hover:text-foreground'} {!supportsAudio()
+							? 'opacity-50 cursor-not-allowed'
+							: ''}"
+						disabled={disabled || isLoading || !supportsAudio()}
+						onclick={onMicClick}
+					>
+						<span class="sr-only">{isRecording ? 'Stop recording' : 'Start recording'}</span>
+						<Mic class="h-4 w-4" />
+					</Button>
+				</Tooltip.Trigger>
+
+				{#if !supportsAudio()}
+					<Tooltip.Content>
+						<p>Current model does not support audio</p>
+					</Tooltip.Content>
+				{/if}
+			</Tooltip.Root>
 
 			<Button
 				type="submit"

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte

@@ -143,11 +143,13 @@
 				</div>
 			{/if}
 
-			<Card class="bg-primary text-primary-foreground max-w-[80%] rounded-2xl px-2.5 py-1.5">
-				<div class="text-md whitespace-pre-wrap">
-					{message.content}
-				</div>
-			</Card>
+			{#if message.content.trim()}
+				<Card class="bg-primary text-primary-foreground max-w-[80%] rounded-2xl px-2.5 py-1.5">
+					<div class="text-md whitespace-pre-wrap">
+						{message.content}
+					</div>
+				</Card>
+			{/if}
 
 			<div class="relative flex h-6 items-center">
 				{@render messageActions({ role: 'user' })}