legacy for sys.files

2025-08-17 23:35:52 +08:00 · 2024-09-24 17:08:23 +08:00 · 2024-09-24 17:08:23 +08:00 · 3209fdca53
commit 3209fdca53
parent dc5010d833
9 changed files with 154 additions and 6 deletions
--- 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)}
      />
--- 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)
--- 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
@ -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
--- 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} />
          )}
--- 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}
--- 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 || (<>
--- 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}
--- 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',
--- 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: '功能已开启',