enh: model capabilities

src/lib/components/chat/MessageInput.svelte

@@ -116,12 +116,33 @@
 	export let placeholder = '';
 
 	let visionCapableModels = [];
-	$: visionCapableModels = [...(atSelectedModel ? [atSelectedModel] : selectedModels)].filter(
+	$: visionCapableModels = (atSelectedModel?.id ? [atSelectedModel.id] : selectedModels).filter(
 		(model) => $models.find((m) => m.id === model)?.info?.meta?.capabilities?.vision ?? true
 	);
 
+	let webSearchCapableModels = [];
+	$: webSearchCapableModels = (atSelectedModel?.id ? [atSelectedModel.id] : selectedModels).filter(
+		(model) => $models.find((m) => m.id === model)?.info?.meta?.capabilities?.web_search ?? true
+	);
+
+	let imageGenerationCapableModels = [];
+	$: imageGenerationCapableModels = (
+		atSelectedModel?.id ? [atSelectedModel.id] : selectedModels
+	).filter(
+		(model) =>
+			$models.find((m) => m.id === model)?.info?.meta?.capabilities?.image_generation ?? true
+	);
+
+	let codeInterpreterCapableModels = [];
+	$: codeInterpreterCapableModels = (
+		atSelectedModel?.id ? [atSelectedModel.id] : selectedModels
+	).filter(
+		(model) =>
+			$models.find((m) => m.id === model)?.info?.meta?.capabilities?.code_interpreter ?? true
+	);
+
 	let toggleFilters = [];
-	$: toggleFilters = (atSelectedModel?.id || selectedModels)
+	$: toggleFilters = (atSelectedModel?.id ? [atSelectedModel.id] : selectedModels)
 		.map((id) => ($models.find((model) => model.id === id) || {})?.filters ?? [])
 		.reduce((acc, filters) => acc.filter((f1) => filters.some((f2) => f2.id === f1.id)));
 
@@ -879,7 +900,7 @@
 
 													console.log(userMessageElement);
 
-													userMessageElement.scrollIntoView({ block: 'center' });
+													userMessageElement?.scrollIntoView({ block: 'center' });
 													editButton?.click();
 												}
 
@@ -1196,7 +1217,7 @@
 													</Tooltip>
 												{/each}
 
-												{#if $config?.features?.enable_web_search && ($_user.role === 'admin' || $_user?.permissions?.features?.web_search)}
+												{#if (atSelectedModel?.id ? [atSelectedModel.id] : selectedModels).length === webSearchCapableModels.length && $config?.features?.enable_web_search && ($_user.role === 'admin' || $_user?.permissions?.features?.web_search)}
 													<Tooltip content={$i18n.t('Search the internet')} placement="top">
 														<button
 															on:click|preventDefault={() => (webSearchEnabled = !webSearchEnabled)}
@@ -1215,7 +1236,7 @@
 													</Tooltip>
 												{/if}
 
-												{#if $config?.features?.enable_image_generation && ($_user.role === 'admin' || $_user?.permissions?.features?.image_generation)}
+												{#if (atSelectedModel?.id ? [atSelectedModel.id] : selectedModels).length === imageGenerationCapableModels.length && $config?.features?.enable_image_generation && ($_user.role === 'admin' || $_user?.permissions?.features?.image_generation)}
 													<Tooltip content={$i18n.t('Generate an image')} placement="top">
 														<button
 															on:click|preventDefault={() =>
@@ -1234,7 +1255,7 @@
 													</Tooltip>
 												{/if}
 
-												{#if $config?.features?.enable_code_interpreter && ($_user.role === 'admin' || $_user?.permissions?.features?.code_interpreter)}
+												{#if (atSelectedModel?.id ? [atSelectedModel.id] : selectedModels).length === codeInterpreterCapableModels.length && $config?.features?.enable_code_interpreter && ($_user.role === 'admin' || $_user?.permissions?.features?.code_interpreter)}
 													<Tooltip content={$i18n.t('Execute code for analysis')} placement="top">
 														<button
 															on:click|preventDefault={() =>

src/lib/components/workspace/Models/Capabilities.svelte

@@ -7,15 +7,39 @@
 	const i18n = getContext('i18n');
 
 	const capabilityLabels = {
-		vision: $i18n.t('Model accepts image inputs'),
+		vision: {
-		usage: $i18n.t(
+			label: $i18n.t('Vision'),
+			description: $i18n.t('Model accepts image inputs')
+		},
+		web_search: {
+			label: $i18n.t('Web Search'),
+			description: $i18n.t('Model can search the web for information')
+		},
+		image_generation: {
+			label: $i18n.t('Image Generation'),
+			description: $i18n.t('Model can generate images based on text prompts')
+		},
+		code_interpreter: {
+			label: $i18n.t('Code Interpreter'),
+			description: $i18n.t('Model can execute code and perform calculations')
+		},
+		usage: {
+			label: $i18n.t('Usage'),
+			description: $i18n.t(
 				'Sends `stream_options: { include_usage: true }` in the request.\nSupported providers will return token usage information in the response when set.'
-		),
+			)
-		citations: $i18n.t('Displays citations in the response')
+		},
+		citations: {
+			label: $i18n.t('Citations'),
+			description: $i18n.t('Displays citations in the response')
+		}
 	};
 
 	export let capabilities: {
 		vision?: boolean;
+		web_search?: boolean;
+		image_generation?: boolean;
+		code_interpreter?: boolean;
 		usage?: boolean;
 		citations?: boolean;
 	} = {};
@@ -36,8 +60,8 @@
 				/>
 
 				<div class=" py-0.5 text-sm capitalize">
-					<Tooltip content={marked.parse(capabilityLabels[capability])}>
+					<Tooltip content={marked.parse(capabilityLabels[capability].description)}>
-						{$i18n.t(capability)}
+						{$i18n.t(capabilityLabels[capability].label)}
 					</Tooltip>
 				</div>
 			</div>

src/lib/components/workspace/Models/ModelEditor.svelte

@@ -77,9 +77,11 @@
 	};
 	let capabilities = {
 		vision: true,
+		web_search: true,
+		image_generation: true,
+		code_interpreter: true,
 		citations: true,
-		usage: undefined,
+		usage: undefined
-		reasoning: false
 	};
 
 	let knowledge = [];