Feat/attachments (#9526)

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

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

@@ -0,0 +1,36 @@
+import { BlockEnum } from '../../types'
+import type { NodeDefault } from '../../types'
+import { type DocExtractorNodeType } from './types'
+import { ALL_CHAT_AVAILABLE_BLOCKS, ALL_COMPLETION_AVAILABLE_BLOCKS } from '@/app/components/workflow/constants'
+const i18nPrefix = 'workflow.errorMsg'
+
+const nodeDefault: NodeDefault<DocExtractorNodeType> = {
+  defaultValue: {
+    variable_selector: [],
+    is_array_file: false,
+  },
+  getAvailablePrevNodes(isChatMode: boolean) {
+    const nodes = isChatMode
+      ? ALL_CHAT_AVAILABLE_BLOCKS
+      : ALL_COMPLETION_AVAILABLE_BLOCKS.filter(type => type !== BlockEnum.End)
+    return nodes
+  },
+  getAvailableNextNodes(isChatMode: boolean) {
+    const nodes = isChatMode ? ALL_CHAT_AVAILABLE_BLOCKS : ALL_COMPLETION_AVAILABLE_BLOCKS
+    return nodes
+  },
+  checkValid(payload: DocExtractorNodeType, t: any) {
+    let errorMessages = ''
+    const { variable_selector: variable } = payload
+
+    if (!errorMessages && !variable?.length)
+      errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: t('workflow.nodes.assigner.assignedVariable') })
+
+    return {
+      isValid: !errorMessages,
+      errorMessage: errorMessages,
+    }
+  },
+}
+
+export default nodeDefault

web/app/components/workflow/nodes/document-extractor/node.tsx

@@ -0,0 +1,42 @@
+import type { FC } from 'react'
+import React from 'react'
+import { useNodes } from 'reactflow'
+import { useTranslation } from 'react-i18next'
+import NodeVariableItem from '../variable-assigner/components/node-variable-item'
+import { type DocExtractorNodeType } from './types'
+import { isConversationVar, isENV, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import { BlockEnum, type Node, type NodeProps } from '@/app/components/workflow/types'
+
+const i18nPrefix = 'workflow.nodes.docExtractor'
+
+const NodeComponent: FC<NodeProps<DocExtractorNodeType>> = ({
+  data,
+}) => {
+  const { t } = useTranslation()
+
+  const nodes: Node[] = useNodes()
+  const { variable_selector: variable } = data
+
+  if (!variable || variable.length === 0)
+    return null
+
+  const isSystem = isSystemVar(variable)
+  const isEnv = isENV(variable)
+  const isChatVar = isConversationVar(variable)
+  const node = isSystem ? nodes.find(node => node.data.type === BlockEnum.Start) : nodes.find(node => node.id === variable[0])
+  const varName = isSystem ? `sys.${variable[variable.length - 1]}` : variable.slice(1).join('.')
+  return (
+    <div className='relative px-3'>
+      <div className='mb-1 system-2xs-medium-uppercase text-text-tertiary'>{t(`${i18nPrefix}.inputVar`)}</div>
+      <NodeVariableItem
+        node={node as Node}
+        isEnv={isEnv}
+        isChatVar={isChatVar}
+        varName={varName}
+        className='bg-workflow-block-parma-bg'
+      />
+    </div>
+  )
+}
+
+export default React.memo(NodeComponent)

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

@@ -0,0 +1,88 @@
+import type { FC } from 'react'
+import React from 'react'
+import useSWR from 'swr'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import VarReferencePicker from '../_base/components/variable/var-reference-picker'
+import OutputVars, { VarItem } from '../_base/components/output-vars'
+import Split from '../_base/components/split'
+import { useNodeHelpLink } from '../_base/hooks/use-node-help-link'
+import useConfig from './use-config'
+import type { DocExtractorNodeType } from './types'
+import { fetchSupportFileTypes } from '@/service/datasets'
+import Field from '@/app/components/workflow/nodes/_base/components/field'
+import { BlockEnum, type NodePanelProps } from '@/app/components/workflow/types'
+import I18n from '@/context/i18n'
+import { LanguagesSupported } from '@/i18n/language'
+
+const i18nPrefix = 'workflow.nodes.docExtractor'
+
+const Panel: FC<NodePanelProps<DocExtractorNodeType>> = ({
+  id,
+  data,
+}) => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+  const link = useNodeHelpLink(BlockEnum.DocExtractor)
+  const { data: supportFileTypesResponse } = useSWR({ url: '/files/support-type' }, fetchSupportFileTypes)
+  const supportTypes = supportFileTypesResponse?.allowed_extensions || []
+  const supportTypesShowNames = (() => {
+    const extensionMap: { [key: string]: string } = {
+      md: 'markdown',
+      pptx: 'pptx',
+      htm: 'html',
+      xlsx: 'xlsx',
+      docx: 'docx',
+    }
+
+    return [...supportTypes]
+      .map(item => extensionMap[item] || item) // map to standardized extension
+      .map(item => item.toLowerCase()) // convert to lower case
+      .filter((item, index, self) => self.indexOf(item) === index) // remove duplicates
+      .join(locale !== LanguagesSupported[1] ? ', ' : '、 ')
+  })()
+  const {
+    readOnly,
+    inputs,
+    handleVarChanges,
+    filterVar,
+  } = useConfig(id, data)
+
+  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.variable_selector || []}
+              onChange={handleVarChanges}
+              filterVar={filterVar}
+              typePlaceHolder='File | Array[File]'
+            />
+            <div className='mt-1 py-0.5 text-text-tertiary body-xs-regular'>
+              {t(`${i18nPrefix}.supportFileTypes`, { types: supportTypesShowNames })}
+              <a className='text-text-accent' href={link} target='_blank'>{t(`${i18nPrefix}.learnMore`)}</a>
+            </div>
+          </>
+        </Field>
+      </div>
+      <Split />
+      <div className='px-4 pt-4 pb-2'>
+        <OutputVars>
+          <VarItem
+            name='text'
+            type={inputs.is_array_file ? 'array[string]' : 'string'}
+            description={t(`${i18nPrefix}.outputVars.text`)}
+          />
+        </OutputVars>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Panel)

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

