fix: vision config (#2235)

web/app/components/app/configuration/debug/index.tsx

   }
 
   const handleVisionConfigInMultipleModel = () => {
-    if (debugWithMultipleModel && !visionConfig.enabled) {
+    if (debugWithMultipleModel && mode) {
       const supportedVision = multipleModelConfigs.some((modelConfig) => {
         const currentProvider = textGenerationModelList.find(modelItem => modelItem.provider === modelConfig.provider)
         const currentModel = currentProvider?.models.find(model => model.model === modelConfig.model)
 
   useEffect(() => {
     handleVisionConfigInMultipleModel()
-  }, [multipleModelConfigs])
+  }, [multipleModelConfigs, mode])
   const allToolIcons = (() => {
     const icons: Record<string, any> = {}
     modelConfig.agentConfig.tools?.forEach((item: any) => {

web/app/components/app/configuration/index.tsx

 
     doSetPromptMode(mode)
   }
+  const [visionConfig, doSetVisionConfig] = useState({
+    enabled: false,
+    number_limits: 2,
+    detail: Resolution.low,
+    transfer_methods: [TransferMethod.local_file],
+  })
+
+  const handleSetVisionConfig = (config: VisionSettings, notNoticeFormattingChanged?: boolean) => {
+    doSetVisionConfig({
+      enabled: config.enabled || false,
+      number_limits: config.number_limits || 2,
+      detail: config.detail || Resolution.low,
+      transfer_methods: config.transfer_methods || [TransferMethod.local_file],
+    })
+    if (!notNoticeFormattingChanged)
+      setFormattingChanged(true)
+  }
 
   const {
     chatPromptConfig,
     setCompletionParams,
     setStop: setTempStop,
   })
-
   const setModel = async ({
     modelId,
     provider,
 
     setModelConfig(newModelConfig)
     const supportVision = features && features.includes(ModelFeatureEnum.vision)
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    setVisionConfig({
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+
+    handleSetVisionConfig({
       ...visionConfig,
       enabled: supportVision,
     }, true)
   }
 
   const isShowVisionConfig = !!currModel?.features?.includes(ModelFeatureEnum.vision)
-  const [visionConfig, doSetVisionConfig] = useState({
-    enabled: false,
-    number_limits: 2,
-    detail: Resolution.low,
-    transfer_methods: [TransferMethod.local_file],
-  })
-
-  const setVisionConfig = (config: VisionSettings, notNoticeFormattingChanged?: boolean) => {
-    doSetVisionConfig(config)
-    if (!notNoticeFormattingChanged)
-      setFormattingChanged(true)
-  }
 
   useEffect(() => {
     (async () => {
         }
 
         if (modelConfig.file_upload)
-          setVisionConfig(modelConfig.file_upload.image, true)
+          handleSetVisionConfig(modelConfig.file_upload.image, true)
 
         syncToPublishedConfig(config)
         setPublishedConfig(config)
       hasSetContextVar,
       isShowVisionConfig,
       visionConfig,
-      setVisionConfig,
+      setVisionConfig: handleSetVisionConfig,
     }}
     >
       <>

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx

   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
 import { fetchModelParameterRules } from '@/service/common'
 import Loading from '@/app/components/base/loading'
 import { useProviderContext } from '@/context/provider-context'
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[60]'>
           <div className='w-[496px] rounded-xl border border-gray-100 bg-white shadow-xl'>
-            <div className='flex items-center px-4 h-12 rounded-t-xl border-b border-gray-100 bg-gray-50 text-md font-medium text-gray-900'>
-              <CubeOutline className='mr-2 w-4 h-4 text-primary-600' />
-              {t('common.modelProvider.modelAndParameters')}
-            </div>
-            <div className='max-h-[480px] px-10 pt-4 pb-8 overflow-y-auto'>
+            <div className='max-h-[480px] px-10 pt-6 pb-8 overflow-y-auto'>
               <div className='flex items-center justify-between h-8'>
-                <div className='text-sm font-medium text-gray-900'>
-                  {t('common.modelProvider.model')}
+                <div className='font-semibold text-gray-900'>
+                  {t('common.modelProvider.model').toLocaleUpperCase()}
                 </div>
                 <ModelSelector
                   defaultModel={(provider || modelId) ? { provider, model: modelId } : undefined}