improve UI

src/lib/components/chat/markdown/Code.svelte

@@ -128,7 +128,7 @@
 			</Button>
 			<iframe
 				srcDoc={text}
-				class="h-[80dvh] w-full"
+				class="h-[90dvh] w-full"
 				title="Preview"
 				sandbox="allow-scripts allow-popups"
 				referrerpolicy="no-referrer"

src/lib/components/model/ComboBoxModels.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Plus, Info, ChevronLeft, Image } from '@lucide/svelte';
+	import { Plus, Info, ChevronLeft } from '@lucide/svelte';
 
 	import * as Command from '$lib/components/ui/command/';
 	import { Button } from '$lib/components/ui/button/';
@@ -7,6 +7,7 @@
 	import { MAX_TRENDING_MODELS } from '$lib';
 	import Spinner from '../loading/Spinner.svelte';
 	import { mode } from 'mode-watcher';
+	import ModelImageInput from './ModelImageInput.svelte';
 
 	interface Props {
 		onSelect?: (model: string) => void;
@@ -79,12 +80,7 @@
 						/>
 						<span>{model.id.split('/').pop() ?? model.id}</span>
 						{#if model.architecture?.input_modalities?.includes('image')}
-							<span
-								class="flex h-[18px] items-center justify-center gap-1 rounded bg-gray-500/10 px-1 text-xs text-muted-foreground"
-							>
-								<Image class="size-3!" />
-								Image supported in input
-							</span>
+							<ModelImageInput />
 						{/if}
 					</Command.Item>
 				{/each}
@@ -105,12 +101,7 @@
 						/>
 						<span>{model.id.split('/').pop() ?? model.id}</span>
 						{#if model.architecture?.input_modalities?.includes('image')}
-							<span
-								class="flex h-[18px] items-center justify-center gap-1 rounded bg-gray-500/10 px-1 text-xs text-muted-foreground"
-							>
-								<Image class="size-3!" />
-								Image supported in input
-							</span>
+							<ModelImageInput />
 						{/if}
 					</Command.Item>
 				{/each}

src/lib/components/model/ListModels.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Image, X } from '@lucide/svelte';
+	import { X } from '@lucide/svelte';
 
 	import { Button } from '$lib/components/ui/button';
 	import SettingsModel from './SettingsModel.svelte';
 	import { modelsState } from '$lib/state/models.svelte';
-	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
 	import { mode } from 'mode-watcher';
+	import ModelImageInput from './ModelImageInput.svelte';
 
 	let {
 		selectedModels,
@@ -31,18 +31,7 @@
 			/>
 			{model.split('/').pop() ?? model}
 			{#if modelData?.architecture?.input_modalities?.includes('image')}
-				<Tooltip.Root delayDuration={0}>
-					<Tooltip.Trigger>
-						<span
-							class="flex size-[18px] items-center justify-center rounded bg-gray-500/10 text-xs text-gray-500"
-						>
-							<Image class="size-3" />
-						</span>
-					</Tooltip.Trigger>
-					<Tooltip.Content>
-						<p>This model supports image input.</p>
-					</Tooltip.Content>
-				</Tooltip.Root>
+				<ModelImageInput />
 			{/if}
 		</div>
 	{:else}
@@ -59,18 +48,7 @@
 				/>
 				{model.split('/').pop() ?? model}
 				{#if modelData?.architecture?.input_modalities?.includes('image')}
-					<Tooltip.Root delayDuration={0}>
-						<Tooltip.Trigger>
-							<span
-								class="flex size-[18px] items-center justify-center rounded bg-gray-500/10 text-xs text-gray-500"
-							>
-								<Image class="size-3" />
-							</span>
-						</Tooltip.Trigger>
-						<Tooltip.Content>
-							<p>This model supports image input.</p>
-						</Tooltip.Content>
-					</Tooltip.Root>
+					<ModelImageInput />
 				{/if}
 				<Button
 					variant="default"

src/lib/components/model/ModelImageInput.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Image } from '@lucide/svelte';
+
+	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+</script>
+
+<Tooltip.Root delayDuration={0}>
+	<Tooltip.Trigger>
+		<span
+			class="flex size-[18px] items-center justify-center rounded bg-indigo-500/10 text-xs text-indigo-500 dark:bg-indigo-500/20 dark:text-indigo-400"
+		>
+			<Image class="size-3" />
+		</span>
+	</Tooltip.Trigger>
+	<Tooltip.Content>
+		<p>This model supports image input.</p>
+	</Tooltip.Content>
+</Tooltip.Root>

src/lib/components/model/SettingsModel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { ExternalLink, Frown, MessageCircle, Save, X, Image } from '@lucide/svelte';
+	import { ExternalLink, Frown, MessageCircle, Save, X } from '@lucide/svelte';
 
 	import type { ChatModel } from '$lib/helpers/types';
 	import { formatPricingPerToken, getProviderName } from '$lib/index.js';
@@ -16,6 +16,7 @@
 	import Spinner from '../loading/Spinner.svelte';
 	import { modelsState, saveModelSettings } from '$lib/state/models.svelte';
 	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+	import ModelImageInput from './ModelImageInput.svelte';
 
 	let {
 		model: modelId,
@@ -146,26 +147,17 @@
 								</span>
 								<div class="flex items-center gap-0.5">
 									{#if mdl.architecture?.input_modalities?.includes('image')}
-										<Tooltip.Root delayDuration={0}>
-											<Tooltip.Trigger>
-												<span
-													class="flex size-[18px] items-center justify-center rounded bg-gray-500/10 text-gray-500"
-												>
-													<Image class="size-3" />
-												</span>
-											</Tooltip.Trigger>
-											<Tooltip.Content>
-												<p class="flex items-center gap-1">This model supports image input</p>
-											</Tooltip.Content>
-										</Tooltip.Root>
+										<ModelImageInput />
 									{/if}
 									{#if selectedModels.includes(mdl.id)}
 										<Tooltip.Root delayDuration={0}>
 											<Tooltip.Trigger>
 												<span
-													class="flex size-[18px] items-center justify-center rounded bg-indigo-500/10 text-indigo-500"
+													class="flex size-[18px] items-center justify-center rounded bg-neutral-900/10 text-neutral-900 dark:bg-neutral-100/10 dark:text-neutral-100"
 												>
-													<MessageCircle class="0 size-2.5 fill-indigo-500" />
+													<MessageCircle
+														class="0 size-2.5 fill-neutral-900 dark:fill-neutral-100"
+													/>
 												</span>
 											</Tooltip.Trigger>
 											<Tooltip.Content>