dify

2025-12-01 17:21:38 +08:00
parent 32fee2b8ab
commit fab8c13cb3
7511 changed files with 996300 additions and 0 deletions
--- a/dify/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
+++ b/dify/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
@@ -0,0 +1,129 @@
+import {
+  memo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiUploadCloud2Line } from '@remixicon/react'
+import FileInput from '../file-input'
+import { useFile } from '../hooks'
+import { useStore } from '../store'
+import { FILE_URL_REGEX } from '../constants'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Button from '@/app/components/base/button'
+import type { FileUpload } from '@/app/components/base/features/types'
+import cn from '@/utils/classnames'
+
+type FileFromLinkOrLocalProps = {
+  showFromLink?: boolean
+  showFromLocal?: boolean
+  trigger: (open: boolean) => React.ReactNode
+  fileConfig: FileUpload
+}
+const FileFromLinkOrLocal = ({
+  showFromLink = true,
+  showFromLocal = true,
+  trigger,
+  fileConfig,
+}: FileFromLinkOrLocalProps) => {
+  const { t } = useTranslation()
+  const files = useStore(s => s.files)
+  const [open, setOpen] = useState(false)
+  const [url, setUrl] = useState('')
+  const [showError, setShowError] = useState(false)
+  const { handleLoadFileFromLink } = useFile(fileConfig)
+  const disabled = !!fileConfig.number_limits && files.length >= fileConfig.number_limits
+
+  const handleSaveUrl = () => {
+    if (!url)
+      return
+
+    if (!FILE_URL_REGEX.test(url)) {
+      setShowError(true)
+      return
+    }
+    handleLoadFileFromLink(url)
+    setUrl('')
+  }
+
+  return (
+    <PortalToFollowElem
+      placement='top'
+      offset={4}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)} asChild>
+        {trigger(open)}
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[1001]'>
+        <div className='w-[280px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg'>
+          {
+            showFromLink && (
+              <>
+                <div className={cn(
+                  'flex h-8 items-center rounded-lg border border-components-input-border-active bg-components-input-bg-active p-1 shadow-xs',
+                  showError && 'border-components-input-border-destructive',
+                )}>
+                  <input
+                    className='system-sm-regular mr-0.5 block grow appearance-none bg-transparent px-1 outline-none'
+                    placeholder={t('common.fileUploader.pasteFileLinkInputPlaceholder') || ''}
+                    value={url}
+                    onChange={(e) => {
+                      setShowError(false)
+                      setUrl(e.target.value.trim())
+                    }}
+                    disabled={disabled}
+                  />
+                  <Button
+                    className='shrink-0'
+                    size='small'
+                    variant='primary'
+                    disabled={!url || disabled}
+                    onClick={handleSaveUrl}
+                  >
+                    {t('common.operation.ok')}
+                  </Button>
+                </div>
+                {
+                  showError && (
+                    <div className='body-xs-regular mt-0.5 text-text-destructive'>
+                      {t('common.fileUploader.pasteFileLinkInvalid')}
+                    </div>
+                  )
+                }
+              </>
+            )
+          }
+          {
+            showFromLink && showFromLocal && (
+              <div className='system-2xs-medium-uppercase flex h-7 items-center p-2 text-text-quaternary'>
+                <div className='mr-2 h-px w-[93px] bg-gradient-to-l from-[rgba(16,24,40,0.08)]' />
+                OR
+                <div className='ml-2 h-px w-[93px] bg-gradient-to-r from-[rgba(16,24,40,0.08)]' />
+              </div>
+            )
+          }
+          {
+            showFromLocal && (
+              <Button
+                className='relative w-full'
+                variant='secondary-accent'
+                disabled={disabled}
+              >
+                <RiUploadCloud2Line className='mr-1 h-4 w-4' />
+                {t('common.fileUploader.uploadFromComputer')}
+                <FileInput fileConfig={fileConfig} />
+              </Button>
+            )
+          }
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default memo(FileFromLinkOrLocal)