feat: [frontend] support vision (#1518)

Co-authored-by: Joel <iamjoel007@gmail.com>

web/app/components/app/configuration/prompt-value-panel/index.tsx

@@ -14,17 +14,23 @@ import { DEFAULT_VALUE_MAX_LEN } from '@/config'
 import Button from '@/app/components/base/button'
 import { ChevronDown, ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import Tooltip from '@/app/components/base/tooltip-plus'
+import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
+import type { VisionFile, VisionSettings } from '@/types/app'
 
 export type IPromptValuePanelProps = {
   appType: AppType
   onSend?: () => void
   inputs: Inputs
+  visionConfig: VisionSettings
+  onVisionFilesChange: (files: VisionFile[]) => void
 }
 
 const PromptValuePanel: FC<IPromptValuePanelProps> = ({
   appType,
   onSend,
   inputs,
+  visionConfig,
+  onVisionFilesChange,
 }) => {
   const { t } = useTranslation()
   const { modelModeType, modelConfig, setInputs, mode, isAdvancedMode, completionPromptConfig, chatPromptConfig } = useContext(ConfigContext)
@@ -152,6 +158,24 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                   <div className='text-xs text-gray-500'>{t('appDebug.inputs.noVar')}</div>
                 )
             }
+            {
+              appType === AppType.completion && visionConfig?.enabled && (
+                <div className="mt-3 xl:flex justify-between">
+                  <div className="mr-1 py-2 shrink-0 w-[120px] text-sm text-gray-900">Image Upload</div>
+                  <div className='grow'>
+                    <TextGenerationImageUploader
+                      settings={visionConfig}
+                      onFilesChange={files => onVisionFilesChange(files.filter(file => file.progress !== -1).map(fileItem => ({
+                        type: 'image',
+                        transfer_method: fileItem.type,
+                        url: fileItem.url,
+                        upload_file_id: fileItem.fileId,
+                      })))}
+                    />
+                  </div>
+                </div>
+              )
+            }
           </>
         )
         }