Feat/attachments (#9526)

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

web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx

@@ -5,11 +5,12 @@ import { useBoolean } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import type { Param } from '../../types'
 import { ParamType } from '../../types'
-import cn from '@/utils/classnames'
 import AddButton from '@/app/components/base/button/add-button'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Field from '@/app/components/app/configuration/config-var/config-modal/field'
+import Input from '@/app/components/base/input'
+import Textarea from '@/app/components/base/textarea'
 import Select from '@/app/components/base/select'
 import Switch from '@/app/components/base/switch'
 import Toast from '@/app/components/base/toast'
@@ -19,7 +20,6 @@ import { checkKeys } from '@/utils/var'
 
 const i18nPrefix = 'workflow.nodes.parameterExtractor'
 const errorI18nPrefix = 'workflow.errorMsg'
-const inputClassName = 'w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
 
 const DEFAULT_PARAM: Param = {
   name: '',
@@ -136,9 +136,7 @@ const AddExtractParameter: FC<Props> = ({
           <div>
             <div className='space-y-2'>
               <Field title={t(`${i18nPrefix}.addExtractParameterContent.name`)}>
-                <input
-                  type='text'
-                  className={inputClassName}
+                <Input
                   value={param.name}
                   onChange={e => handleParamChange('name')(e.target.value)}
                   placeholder={t(`${i18nPrefix}.addExtractParameterContent.namePlaceholder`)!}
@@ -165,8 +163,7 @@ const AddExtractParameter: FC<Props> = ({
                 </Field>
               )}
               <Field title={t(`${i18nPrefix}.addExtractParameterContent.description`)}>
-                <textarea
-                  className={cn(inputClassName, '!h-[80px]')}
+                <Textarea
                   value={param.description}
                   onChange={e => handleParamChange('description')(e.target.value)}
                   placeholder={t(`${i18nPrefix}.addExtractParameterContent.descriptionPlaceholder`)!}

web/app/components/workflow/nodes/parameter-extractor/components/reasoning-mode-picker.tsx

@@ -4,31 +4,10 @@ import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ReasoningModeType } from '../types'
 import Field from '../../_base/components/field'
-import cn from '@/utils/classnames'
+import OptionCard from '../../_base/components/option-card'
 
 const i18nPrefix = 'workflow.nodes.parameterExtractor'
 
-type ItemProps = {
-  isChosen: boolean
-  text: string
-  onClick: () => void
-}
-
-const Item: FC<ItemProps> = ({
-  isChosen,
-  text,
-  onClick,
-}) => {
-  return (
-    <div
-      className={cn(isChosen ? 'border-[1.5px] border-primary-400 bg-white' : 'border border-gray-100 bg-gray-25', 'grow w-0 shrink-0 flex items-center h-8 justify-center rounded-lg cursor-pointer text-[13px] font-normal text-gray-900')}
-      onClick={() => !isChosen ? onClick() : () => { }}
-    >
-      {text}
-    </div>
-  )
-}
-
 type Props = {
   type: ReasoningModeType
   onChange: (type: ReasoningModeType) => void
@@ -51,16 +30,16 @@ const ReasoningModePicker: FC<Props> = ({
       title={t(`${i18nPrefix}.reasoningMode`)}
       tooltip={t(`${i18nPrefix}.reasoningModeTip`)!}
     >
-      <div className='flex space-x-1'>
-        <Item
-          isChosen={type === ReasoningModeType.functionCall}
-          text='Function/Tool Calling'
-          onClick={handleChange(ReasoningModeType.functionCall)}
+      <div className='grid grid-cols-2 gap-x-1'>
+        <OptionCard
+          title='Function/Tool Calling'
+          onSelect={handleChange(ReasoningModeType.functionCall)}
+          selected={type === ReasoningModeType.functionCall}
         />
-        <Item
-          isChosen={type === ReasoningModeType.prompt}
-          text='Prompt'
-          onClick={handleChange(ReasoningModeType.prompt)}
+        <OptionCard
+          title='Prompt'
+          selected={type === ReasoningModeType.prompt}
+          onSelect={handleChange(ReasoningModeType.prompt)}
         />
       </div>
     </Field>

web/app/components/workflow/nodes/parameter-extractor/default.ts

@@ -16,6 +16,9 @@ const nodeDefault: NodeDefault<ParameterExtractorNodeType> = {
       },
     },
     reasoning_mode: ReasoningModeType.prompt,
+    vision: {
+      enabled: false,
+    },
   },
   getAvailablePrevNodes(isChatMode: boolean) {
     const nodes = isChatMode
@@ -54,6 +57,8 @@ const nodeDefault: NodeDefault<ParameterExtractorNodeType> = {
           errorMessages = t(`${i18nPrefix}.errorMsg.fieldRequired`, { field: t(`${i18nPrefix}.nodes.parameterExtractor.addExtractParameterContent.descriptionPlaceholder`) })
       })
     }
+    if (!errorMessages && payload.vision?.enabled && !payload.vision.configs?.variable_selector?.length)
+      errorMessages = t(`${i18nPrefix}.errorMsg.fieldRequired`, { field: t(`${i18nPrefix}.errorMsg.fields.visionVariable`) })
     return {
       isValid: !errorMessages,
       errorMessage: errorMessages,

web/app/components/workflow/nodes/parameter-extractor/panel.tsx

@@ -5,6 +5,7 @@ import MemoryConfig from '../_base/components/memory-config'
 import VarReferencePicker from '../_base/components/variable/var-reference-picker'
 import Editor from '../_base/components/prompt/editor'
 import ResultPanel from '../../run/result-panel'
+import ConfigVision from '../_base/components/config-vision'
 import useConfig from './use-config'
 import type { ParameterExtractorNodeType } from './types'
 import ExtractParameter from './components/extract-parameter/list'
@@ -51,6 +52,9 @@ const Panel: FC<NodePanelProps<ParameterExtractorNodeType>> = ({
     availableNodesWithParent,
     inputVarValues,
     varInputs,
+    isVisionModel,
+    handleVisionResolutionChange,
+    handleVisionResolutionEnabledChange,
     isShowSingleRun,
     hideSingleRun,
     runningStatus,
@@ -65,20 +69,6 @@ const Panel: FC<NodePanelProps<ParameterExtractorNodeType>> = ({
   return (
     <div className='mt-2'>
       <div className='px-4 pb-4 space-y-4'>
-        <Field
-          title={t(`${i18nPrefix}.inputVar`)}
-        >
-          <>
-            <VarReferencePicker
-              readonly={readOnly}
-              nodeId={id}
-              isShowNodeName
-              value={inputs.query || []}
-              onChange={handleInputVarChange}
-              filterVar={filterVar}
-            />
-          </>
-        </Field>
         <Field
           title={t(`${i18nCommonPrefix}.model`)}
         >
@@ -97,6 +87,30 @@ const Panel: FC<NodePanelProps<ParameterExtractorNodeType>> = ({
             readonly={readOnly}
           />
         </Field>
+        <Field
+          title={t(`${i18nPrefix}.inputVar`)}
+        >
+          <>
+            <VarReferencePicker
+              readonly={readOnly}
+              nodeId={id}
+              isShowNodeName
+              value={inputs.query || []}
+              onChange={handleInputVarChange}
+              filterVar={filterVar}
+            />
+          </>
+        </Field>
+        <Split />
+        <ConfigVision
+          nodeId={id}
+          readOnly={readOnly}
+          isVisionModel={isVisionModel}
+          enabled={inputs.vision?.enabled}
+          onEnabledChange={handleVisionResolutionEnabledChange}
+          config={inputs.vision?.configs}
+          onConfigChange={handleVisionResolutionChange}
+        />
         <Field
           title={t(`${i18nPrefix}.extractParameters`)}
           operations={

web/app/components/workflow/nodes/parameter-extractor/types.ts

@@ -1,4 +1,4 @@
-import type { CommonNodeType, Memory, ModelConfig, ValueSelector } from '@/app/components/workflow/types'
+import type { CommonNodeType, Memory, ModelConfig, ValueSelector, VisionSetting } from '@/app/components/workflow/types'
 
 export enum ParamType {
   string = 'string',
@@ -30,4 +30,8 @@ export type ParameterExtractorNodeType = CommonNodeType & {
   parameters: Param[]
   instruction: string
   memory?: Memory
+  vision: {
+    enabled: boolean
+    configs?: VisionSetting
+  }
 }

web/app/components/workflow/nodes/parameter-extractor/use-config.ts

@@ -9,6 +9,7 @@ import {
   useWorkflow,
 } from '../../hooks'
 import useOneStepRun from '../_base/hooks/use-one-step-run'
+import useConfigVision from '../../hooks/use-config-vision'
 import type { Param, ParameterExtractorNodeType, ReasoningModeType } from './types'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel, useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import {
@@ -84,9 +85,23 @@ const useConfig = (id: string, payload: ParameterExtractorNodeType) => {
   }
   const modelMode = inputs.model?.mode
   const isChatModel = modelMode === 'chat'
-
   const isCompletionModel = !isChatModel
 
+  const {
+    isVisionModel,
+    handleVisionResolutionEnabledChange,
+    handleVisionResolutionChange,
+    handleModelChanged: handleVisionConfigAfterModelChanged,
+  } = useConfigVision(model, {
+    payload: inputs.vision,
+    onChange: (newPayload) => {
+      const newInputs = produce(inputs, (draft) => {
+        draft.vision = newPayload
+      })
+      setInputs(newInputs)
+    },
+  })
+
   const appendDefaultPromptConfig = useCallback((draft: ParameterExtractorNodeType, defaultConfig: any, _passInIsChatMode?: boolean) => {
     const promptTemplates = defaultConfig.prompt_templates
     if (!isChatModel) {
@@ -97,7 +112,7 @@ const useConfig = (id: string, payload: ParameterExtractorNodeType) => {
     }
   }, [isChatModel])
 
-  // const [modelChanged, setModelChanged] = useState(false)
+  const [modelChanged, setModelChanged] = useState(false)
   const {
     currentProvider,
     currentModel,
@@ -113,7 +128,7 @@ const useConfig = (id: string, payload: ParameterExtractorNodeType) => {
         appendDefaultPromptConfig(draft, defaultConfig, model.mode === 'chat')
     })
     setInputs(newInputs)
-    // setModelChanged(true)
+    setModelChanged(true)
   }, [setInputs, defaultConfig, appendDefaultPromptConfig])
 
   useEffect(() => {
@@ -126,6 +141,15 @@ const useConfig = (id: string, payload: ParameterExtractorNodeType) => {
     }
   }, [model?.provider, currentProvider, currentModel, handleModelChanged])
 
+  // change to vision model to set vision enabled, else disabled
+  useEffect(() => {
+    if (!modelChanged)
+      return
+    setModelChanged(false)
+    handleVisionConfigAfterModelChanged()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isVisionModel, modelChanged])
+
   const {
     currentModel: currModel,
   } = useTextGenerationCurrentProviderAndModelAndModelList(
@@ -245,6 +269,9 @@ const useConfig = (id: string, payload: ParameterExtractorNodeType) => {
     handleMemoryChange,
     varInputs,
     inputVarValues,
+    isVisionModel,
+    handleVisionResolutionEnabledChange,
+    handleVisionResolutionChange,
     isShowSingleRun,
     hideSingleRun,
     runningStatus,