From 323f7abbb2e548e9bd66a810c8264ebd348e73cb Mon Sep 17 00:00:00 2001
From: fwasmeier <florian.wasmeier@lindner-group.com>
Date: Wed, 12 Mar 2025 14:14:18 +0100
Subject: [PATCH] Add reactive capability checks for selected models and added
 the checks to the respective button. Enables conditional rendering of UI
 element based on the model capability.

---
 src/lib/components/chat/MessageInput.svelte | 24 ++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 7db31010b..6b0092b5e 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -104,6 +104,24 @@
 		(model) => $models.find((m) => m.id === model)?.info?.meta?.capabilities?.vision ?? true
 	);
 
+    $: areSelectedModelsWebSearchCapable = selectedModelIds.every(
+      (id) =>
+        $models.find((m) => m.id === id)?.info?.meta?.capabilities?.websearch ?? false
+    );
+    $: console.log('areSelectedModelsWebSearchCapable: ', areSelectedModelsWebSearchCapable);
+
+    $: areSelectedModelsCodeExecutionCapable = selectedModelIds.every(
+      (id) =>
+        $models.find((m) => m.id === id)?.info?.meta?.capabilities?.codeexecution ?? false
+    );
+    $: console.log('areSelectedModelsCodeExecutionCapable: ', areSelectedModelsCodeExecutionCapable);
+
+    $: areSelectedModelsImageGenerationCapable = selectedModelIds.every(
+      (id) =>
+        $models.find((m) => m.id === id)?.info?.meta?.capabilities?.imagegeneration ?? false
+    );
+    $: console.log('areSelectedModelsImageGenerationCapable: ', areSelectedModelsImageGenerationCapable);
+
 	const scrollToBottom = () => {
 		const element = document.getElementById('messages-container');
 		element.scrollTo({
@@ -1170,7 +1188,7 @@
 
 										<div class="flex gap-0.5 items-center overflow-x-auto scrollbar-none flex-1">
 											{#if $_user}
-												{#if $config?.features?.enable_web_search && ($_user.role === 'admin' || $_user?.permissions?.features?.web_search)}
+												{#if $config?.features?.enable_web_search && ($_user.role === 'admin' || $_user?.permissions?.features?.web_search) && areSelectedModelsWebSearchCapable}
 													<Tooltip content={$i18n.t('Search the internet')} placement="top">
 														<button
 															on:click|preventDefault={() => (webSearchEnabled = !webSearchEnabled)}
@@ -1189,7 +1207,7 @@
 													</Tooltip>
 												{/if}
 
-												{#if $config?.features?.enable_image_generation && ($_user.role === 'admin' || $_user?.permissions?.features?.image_generation)}
+												{#if $config?.features?.enable_image_generation && ($_user.role === 'admin' || $_user?.permissions?.features?.image_generation) && areSelectedModelsImageGenerationCapable}
 													<Tooltip content={$i18n.t('Generate an image')} placement="top">
 														<button
 															on:click|preventDefault={() =>
@@ -1208,7 +1226,7 @@
 													</Tooltip>
 												{/if}
 
-												{#if $config?.features?.enable_code_interpreter && ($_user.role === 'admin' || $_user?.permissions?.features?.code_interpreter)}
+												{#if $config?.features?.enable_code_interpreter && ($_user.role === 'admin' || $_user?.permissions?.features?.code_interpreter) && areSelectedModelsCodeExecutionCapable}
 													<Tooltip content={$i18n.t('Execute code for analysis')} placement="top">
 														<button
 															on:click|preventDefault={() =>