fix: vision config doesn't enabled in llm (#3225)

web/app/components/workflow/nodes/llm/components/resolution-picker.tsx

@@ -23,7 +23,7 @@ const Item: FC<ItemProps> = ({ title, value, onSelect, isSelected }) => {
 
   return (
     <div
-      className={cn(isSelected ? 'bg-white border-[2px] border-primary-400  shadow-xs' : 'bg-gray-25 border border-gray-100', 'flex items-center h-8 px-3 rounded-xl text-[13px] font-normal text-gray-900 cursor-pointer')}
+      className={cn(isSelected ? 'bg-white border-[2px] border-primary-400  shadow-xs' : 'bg-gray-25 border border-gray-100', 'flex items-center h-8 px-3 rounded-lg text-[13px] font-normal text-gray-900 cursor-pointer')}
       onClick={handleSelect}
     >
       {title}
@@ -43,7 +43,7 @@ const ResolutionPicker: FC<Props> = ({
   const { t } = useTranslation()
 
   return (
-    <div className='flex items-center'>
+    <div className='flex items-center justify-between'>
       <div className='mr-2 text-xs font-medium text-gray-500 uppercase'>{t(`${i18nPrefix}.resolution.name`)}</div>
       <div className='flex items-center space-x-1'>
         <Item

web/app/components/workflow/nodes/llm/panel.tsx

@@ -21,6 +21,7 @@ import ResultPanel from '@/app/components/workflow/run/result-panel'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
+import Switch from '@/app/components/base/switch'
 const i18nPrefix = 'workflow.nodes.llm'
 
 const Panel: FC<NodePanelProps<LLMNodeType>> = ({
@@ -51,6 +52,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
     filterVar,
     handlePromptChange,
     handleMemoryChange,
+    handleVisionResolutionEnabledChange,
     handleVisionResolutionChange,
     isShowSingleRun,
     hideSingleRun,
@@ -240,12 +242,19 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
               title={t(`${i18nPrefix}.vision`)}
               tooltip={t('appDebug.vision.description')!}
               operations={
+                <Switch size='md' defaultValue={inputs.vision.enabled} onChange={handleVisionResolutionEnabledChange} />
+              }
+            >
+              {inputs.vision.enabled
+                ? (
                   <ResolutionPicker
                     value={inputs.vision.configs?.detail || Resolution.high}
                     onChange={handleVisionResolutionChange}
                   />
-              }
+                )
-            />
+                : null}
+
+            </Field>
           </>
         )}
       </div>

web/app/components/workflow/nodes/llm/use-config.ts

@@ -103,6 +103,7 @@ const useConfig = (id: string, payload: LLMNodeType) => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultConfig, isChatModel])
 
+  const [modelChanged, setModelChanged] = useState(false)
   const {
     currentProvider,
     currentModel,
@@ -118,6 +119,7 @@ const useConfig = (id: string, payload: LLMNodeType) => {
         appendDefaultPromptConfig(draft, defaultConfig, model.mode === 'chat')
     })
     setInputs(newInputs)
+    setModelChanged(true)
   }, [setInputs, defaultConfig, appendDefaultPromptConfig])
 
   useEffect(() => {
@@ -146,7 +148,35 @@ const useConfig = (id: string, payload: LLMNodeType) => {
     },
   )
   const isShowVisionConfig = !!currModel?.features?.includes(ModelFeatureEnum.vision)
-
+  // change to vision model to set vision enabled, else disabled
+  useEffect(() => {
+    if (!modelChanged)
+      return
+    setModelChanged(false)
+    if (!isShowVisionConfig) {
+      const newInputs = produce(inputs, (draft) => {
+        draft.vision = {
+          enabled: false,
+        }
+      })
+      setInputs(newInputs)
+      return
+    }
+    if (!inputs.vision?.enabled) {
+      const newInputs = produce(inputs, (draft) => {
+        if (!draft.vision?.enabled) {
+          draft.vision = {
+            enabled: true,
+            configs: {
+              detail: Resolution.high,
+            },
+          }
+        }
+      })
+      setInputs(newInputs)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowVisionConfig, modelChanged])
   // variables
   const { handleVarListChange, handleAddVariable } = useVarList<LLMNodeType>({
     inputs,
@@ -176,6 +206,28 @@ const useConfig = (id: string, payload: LLMNodeType) => {
     setInputs(newInputs)
   }, [inputs, setInputs])
 
+  const handleVisionResolutionEnabledChange = useCallback((enabled: boolean) => {
+    const newInputs = produce(inputs, (draft) => {
+      if (!draft.vision) {
+        draft.vision = {
+          enabled,
+          configs: {
+            detail: Resolution.high,
+          },
+        }
+      }
+      else {
+        draft.vision.enabled = enabled
+        if (!draft.vision.configs) {
+          draft.vision.configs = {
+            detail: Resolution.high,
+          }
+        }
+      }
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
   const handleVisionResolutionChange = useCallback((newResolution: Resolution) => {
     const newInputs = produce(inputs, (draft) => {
       if (!draft.vision.configs) {
@@ -296,6 +348,7 @@ const useConfig = (id: string, payload: LLMNodeType) => {
     filterVar,
     handlePromptChange,
     handleMemoryChange,
+    handleVisionResolutionEnabledChange,
     handleVisionResolutionChange,
     isShowSingleRun,
     hideSingleRun,