From 788550affac962ae77df10ed493b7f249579f7c3 Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Mon, 18 Mar 2024 14:49:17 +0800
Subject: [PATCH] chat upload file

---
 .../feature-panel/file-upload/index.tsx       |  59 +++++++++
 .../file-upload/param-config-content.tsx      | 116 ++++++++++++++++++
 .../file-upload/param-config.tsx              |  47 +++++++
 .../file-upload/radio-group/index.tsx         |  40 ++++++
 .../file-upload/radio-group/style.module.css  |  24 ++++
 .../base/features/feature-panel/index.tsx     |   2 +
 web/app/components/base/features/store.ts     |   7 ++
 web/app/components/base/features/types.ts     |   9 ++
 web/app/components/workflow/features.tsx      |  30 +++--
 web/app/components/workflow/header/index.tsx  |  32 ++---
 .../workflow/hooks/use-nodes-sync-draft.ts    |   1 +
 web/app/components/workflow/index.tsx         |   7 ++
 .../panel/debug-and-preview/chat-wrapper.tsx  |   1 +
 13 files changed, 344 insertions(+), 31 deletions(-)
 create mode 100644 web/app/components/base/features/feature-panel/file-upload/index.tsx
 create mode 100644 web/app/components/base/features/feature-panel/file-upload/param-config-content.tsx
 create mode 100644 web/app/components/base/features/feature-panel/file-upload/param-config.tsx
 create mode 100644 web/app/components/base/features/feature-panel/file-upload/radio-group/index.tsx
 create mode 100644 web/app/components/base/features/feature-panel/file-upload/radio-group/style.module.css

