import { Authorization } from '@/constants/authorization'; import { useTranslate } from '@/hooks/common-hooks'; import { useDeleteDocument, useFetchDocumentInfosByIds, useRemoveNextDocument, } from '@/hooks/document-hooks'; import { getAuthorization } from '@/utils/authorization-util'; import { getExtension } from '@/utils/document-util'; import { formatBytes } from '@/utils/file-util'; import { CloseCircleOutlined, InfoCircleOutlined, LoadingOutlined, } from '@ant-design/icons'; import type { GetProp, UploadFile } from 'antd'; import { Button, Card, Flex, Input, List, Space, Spin, Typography, Upload, UploadProps, } from 'antd'; import classNames from 'classnames'; import get from 'lodash/get'; import { ChangeEventHandler, useCallback, useEffect, useState } from 'react'; import FileIcon from '../file-icon'; import SvgIcon from '../svg-icon'; import styles from './index.less'; type FileType = Parameters>[0]; const { Text } = Typography; const getFileId = (file: UploadFile) => get(file, 'response.data.0'); const getFileIds = (fileList: UploadFile[]) => { const ids = fileList.reduce((pre, cur) => { return pre.concat(get(cur, 'response.data', [])); }, []); return ids; }; const isUploadError = (file: UploadFile) => { const retcode = get(file, 'response.retcode'); return typeof retcode === 'number' && retcode !== 0; }; const isUploadSuccess = (file: UploadFile) => { const retcode = get(file, 'response.retcode'); return typeof retcode === 'number' && retcode === 0; }; interface IProps { disabled: boolean; value: string; sendDisabled: boolean; sendLoading: boolean; onPressEnter(documentIds: string[]): void; onInputChange: ChangeEventHandler; conversationId: string; uploadUrl?: string; isShared?: boolean; showUploadIcon?: boolean; } const getBase64 = (file: FileType): Promise => new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file as any); reader.onload = () => resolve(reader.result as string); reader.onerror = (error) => reject(error); }); const MessageInput = ({ isShared = false, disabled, value, onPressEnter, sendDisabled, sendLoading, onInputChange, conversationId, showUploadIcon = true, uploadUrl = '/v1/document/upload_and_parse', }: IProps) => { const { t } = useTranslate('chat'); const { removeDocument } = useRemoveNextDocument(); const { deleteDocument } = useDeleteDocument(); const { data: documentInfos, setDocumentIds } = useFetchDocumentInfosByIds(); const [fileList, setFileList] = useState([]); const handlePreview = async (file: UploadFile) => { if (!file.url && !file.preview) { file.preview = await getBase64(file.originFileObj as FileType); } }; const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) => { setFileList(newFileList); }; const isUploadingFile = fileList.some((x) => x.status === 'uploading'); const handlePressEnter = useCallback(async () => { if (isUploadingFile) return; const ids = getFileIds(fileList.filter((x) => isUploadSuccess(x))); onPressEnter(ids); setFileList([]); }, [fileList, onPressEnter, isUploadingFile]); const handleRemove = useCallback( async (file: UploadFile) => { const ids = get(file, 'response.data', []); // Upload Successfully if (Array.isArray(ids) && ids.length) { if (isShared) { await deleteDocument(ids); } else { await removeDocument(ids[0]); } setFileList((preList) => { return preList.filter((x) => getFileId(x) !== ids[0]); }); } else { // Upload failed setFileList((preList) => { return preList.filter((x) => x.uid !== file.uid); }); } }, [removeDocument, deleteDocument, isShared], ); const getDocumentInfoById = useCallback( (id: string) => { return documentInfos.find((x) => x.id === id); }, [documentInfos], ); useEffect(() => { const ids = getFileIds(fileList); setDocumentIds(ids); }, [fileList, setDocumentIds]); return ( {conversationId && showUploadIcon && ( )} } onPressEnter={handlePressEnter} onChange={onInputChange} /> {fileList.length > 0 && ( { const fileExtension = getExtension(item.name); const id = getFileId(item); return ( {item.status === 'uploading' || !item.response ? ( } /> ) : !getFileId(item) ? ( ) : ( )} {item.name} {isUploadError(item) ? ( t('uploadFailed') ) : ( <> {item.percent !== 100 ? ( t('uploading') ) : !item.response ? ( t('parsing') ) : ( {fileExtension?.toUpperCase()}, {formatBytes( getDocumentInfoById(id)?.size ?? 0, )} )} )} {item.status !== 'uploading' && ( handleRemove(item)} /> )} ); }} /> )} ); }; export default MessageInput;