feat: add switching thinking/non-thinking modes to models

src/lib/components/chat/MessageInput.svelte

@@ -47,6 +47,7 @@
 	import XMark from '../icons/XMark.svelte';
 	import Headphone from '../icons/Headphone.svelte';
 	import GlobeAlt from '../icons/GlobeAlt.svelte';
+	import Thinking from "../icons/Thinking.svelte";
 	import PhotoSolid from '../icons/PhotoSolid.svelte';
 	import Photo from '../icons/Photo.svelte';
 	import CommandLine from '../icons/CommandLine.svelte';
@@ -83,6 +84,7 @@
 	export let imageGenerationEnabled = false;
 	export let webSearchEnabled = false;
 	export let codeInterpreterEnabled = false;
+	export let thinkingEnabled = false;
 
 	$: onChange({
 		prompt,
@@ -90,7 +92,8 @@
 		selectedToolIds,
 		imageGenerationEnabled,
 		webSearchEnabled,
-		codeInterpreterEnabled
+		codeInterpreterEnabled,
+		thinkingEnabled
 	});
 
 	let showTools = false;
@@ -117,6 +120,10 @@
 		(model) => $models.find((m) => m.id === model)?.info?.meta?.capabilities?.vision ?? true
 	);
 
+	let switchThinkingCapableModels = [];
+	$: switchThinkingCapableModels = $models.filter((model) => model.info?.meta?.capabilities?.switch_thinking ?? false)
+			.map((model) => model.id)
+
 	const scrollToBottom = () => {
 		const element = document.getElementById('messages-container');
 		element.scrollTo({
@@ -773,6 +780,7 @@
 														selectedToolIds = [];
 														webSearchEnabled = false;
 														imageGenerationEnabled = false;
+														thinkingEnabled = false;
 													}
 												}}
 												on:paste={async (e) => {
@@ -980,6 +988,7 @@
 													selectedToolIds = [];
 													webSearchEnabled = false;
 													imageGenerationEnabled = false;
+													thinkingEnabled = false;
 												}
 											}}
 											rows="1"
@@ -1127,6 +1136,24 @@
 											{/if}
 
 											{#if $_user}
+												{#if selectedModels.length > 0 && selectedModels.some((model) => switchThinkingCapableModels.includes(model))}
+													<Tooltip content={$i18n.t('Thinking')} placement="top">
+														<button
+															on:click|preventDefault={() => (thinkingEnabled = !thinkingEnabled)}
+															type="button"
+															class="px-1.5 @xl:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden border {thinkingEnabled
+																? 'bg-blue-100 dark:bg-blue-500/20 border-blue-400/20 text-blue-500 dark:text-blue-400'
+																: 'bg-transparent border-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'}"
+														>
+															<Thinking className="size-5" strokeWidth="1.75" />
+															<span
+																class="hidden @xl:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px]"
+																>{$i18n.t('Thinking')}</span
+															>
+														</button>
+													</Tooltip>
+												{/if}
+
 												{#if $config?.features?.enable_web_search && ($_user.role === 'admin' || $_user?.permissions?.features?.web_search)}
 													<Tooltip content={$i18n.t('Search the internet')} placement="top">
 														<button