diff --git a/web/app/components/base/features/feature-panel/file-upload/index.tsx b/web/app/components/base/features/feature-panel/file-upload/index.tsx
new file mode 100644
index 0000000000..d002f0005d
--- /dev/null
+++ b/web/app/components/base/features/feature-panel/file-upload/index.tsx
@@ -0,0 +1,59 @@
+'use client'
+import produce from 'immer'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { OnFeaturesChange } from '../../types'
+import {
+  useFeatures,
+  useFeaturesStore,
+} from '../../hooks'
+import ParamConfig from './param-config'
+import Switch from '@/app/components/base/switch'
+import { FileSearch02 } from '@/app/components/base/icons/src/vender/solid/files'
+
+type FileUploadProps = {
+  onChange?: OnFeaturesChange
+}
+const FileUpload = ({
+  onChange,
+}: FileUploadProps) => {
+  const { t } = useTranslation()
+  const featuresStore = useFeaturesStore()
+  const file = useFeatures(s => s.features.file)
+
+  const handleSwitch = useCallback((value: boolean) => {
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
+    const newFeatures = produce(features, (draft) => {
+      draft.file.image.enabled = value
+    })
+    setFeatures(newFeatures)
+
+    if (onChange)
+      onChange(newFeatures)
+  }, [featuresStore, onChange])
+
+  return (
+    <div className='flex items-center px-3 h-12 bg-gray-50 rounded-xl overflow-hidden'>
+      <div className='shrink-0 flex items-center justify-center mr-1 w-6 h-6'>
+        <FileSearch02 className='shrink-0 w-4 h-4 text-[#039855]' />
+      </div>
+      <div className='shrink-0 mr-2 whitespace-nowrap text-sm text-gray-800 font-semibold'>
+        {t('common.imageUploader.imageUpload')}
+      </div>
+      <div className='grow' />
+      <div className='flex items-center'>
+        <ParamConfig onChange={onChange} />
+        <div className='ml-4 mr-3 w-[1px] h-3.5 bg-gray-200'></div>
+        <Switch
+          defaultValue={file.image.enabled}
+          onChange={handleSwitch}
+          size='md'
+        />
+      </div>
+    </div>
+  )
+}
+export default React.memo(FileUpload)
diff --git a/web/app/components/base/features/feature-panel/file-upload/param-config-content.tsx b/web/app/components/base/features/feature-panel/file-upload/param-config-content.tsx
new file mode 100644
index 0000000000..1a2184c6b4
--- /dev/null
+++ b/web/app/components/base/features/feature-panel/file-upload/param-config-content.tsx
@@ -0,0 +1,116 @@
+'use client'
+
+import produce from 'immer'
+import React, { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { OnFeaturesChange } from '../../types'
+import {
+  useFeatures,
+  useFeaturesStore,
+} from '../../hooks'
+import RadioGroup from './radio-group'
+import { TransferMethod } from '@/types/app'
+import ParamItem from '@/app/components/base/param-item'
+
+const MIN = 1
+const MAX = 6
+type ParamConfigContentProps = {
+  onChange?: OnFeaturesChange
+}
+const ParamConfigContent = ({
+  onChange,
+}: ParamConfigContentProps) => {
+  const { t } = useTranslation()
+  const featuresStore = useFeaturesStore()
+  const file = useFeatures(s => s.features.file)
+
+  const transferMethod = useMemo(() => {
+    if (!file.image.transfer_methods || file.image.transfer_methods.length === 2)
+      return TransferMethod.all
+
+    return file.image.transfer_methods[0]
+  }, [file.image.transfer_methods])
+
+  const handleTransferMethodsChange = useCallback((value: TransferMethod) => {
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
+    const newFeatures = produce(features, (draft) => {
+      if (TransferMethod.all)
+        draft.file.image.transfer_methods = [TransferMethod.remote_url, TransferMethod.local_file]
+      else
+        draft.file.image.transfer_methods = [value]
+    })
+    setFeatures(newFeatures)
+    if (onChange)
+      onChange(newFeatures)
+  }, [featuresStore, onChange])
+
+  const handleLimitsChange = useCallback((_key: string, value: number) => {
+    if (!value)
+      return
+
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
+    const newFeatures = produce(features, (draft) => {
+      draft.file.image.number_limits = value
+    })
+    setFeatures(newFeatures)
+    if (onChange)
+      onChange(newFeatures)
+  }, [featuresStore, onChange])
+
+  return (
+    <div>
+      <div>
+        <div className='leading-6 text-base font-semibold text-gray-800'>{t('appDebug.vision.visionSettings.title')}</div>
+        <div className='pt-3 space-y-6'>
+          <div>
+            <div className='mb-2 leading-[18px] text-[13px] font-semibold text-gray-800'>{t('appDebug.vision.visionSettings.uploadMethod')}</div>
+            <RadioGroup
+              className='space-x-3'
+              options={[
+                {
+                  label: t('appDebug.vision.visionSettings.both'),
+                  value: TransferMethod.all,
+                },
+                {
+                  label: t('appDebug.vision.visionSettings.localUpload'),
+                  value: TransferMethod.local_file,
+                },
+                {
+                  label: t('appDebug.vision.visionSettings.url'),
+                  value: TransferMethod.remote_url,
+                },
+              ]}
+              value={transferMethod}
+              onChange={handleTransferMethodsChange}
+            />
+          </div>
+          <div>
+            <ParamItem
+              id='upload_limit'
+              className=''
+              name={t('appDebug.vision.visionSettings.uploadLimit')}
+              noTooltip
+              {...{
+                default: 2,
+                step: 1,
+                min: MIN,
+                max: MAX,
+              }}
+              value={file.image.number_limits || 3}
+              enable={true}
+              onChange={handleLimitsChange}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(ParamConfigContent)
diff --git a/web/app/components/base/features/feature-panel/file-upload/param-config.tsx b/web/app/components/base/features/feature-panel/file-upload/param-config.tsx
new file mode 100644
index 0000000000..ed3a1b434c
--- /dev/null
+++ b/web/app/components/base/features/feature-panel/file-upload/param-config.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import { memo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import type { OnFeaturesChange } from '../../types'
+import ParamConfigContent from './param-config-content'
+import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+
+type ParamsConfigProps = {
+  onChange?: OnFeaturesChange
+}
+const ParamsConfig = ({
+  onChange,
+}: ParamsConfigProps) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-end'
+      offset={{
+        mainAxis: 4,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        <div className={cn('flex items-center rounded-md h-7 px-3 space-x-1 text-gray-700 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200')}>
+          <Settings01 className='w-3.5 h-3.5 ' />
+          <div className='ml-1 leading-[18px] text-xs font-medium '>{t('appDebug.voice.settings')}</div>
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent style={{ zIndex: 50 }}>
+        <div className='w-80 sm:w-[412px] p-4 bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg space-y-3'>
+          <ParamConfigContent onChange={onChange} />
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+export default memo(ParamsConfig)
diff --git a/web/app/components/base/features/feature-panel/file-upload/radio-group/index.tsx b/web/app/components/base/features/feature-panel/file-upload/radio-group/index.tsx
new file mode 100644
index 0000000000..77e4d02184
--- /dev/null
+++ b/web/app/components/base/features/feature-panel/file-upload/radio-group/index.tsx
@@ -0,0 +1,40 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from 'classnames'
+import s from './style.module.css'
+
+type OPTION = {
+  label: string
+  value: any
+}
+
+type Props = {
+  className?: string
+  options: OPTION[]
+  value: any
+  onChange: (value: any) => void
+}
+
+const RadioGroup: FC<Props> = ({
+  className = '',
+  options,
+  value,
+  onChange,
+}) => {
+  return (
+    <div className={cn(className, 'flex')}>
+      {options.map(item => (
+        <div
+          key={item.value}
+          className={cn(s.item, item.value === value && s.checked)}
+          onClick={() => onChange(item.value)}
+        >
+          <div className={s.radio}></div>
+          <div className='text-[13px] font-medium text-gray-900'>{item.label}</div>
+        </div>
+      ))}
+    </div>
+  )
+}
+export default React.memo(RadioGroup)
diff --git a/web/app/components/base/features/feature-panel/file-upload/radio-group/style.module.css b/web/app/components/base/features/feature-panel/file-upload/radio-group/style.module.css
new file mode 100644
index 0000000000..22c29c6a42
--- /dev/null
+++ b/web/app/components/base/features/feature-panel/file-upload/radio-group/style.module.css
@@ -0,0 +1,24 @@
+.item {
+  @apply grow flex items-center h-8 px-2.5 rounded-lg bg-gray-25 border border-gray-100 cursor-pointer space-x-2;
+}
+
+.item:hover {
+  background-color: #ffffff;
+  border-color: #B2CCFF;
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+}
+
+.item.checked {
+  background-color: #ffffff;
+  border-color: #528BFF;
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
+}
+
+.radio {
+  @apply w-4 h-4 border-[2px] border-gray-200 rounded-full;
+}
+
+.item.checked .radio {
+  border-width: 5px;
+  border-color: #155eef;
+}
\ No newline at end of file
diff --git a/web/app/components/base/features/feature-panel/index.tsx b/web/app/components/base/features/feature-panel/index.tsx
index 6d21f76a56..cefeaac29c 100644
--- a/web/app/components/base/features/feature-panel/index.tsx
+++ b/web/app/components/base/features/feature-panel/index.tsx
@@ -5,6 +5,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import type { OnFeaturesChange } from '../types'
 import { useFeatures } from '../hooks'
+import FileUpload from './file-upload'
 import OpeningStatement from './opening-statement'
 import type { OpeningStatementProps } from './opening-statement'
 import SuggestedQuestionsAfterAnswer from './suggested-questions-after-answer'
@@ -34,6 +35,7 @@ const FeaturePanel = ({
 
   return (
     <div className='space-y-3'>
+      <FileUpload onChange={onChange} />
       {
         showAdvanceFeature && (
           <div>
diff --git a/web/app/components/base/features/store.ts b/web/app/components/base/features/store.ts
index 2e8517b6c0..bdb2f70db6 100644
--- a/web/app/components/base/features/store.ts
+++ b/web/app/components/base/features/store.ts
@@ -39,6 +39,13 @@ export const createFeaturesStore = (initProps?: Partial<FeaturesState>) => {
       moderation: {
         enabled: false,
       },
+      file: {
+        image: {
+          enabled: false,
+          number_limits: 3,
+          transfer_methods: ['local_file', 'remote_url'],
+        },
+      },
     },
   }
   return createStore<FeatureStoreState>()(set => ({
diff --git a/web/app/components/base/features/types.ts b/web/app/components/base/features/types.ts
index 60f273fbb2..1912eb6609 100644
--- a/web/app/components/base/features/types.ts
+++ b/web/app/components/base/features/types.ts
@@ -23,6 +23,13 @@ export type SensitiveWordAvoidance = EnabledOrDisabled & {
   config?: any
 }
 
+export type FileUpload = {
+  image: EnabledOrDisabled & {
+    number_limits: number
+    transfer_methods: string[]
+  }
+}
+
 export enum FeatureEnum {
   opening = 'opening',
   suggested = 'suggested',
@@ -30,6 +37,7 @@ export enum FeatureEnum {
   speech2text = 'speech2text',
   citation = 'citation',
   moderation = 'moderation',
+  file = 'file',
 }
 
 export type Features = {
@@ -39,6 +47,7 @@ export type Features = {
   [FeatureEnum.speech2text]: SpeechToText
   [FeatureEnum.citation]: RetrieverResource
   [FeatureEnum.moderation]: SensitiveWordAvoidance
+  [FeatureEnum.file]: FileUpload
 }
 
 export type OnFeaturesChange = (features: Features) => void
diff --git a/web/app/components/workflow/features.tsx b/web/app/components/workflow/features.tsx
index 3da33f8c14..1cd9b5a48b 100644
--- a/web/app/components/workflow/features.tsx
+++ b/web/app/components/workflow/features.tsx
@@ -4,7 +4,10 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore } from './store'
-import { useNodesSyncDraft } from './hooks'
+import {
+  useIsChatMode,
+  useNodesSyncDraft,
+} from './hooks'
 import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 import {
   FeaturesChoose,
@@ -13,6 +16,7 @@ import {
 
 const Features = () => {
   const { t } = useTranslation()
+  const isChatMode = useIsChatMode()
   const setShowFeaturesPanel = useStore(state => state.setShowFeaturesPanel)
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
 
@@ -24,16 +28,20 @@ const Features = () => {
     <div className='fixed top-16 left-2 bottom-2 w-[600px] rounded-2xl border-[0.5px] border-gray-200 bg-white shadow-xl z-10'>
       <div className='flex items-center justify-between px-4 pt-3'>
         {t('workflow.common.features')}
-        <div className='flex items-center'>
-          <FeaturesChoose onChange={handleFeaturesChange} />
-          <div className='mx-3 w-[1px] h-[14px] bg-gray-200'></div>
-          <div
-            className='flex items-center justify-center w-6 h-6 cursor-pointer'
-            onClick={() => setShowFeaturesPanel(false)}
-          >
-            <XClose className='w-4 h-4 text-gray-500' />
-          </div>
-        </div>
+        {
+          isChatMode && (
+            <div className='flex items-center'>
+              <FeaturesChoose onChange={handleFeaturesChange} />
+              <div className='mx-3 w-[1px] h-[14px] bg-gray-200'></div>
+              <div
+                className='flex items-center justify-center w-6 h-6 cursor-pointer'
+                onClick={() => setShowFeaturesPanel(false)}
+              >
+                <XClose className='w-4 h-4 text-gray-500' />
+              </div>
+            </div>
+          )
+        }
       </div>
       <div className='p-4'>
         <FeaturesPanel
diff --git a/web/app/components/workflow/header/index.tsx b/web/app/components/workflow/header/index.tsx
index 84abc4a6ad..d2a2e8bea3 100644
--- a/web/app/components/workflow/header/index.tsx
+++ b/web/app/components/workflow/header/index.tsx
@@ -8,10 +8,7 @@ import {
   useStore,
   useWorkflowStore,
 } from '../store'
-import {
-  useIsChatMode,
-  useWorkflowRun,
-} from '../hooks'
+import { useWorkflowRun } from '../hooks'
 import RunAndHistory from './run-and-history'
 import EditingTitle from './editing-title'
 import RunningTitle from './running-title'
@@ -26,7 +23,6 @@ const Header: FC = () => {
   const workflowStore = useWorkflowStore()
   const appDetail = useAppStore(s => s.appDetail)
   const appSidebarExpand = useAppStore(s => s.appSidebarExpand)
-  const isChatMode = useIsChatMode()
   const runningStatus = useStore(s => s.runningStatus)
   const { handleRunSetting } = useWorkflowRun()
 
@@ -78,21 +74,17 @@ const Header: FC = () => {
         }
         <RunAndHistory />
         <div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>
-        {
-          isChatMode && (
-            <Button
-              className={`
-                mr-2 px-3 py-0 h-8 bg-white text-[13px] font-medium text-gray-700
-                border-[0.5px] border-gray-200 shadow-xs
-                ${runningStatus && '!cursor-not-allowed opacity-50'}
-              `}
-              onClick={handleShowFeatures}
-            >
-              <Grid01 className='mr-1 w-4 h-4 text-gray-500' />
-              {t('workflow.common.features')}
-            </Button>
-          )
-        }
+        <Button
+          className={`
+            mr-2 px-3 py-0 h-8 bg-white text-[13px] font-medium text-gray-700
+            border-[0.5px] border-gray-200 shadow-xs
+            ${runningStatus && '!cursor-not-allowed opacity-50'}
+          `}
+          onClick={handleShowFeatures}
+        >
+          <Grid01 className='mr-1 w-4 h-4 text-gray-500' />
+          {t('workflow.common.features')}
+        </Button>
         <Publish />
       </div>
     </div>
diff --git a/web/app/components/workflow/hooks/use-nodes-sync-draft.ts b/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
index 717942a029..dd7319532f 100644
--- a/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
+++ b/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
@@ -58,6 +58,7 @@ export const useNodesSyncDraft = () => {
             speech_to_text: features.speech2text,
             retriever_resource: features.citation,
             sensitive_word_avoidance: features.moderation,
+            file_upload: features.file,
           },
         },
       }).then((res) => {
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 56d4b272e8..280a410d4f 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -183,6 +183,13 @@ const WorkflowWrap = memo(() => {
 
   const features = data.features || {}
   const initialFeatures: FeaturesData = {
+    file: {
+      image: {
+        enabled: !!features.file_upload.image.enabled,
+        number_limits: features.file_upload.image.number_limits || 3,
+        transfer_methods: features.file_upload.image.transfer_methods || ['local_file', 'remote_url'],
+      },
+    },
     opening: {
       enabled: !!features.opening_statement,
       opening_statement: features.opening_statement,
diff --git a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
index 12113995d9..de87839001 100644
--- a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
@@ -35,6 +35,7 @@ const ChatWrapper = forwardRef<ChatWrapperRefType>((_, ref) => {
       speech_to_text: features.speech2text,
       retriever_resource: features.citation,
       sensitive_word_avoidance: features.moderation,
+      file_upload: features.file,
     }
   }, [features])