AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-20 00:19:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

file uploader

Browse Source
This commit is contained in:
StyleZhang 2024-07-29 17:22:11 +08:00
parent 0451c5590c
commit 52d69dd55b
11 changed files with 162 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
web/app/components/base/chat/chat/chat-input-area/hooks.ts
View File

@ -1,36 +1,47 @@
import {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react'
import type { TextAreaRef } from 'rc-textarea'
export const useTextAreaHeight = () => {
const wrapperRef = useRef<HTMLDivElement>(null)
const textareaRef = useRef<TextAreaRef>(null)
const [height, setHeight] = useState(0)
const textValueRef = useRef<HTMLDivElement>(null)
const holdSpaceRef = useRef<HTMLDivElement>(null)
const [isMultipleLine, setIsMultipleLine] = useState(false)
const handleComputeHeight = () => {
const handleComputeHeight = useCallback(() => {
const textareaElement = textareaRef.current?.resizableTextArea.textArea
if (textareaElement) {
const { height } = textareaElement.getBoundingClientRect()
if (wrapperRef.current && textareaElement && textValueRef.current && holdSpaceRef.current) {
const { width: wrapperWidth } = wrapperRef.current.getBoundingClientRect()
const { height: textareaHeight } = textareaElement.getBoundingClientRect()
const { width: textValueWidth } = textValueRef.current.getBoundingClientRect()
const { width: holdSpaceWidth } = holdSpaceRef.current.getBoundingClientRect()
setHeight(height)
if (textareaHeight > 32) {
setIsMultipleLine(true)
}
else {
if (textValueWidth + holdSpaceWidth >= wrapperWidth)
setIsMultipleLine(true)
else
setIsMultipleLine(false)
}
}
}
useEffect(() => {
handleComputeHeight()
}, [])
const handleTextareaResize = useCallback(() => {
handleComputeHeight()
}, [])
}, [handleComputeHeight])
return {
wrapperRef,
textareaRef,
textValueRef,
holdSpaceRef,
handleTextareaResize,
isMultipleLine: useMemo(() => height > 32, [height]),
isMultipleLine,
}
}

67
web/app/components/base/chat/chat/chat-input-area/index.tsx
View File

@ -1,49 +1,66 @@
import {
memo,
useState,
} from 'react'
import Textarea from 'rc-textarea'
import { RiSendPlane2Fill } from '@remixicon/react'
import { useTextAreaHeight } from './hooks'
import Button from '@/app/components/base/button'
import { FileUploaderInChatInput } from '@/app/components/base/file-uploader'
import Operation from './operation'
import cn from '@/utils/classnames'
import { FileListFlexOperation } from '@/app/components/base/file-uploader'
const ChatInputArea = () => {
const {
wrapperRef,
textareaRef,
textValueRef,
holdSpaceRef,
handleTextareaResize,
isMultipleLine,
} = useTextAreaHeight()
const [value, setValue] = useState('')
const operation = <Operation ref={holdSpaceRef} />
return (
<div
className={cn(
'p-[9px] bg-components-panel-bg-blur border border-components-chat-input-border rounded-xl shadow-md',
'max-h-[210px] overflow-y-auto',
!isMultipleLine && 'flex items-center',
'p-[9px] bg-components-panel-bg-blur border border-blue-300 rounded-xl shadow-md',
)}
>
<Textarea
ref={textareaRef}
className='grow w-full p-1 leading-6 body-lg-regular text-text-tertiary'
placeholder='Enter message...'
autoSize
onResize={handleTextareaResize}
/>
<div className={cn(
'shrink-0 flex items-center justify-end ml-1',
isMultipleLine && 'sticky bottom-0',
)}>
<div className='flex items-center'>
<FileUploaderInChatInput />
</div>
<Button
className='ml-3 px-0 w-8'
variant='primary'
<div className='max-h-[158px] overflow-y-auto'>
<FileListFlexOperation />
<div
ref={wrapperRef}
className='flex items-center justify-between'
>
<RiSendPlane2Fill className='w-4 h-4' />
</Button>
<div className='flex items-center relative grow w-full'>
<div
ref={textValueRef}
className='absolute w-auto h-auto p-1 leading-6 body-lg-regular pointer-events-none whitespace-pre invisible'
>
{value}
</div>
<Textarea
ref={textareaRef}
className='p-1 w-full leading-6 body-lg-regular text-text-tertiary outline-none'
placeholder='Enter message...'
autoSize={{ minRows: 1 }}
onResize={handleTextareaResize}
value={value}
onChange={(e) => {
setValue(e.target.value)
handleTextareaResize()
}}
/>
</div>
{
!isMultipleLine && operation
}
</div>
</div>
{
isMultipleLine && operation
}
</div>
)
}

33
web/app/components/base/chat/chat/chat-input-area/operation.tsx Normal file
View File

@ -0,0 +1,33 @@
import { forwardRef } from 'react'
import { RiSendPlane2Fill } from '@remixicon/react'
import Button from '@/app/components/base/button'
import { FileUploaderInChatInput } from '@/app/components/base/file-uploader'
import cn from '@/utils/classnames'
const Operation = forwardRef<HTMLDivElement>((_, ref) => {
return (
<div
className={cn(
'shrink-0 flex items-center justify-end',
)}
>
<div
className='flex items-center pl-1'
ref={ref}
>
<div className='flex items-center'>
<FileUploaderInChatInput />
</div>
<Button
className='ml-3 px-0 w-8'
variant='primary'
>
<RiSendPlane2Fill className='w-4 h-4' />
</Button>
</div>
</div>
)
})
Operation.displayName = 'Operation'
export default Operation

27
web/app/components/base/file-uploader/file-list-flex/file-list-flex-operation.tsx Normal file
View File

@ -0,0 +1,27 @@
import {
forwardRef,
memo,
} from 'react'
import FileListItem from './file-list-item'
const FileListFlexOperation = forwardRef<HTMLDivElement>((_, ref) => {
return (
<div
ref={ref}
className='flex flex-wrap gap-2'
>
<FileListItem />
<FileListItem />
<FileListItem isFile />
<FileListItem isFile />
<FileListItem isFile />
<FileListItem />
<FileListItem />
<FileListItem />
<FileListItem />
</div>
)
})
FileListFlexOperation.displayName = 'FileListFlexOperation'
export default memo(FileListFlexOperation)

31
web/app/components/base/file-uploader/file-list-flex/file-list-item.tsx Normal file
View File

@ -0,0 +1,31 @@
import { memo } from 'react'
import cn from '@/utils/classnames'
type FileListItemProps = {
isFile?: boolean
className?: string
}
const FileListItem = ({
isFile,
className,
}: FileListItemProps) => {
if (isFile) {
return (
<div className={cn(
'w-[144px] h-[68px] rounded-lg border-[0.5px] border-components-panel-border bg-components-card-bg-alt shadow-xs',
className,
)}>
</div>
)
}
return (
<div className={cn(
'w-[68px] h-[68px] border-[2px] border-components-panel-border shadow-xs',
className,
)}></div>
)
}
export default memo(FileListItem)

9
web/app/components/base/file-uploader/file-list/file-list-flex/index.tsx
View File

@ -1,9 +0,0 @@
import { memo } from 'react'
const FileListFlex = () => {
return (
<div className='flex'></div>
)
}
export default memo(FileListFlex)

9
web/app/components/base/file-uploader/file-list/file-list-full-width/index.tsx
View File

@ -1,9 +0,0 @@
import { memo } from 'react'
const FileListFullWidth = () => {
return (
<div></div>
)
}
export default memo(FileListFullWidth)

0
web/app/components/base/file-uploader/file-list/hooks.ts
View File

0
web/app/components/base/file-uploader/file-list/index.tsx
View File

1
web/app/components/base/file-uploader/index.ts
View File

@ -1,3 +1,4 @@
export { default as FileUploaderInAttachment } from './file-uploader-in-attachment'
export { default as FileUploaderInChatInput } from './file-uploader-in-chat-input'
export { default as FileTypeIcon } from './file-type-icon'
export { default as FileListFlexOperation } from './file-list-flex/file-list-flex-operation'

4
web/app/components/share/text-generation/run-once/index.tsx
View File

@ -11,6 +11,8 @@ import Button from '@/app/components/base/button'
import { DEFAULT_VALUE_MAX_LEN } from '@/config'
import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
import type { VisionFile, VisionSettings } from '@/types/app'
import ChatInputArea from '@/app/components/base/chat/chat/chat-input-area'
import { FileUploaderInAttachment } from '@/app/components/base/file-uploader'
export type IRunOnceProps = {
siteInfo: SiteInfo
@ -112,6 +114,8 @@ const RunOnce: FC<IRunOnceProps> = ({
</div>
)
}
<ChatInputArea />
<FileUploaderInAttachment />
{promptConfig.prompt_variables.length > 0 && (
<div className='mt-4 h-[1px] bg-gray-100'></div>
)}