From 3209fdca534f98ff95834275a07647ca43ad1bb2 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 24 Sep 2024 17:08:23 +0800
Subject: [PATCH] legacy for sys.files

---
 .../file-upload/setting-content.tsx           |   5 +-
 .../file-upload/setting-modal.tsx             |   3 +
 .../new-feature-panel/image-upload/index.tsx  | 114 ++++++++++++++++++
 .../base/features/new-feature-panel/index.tsx |   6 +-
 .../_base/components/file-upload-setting.tsx  |   8 +-
 .../nodes/start/components/var-item.tsx       |   9 ++
 .../components/workflow/nodes/start/panel.tsx |   1 +
 web/i18n/en-US/app-debug.ts                   |   7 ++
 web/i18n/zh-Hans/app-debug.ts                 |   7 ++
 9 files changed, 154 insertions(+), 6 deletions(-)
 create mode 100644 web/app/components/base/features/new-feature-panel/image-upload/index.tsx

diff --git a/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
index 59d363f880..7493f795d3 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
@@ -11,10 +11,12 @@ import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 
 type SettingContentProps = {
+  imageUpload?: boolean
   onClose: () => void
   onChange?: OnFeaturesChange
 }
 const SettingContent = ({
+  imageUpload,
   onClose,
   onChange,
 }: SettingContentProps) => {
@@ -55,12 +57,13 @@ const SettingContent = ({
   return (
     <>
       <div className='mb-4 flex items-center justify-between'>
-        <div className='text-text-primary system-xl-semibold'>{t('appDebug.feature.fileUpload.modalTitle')}</div>
+        <div className='text-text-primary system-xl-semibold'>{!imageUpload ? t('appDebug.feature.fileUpload.modalTitle') : t('appDebug.feature.imageUpload.modalTitle')}</div>
         <div className='p-1 cursor-pointer' onClick={onClose}><RiCloseLine className='w-4 h-4 text-text-tertiary'/></div>
       </div>
       <FileUploadSetting
         isMultiple
         inFeaturePanel
+        hideSupportFileType={imageUpload}
         payload={tempPayload}
         onChange={(p: UploadFileSetting) => setTempPayload(p)}
       />
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx b/web/app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx
index f632cd0ae7..e3023099a5 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx
@@ -14,6 +14,7 @@ type FileUploadSettingsProps = {
   onChange?: OnFeaturesChange
   disabled?: boolean
   children?: React.ReactNode
+  imageUpload?: boolean
 }
 const FileUploadSettings = ({
   open,
@@ -21,6 +22,7 @@ const FileUploadSettings = ({
   onChange,
   disabled,
   children,
+  imageUpload,
 }: FileUploadSettingsProps) => {
   return (
     <PortalToFollowElem
@@ -37,6 +39,7 @@ const FileUploadSettings = ({
       <PortalToFollowElemContent style={{ zIndex: 50 }}>
         <div className='w-[360px] p-4 bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-2xl'>
           <SettingContent
+            imageUpload={imageUpload}
             onClose={() => onOpen(false)}
             onChange={(v) => {
               onChange?.(v)
diff --git a/web/app/components/base/features/new-feature-panel/image-upload/index.tsx b/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
new file mode 100644
index 0000000000..f728520e9b
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
@@ -0,0 +1,114 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import produce from 'immer'
+import { RiEqualizer2Line, RiImage2Fill } from '@remixicon/react'
+import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
+import SettingModal from '@/app/components/base/features/new-feature-panel/file-upload/setting-modal'
+import Badge from '@/app/components/base/badge'
+import Button from '@/app/components/base/button'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { FeatureEnum } from '@/app/components/base/features/types'
+
+type Props = {
+  disabled: boolean
+  onChange?: OnFeaturesChange
+}
+
+const FileUpload = ({
+  disabled,
+  onChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const file = useFeatures(s => s.features.file)
+  const featuresStore = useFeaturesStore()
+  const [modalOpen, setModalOpen] = useState(false)
+  const [isHovering, setIsHovering] = useState(false)
+
+  const supportedTypes = useMemo(() => {
+    return file?.allowed_file_types?.join(',') || '-'
+  }, [file?.allowed_file_types])
+
+  const handleChange = useCallback((type: FeatureEnum, enabled: boolean) => {
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
+
+    const newFeatures = produce(features, (draft) => {
+      draft[type] = {
+        ...draft[type],
+        enabled,
+        image: { enabled },
+      }
+    })
+    setFeatures(newFeatures)
+    if (onChange)
+      onChange()
+  }, [featuresStore, onChange])
+
+  return (
+    <FeatureCard
+      icon={
+        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
+          <RiImage2Fill className='w-4 h-4 text-text-primary-on-surface' />
+        </div>
+      }
+      title={
+        <div className='flex items-center'>
+          {t('appDebug.feature.imageUpload.title')}
+          <Badge
+            text='LEGACY'
+            className='shrink-0 mx-1 border-text-accent-secondary text-text-accent-secondary'
+          />
+        </div>
+      }
+      value={file?.enabled}
+      onChange={state => handleChange(FeatureEnum.file, state)}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+      disabled={disabled}
+    >
+      <>
+        {!file?.enabled && (
+          <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.imageUpload.description')}</div>
+        )}
+        {file?.enabled && (
+          <>
+            {!isHovering && !modalOpen && (
+              <div className='pt-0.5 flex items-center gap-4'>
+                <div className=''>
+                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.imageUpload.supportedTypes')}</div>
+                  <div className='text-text-secondary system-xs-regular'>{supportedTypes}</div>
+                </div>
+                <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
+                <div className=''>
+                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.imageUpload.numberLimit')}</div>
+                  <div className='text-text-secondary system-xs-regular'>{file?.number_limits}</div>
+                </div>
+              </div>
+            )}
+            {(isHovering || modalOpen) && (
+              <SettingModal
+                imageUpload
+                open={modalOpen && !disabled}
+                onOpen={(v) => {
+                  setModalOpen(v)
+                  setIsHovering(v)
+                }}
+                onChange={onChange}
+              >
+                <Button className='w-full' disabled={disabled}>
+                  <RiEqualizer2Line className='mr-1 w-4 h-4' />
+                  {t('common.operation.settings')}
+                </Button>
+              </SettingModal>
+            )}
+          </>
+        )}
+      </>
+    </FeatureCard>
+  )
+}
+
+export default FileUpload
diff --git a/web/app/components/base/features/new-feature-panel/index.tsx b/web/app/components/base/features/new-feature-panel/index.tsx
index 22a1f5a69f..519742442f 100644
--- a/web/app/components/base/features/new-feature-panel/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/index.tsx
@@ -8,12 +8,13 @@ import type { OnFeaturesChange } from '@/app/components/base/features/types'
 
 import MoreLikeThis from '@/app/components/base/features/new-feature-panel/more-like-this'
 import ConversationOpener from '@/app/components/base/features/new-feature-panel/conversation-opener'
-import Moderation from '@/app/components/base/features/new-feature-panel/moderation'
+import FollowUp from '@/app/components/base/features/new-feature-panel/follow-up'
 import SpeechToText from '@/app/components/base/features/new-feature-panel/speech-to-text'
 import TextToSpeech from '@/app/components/base/features/new-feature-panel/text-to-speech'
 import FileUpload from '@/app/components/base/features/new-feature-panel/file-upload'
-import FollowUp from '@/app/components/base/features/new-feature-panel/follow-up'
 import Citation from '@/app/components/base/features/new-feature-panel/citation'
+import ImageUpload from '@/app/components/base/features/new-feature-panel/image-upload'
+import Moderation from '@/app/components/base/features/new-feature-panel/moderation'
 import AnnotationReply from '@/app/components/base/features/new-feature-panel/annotation-reply'
 import type { PromptVariable } from '@/models/debug'
 
@@ -82,6 +83,7 @@ const NewFeaturePanel = ({
             <SpeechToText disabled={disabled} onChange={onChange} />
           )}
           {showFileUpload && isChatMode && <FileUpload disabled={disabled} onChange={onChange} />}
+          {showFileUpload && !isChatMode && <ImageUpload disabled={disabled} onChange={onChange} />}
           {isChatMode && (
             <Citation disabled={disabled} onChange={onChange} />
           )}
diff --git a/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx b/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
index df7a8f21d8..e0d545c83f 100644
--- a/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
+++ b/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
@@ -17,6 +17,7 @@ type Props = {
   payload: UploadFileSetting
   isMultiple: boolean
   inFeaturePanel?: boolean
+  hideSupportFileType?: boolean
   onChange: (payload: UploadFileSetting) => void
 }
 
@@ -24,6 +25,7 @@ const FileUploadSetting: FC<Props> = ({
   payload,
   isMultiple,
   inFeaturePanel = false,
+  hideSupportFileType = false,
   onChange,
 }) => {
   const { t } = useTranslation()
@@ -93,7 +95,7 @@ const FileUploadSetting: FC<Props> = ({
         >
           <div className='space-y-1'>
             {
-              [SupportUploadFileTypes.image, SupportUploadFileTypes.document, SupportUploadFileTypes.audio, SupportUploadFileTypes.video].map((type: SupportUploadFileTypes) => (
+              [SupportUploadFileTypes.document, SupportUploadFileTypes.image, SupportUploadFileTypes.audio, SupportUploadFileTypes.video].map((type: SupportUploadFileTypes) => (
                 <FileTypeItem
                   key={type}
                   type={type as SupportUploadFileTypes.image | SupportUploadFileTypes.document | SupportUploadFileTypes.audio | SupportUploadFileTypes.video}
@@ -150,14 +152,14 @@ const FileUploadSetting: FC<Props> = ({
           </div>
         </Field>
       )}
-      {inFeaturePanel && (
+      {inFeaturePanel && !hideSupportFileType && (
         <Field
           title={t('appDebug.variableConfig.file.supportFileTypes')}
           className='mt-4'
         >
           <div className='space-y-1'>
             {
-              [SupportUploadFileTypes.image, SupportUploadFileTypes.document, SupportUploadFileTypes.audio, SupportUploadFileTypes.video].map((type: SupportUploadFileTypes) => (
+              [SupportUploadFileTypes.document, SupportUploadFileTypes.image, SupportUploadFileTypes.audio, SupportUploadFileTypes.video].map((type: SupportUploadFileTypes) => (
                 <FileTypeItem
                   key={type}
                   type={type as SupportUploadFileTypes.image | SupportUploadFileTypes.document | SupportUploadFileTypes.audio | SupportUploadFileTypes.video}
diff --git a/web/app/components/workflow/nodes/start/components/var-item.tsx b/web/app/components/workflow/nodes/start/components/var-item.tsx
index e2b5ad28c1..8a94161999 100644
--- a/web/app/components/workflow/nodes/start/components/var-item.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-item.tsx
@@ -10,6 +10,7 @@ import InputVarTypeIcon from '../../_base/components/input-var-type-icon'
 import type { InputVar, MoreInfo } from '@/app/components/workflow/types'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
+import Badge from '@/app/components/base/badge'
 import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
 
 type Props = {
@@ -19,6 +20,7 @@ type Props = {
   onRemove?: () => void
   rightContent?: JSX.Element
   varKeys?: string[]
+  showLegacyBadge?: boolean
 }
 
 const VarItem: FC<Props> = ({
@@ -28,6 +30,7 @@ const VarItem: FC<Props> = ({
   onRemove = () => { },
   rightContent,
   varKeys = [],
+  showLegacyBadge = false,
 }) => {
   const { t } = useTranslation()
 
@@ -50,6 +53,12 @@ const VarItem: FC<Props> = ({
         {payload.label && (<><div className='shrink-0 text-xs font-medium text-gray-400'>·</div>
           <div title={payload.label as string} className='max-w-[130px] truncate text-[13px] font-medium text-gray-500'>{payload.label as string}</div>
         </>)}
+        {showLegacyBadge && (
+          <Badge
+            text='LEGACY'
+            className='shrink-0 border-text-accent-secondary text-text-accent-secondary'
+          />
+        )}
       </div>
       <div className='shrink-0 ml-2 flex items-center'>
         {rightContent || (<>
diff --git a/web/app/components/workflow/nodes/start/panel.tsx b/web/app/components/workflow/nodes/start/panel.tsx
index 94c348b371..275cb352a2 100644
--- a/web/app/components/workflow/nodes/start/panel.tsx
+++ b/web/app/components/workflow/nodes/start/panel.tsx
@@ -73,6 +73,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
 
               <VarItem
                 readonly
+                showLegacyBadge={!isChatMode}
                 payload={{
                   variable: 'sys.files',
                 } as any}
diff --git a/web/i18n/en-US/app-debug.ts b/web/i18n/en-US/app-debug.ts
index c51f6afa9e..dfe55f9b04 100644
--- a/web/i18n/en-US/app-debug.ts
+++ b/web/i18n/en-US/app-debug.ts
@@ -206,6 +206,13 @@ const translation = {
       numberLimit: 'Max uploads',
       modalTitle: 'File Upload Setting',
     },
+    imageUpload: {
+      title: 'Image Upload',
+      description: 'Allow uploading images.',
+      supportedTypes: 'Support File Types',
+      numberLimit: 'Max uploads',
+      modalTitle: 'Image Upload Setting',
+    },
     bar: {
       empty: 'Enable feature to enhance web app user experience',
       enableText: 'Features Enabled',
diff --git a/web/i18n/zh-Hans/app-debug.ts b/web/i18n/zh-Hans/app-debug.ts
index cce70ef9f8..0110666b5f 100644
--- a/web/i18n/zh-Hans/app-debug.ts
+++ b/web/i18n/zh-Hans/app-debug.ts
@@ -206,6 +206,13 @@ const translation = {
       numberLimit: '最大上传数',
       modalTitle: '文件上传设置',
     },
+    imageUpload: {
+      title: '图片上传',
+      description: '支持上传图片',
+      supportedTypes: '支持的文件类型',
+      numberLimit: '最大上传数',
+      modalTitle: '图片上传设置',
+    },
     bar: {
       empty: '开启功能增强 webapp 用户体验',
       enableText: '功能已开启',