adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): remote file add api

Browse Source
This commit is contained in:
zhaoying
2026-03-23 17:48:50 +08:00
parent 24c13d408e
commit 9308c6efae
6 changed files with 132 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
web/src/components/Chat/ChatInput.tsx
View File

@@ -2,10 +2,10 @@
* @Author: ZhaoYing
* @Date: 2025-12-10 16:46:14
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-20 15:39:33
* @Last Modified time: 2026-03-23 17:46:25
*/
import { type FC, useEffect, useMemo, useState } from 'react'
import { Flex, Input, Form } from 'antd'
import { Flex, Input, Form, Spin } from 'antd'
import clsx from 'clsx'
import type { ChatInputProps } from './types'
@@ -37,7 +37,7 @@ const ChatInput: FC<ChatInputProps> = ({
})
}
}, [form, message])
// Clear input when loading
useEffect(() => {
if (loading) {
@@ -52,7 +52,7 @@ const ChatInput: FC<ChatInputProps> = ({
fileChange?.(fileList?.filter(item => {
return item.thumbUrl && file.thumbUrl ? item.thumbUrl !== file.thumbUrl
: item.url && file.url ? item.url !== file.url
: item.uid !== file.uid
: item.uid !== file.uid
}) || [])
}
// Convert file object to preview URL
@@ -81,84 +81,98 @@ const ChatInput: FC<ChatInputProps> = ({
' rb:border-[#171719]!': isFocus
})}>
{previewFileList.length > 0 && <div className="rb:overflow-x-auto rb:max-w-full">
<Flex gap={14} className="rb:mx-3! rb:mt-3! rb:w-max! rb:mb-2!">
{previewFileList.map((file) => {
if (file.type.includes('image')) {
return (
<div key={file.url || file.uid} className="rb:inline-block rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:border rb:border-[#F6F6F6]">
<Flex gap={14} className="rb:mx-3! rb:mt-3! rb:w-max!">
{previewFileList.map((file) => {
if (file.type?.includes('image')) {
return (
<Spin key={`${file.url || file.uid}_${file.status}`} spinning={file.status === 'uploading'}>
<div className={clsx("rb:inline-block rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:border rb:border-[#F6F6F6]", {
'rb:border-[#FF5D34]': file.status === 'error'
})}>
<img src={file.url} alt={file.name} className="rb:size-12! rb:rounded-lg rb:object-cover" />
<div
className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')]"
className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')] rb:hover:bg-[url('@/assets/images/conversation/delete_hover.svg')]"
onClick={() => handleDelete(file)}
></div>
</div>
)
}
if (file.type.includes('video')) {
return (
<div key={file.url || file.uid} className="rb:w-45 rb:h-12 rb:inline-block rb:group rb:relative rb:rounded-lg rb:border rb:border-[#F6F6F6]">
</Spin>
)
}
if (file.type?.includes('video')) {
return (
<Spin key={`${file.url || file.uid}_${file.status}`} spinning={file.status === 'uploading'}>
<div className={clsx("rb:w-45 rb:h-12 rb:inline-block rb:group rb:relative rb:rounded-lg rb:border rb:border-[#F6F6F6]", {
'rb:border-[#FF5D34]': file.status === 'error'
})}>
<video src={file.url} controls className="rb:w-45 rb:h-12 rb:rounded-lg rb:object-cover" />
<div
className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')]"
onClick={() => handleDelete(file)}
></div>
</div>
)
}
if (file.type.includes('audio')) {
return (
<div key={file.url || file.uid} className="rb:w-45 rb:h-12 rb:inline-flex rb:items-center rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:py-2 rb:px-2.5 rb:gap-2 rb:border rb:border-[#F6F6F6]">
</Spin>
)
}
if (file.type?.includes('audio')) {
return (
<Spin key={`${file.url || file.uid}_${file.status}`} spinning={file.status === 'uploading'}>
<div className={clsx("rb:w-45 rb:h-12rb:inline-flex rb:items-center rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:py-2 rb:px-2.5 rb:gap-2 rb:border rb:border-[#F6F6F6]", {
'rb:border-[#FF5D34]': file.status === 'error'
})}>
<audio src={file.url} controls className="rb:w-45 rb:h-12" />
<div
className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')]"
onClick={() => handleDelete(file)}
></div>
</div>
)
}
return (
</Spin>
)
}
return (
<Spin key={`${file.url || file.uid}_${file.status}`} spinning={file.status === 'uploading'}>
<Flex
key={file.url || file.uid}
align="center"
gap={10}
className="rb:w-45 rb:text-[12px] rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:py-2! rb:px-2.5! rb:border rb:border-[#F6F6F6]"
>
className={clsx("rb:w-45 rb:text-[12px] rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:py-2! rb:px-2.5! rb:border rb:border-[#F6F6F6]", {
'rb:border-[#FF5D34]': file.status === 'error'
})}>
<div
className={clsx(
"rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/pdf_disabled.svg')]",
file.type.includes('pdf')
? "rb:bg-[url('@/assets/images/file/pdf.svg')]"
: (file.type.includes('excel') || file.type.includes('spreadsheetml.sheet'))
? "rb:bg-[url('@/assets/images/file/excel.svg')]"
: file.type.includes('csv')
? "rb:bg-[url('@/assets/images/file/csv.svg')]"
: file.type.includes('html')
? "rb:bg-[url('@/assets/images/file/html.svg')]"
: file.type.includes('json')
? "rb:bg-[url('@/assets/images/file/json.svg')]"
: file.type.includes('ppt')
? "rb:bg-[url('@/assets/images/file/ppt.svg')]"
: file.type.includes('text')
? "rb:bg-[url('@/assets/images/file/txt.svg')]"
: file.type.includes('markdown')
? "rb:bg-[url('@/assets/images/file/md.svg')]"
: (file.type.includes('doc') || file.type.includes('docx') || file.type.includes('word') || file.type.includes('wordprocessingml.document'))
? "rb:bg-[url('@/assets/images/file/word.svg')]"
: null
"rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/pdf_disabled.svg')]",
file.type?.includes('pdf')
? "rb:bg-[url('@/assets/images/file/pdf.svg')]"
: (file.type?.includes('excel') || file.type?.includes('spreadsheetml.sheet'))
? "rb:bg-[url('@/assets/images/file/excel.svg')]"
: file.type?.includes('csv')
? "rb:bg-[url('@/assets/images/file/csv.svg')]"
: file.type?.includes('html')
? "rb:bg-[url('@/assets/images/file/html.svg')]"
: file.type?.includes('json')
? "rb:bg-[url('@/assets/images/file/json.svg')]"
: file.type?.includes('ppt')
? "rb:bg-[url('@/assets/images/file/ppt.svg')]"
: file.type?.includes('text')
? "rb:bg-[url('@/assets/images/file/txt.svg')]"
: file.type?.includes('markdown')
? "rb:bg-[url('@/assets/images/file/md.svg')]"
: (file.type?.includes('doc') || file.type?.includes('docx') || file.type?.includes('word') || file.type?.includes('wordprocessingml.document'))
? "rb:bg-[url('@/assets/images/file/word.svg')]"
: null
)}
></div>
<div className="rb:flex-1 rb:w-32.5">
<div className="rb:leading-4 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{file.name}</div>
<div className="rb:leading-3.5 rb:mt-0.5 rb:text-[#5B6167] rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{file.type.split('/')[file.type.split('/').length - 1]} · {file.size}</div>
<div className="rb:leading-3.5 rb:mt-0.5 rb:text-[#5B6167] rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{file.type?.split('/')[file.type?.split('/').length - 1]} · {file.size}</div>
</div>
<div
className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')]"
onClick={() => handleDelete(file)}
></div>
</Flex>
)
})}
</Flex>
</Spin>
)
})}
</Flex>
</div>}
{/* Message input form */}
<Form form={form} layout="vertical">

29
web/src/components/Chat/ChatToolbar.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-03-17 14:22:25
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-20 15:44:48
* @Last Modified time: 2026-03-23 17:42:38
*/
// Toolbar component for chat input area, supporting file upload, audio recording, and variable configuration
import { useRef, forwardRef, useImperativeHandle, type ReactNode, useEffect } from 'react'
@@ -18,6 +18,7 @@ import type { FeaturesConfigForm } from '@/views/ApplicationConfig/types'
import type { UploadFileListModalRef } from '@/views/Conversation/types'
import type { VariableConfigModalRef } from '@/views/Workflow/types'
import type { Variable } from '@/views/Workflow/components/Properties/VariableList/types'
import { getFileInfoByUrl } from '@/api/fileStorage';
// Exposed methods via ref for parent components to access/set form state
export interface ChatToolbarRef {
@@ -103,9 +104,33 @@ const ChatToolbar = forwardRef<ChatToolbarRef, ChatToolbarProps>(({
// Merge a batch of files (e.g. from remote URL modal) into the file list
const addFileList = (list?: any[]) => {
if (!list?.length) return
const files = [...(queryValues?.files || []), ...list]
const uploadingList = list.map(f => ({ ...f, status: 'uploading' }))
const files = [...(queryValues?.files || []), ...uploadingList]
form.setFieldValue('files', files)
onFilesChange?.(files)
uploadingList.forEach(file => {
getFileInfoByUrl(file.url)
.then((res) => {
const { file_name, file_size, content_type } = res as { file_name: string; file_size: number; content_type: string; }
const current: any[] = form.getFieldValue('files') || []
const updated = current.map(f => f.uid === file.uid ? {
...f,
status: 'done',
name: file_name,
size: file_size,
type: content_type,
} : f)
form.setFieldValue('files', updated)
onFilesChange?.(updated)
})
.catch(() => {
const current: any[] = form.getFieldValue('files') || []
const updated = current.map(f => f.uid === file.uid ? { ...f, status: 'error' } : f)
form.setFieldValue('files', updated)
onFilesChange?.(updated)
})
})
}
// Persist variable values from the config modal and notify parent