differing mobile layout

src/lib/backend/convex/conversations.ts

@@ -89,11 +89,15 @@ export const createAndAddMessage = mutation({
 		content: v.string(),
 		role: messageRoleValidator,
 		session_token: v.string(),
-		images: v.optional(v.array(v.object({
+		images: v.optional(
+			v.array(
+				v.object({
 					url: v.string(),
 					storage_id: v.string(),
 					fileName: v.optional(v.string()),
-		}))),
+				})
+			)
+		),
 	},
 	handler: async (
 		ctx,

src/lib/backend/convex/messages.ts

@@ -41,11 +41,15 @@ export const create = mutation({
 		provider: v.optional(providerValidator),
 		token_count: v.optional(v.number()),
 		// Optional image attachments
-		images: v.optional(v.array(v.object({
+		images: v.optional(
+			v.array(
+				v.object({
 					url: v.string(),
 					storage_id: v.string(),
 					fileName: v.optional(v.string()),
-		}))),
+				})
+			)
+		),
 	},
 	handler: async (ctx, args): Promise<Id<'messages'>> => {
 		const session = await ctx.runQuery(api.betterAuth.publicGetSession, {

src/lib/backend/convex/storage.ts

@@ -55,4 +55,3 @@ export const deleteFile = mutation({
 		await ctx.storage.delete(args.storage_id);
 	},
 });
-

src/routes/account/models/model-card.svelte

@@ -52,7 +52,7 @@
 		<div class="flex items-center justify-between">
 			<div class="flex place-items-center gap-2">
 				<Card.Title>{model.name}</Card.Title>
-				<span class="text-muted-foreground text-xs hidden xl:block">{model.id}</span>
+				<span class="text-muted-foreground hidden text-xs xl:block">{model.id}</span>
 			</div>
 			<Switch bind:value={() => enabled, toggleEnabled} {disabled} />
 		</div>

src/routes/chat/model-picker.svelte

@@ -111,7 +111,7 @@
 		return 'other';
 	}
 
-	let search = $state('')
+	let search = $state('');
 
 	const filteredModels = $derived(
 		fuzzysearch({
@@ -197,7 +197,7 @@
 		};
 	}
 
-	const isMobile = new IsMobile()
+	const isMobile = new IsMobile();
 </script>
 
 {#if enabledArr.length === 0}
@@ -230,8 +230,14 @@
 		{...popover.content}
 		class="border-border bg-popover mt-1 max-h-200 min-w-80 flex-col overflow-hidden rounded-xl border p-0 backdrop-blur-sm data-[open]:flex"
 	>
-		<Command.Root shouldFilter={false} class="flex h-full flex-col overflow-hidden w-[572px]" columns={4}>
+		<Command.Root
-			<label class="group/label relative flex items-center border-b border-border gap-2 px-4 py-3 text-sm">
+			shouldFilter={false}
+			class="flex h-full flex-col overflow-hidden md:w-[572px]"
+			columns={isMobile.current ? undefined : 4}
+		>
+			<label
+				class="group/label border-border relative flex items-center gap-2 border-b px-4 py-3 text-sm"
+			>
 				<SearchIcon class="text-muted-foreground" />
 				<Command.Input
 					class="w-full outline-none"
@@ -247,22 +253,62 @@
 					}}
 				/>
 			</label>
-			<Command.List class="overflow-y-auto h-[430px]">
+			<Command.List class="h-[300px] overflow-y-auto md:h-[430px]">
 				<Command.Viewport>
-					<Command.Empty class="text-muted-foreground p-4 text-sm h-[120px] flex items-center justify-center">
+					<Command.Empty
+						class="text-muted-foreground flex items-center justify-center p-4 text-sm md:h-[120px]"
+					>
 						No models available. Enable some models in the account settings.
 					</Command.Empty>
 					{#each groupedModels as [company, models] (company)}
 						<Command.Group class="space-y-2">
 							<Command.GroupHeading
-								class="text-heading/75 scroll-m-[180px] flex items-center gap-2 px-3 pt-3 pb-1 text-xs font-semibold tracking-wide capitalize"
+								class="text-heading/75 flex items-center gap-2 px-3 pt-3 pb-1 text-xs font-semibold tracking-wide capitalize md:scroll-m-[180px]"
 							>
 								{company}
 							</Command.GroupHeading>
-							<Command.GroupItems class="grid grid-cols-4 gap-3 px-3 pb-3">
+							<Command.GroupItems
+								class="flex flex-col gap-2 px-3 pb-3 md:grid md:grid-cols-4 md:gap-3"
+							>
 								{#each models as model (model._id)}
 									{@const isSelected = settings.modelId === model.model_id}
 									{@const formatted = formatModelName(model.model_id)}
+									{#if isMobile.current}
+										<Command.Item
+											value={model.model_id}
+											onSelect={() => selectModel(model.model_id)}
+											class={cn(
+												'border-border flex h-10 items-center justify-between rounded-lg border p-2',
+												'relative scroll-m-2 select-none',
+												'data-selected:bg-accent/50 data-selected:text-accent-foreground',
+												isSelected && 'border-reflect border-none'
+											)}
+										>
+											<div class="flex items-center gap-2">
+												{#if getModelIcon(model.model_id)}
+													{@const ModelIcon = getModelIcon(model.model_id)}
+													<ModelIcon class="size-6 shrink-0" />
+												{/if}
+												<p class="font-fake-proxima text-center leading-tight font-bold">
+													{formatted.full}
+												</p>
+											</div>
+
+											{@const openRouterModel = modelsState
+												.from(Provider.OpenRouter)
+												.find((m) => m.id === model.model_id)}
+											{#if openRouterModel && supportsImages(openRouterModel)}
+												<Tooltip>
+													{#snippet trigger(tooltip)}
+														<div class="" {...tooltip.trigger}>
+															<EyeIcon class="size-3" />
+														</div>
+													{/snippet}
+													Supports image anaylsis
+												</Tooltip>
+											{/if}
+										</Command.Item>
+									{:else}
 										<Command.Item
 											value={model.model_id}
 											onSelect={() => selectModel(model.model_id)}
@@ -270,8 +316,7 @@
 												'border-border flex h-40 w-32 flex-col items-center justify-center rounded-lg border p-2',
 												'relative select-none',
 												'data-selected:bg-accent/50 data-selected:text-accent-foreground',
-											isSelected && 'border-reflect border-none',
+												isSelected && 'border-reflect border-none'
-											
 											)}
 										>
 											{#if getModelIcon(model.model_id)}
@@ -302,6 +347,7 @@
 												</Tooltip>
 											{/if}
 										</Command.Item>
+									{/if}
 								{/each}
 							</Command.GroupItems>
 						</Command.Group>