@@ -0,0 +1,6 @@
+import type { CommonNodeType, ValueSelector } from '@/app/components/workflow/types'
+
+export type DocExtractorNodeType = CommonNodeType & {
+  variable_selector: ValueSelector
+  is_array_file: boolean
+}

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

@@ -0,0 +1,66 @@
+import { useCallback, useMemo } from 'react'
+import produce from 'immer'
+import { useStoreApi } from 'reactflow'
+
+import type { ValueSelector, Var } from '../../types'
+import { VarType } from '../../types'
+import { type DocExtractorNodeType } from './types'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+import {
+  useIsChatMode,
+  useNodesReadOnly,
+  useWorkflow,
+  useWorkflowVariables,
+} from '@/app/components/workflow/hooks'
+
+const useConfig = (id: string, payload: DocExtractorNodeType) => {
+  const { nodesReadOnly: readOnly } = useNodesReadOnly()
+  const { inputs, setInputs } = useNodeCrud<DocExtractorNodeType>(id, payload)
+
+  const filterVar = useCallback((varPayload: Var) => {
+    return varPayload.type === VarType.file || varPayload.type === VarType.arrayFile
+  }, [])
+
+  const isChatMode = useIsChatMode()
+
+  const store = useStoreApi()
+  const { getBeforeNodesInSameBranch } = useWorkflow()
+  const {
+    getNodes,
+  } = store.getState()
+  const currentNode = getNodes().find(n => n.id === id)
+  const isInIteration = payload.isInIteration
+  const iterationNode = isInIteration ? getNodes().find(n => n.id === currentNode!.parentId) : null
+  const availableNodes = useMemo(() => {
+    return getBeforeNodesInSameBranch(id)
+  }, [getBeforeNodesInSameBranch, id])
+
+  const { getCurrentVariableType } = useWorkflowVariables()
+  const getType = useCallback((variable?: ValueSelector) => {
+    const varType = getCurrentVariableType({
+      parentNode: iterationNode,
+      valueSelector: variable || [],
+      availableNodes,
+      isChatMode,
+      isConstant: false,
+    })
+    return varType
+  }, [getCurrentVariableType, availableNodes, isChatMode, iterationNode])
+
+  const handleVarChanges = useCallback((variable: ValueSelector | string) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.variable_selector = variable as ValueSelector
+      draft.is_array_file = getType(draft.variable_selector) === VarType.arrayFile
+    })
+    setInputs(newInputs)
+  }, [getType, inputs, setInputs])
+
+  return {
+    readOnly,
+    inputs,
+    filterVar,
+    handleVarChanges,
+  }
+}
+
+export default useConfig