From 45ba949d966f6966869f08178f87cb59164be1a4 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 25 Aug 2025 10:28:18 +0700
Subject: [PATCH 1/3] fix: toggle vision for remote model

---
 web-app/src/containers/ChatInput.tsx         | 12 ++++++++---
 web-app/src/containers/dialogs/EditModel.tsx | 22 +++++++-------------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/web-app/src/containers/ChatInput.tsx b/web-app/src/containers/ChatInput.tsx
index 0fa7a4b32..df73b3bac 100644
--- a/web-app/src/containers/ChatInput.tsx
+++ b/web-app/src/containers/ChatInput.tsx
@@ -107,9 +107,15 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
           if (selectedProvider === 'llamacpp') {
             const hasLocalMmproj = await checkMmprojExists(selectedModel.id)
             setHasMmproj(hasLocalMmproj)
-          } else {
-            // For non-llamacpp providers, only check vision capability
+          }
+          // For non-llamacpp providers, only check vision capability
+          else if (
+            selectedProvider !== 'llamacpp' &&
+            selectedModel?.capabilities?.includes('vision')
+          ) {
             setHasMmproj(true)
+          } else {
+            setHasMmproj(false)
           }
         } catch (error) {
           console.error('Error checking mmproj:', error)
@@ -119,7 +125,7 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
     }
 
     checkMmprojSupport()
-  }, [selectedModel?.id, selectedProvider])
+  }, [selectedModel?.capabilities, selectedModel?.id, selectedProvider])
 
   // Check if there are active MCP servers
   const hasActiveMCPServers = connectedServers.length > 0 || tools.length > 0
diff --git a/web-app/src/containers/dialogs/EditModel.tsx b/web-app/src/containers/dialogs/EditModel.tsx
index 5fd9b3f85..0f39216ae 100644
--- a/web-app/src/containers/dialogs/EditModel.tsx
+++ b/web-app/src/containers/dialogs/EditModel.tsx
@@ -177,21 +177,13 @@ export const DialogEditModel = ({
                   {t('providers:editModel.vision')}
                 </span>
               </div>
-              <Tooltip>
-                <TooltipTrigger>
-                  <Switch
-                    id="vision-capability"
-                    checked={capabilities.vision}
-                    disabled={true}
-                    onCheckedChange={(checked) =>
-                      handleCapabilityChange('vision', checked)
-                    }
-                  />
-                </TooltipTrigger>
-                <TooltipContent>
-                  {t('providers:editModel.notAvailable')}
-                </TooltipContent>
-              </Tooltip>
+              <Switch
+                id="vision-capability"
+                checked={capabilities.vision}
+                onCheckedChange={(checked) =>
+                  handleCapabilityChange('vision', checked)
+                }
+              />
             </div>
 
             <div className="flex items-center justify-between">

From 8d06c3addf9cbdecd9c5831b68de9b654286beb1 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 25 Aug 2025 10:47:18 +0700
Subject: [PATCH 2/3] chore: add tooltip visions

---
 web-app/src/containers/ChatInput.tsx | 48 +++++++++++++++++-----------
 1 file changed, 30 insertions(+), 18 deletions(-)

diff --git a/web-app/src/containers/ChatInput.tsx b/web-app/src/containers/ChatInput.tsx
index df73b3bac..86f7e6b19 100644
--- a/web-app/src/containers/ChatInput.tsx
+++ b/web-app/src/containers/ChatInput.tsx
@@ -541,29 +541,41 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
                 )}
                 {/* File attachment - show only for models with mmproj */}
                 {hasMmproj && (
-                  <div
-                    className="h-6 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1"
-                    onClick={handleAttachmentClick}
-                  >
-                    <IconPhoto size={18} className="text-main-view-fg/50" />
-                    <input
-                      type="file"
-                      ref={fileInputRef}
-                      className="hidden"
-                      multiple
-                      onChange={handleFileChange}
-                    />
-                  </div>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div
+                          className="h-7 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1"
+                          onClick={handleAttachmentClick}
+                        >
+                          <IconPhoto
+                            size={18}
+                            className="text-main-view-fg/50"
+                          />
+                          <input
+                            type="file"
+                            ref={fileInputRef}
+                            className="hidden"
+                            multiple
+                            onChange={handleFileChange}
+                          />
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>{t('visions')}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                 )}
                 {/* Microphone - always available - Temp Hide */}
-                {/* <div className="h-6 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1">
+                {/* <div className="h-7 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1">
                 <IconMicrophone size={18} className="text-main-view-fg/50" />
               </div> */}
                 {selectedModel?.capabilities?.includes('embeddings') && (
                   <TooltipProvider>
                     <Tooltip>
                       <TooltipTrigger asChild>
-                        <div className="h-6 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1">
+                        <div className="h-7 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1">
                           <IconCodeCircle2
                             size={18}
                             className="text-main-view-fg/50"
@@ -607,7 +619,7 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
                                 return (
                                   <div
                                     className={cn(
-                                      'h-6 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1 cursor-pointer relative',
+                                      'h-7 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1 cursor-pointer relative',
                                       isOpen && 'bg-main-view-fg/10'
                                     )}
                                   >
@@ -638,7 +650,7 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
                   <TooltipProvider>
                     <Tooltip>
                       <TooltipTrigger asChild>
-                        <div className="h-6 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1">
+                        <div className="h-7 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1">
                           <IconWorld
                             size={18}
                             className="text-main-view-fg/50"
@@ -655,7 +667,7 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
                   <TooltipProvider>
                     <Tooltip>
                       <TooltipTrigger asChild>
-                        <div className="h-6 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1">
+                        <div className="h-7 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1">
                           <IconAtom
                             size={18}
                             className="text-main-view-fg/50"

From 62eb422934b2a3e497ff90458fbd4930f605f1ea Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 25 Aug 2025 11:26:56 +0700
Subject: [PATCH 3/3] chore: show model setting only for local provider

---
 web-app/src/containers/DropdownModelProvider.tsx | 16 +++++++++-------
 web-app/src/hooks/useModelProvider.ts            |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/web-app/src/containers/DropdownModelProvider.tsx b/web-app/src/containers/DropdownModelProvider.tsx
index 005580890..e47c31503 100644
--- a/web-app/src/containers/DropdownModelProvider.tsx
+++ b/web-app/src/containers/DropdownModelProvider.tsx
@@ -414,13 +414,15 @@ const DropdownModelProvider = ({
             </span>
           </button>
         </PopoverTrigger>
-        {currentModel?.settings && provider && (
-          <ModelSetting
-            model={currentModel as Model}
-            provider={provider}
-            smallIcon
-          />
-        )}
+        {currentModel?.settings &&
+          provider &&
+          provider.provider === 'llamacpp' && (
+            <ModelSetting
+              model={currentModel as Model}
+              provider={provider}
+              smallIcon
+            />
+          )}
         <ModelSupportStatus
           modelId={selectedModel?.id}
           provider={selectedProvider}
diff --git a/web-app/src/hooks/useModelProvider.ts b/web-app/src/hooks/useModelProvider.ts
index 9be26ce41..f0ee6a2fc 100644
--- a/web-app/src/hooks/useModelProvider.ts
+++ b/web-app/src/hooks/useModelProvider.ts
@@ -241,7 +241,7 @@ export const useModelProvider = create<ModelProviderState>()(
             }
 
             // Migrate model settings
-            if (provider.models) {
+            if (provider.models && provider.provider === 'llamacpp') {
               provider.models.forEach((model) => {
                 if (!model.settings) model.settings = {}