ui: Add Thinking mode toggle with reasoning effort levels + improvements for Chat Form Add Action UI (#23434)

* feat: Add "Thinking" toggle and status icon + redesign Chat Form Actions Add panel * test: Update test reference * fix: Icon * fix: E2E test command * fix: wait for greeting h1 to be visible in e2e test * fix: remove duplicate PDF option in attachment dropdown * fix: use label-based group toggle to avoid stale references * refactor: inline MCP server and tool toggles in mobile sheet * fix: serve correct build directory in e2e playwright config * feat: add reasoning effort levels selector in model dropdown * feat: Reasoning effort * refactor: Make server origin configurable via environment variable * feat: Add chat template thinking detector utility * feat: Add thinking support detection to models store * refactor: Update model selector components with thinking detection and message-specific indicators * feat: Update chat form components for model selection and thinking support * feat: Improve Reasoning controls UI * refactor: Apply suggestions from code review Co-authored-by: Aleksander Grygier <aleksander.grygier@gmail.com> * fix: Model tags * refactor: Cleanup * refactor: Remove unneeded components * refactor: Cleanup
2026-06-02 10:23:19 +02:00
parent 2365315955
commit f8e67fc583
40 changed files with 1085 additions and 263 deletions
@@ -111,6 +111,7 @@
 	let preSelectedResourceUri = $state<string | undefined>(undefined);

 	let currentConfig = $derived(config());
+
 	let pasteLongTextToFileLength = $derived.by(() => {
 		const n = Number(currentConfig.pasteLongTextToFileLen);
 		return Number.isNaN(n) ? Number(SETTING_CONFIG_DEFAULT.pasteLongTextToFileLen) : n;
@@ -1,22 +1,18 @@
 <script lang="ts">
-	import { Plus } from '@lucide/svelte';
+	import { Plus, File, MessageSquare, Zap, FolderOpen } from '@lucide/svelte';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { buttonVariants } from '$lib/components/ui/button';
 	import { cn } from '$lib/components/ui/utils';
 	import {
 		ATTACHMENT_FILE_ITEMS,
-		ATTACHMENT_EXTRA_ITEMS,
-		ATTACHMENT_MCP_ITEMS,
 		ATTACHMENT_TOOLTIP_TEXT,
 		TOOLTIP_DELAY_DURATION
 	} from '$lib/constants';
-	import { AttachmentMenuItemId } from '$lib/enums';
 	import {
 		ChatFormActionAddToolsSubmenu,
 		ChatFormActionAddMcpServersSubmenu
 	} from '$lib/components/app';
-
 	import { useAttachmentMenu } from '$lib/hooks/use-attachment-menu.svelte';

 	interface Props {
@@ -97,107 +93,87 @@
 		</Tooltip.Root>

 		<DropdownMenu.Content align="start" 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="h-4 w-4" />
+			<DropdownMenu.Sub>
+				<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
+					<File class="h-4 w-4" />

-						<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="h-4 w-4" />
+					<span>Add files</span>
+				</DropdownMenu.SubTrigger>

-										<span>{item.label}</span>
-									</DropdownMenu.Item>
-								</div>
-							{/snippet}
-						</Tooltip.Trigger>
-
-						<Tooltip.Content side="right">
-							<p>{item.disabledTooltip}</p>
-						</Tooltip.Content>
-					</Tooltip.Root>
-				{/if}
-			{/each}
-
-			{#if !attachmentMenu.isItemEnabled('hasVisionModality')}
-				<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
-					<Tooltip.Trigger>
-						{#snippet child({ props })}
+				<DropdownMenu.SubContent class="w-48">
+					{#each ATTACHMENT_FILE_ITEMS as item (item.id)}
+						{@const enabled = attachmentMenu.isItemEnabled(item.enabledWhen)}
+						{#if enabled}
 							<DropdownMenu.Item
-								{...props}
-								class="flex cursor-pointer items-center gap-2"
-								onclick={attachmentMenu.callbacks.onFileUpload}
+								class="{item.class ?? ''} flex cursor-pointer items-center gap-2"
+								onclick={() => attachmentMenu.callbacks[item.action]()}
 							>
-								{@const pdfItem = ATTACHMENT_FILE_ITEMS.find(
-									(i) => i.id === AttachmentMenuItemId.PDF
-								)}
-								{#if pdfItem}
-									<pdfItem.icon class="h-4 w-4" />
+								<item.icon class="h-4 w-4" />

-									<span>{pdfItem.label}</span>
-								{/if}
+								<span>{item.label}</span>
 							</DropdownMenu.Item>
-						{/snippet}
-					</Tooltip.Trigger>
+						{: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="h-4 w-4" />

-					<Tooltip.Content side="right">
-						<p>PDFs will be converted to text. Image-based PDFs may not work properly.</p>
-					</Tooltip.Content>
-				</Tooltip.Root>
-			{/if}
+												<span>{item.label}</span>
+											</DropdownMenu.Item>
+										</div>
+									{/snippet}
+								</Tooltip.Trigger>

-			<DropdownMenu.Separator />
+								<Tooltip.Content side="right">
+									<p>{item.disabledTooltip}</p>
+								</Tooltip.Content>
+							</Tooltip.Root>
+						{/if}
+					{/each}
+				</DropdownMenu.SubContent>
+			</DropdownMenu.Sub>

-			{#each ATTACHMENT_EXTRA_ITEMS as item (item.id)}
-				{#if item.id === AttachmentMenuItemId.SYSTEM_MESSAGE}
-					<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
-						<Tooltip.Trigger>
-							{#snippet child({ props })}
-								<DropdownMenu.Item
-									{...props}
-									class="flex cursor-pointer items-center gap-2"
-									onclick={() => attachmentMenu.callbacks[item.action]()}
-								>
-									<item.icon class="h-4 w-4" />
+			<DropdownMenu.Item
+				class="flex cursor-pointer items-center gap-2"
+				onclick={onSystemPromptClick}
+			>
+				<MessageSquare class="h-4 w-4" />

-									<span>{item.label}</span>
-								</DropdownMenu.Item>
-							{/snippet}
-						</Tooltip.Trigger>
-
-						<Tooltip.Content side="right">
-							<p>{attachmentMenu.getSystemMessageTooltip()}</p>
-						</Tooltip.Content>
-					</Tooltip.Root>
-				{/if}
-			{/each}
+				<span>System Message</span>
+			</DropdownMenu.Item>

 			<ChatFormActionAddToolsSubmenu />

 			<ChatFormActionAddMcpServersSubmenu onMcpSettingsClick={handleMcpSettingsClick} />

-			{#each ATTACHMENT_MCP_ITEMS as item (item.id)}
-				{#if attachmentMenu.isItemVisible(item.visibleWhen)}
-					<DropdownMenu.Item
-						class="flex cursor-pointer items-center gap-2"
-						onclick={() => attachmentMenu.callbacks[item.action]()}
-					>
-						<item.icon class="h-4 w-4" />
+			{#if hasMcpPromptsSupport}
+				<DropdownMenu.Separator />

-						<span>{item.label}</span>
-					</DropdownMenu.Item>
-				{/if}
-			{/each}
+				<DropdownMenu.Item
+					class="flex cursor-pointer items-center gap-2"
+					onclick={onMcpPromptClick}
+				>
+					<Zap class="h-4 w-4" />
+
+					<span>MCP Prompt</span>
+				</DropdownMenu.Item>
+			{/if}
+
+			{#if hasMcpResourcesSupport}
+				<DropdownMenu.Item
+					class="flex cursor-pointer items-center gap-2"
+					onclick={onMcpResourcesClick}
+				>
+					<FolderOpen class="h-4 w-4" />
+
+					<span>MCP Resources</span>
+				</DropdownMenu.Item>
+			{/if}
 		</DropdownMenu.Content>
 	</DropdownMenu.Root>
 </div>
@@ -2,18 +2,19 @@
 	import type { Snippet } from 'svelte';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import * as Sheet from '$lib/components/ui/sheet';
+	import * as Collapsible from '$lib/components/ui/collapsible';
+	import { File, MessageSquare, Zap, FolderOpen } from '@lucide/svelte';
+	import { Switch } from '$lib/components/ui/switch';
+	import { Checkbox } from '$lib/components/ui/checkbox';
 	import { TOOLTIP_DELAY_DURATION } from '$lib/constants';
-	import {
-		ATTACHMENT_FILE_ITEMS,
-		ATTACHMENT_EXTRA_ITEMS,
-		ATTACHMENT_MCP_ITEMS
-	} from '$lib/constants/attachment-menu';
-	import { McpLogo } from '$lib/components/app';
+	import { ATTACHMENT_FILE_ITEMS } from '$lib/constants/attachment-menu';
 	import { useAttachmentMenu } from '$lib/hooks/use-attachment-menu.svelte';
-	import { AttachmentMenuItemId } from '$lib/enums';
-	import { PencilRuler } from '@lucide/svelte';
-	import { ROUTES, SETTINGS_SECTION_SLUGS } from '$lib/constants/routes';
-	import { RouterService } from '$lib/services/router.service';
+	import { useToolsPanel } from '$lib/hooks/use-tools-panel.svelte';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { McpLogo } from '$lib/components/app';
+	import { PencilRuler, ChevronDown, ChevronRight } from '@lucide/svelte';
+	import { HealthCheckStatus } from '$lib/enums';

 	interface Props {
 		class?: string;
@@ -46,6 +47,9 @@
 	}: Props = $props();

 	let sheetOpen = $state(false);
+	let filesExpanded = $state(true);
+	let toolsExpanded = $state(false);
+	let mcpExpanded = $state(false);

 	const attachmentMenu = useAttachmentMenu(
 		() => ({
@@ -61,14 +65,22 @@
 		}
 	);

+	const toolsPanel = useToolsPanel();
+
 	const sheetItemClass =
 		'flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left text-sm transition-colors hover:bg-accent active:bg-accent disabled:cursor-not-allowed disabled:opacity-50';
+
+	const sheetItemRowClass =
+		'flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-accent';
+
+	function getEnabledMcpServers() {
+		return mcpStore.getServersSorted().filter((s) => s.enabled);
+	}
 </script>

 <div class="flex items-center gap-1 {className}">
 	<Sheet.Root bind:open={sheetOpen}>
 		{@render trigger({ disabled, onclick: () => (sheetOpen = true) })}
-		<!-- <ChatFormActionAddButton {disabled} onclick={() => (sheetOpen = true)} /> -->

 		<Sheet.Content side="bottom" class="max-h-[85vh] gap-0 overflow-y-auto">
 			<Sheet.Header>
@@ -80,110 +92,206 @@
 			</Sheet.Header>

 			<div class="flex flex-col gap-1 px-1.5 pb-2">
-				{#each ATTACHMENT_FILE_ITEMS as item (item.id)}
-					{@const enabled = attachmentMenu.isItemEnabled(item.enabledWhen)}
-					{#if enabled}
-						<button
-							type="button"
-							class={sheetItemClass}
-							onclick={() => attachmentMenu.callbacks[item.action]()}
-						>
-							<item.icon class="h-4 w-4 shrink-0" />
+				<Collapsible.Root open={filesExpanded} onOpenChange={(open) => (filesExpanded = open)}>
+					<Collapsible.Trigger class={sheetItemClass}>
+						{#if filesExpanded}
+							<ChevronDown class="h-4 w-4 shrink-0" />
+						{:else}
+							<ChevronRight class="h-4 w-4 shrink-0" />
+						{/if}

-							<span>{item.label}</span>
-						</button>
-					{:else if item.disabledTooltip}
-						<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
-							<Tooltip.Trigger>
-								<button type="button" class={sheetItemClass} disabled>
-									<item.icon class="h-4 w-4 shrink-0" />
+						<File class="h-4 w-4 shrink-0" />

-									<span>{item.label}</span>
-								</button>
-							</Tooltip.Trigger>
+						<span class="flex-1">Add files</span>
+					</Collapsible.Trigger>

-							<Tooltip.Content side="right">
-								<p>{item.disabledTooltip}</p>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					{/if}
-				{/each}
+					<Collapsible.Content>
+						<div class="flex flex-col gap-0.5 pl-4">
+							{#each ATTACHMENT_FILE_ITEMS as item (item.id)}
+								{@const enabled = attachmentMenu.isItemEnabled(item.enabledWhen)}
+								{#if enabled}
+									<button
+										type="button"
+										class={sheetItemClass}
+										onclick={() => attachmentMenu.callbacks[item.action]()}
+									>
+										<item.icon class="h-4 w-4 shrink-0" />
+
+										<span>{item.label}</span>
+									</button>
+								{:else if item.disabledTooltip}
+									<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+										<Tooltip.Trigger>
+											<button type="button" class={sheetItemClass} disabled>
+												<item.icon class="h-4 w-4 shrink-0" />
+
+												<span>{item.label}</span>
+											</button>
+										</Tooltip.Trigger>
+
+										<Tooltip.Content side="right">
+											<p>{item.disabledTooltip}</p>
+										</Tooltip.Content>
+									</Tooltip.Root>
+								{/if}
+							{/each}
+						</div>
+					</Collapsible.Content>
+				</Collapsible.Root>
+
+				<Collapsible.Root open={mcpExpanded} onOpenChange={(open) => (mcpExpanded = open)}>
+					<Collapsible.Trigger class={sheetItemClass}>
+						{#if mcpExpanded}
+							<ChevronDown class="h-4 w-4 shrink-0" />
+						{:else}
+							<ChevronRight class="h-4 w-4 shrink-0" />
+						{/if}
+
+						<McpLogo class="inline h-4 w-4 shrink-0" />
+
+						<span class="flex-1">MCP Servers</span>
+
+						<span class="text-xs text-muted-foreground">
+							{getEnabledMcpServers().length} server{getEnabledMcpServers().length !== 1 ? 's' : ''}
+						</span>
+					</Collapsible.Trigger>
+
+					<Collapsible.Content>
+						<div class="flex flex-col gap-0.5 pl-4">
+							{#each getEnabledMcpServers() as server (server.id)}
+								{@const healthState = mcpStore.getHealthCheckState(server.id)}
+								{@const hasError = healthState.status === HealthCheckStatus.ERROR}
+								{@const displayName = mcpStore.getServerLabel(server)}
+								{@const faviconUrl = mcpStore.getServerFavicon(server.id)}
+								{@const isEnabled = conversationsStore.isMcpServerEnabledForChat(server.id)}

-				{#if !attachmentMenu.isItemEnabled('hasVisionModality')}
-					{@const pdfItem = ATTACHMENT_FILE_ITEMS.find((i) => i.id === AttachmentMenuItemId.PDF)}
-					{#if pdfItem}
-						<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
-							<Tooltip.Trigger>
 								<button
 									type="button"
-									class={sheetItemClass}
-									onclick={() => attachmentMenu.callbacks[pdfItem.action]()}
+									class={sheetItemRowClass}
+									onclick={() => !hasError && conversationsStore.toggleMcpServerForChat(server.id)}
+									disabled={hasError}
 								>
-									<pdfItem.icon class="h-4 w-4 shrink-0" />
+									<div class="flex min-w-0 flex-1 items-center gap-2">
+										{#if faviconUrl}
+											<img
+												src={faviconUrl}
+												alt=""
+												class="h-4 w-4 shrink-0 rounded-sm"
+												onerror={(e) => {
+													(e.currentTarget as HTMLImageElement).style.display = 'none';
+												}}
+											/>
+										{/if}

-									<span>{pdfItem.label}</span>
+										<span class="min-w-0 truncate text-sm">{displayName}</span>
+									</div>
+
+									{#if hasError}
+										<span
+											class="shrink-0 rounded bg-destructive/15 px-1.5 py-0.5 text-xs text-destructive"
+										>
+											Error
+										</span>
+									{:else}
+										<Switch
+											checked={isEnabled}
+											onCheckedChange={() => conversationsStore.toggleMcpServerForChat(server.id)}
+										/>
+									{/if}
 								</button>
-							</Tooltip.Trigger>
+							{/each}

-							<Tooltip.Content side="right">
-								<p>PDFs will be converted to text. Image-based PDFs may not work properly.</p>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					{/if}
+							{#if getEnabledMcpServers().length === 0}
+								<div class="px-3 py-2 text-center text-sm text-muted-foreground">
+									No MCP servers configured
+								</div>
+							{/if}
+						</div>
+					</Collapsible.Content>
+				</Collapsible.Root>
+
+				{#if toolsPanel.totalToolCount > 0}
+					<Collapsible.Root open={toolsExpanded} onOpenChange={(open) => (toolsExpanded = open)}>
+						<Collapsible.Trigger class={sheetItemClass}>
+							{#if toolsExpanded}
+								<ChevronDown class="h-4 w-4 shrink-0" />
+							{:else}
+								<ChevronRight class="h-4 w-4 shrink-0" />
+							{/if}
+
+							<PencilRuler class="inline h-4 w-4 shrink-0" />
+
+							<span class="flex-1">Tools</span>
+
+							<span class="text-xs text-muted-foreground">
+								{toolsPanel.totalToolCount} tool{toolsPanel.totalToolCount !== 1 ? 's' : ''}
+							</span>
+						</Collapsible.Trigger>
+
+						<Collapsible.Content>
+							<div class="flex flex-col gap-0.5 pl-4">
+								{#each toolsPanel.activeGroups as group (group.label)}
+									{@const { checked, indeterminate } = toolsPanel.getGroupCheckedState(group)}
+									{@const enabledCount = toolsPanel.getEnabledToolCount(group)}
+									{@const favicon = toolsPanel.getFavicon(group)}
+
+									<button
+										type="button"
+										class={sheetItemRowClass}
+										onclick={() => toolsPanel.toggleGroupByLabel(group.label)}
+									>
+										{#if favicon}
+											<img
+												src={favicon}
+												alt=""
+												class="h-4 w-4 shrink-0 rounded-sm"
+												onerror={(e) => {
+													(e.currentTarget as HTMLImageElement).style.display = 'none';
+												}}
+											/>
+										{/if}
+
+										<span class="min-w-0 flex-1 truncate text-sm font-medium">{group.label}</span>
+
+										<span class="shrink-0 text-xs text-muted-foreground">
+											{enabledCount}/{group.tools.length}
+										</span>
+
+										<Checkbox
+											{checked}
+											{indeterminate}
+											class="h-4 w-4 shrink-0"
+											onclick={(e) => e.stopPropagation()}
+											onCheckedChange={() => toolsPanel.toggleGroupByLabel(group.label)}
+										/>
+									</button>
+								{/each}
+							</div>
+						</Collapsible.Content>
+					</Collapsible.Root>
 				{/if}

-				{#each ATTACHMENT_EXTRA_ITEMS as item (item.id)}
-					{#if item.id === AttachmentMenuItemId.SYSTEM_MESSAGE}
-						<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
-							<Tooltip.Trigger>
-								<button
-									type="button"
-									class={sheetItemClass}
-									onclick={() => attachmentMenu.callbacks[item.action]()}
-								>
-									<item.icon class="h-4 w-4 shrink-0" />
+				<button type="button" class={sheetItemClass} onclick={onSystemPromptClick}>
+					<MessageSquare class="h-4 w-4 shrink-0" />

-									<span>{item.label}</span>
-								</button>
-							</Tooltip.Trigger>
+					<span>System Message</span>
+				</button>

-							<Tooltip.Content side="right">
-								<p>{attachmentMenu.getSystemMessageTooltip()}</p>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					{/if}
-				{/each}
+				{#if hasMcpPromptsSupport}
+					<button type="button" class={sheetItemClass} onclick={onMcpPromptClick}>
+						<Zap class="h-4 w-4 shrink-0" />

-				<div class="my-2 border-t"></div>
+						<span>MCP Prompt</span>
+					</button>
+				{/if}

-				<a href={ROUTES.MCP_SERVERS} class="flex items-center gap-3 px-3 py-2">
-					<McpLogo class="inline h-4 w-4" />
+				{#if hasMcpResourcesSupport}
+					<button type="button" class={sheetItemClass} onclick={onMcpResourcesClick}>
+						<FolderOpen class="h-4 w-4 shrink-0" />

-					<span class="text-sm">MCP Servers</span>
-				</a>
-
-				<a
-					href={RouterService.settings(SETTINGS_SECTION_SLUGS.TOOLS)}
-					class="flex items-center gap-3 px-3 py-2"
-				>
-					<PencilRuler class="inline h-4 w-4" />
-
-					<span class="text-sm">Tools</span>
-				</a>
-
-				{#each ATTACHMENT_MCP_ITEMS as item (item.id)}
-					{#if attachmentMenu.isItemVisible(item.visibleWhen)}
-						<button
-							type="button"
-							class={sheetItemClass}
-							onclick={() => attachmentMenu.callbacks[item.action]()}
-						>
-							<item.icon class="h-4 w-4 shrink-0" />
-
-							<span>{item.label}</span>
-						</button>
-					{/if}
-				{/each}
+						<span>MCP Resources</span>
+					</button>
+				{/if}
 			</div>
 		</Sheet.Content>
 	</Sheet.Root>
@@ -107,7 +107,7 @@
 									<Checkbox
 										{checked}
 										{indeterminate}
-										onCheckedChange={() => toolsStore.toggleGroup(group)}
+										onCheckedChange={() => toolsPanel.toggleGroupByLabel(group.label)}
 										class="mr-2 h-4 w-4 shrink-0"
 									/>
 								</Tooltip.Trigger>
@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { chatStore } from '$lib/stores/chat.svelte';
-	import { modelsStore, modelOptions, selectedModelId } from '$lib/stores/models.svelte';
+	import {
+		modelsStore,
+		modelOptions,
+		selectedModelId,
+		selectedModelName
+	} from '$lib/stores/models.svelte';
 	import { isRouterMode, serverError } from '$lib/stores/server.svelte';
 	import { ModelsSelectorDropdown, ModelsSelectorSheet } from '$lib/components/app';
 	import { isMobile } from '$lib/stores/viewport.svelte';
@@ -39,7 +44,18 @@

 	let lastSyncedConversationModel: string | null = null;

-	let selectorModel = $derived(conversationModel ?? modelsStore.selectedModelName ?? null);
+	let selectorModel = $derived.by(() => {
+		const storeModel = selectedModelName();
+		if (storeModel && storeModel !== conversationModel) {
+			return storeModel;
+		}
+
+		if (conversationModel) {
+			return conversationModel;
+		}
+
+		return null;
+	});

 	$effect(() => {
 		if (conversationModel && conversationModel !== lastSyncedConversationModel) {
@@ -50,7 +66,6 @@
 				modelsStore.selectedModelName = null;
 				modelsStore.clearSelection();
 			}
-
 			lastSyncedConversationModel = conversationModel;
 		} else if (
 			isRouter &&
@@ -60,9 +75,7 @@
 			!conversationModel
 		) {
 			lastSyncedConversationModel = null;
-
 			const first = modelOptions().find((m) => modelsStore.loadedModelIds.includes(m.model));
-
 			if (first) modelsStore.selectModelById(first.id);
 		}
 	});
@@ -6,7 +6,8 @@
 		ChatFormActionsAdd,
 		ChatFormActionModels,
 		ChatFormActionRecord,
-		ChatFormActionSubmit
+		ChatFormActionSubmit,
+		ChatFormReasoningToggle
 	} from '$lib/components/app';
 	import { FileTypeCategory } from '$lib/enums';
 	import { mcpStore } from '$lib/stores/mcp.svelte';
@@ -99,7 +100,7 @@
 	style="container-type: inline-size"
 >
 	{#if showAddButton}
-		<div class="mr-auto flex items-center gap-2">
+		<div class="mr-auto flex items-center gap-3">
 			<ChatFormActionsAdd
 				{disabled}
 				{hasAudioModality}
@@ -116,20 +117,24 @@
 		</div>
 	{/if}

-	{#if showModelSelector}
-		<ChatFormActionModels
-			{disabled}
-			bind:this={selectorModelRef}
-			bind:hasAudioModality
-			bind:hasVideoModality
-			bind:hasVisionModality
-			bind:hasModelSelected
-			bind:isSelectedModelInCache
-			bind:submitTooltip
-			forceForegroundText
-			useGlobalSelection
-		/>
-	{/if}
+	<div class="flex items-center gap-2">
+		<ChatFormReasoningToggle />
+
+		{#if showModelSelector}
+			<ChatFormActionModels
+				{disabled}
+				bind:this={selectorModelRef}
+				bind:hasAudioModality
+				bind:hasVideoModality
+				bind:hasVisionModality
+				bind:hasModelSelected
+				bind:isSelectedModelInCache
+				bind:submitTooltip
+				forceForegroundText
+				useGlobalSelection
+			/>
+		{/if}
+	</div>

 	{#if isReasoning}
 		<Button
@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { Check, Info, Lightbulb, LightbulbOff } from '@lucide/svelte';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { ReasoningEffort, MessageRole } from '$lib/enums';
+	import { REASONING_EFFORT_TOKENS } from '$lib/constants/reasoning-effort-tokens';
+	import { REASONING_EFFORT_LEVELS } from '$lib/constants/reasoning-effort';
+	import type { ReasoningEffortLevel } from '$lib/types';
+	import {
+		modelsStore,
+		checkModelSupportsThinking,
+		supportsThinking,
+		propsCacheVersion,
+		loadedModelIds
+	} from '$lib/stores/models.svelte';
+	import { chatStore } from '$lib/stores/chat.svelte';
+	import { conversationsStore, activeMessages } from '$lib/stores/conversations.svelte';
+	import { isRouterMode } from '$lib/stores/server.svelte';
+	import type { DatabaseMessage } from '$lib/types/database';
+
+	let thinkingEnabled = $derived(conversationsStore.getThinkingEnabled());
+	let currentEffort = $derived(conversationsStore.getReasoningEffort());
+	let isOff = $derived(!thinkingEnabled);
+	let subOpen = $state(false);
+
+	// Get conversation model from message history
+	let conversationModel = $derived(
+		chatStore.getConversationModel(activeMessages() as DatabaseMessage[])
+	);
+
+	let modelSupportsThinkingFromMessages = $derived.by(() => {
+		const modelId = isRouterMode() ? modelsStore.selectedModelName || conversationModel : null;
+		if (!modelId) return false;
+
+		const messages = conversationsStore.activeMessages;
+
+		return messages.some(
+			(m: DatabaseMessage) =>
+				m.role === MessageRole.ASSISTANT && m.model === modelId && !!m.reasoningContent
+		);
+	});
+
+	let modelSupportsThinking = $derived.by(() => {
+		loadedModelIds();
+		propsCacheVersion();
+
+		if (isRouterMode()) {
+			const modelId = modelsStore.selectedModelName || conversationModel;
+			return checkModelSupportsThinking(modelId ?? '') || modelSupportsThinkingFromMessages;
+		}
+
+		return supportsThinking() || modelSupportsThinkingFromMessages;
+	});
+
+	function isSelected(item: ReasoningEffortLevel): boolean {
+		if (item.isOff) return isOff;
+
+		return thinkingEnabled && currentEffort === item.value;
+	}
+
+	function handleSelection(item: ReasoningEffortLevel) {
+		if (item.isOff) {
+			conversationsStore.setThinkingEnabled(false);
+		} else {
+			conversationsStore.setThinkingEnabled(true);
+			conversationsStore.setReasoningEffort(item.value as ReasoningEffort);
+		}
+		subOpen = false;
+	}
+</script>
+
+{#if modelSupportsThinking}
+	<DropdownMenu.Sub bind:open={subOpen}>
+		<DropdownMenu.SubTrigger
+			class="flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-sm transition-colors outline-none hover:bg-accent focus:bg-accent"
+		>
+			{#if thinkingEnabled}
+				<Lightbulb class="h-4 w-4 shrink-0 text-amber-400" />
+			{:else}
+				<LightbulbOff class="h-4 w-4 shrink-0 text-muted-foreground" />
+			{/if}
+
+			<span class="flex-1">Thinking</span>
+
+			{#if thinkingEnabled}
+				<span class="text-xs text-muted-foreground">{currentEffort}</span>
+			{:else}
+				<span class="text-xs text-muted-foreground">off</span>
+			{/if}
+		</DropdownMenu.SubTrigger>
+
+		<DropdownMenu.SubContent
+			class="w-60 rounded-xl bg-popover p-3 text-popover-foreground shadow-md outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
+		>
+			{#each REASONING_EFFORT_LEVELS as level (level.value)}
+				<button
+					type="button"
+					class="flex w-full cursor-pointer items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors hover:bg-accent"
+					class:bg-accent={isSelected(level)}
+					onclick={() => handleSelection(level)}
+				>
+					{#if isSelected(level)}
+						<Check class="h-4 w-4 shrink-0 text-foreground" />
+					{:else}
+						<div class="h-4 w-4 shrink-0"></div>
+					{/if}
+
+					<span class="flex-1">{level.label}</span>
+
+					{#if !level.isOff}
+						<span class="text-[11px] text-muted-foreground opacity-60">
+							{REASONING_EFFORT_TOKENS[level.value] === -1
+								? 'Unlimited'
+								: `Max ${REASONING_EFFORT_TOKENS[level.value].toLocaleString()} tokens`}
+						</span>
+					{/if}
+
+					{#if level.hasInfo}
+						<Tooltip.Root>
+							<Tooltip.Trigger>
+								<Info class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+							</Tooltip.Trigger>
+							<Tooltip.Content side="left">
+								<p>Maximum thinking effort with extended context usage</p>
+							</Tooltip.Content>
+						</Tooltip.Root>
+					{/if}
+				</button>
+			{/each}
+		</DropdownMenu.SubContent>
+	</DropdownMenu.Sub>
+{/if}
@@ -0,0 +1,145 @@
+<script lang="ts">
+	import { Lightbulb, LightbulbOff, Check, Info } from '@lucide/svelte';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { ReasoningEffort, MessageRole } from '$lib/enums';
+	import { REASONING_EFFORT_TOKENS } from '$lib/constants/reasoning-effort-tokens';
+	import { REASONING_EFFORT_LEVELS } from '$lib/constants/reasoning-effort';
+	import type { ReasoningEffortLevel } from '$lib/types';
+	import {
+		modelsStore,
+		checkModelSupportsThinking,
+		supportsThinking,
+		propsCacheVersion,
+		loadedModelIds
+	} from '$lib/stores/models.svelte';
+	import { chatStore } from '$lib/stores/chat.svelte';
+	import { conversationsStore, activeMessages } from '$lib/stores/conversations.svelte';
+	import { isRouterMode } from '$lib/stores/server.svelte';
+	import type { DatabaseMessage } from '$lib/types/database';
+
+	let thinkingEnabled = $derived(conversationsStore.getThinkingEnabled());
+	let currentEffort = $derived(conversationsStore.getReasoningEffort());
+	let isOff = $derived(!thinkingEnabled);
+	let tooltipText = $derived(thinkingEnabled ? `${currentEffort} Reasoning` : 'Disabled Reasoning');
+	let subOpen = $state(false);
+
+	// Get conversation model from message history
+	let conversationModel = $derived(
+		chatStore.getConversationModel(activeMessages() as DatabaseMessage[])
+	);
+
+	// Fallback: if model props aren't available, check if any assistant messages
+	// for this model in the active conversation have reasoning content.
+	let modelSupportsThinkingFromMessages = $derived.by(() => {
+		const modelId = isRouterMode() ? modelsStore.selectedModelName || conversationModel : null;
+		if (!modelId) return false;
+		const messages = conversationsStore.activeMessages;
+		return messages.some(
+			(m: DatabaseMessage) =>
+				m.role === MessageRole.ASSISTANT && m.model === modelId && !!m.reasoningContent
+		);
+	});
+
+	// Check if model supports thinking. Primary: chat template from /props.
+	// Fallback: message history (reasoning content in assistant messages).
+	let modelSupportsThinking = $derived.by(() => {
+		loadedModelIds();
+		propsCacheVersion();
+
+		if (isRouterMode()) {
+			const modelId = modelsStore.selectedModelName || conversationModel;
+			return checkModelSupportsThinking(modelId ?? '') || modelSupportsThinkingFromMessages;
+		}
+
+		// In non-router mode, use the built-in supportsThinking
+		return supportsThinking() || modelSupportsThinkingFromMessages;
+	});
+
+	// Check if current item is selected
+	function isSelected(item: ReasoningEffortLevel): boolean {
+		if (item.isOff) {
+			return isOff;
+		}
+		return thinkingEnabled && currentEffort === item.value;
+	}
+
+	function handleSelection(item: ReasoningEffortLevel) {
+		if (item.isOff) {
+			conversationsStore.setThinkingEnabled(false);
+		} else {
+			conversationsStore.setThinkingEnabled(true);
+			conversationsStore.setReasoningEffort(item.value as ReasoningEffort);
+		}
+		subOpen = false;
+	}
+</script>
+
+{#if modelSupportsThinking}
+	<DropdownMenu.Root bind:open={subOpen}>
+		<Tooltip.Root>
+			<Tooltip.Trigger>
+				<DropdownMenu.Trigger
+					class={[
+						'flex h-6 w-6 cursor-pointer items-center justify-center rounded-full p-0 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+						thinkingEnabled ? 'bg-amber-400/10 hover:bg-amber-400/20' : 'bg-muted'
+					]}
+					aria-label={`${tooltipText}. Click to configure.`}
+				>
+					{#if thinkingEnabled}
+						<Lightbulb class="h-3 w-3 text-amber-400" />
+					{:else}
+						<LightbulbOff class="h-3 w-3 text-muted-foreground" />
+					{/if}
+				</DropdownMenu.Trigger>
+			</Tooltip.Trigger>
+
+			<Tooltip.Content>
+				<p class="capitalize">{tooltipText}</p>
+			</Tooltip.Content>
+		</Tooltip.Root>
+
+		<DropdownMenu.Content
+			align="start"
+			class="w-60 rounded-xl bg-popover p-3 text-popover-foreground shadow-md outline-none"
+		>
+			<div class="mb-2 px-2.5 text-sm font-medium">Reasoning effort</div>
+
+			{#each REASONING_EFFORT_LEVELS as level (level.value)}
+				<button
+					type="button"
+					class="flex w-full cursor-pointer items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors hover:bg-accent"
+					class:bg-accent={isSelected(level)}
+					onclick={() => handleSelection(level)}
+				>
+					{#if isSelected(level)}
+						<Check class="h-4 w-4 shrink-0 text-foreground" />
+					{:else}
+						<div class="h-4 w-4 shrink-0"></div>
+					{/if}
+
+					<span class="flex-1">{level.label}</span>
+
+					{#if !level.isOff}
+						<span class="text-[11px] text-muted-foreground opacity-60">
+							{REASONING_EFFORT_TOKENS[level.value] === -1
+								? 'Unlimited'
+								: `Max ${REASONING_EFFORT_TOKENS[level.value].toLocaleString()} tokens`}
+						</span>
+					{/if}
+
+					{#if level.hasInfo}
+						<Tooltip.Root>
+							<Tooltip.Trigger>
+								<Info class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+							</Tooltip.Trigger>
+							<Tooltip.Content side="left">
+								<p>Maximum reasoning effort with extended context usage</p>
+							</Tooltip.Content>
+						</Tooltip.Root>
+					{/if}
+				</button>
+			{/each}
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+{/if}
@@ -240,6 +240,15 @@ export { default as ChatFormActionAddToolsSubmenu } from './ChatForm/ChatFormAct
 */
 export { default as ChatFormActionAddMcpServersSubmenu } from './ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpServersSubmenu.svelte';

+/**
+ * **ChatFormReasoningToggle** - Thinking toggle button with effort dropdown
+ *
+ * A toggle button with lightbulb icon that indicates thinking status.
+ * Shows the reasoning effort dropdown when clicked.
+ * Only visible when the current model supports thinking.
+ */
+export { default as ChatFormReasoningToggle } from './ChatForm/ChatFormActions/ChatFormReasoningToggle.svelte';
+
 /**
 * Hidden file input element for programmatic file selection.
 */
@@ -8,6 +8,7 @@
 		hideOrgName?: boolean;
 		showRaw?: boolean;
 		hideQuantization?: boolean;
+		hideTags?: boolean;
 		aliases?: string[];
 		tags?: string[];
 		class?: string;
@@ -17,7 +18,8 @@
 		modelId,
 		hideOrgName = false,
 		showRaw = undefined,
-		hideQuantization = false,
+		hideQuantization,
+		hideTags,
 		aliases,
 		tags,
 		class: className = '',
@@ -31,6 +33,8 @@

 	let parsed = $derived(ModelsService.parseModelId(modelId));
 	let resolvedShowRaw = $derived(showRaw ?? (config().showRawModelNames as boolean) ?? false);
+	let resolvedHideQuantization = $derived(hideQuantization ?? !config().showModelQuantization);
+	let resolvedHideTags = $derived(hideTags ?? !config().showModelTags);

 	let uniqueAliases = $derived([...new Set(aliases ?? [])]);
 	let uniqueTags = $derived([...new Set([...(parsed.tags ?? []), ...(tags ?? [])])]);
@@ -53,7 +57,7 @@
 			</span>
 		{/if}

-		{#if parsed.quantization && !hideQuantization}
+		{#if parsed.quantization && !resolvedHideQuantization}
 			<span class={badgeClass}>
 				{parsed.quantization}
 			</span>
@@ -69,7 +73,7 @@
 			{/each}
 		{/if}

-		{#if uniqueTags.length > 0}
+		{#if uniqueTags.length > 0 && !resolvedHideTags}
 			{#each uniqueTags as tag (tag)}
 				<span class={tagBadgeClass}>{tag}</span>
 			{/each}
@@ -106,9 +106,7 @@
 				]}
 				style="max-width: min(calc(100cqw - 10rem), 20rem)"
 			>
-				<Package class="h-3.5 w-3.5" />
-
-				<ModelId modelId={currentModel} class="min-w-0" hideQuantization />
+				<Package class="h-3.5 w-3.5 shrink-0" />
 			</span>
 		{:else}
 			<p class="text-xs text-muted-foreground">No models available.</p>
@@ -120,7 +118,7 @@
 			<DropdownMenu.Root bind:open={isOpen} onOpenChange={ms.handleOpenChange}>
 				<DropdownMenu.Trigger
 					class={[
-						`inline-grid cursor-pointer grid-cols-[1fr_auto_1fr] items-center gap-1.5 rounded-sm bg-background px-1.5 py-1 text-xs shadow-sm transition hover:bg-muted-foreground/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-muted-foreground/15 dark:text-secondary-foreground`,
+						`inline-flex cursor-pointer items-center gap-1.5 rounded-sm bg-background px-1.5 py-1 text-xs shadow-sm transition hover:bg-muted-foreground/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-muted-foreground/15 dark:text-secondary-foreground`,
 						!ms.isCurrentModelInCache
 							? 'bg-red-400/10 !text-red-400 hover:bg-red-400/20 hover:text-red-400'
 							: forceForegroundText
@@ -133,7 +131,7 @@
 					]}
 					disabled={disabled || ms.updating}
 				>
-					<Package class="h-3.5 w-3.5" />
+					<Package class="h-3.5 w-3.5 shrink-0" />

 					{#if selectedOption}
 						<Tooltip.Root>
@@ -144,6 +142,7 @@
 										modelId={selectedOption.model}
 										class="min-w-0 overflow-hidden"
 										hideOrgName={false}
+										hideQuantization
 										{...props}
 									/>
 								{/snippet}
@@ -158,9 +157,9 @@
 					{/if}

 					{#if ms.updating || ms.isLoadingModel}
-						<Loader2 class="h-3 w-3.5 animate-spin" />
+						<Loader2 class="h-3 w-3.5 shrink-0 animate-spin" />
 					{:else}
-						<ChevronDown class="h-3 w-3.5" />
+						<ChevronDown class="h-3 w-3.5 shrink-0" />
 					{/if}
 				</DropdownMenu.Trigger>

@@ -251,7 +250,7 @@
 				onclick={() => ms.handleOpenChange(true)}
 				disabled={disabled || ms.updating}
 			>
-				<Package class="h-3.5 w-3.5" />
+				<Package class="h-3.5 w-3.5 shrink-0" />

 				{#if selectedOption}
 					<Tooltip.Root>
@@ -262,6 +261,7 @@
 									modelId={selectedOption.model}
 									class="min-w-0 overflow-hidden"
 									hideOrgName={false}
+									hideQuantization
 									{...props}
 								/>
 							{/snippet}
@@ -274,7 +274,7 @@
 				{/if}

 				{#if ms.updating}
-					<Loader2 class="h-3 w-3.5 animate-spin" />
+					<Loader2 class="h-3 w-3.5 shrink-0 animate-spin" />
 				{/if}
 			</button>
 		{/if}
@@ -6,8 +6,7 @@
 		DialogModelInformation,
 		ModelId,
 		ModelsSelectorList,
-		SearchInput,
-		TruncatedText
+		SearchInput
 	} from '$lib/components/app';

 	interface Props {
@@ -67,7 +66,7 @@
 			<button
 				type="button"
 				class={[
-					`inline-grid cursor-pointer grid-cols-[1fr_auto_1fr] items-center gap-1.5 rounded-sm bg-background px-1.5 py-1 text-xs shadow-sm transition hover:bg-muted-foreground/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-muted-foreground/15 dark:text-secondary-foreground`,
+					`inline-flex cursor-pointer items-center gap-1.5 rounded-sm bg-background px-1.5 py-1 text-xs shadow-sm transition hover:bg-muted-foreground/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-muted-foreground/15 dark:text-secondary-foreground`,
 					!ms.isCurrentModelInCache
 						? 'bg-red-400/10 !text-red-400 hover:bg-red-400/20 hover:text-red-400'
 						: forceForegroundText
@@ -81,7 +80,7 @@
 				disabled={disabled || ms.updating}
 				onclick={() => ms.handleOpenChange(true)}
 			>
-				<Package class="h-3.5 w-3.5" />
+				<Package class="h-3.5 w-3.5 shrink-0" />

 				{#if !selectedOption}
 					<span class="min-w-0 font-medium">Select model</span>
@@ -90,14 +89,15 @@
 						class="text-xs"
 						modelId={selectedOption?.model || ''}
 						hideQuantization
+						hideTags
 						hideOrgName
 					/>
 				{/if}

 				{#if ms.updating || ms.isLoadingModel}
-					<Loader2 class="h-3 w-3.5 animate-spin" />
+					<Loader2 class="h-3 w-3.5 shrink-0 animate-spin" />
 				{:else}
-					<ChevronDown class="h-3 w-3.5" />
+					<ChevronDown class="h-3 w-3.5 shrink-0" />
 				{/if}
 			</button>

@@ -168,12 +168,12 @@
 				onclick={() => ms.handleOpenChange(true)}
 				disabled={disabled || ms.updating}
 			>
-				<Package class="h-3.5 w-3.5" />
+				<Package class="h-3.5 w-3.5 shrink-0" />

-				<TruncatedText text={selectedOption?.model || ''} class="font-medium" />
+				<ModelId modelId={selectedOption?.model || ''} class="font-medium" hideQuantization />

 				{#if ms.updating}
-					<Loader2 class="h-3 w-3.5 animate-spin" />
+					<Loader2 class="h-3 w-3.5 shrink-0 animate-spin" />
 				{/if}
 			</button>
 		{/if}
@@ -74,8 +74,7 @@ export { default as ModelsSelectorOption } from './ModelsSelectorOption.svelte';
 */
 export { default as ModelsSelectorSheet } from './ModelsSelectorSheet.svelte';

-/**
- * **ModelBadge** - Model name display badge
+/** * **ModelBadge** - Model name display badge
 *
 * Compact badge showing current model name with package icon.
 * Only visible in single model mode. Supports tooltip and copy functionality.