Feat/attachments (#9526)

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

web/app/components/workflow/hooks/use-config-vision.ts

@@ -0,0 +1,88 @@
+import produce from 'immer'
+import { useCallback } from 'react'
+import { useIsChatMode } from './use-workflow'
+import type { ModelConfig, VisionSetting } from '@/app/components/workflow/types'
+import { useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import {
+  ModelFeatureEnum,
+} from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { Resolution } from '@/types/app'
+
+type Payload = {
+  enabled: boolean
+  configs?: VisionSetting
+}
+
+type Params = {
+  payload: Payload
+  onChange: (payload: Payload) => void
+}
+const useConfigVision = (model: ModelConfig, {
+  payload = {
+    enabled: false,
+  },
+  onChange,
+}: Params) => {
+  const {
+    currentModel: currModel,
+  } = useTextGenerationCurrentProviderAndModelAndModelList(
+    {
+      provider: model.provider,
+      model: model.name,
+    },
+  )
+
+  const isChatMode = useIsChatMode()
+
+  const getIsVisionModel = useCallback(() => {
+    return !!currModel?.features?.includes(ModelFeatureEnum.vision)
+  }, [currModel])
+
+  const isVisionModel = getIsVisionModel()
+
+  const handleVisionResolutionEnabledChange = useCallback((enabled: boolean) => {
+    const newPayload = produce(payload, (draft) => {
+      draft.enabled = enabled
+      if (enabled && isChatMode) {
+        draft.configs = {
+          detail: Resolution.high,
+          variable_selector: ['sys', 'files'],
+        }
+      }
+    })
+    onChange(newPayload)
+  }, [isChatMode, onChange, payload])
+
+  const handleVisionResolutionChange = useCallback((config: VisionSetting) => {
+    const newPayload = produce(payload, (draft) => {
+      draft.configs = config
+    })
+    onChange(newPayload)
+  }, [onChange, payload])
+
+  const handleModelChanged = useCallback(() => {
+    const isVisionModel = getIsVisionModel()
+    if (!isVisionModel) {
+      handleVisionResolutionEnabledChange(false)
+      return
+    }
+    if (payload.enabled) {
+      onChange({
+        enabled: true,
+        configs: {
+          detail: Resolution.high,
+          variable_selector: [],
+        },
+      })
+    }
+  }, [getIsVisionModel, handleVisionResolutionEnabledChange, onChange, payload.enabled])
+
+  return {
+    isVisionModel,
+    handleVisionResolutionEnabledChange,
+    handleVisionResolutionChange,
+    handleModelChanged,
+  }
+}
+
+export default useConfigVision

web/app/components/workflow/hooks/use-nodes-sync-draft.ts

@@ -75,8 +75,8 @@ export const useNodesSyncDraft = () => {
             },
           },
           features: {
-            opening_statement: features.opening?.opening_statement || '',
-            suggested_questions: features.opening?.suggested_questions || [],
+            opening_statement: features.opening?.enabled ? (features.opening?.opening_statement || '') : '',
+            suggested_questions: features.opening?.enabled ? (features.opening?.suggested_questions || []) : [],
             suggested_questions_after_answer: features.suggested,
             text_to_speech: features.text2speech,
             speech_to_text: features.speech2text,

web/app/components/workflow/hooks/use-workflow-run.ts

@@ -24,6 +24,9 @@ import {
 } from '@/service/workflow'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
 import { AudioPlayerManager } from '@/app/components/base/audio-btn/audio.player.manager'
+import {
+  getProcessedFilesFromResponse,
+} from '@/app/components/base/file-uploader/utils'
 
 export const useWorkflowRun = () => {
   const store = useStoreApi()
@@ -207,6 +210,7 @@ export const useWorkflowRun = () => {
             draft.result = {
               ...draft.result,
               ...data,
+              files: getProcessedFilesFromResponse(data.files || []),
             } as any
             if (isStringOutput) {
               draft.resultTabActive = true

web/app/components/workflow/hooks/use-workflow.ts

@@ -467,7 +467,9 @@ export const useWorkflowInit = () => {
   const setSyncWorkflowDraftHash = useStore(s => s.setSyncWorkflowDraftHash)
   const [data, setData] = useState<FetchWorkflowDraftResponse>()
   const [isLoading, setIsLoading] = useState(true)
-  workflowStore.setState({ appId: appDetail.id })
+  useEffect(() => {
+    workflowStore.setState({ appId: appDetail.id })
+  }, [appDetail.id, workflowStore])
 
   const handleGetInitialWorkflowData = useCallback(async () => {
     try {
@@ -515,6 +517,7 @@ export const useWorkflowInit = () => {
 
   useEffect(() => {
     handleGetInitialWorkflowData()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const handleFetchPreloadData = useCallback(async () => {