diff --git a/web/src/assets/svg/file-icon/aep.svg b/web/src/assets/svg/file-icon/aep.svg new file mode 100644 index 000000000..fcf26db8a --- /dev/null +++ b/web/src/assets/svg/file-icon/aep.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/ai.svg b/web/src/assets/svg/file-icon/ai.svg new file mode 100644 index 000000000..4e2bf68aa --- /dev/null +++ b/web/src/assets/svg/file-icon/ai.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/avi.svg b/web/src/assets/svg/file-icon/avi.svg new file mode 100644 index 000000000..7225956cf --- /dev/null +++ b/web/src/assets/svg/file-icon/avi.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/css.svg b/web/src/assets/svg/file-icon/css.svg new file mode 100644 index 000000000..506a853c4 --- /dev/null +++ b/web/src/assets/svg/file-icon/css.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/csv.svg b/web/src/assets/svg/file-icon/csv.svg new file mode 100644 index 000000000..ad691e0d4 --- /dev/null +++ b/web/src/assets/svg/file-icon/csv.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/dmg.svg b/web/src/assets/svg/file-icon/dmg.svg new file mode 100644 index 000000000..4755f46fa --- /dev/null +++ b/web/src/assets/svg/file-icon/dmg.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/doc.svg b/web/src/assets/svg/file-icon/doc.svg new file mode 100644 index 000000000..2e68655ca --- /dev/null +++ b/web/src/assets/svg/file-icon/doc.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/docx.svg b/web/src/assets/svg/file-icon/docx.svg new file mode 100644 index 000000000..dd4325489 --- /dev/null +++ b/web/src/assets/svg/file-icon/docx.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/eps.svg b/web/src/assets/svg/file-icon/eps.svg new file mode 100644 index 000000000..4f2a66b1a --- /dev/null +++ b/web/src/assets/svg/file-icon/eps.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/exe.svg b/web/src/assets/svg/file-icon/exe.svg new file mode 100644 index 000000000..fbaea17f1 --- /dev/null +++ b/web/src/assets/svg/file-icon/exe.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/fig.svg b/web/src/assets/svg/file-icon/fig.svg new file mode 100644 index 000000000..7a500cdae --- /dev/null +++ b/web/src/assets/svg/file-icon/fig.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/gif.svg b/web/src/assets/svg/file-icon/gif.svg new file mode 100644 index 000000000..ff4e02455 --- /dev/null +++ b/web/src/assets/svg/file-icon/gif.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/html.svg b/web/src/assets/svg/file-icon/html.svg new file mode 100644 index 000000000..8d157fe68 --- /dev/null +++ b/web/src/assets/svg/file-icon/html.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/indd.svg b/web/src/assets/svg/file-icon/indd.svg new file mode 100644 index 000000000..b86688b66 --- /dev/null +++ b/web/src/assets/svg/file-icon/indd.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/java.svg b/web/src/assets/svg/file-icon/java.svg new file mode 100644 index 000000000..bea4ca9cc --- /dev/null +++ b/web/src/assets/svg/file-icon/java.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/jpeg.svg b/web/src/assets/svg/file-icon/jpeg.svg new file mode 100644 index 000000000..490a29226 --- /dev/null +++ b/web/src/assets/svg/file-icon/jpeg.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/jpg.svg b/web/src/assets/svg/file-icon/jpg.svg new file mode 100644 index 000000000..035ef810c --- /dev/null +++ b/web/src/assets/svg/file-icon/jpg.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/js.svg b/web/src/assets/svg/file-icon/js.svg new file mode 100644 index 000000000..3791ff50a --- /dev/null +++ b/web/src/assets/svg/file-icon/js.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/json.svg b/web/src/assets/svg/file-icon/json.svg new file mode 100644 index 000000000..5ead80c1e --- /dev/null +++ b/web/src/assets/svg/file-icon/json.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/mkv.svg b/web/src/assets/svg/file-icon/mkv.svg new file mode 100644 index 000000000..2b00a8ece --- /dev/null +++ b/web/src/assets/svg/file-icon/mkv.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/mp3.svg b/web/src/assets/svg/file-icon/mp3.svg new file mode 100644 index 000000000..b311e4d53 --- /dev/null +++ b/web/src/assets/svg/file-icon/mp3.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/mp4.svg b/web/src/assets/svg/file-icon/mp4.svg new file mode 100644 index 000000000..4f5f79dc3 --- /dev/null +++ b/web/src/assets/svg/file-icon/mp4.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/mpeg.svg b/web/src/assets/svg/file-icon/mpeg.svg new file mode 100644 index 000000000..23c01e866 --- /dev/null +++ b/web/src/assets/svg/file-icon/mpeg.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/pdf.svg b/web/src/assets/svg/file-icon/pdf.svg new file mode 100644 index 000000000..6e1a5f060 --- /dev/null +++ b/web/src/assets/svg/file-icon/pdf.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/png.svg b/web/src/assets/svg/file-icon/png.svg new file mode 100644 index 000000000..d581915bd --- /dev/null +++ b/web/src/assets/svg/file-icon/png.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/ppt.svg b/web/src/assets/svg/file-icon/ppt.svg new file mode 100644 index 000000000..365c32de3 --- /dev/null +++ b/web/src/assets/svg/file-icon/ppt.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/pptx.svg b/web/src/assets/svg/file-icon/pptx.svg new file mode 100644 index 000000000..09894ce2a --- /dev/null +++ b/web/src/assets/svg/file-icon/pptx.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/psd.svg b/web/src/assets/svg/file-icon/psd.svg new file mode 100644 index 000000000..0aa30c0cf --- /dev/null +++ b/web/src/assets/svg/file-icon/psd.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/rss.svg b/web/src/assets/svg/file-icon/rss.svg new file mode 100644 index 000000000..b4114c7b2 --- /dev/null +++ b/web/src/assets/svg/file-icon/rss.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/sql.svg b/web/src/assets/svg/file-icon/sql.svg new file mode 100644 index 000000000..0368a502c --- /dev/null +++ b/web/src/assets/svg/file-icon/sql.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/svg.svg b/web/src/assets/svg/file-icon/svg.svg new file mode 100644 index 000000000..0957124cf --- /dev/null +++ b/web/src/assets/svg/file-icon/svg.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/tiff.svg b/web/src/assets/svg/file-icon/tiff.svg new file mode 100644 index 000000000..de818515a --- /dev/null +++ b/web/src/assets/svg/file-icon/tiff.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/txt.svg b/web/src/assets/svg/file-icon/txt.svg new file mode 100644 index 000000000..0a4fe6fae --- /dev/null +++ b/web/src/assets/svg/file-icon/txt.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/wav.svg b/web/src/assets/svg/file-icon/wav.svg new file mode 100644 index 000000000..d2b018eef --- /dev/null +++ b/web/src/assets/svg/file-icon/wav.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/webp.svg b/web/src/assets/svg/file-icon/webp.svg new file mode 100644 index 000000000..e69de29bb diff --git a/web/src/assets/svg/file-icon/xls.svg b/web/src/assets/svg/file-icon/xls.svg new file mode 100644 index 000000000..7fe4a5c70 --- /dev/null +++ b/web/src/assets/svg/file-icon/xls.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/xlsx.svg b/web/src/assets/svg/file-icon/xlsx.svg new file mode 100644 index 000000000..544a1384a --- /dev/null +++ b/web/src/assets/svg/file-icon/xlsx.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/file-icon/xml.svg b/web/src/assets/svg/file-icon/xml.svg new file mode 100644 index 000000000..4e61546c2 --- /dev/null +++ b/web/src/assets/svg/file-icon/xml.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/web/src/components/svg-icon.tsx b/web/src/components/svg-icon.tsx new file mode 100644 index 000000000..d7c16f478 --- /dev/null +++ b/web/src/components/svg-icon.tsx @@ -0,0 +1,34 @@ +import { + UseDynamicSVGImportOptions, + useDynamicSVGImport, +} from '@/hooks/commonHooks'; + +interface IconProps extends React.SVGProps { + name: string; + onCompleted?: UseDynamicSVGImportOptions['onCompleted']; + onError?: UseDynamicSVGImportOptions['onError']; +} + +const SvgIcon: React.FC = ({ + name, + onCompleted, + onError, + ...rest +}): React.ReactNode | null => { + const { error, loading, SvgIcon } = useDynamicSVGImport(name, { + onCompleted, + onError, + }); + if (error) { + return error.message; + } + if (loading) { + return 'Loading...'; + } + if (SvgIcon) { + return ; + } + return null; +}; + +export default SvgIcon; diff --git a/web/src/constants/common.ts b/web/src/constants/common.ts index e69de29bb..d315cf175 100644 --- a/web/src/constants/common.ts +++ b/web/src/constants/common.ts @@ -0,0 +1,40 @@ +export const fileIconMap = { + aep: 'aep.svg', + ai: 'ai.svg', + avi: 'avi.svg', + css: 'css.svg', + csv: 'csv.svg', + dmg: 'dmg.svg', + doc: 'doc.svg', + docx: 'docx.svg', + eps: 'eps.svg', + exe: 'exe.svg', + fig: 'fig.svg', + gif: 'gif.svg', + html: 'html.svg', + indd: 'indd.svg', + java: 'java.svg', + jpeg: 'jpeg.svg', + jpg: 'jpg.svg', + js: 'js.svg', + json: 'json.svg', + mkv: 'mkv.svg', + mp3: 'mp3.svg', + mp4: 'mp4.svg', + mpeg: 'mpeg.svg', + pdf: 'pdf.svg', + png: 'png.svg', + ppt: 'ppt.svg', + pptx: 'pptx.svg', + psd: 'psd.svg', + rss: 'rss.svg', + sql: 'sql.svg', + svg: 'svg.svg', + tiff: 'tiff.svg', + txt: 'txt.svg', + wav: 'wav.svg', + webp: 'webp.svg', + xls: 'xls.svg', + xlsx: 'xlsx.svg', + xml: 'xml.svg', +}; diff --git a/web/src/hooks/commonHooks.ts b/web/src/hooks/commonHooks.ts index e4361cd29..6cbf10e89 100644 --- a/web/src/hooks/commonHooks.ts +++ b/web/src/hooks/commonHooks.ts @@ -32,3 +32,39 @@ export const useDeepCompareEffect = ( }; }, []); }; + +export interface UseDynamicSVGImportOptions { + onCompleted?: ( + name: string, + SvgIcon: React.FC> | undefined, + ) => void; + onError?: (err: Error) => void; +} + +export function useDynamicSVGImport( + name: string, + options: UseDynamicSVGImportOptions = {}, +) { + const ImportedIconRef = useRef>>(); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(); + + const { onCompleted, onError } = options; + useEffect(() => { + setLoading(true); + const importIcon = async (): Promise => { + try { + ImportedIconRef.current = (await import(name)).ReactComponent; + onCompleted?.(name, ImportedIconRef.current); + } catch (err: any) { + onError?.(err); + setError(err); + } finally { + setLoading(false); + } + }; + importIcon(); + }, [name, onCompleted, onError]); + + return { error, loading, SvgIcon: ImportedIconRef.current }; +} diff --git a/web/src/pages/chat/chat-container/index.tsx b/web/src/pages/chat/chat-container/index.tsx index 4f702b80d..4c0704f7b 100644 --- a/web/src/pages/chat/chat-container/index.tsx +++ b/web/src/pages/chat/chat-container/index.tsx @@ -16,7 +16,12 @@ import { import classNames from 'classnames'; import { ChangeEventHandler, useCallback, useMemo, useState } from 'react'; import reactStringReplace from 'react-string-replace'; -import { useFetchConversation, useSendMessage } from '../hooks'; +import { + useFetchConversation, + useGetFileIcon, + useScrollToBottom, + useSendMessage, +} from '../hooks'; import { IClientConversation } from '../interface'; import Image from '@/components/image'; @@ -54,26 +59,28 @@ const MessageItem = ({ const isAssistant = item.role === MessageType.Assistant; + const getFileIcon = useGetFileIcon(); + const getPopoverContent = useCallback( (chunkIndex: number) => { const chunks = reference?.chunks ?? []; const chunkItem = chunks[chunkIndex]; - const document = reference.doc_aggs.find( - (x) => x.doc_id === chunkItem.doc_id, + const document = reference?.doc_aggs.find( + (x) => x?.doc_id === chunkItem?.doc_id, ); const documentId = document?.doc_id; return ( -
{chunkItem.content_with_weight}
+
{chunkItem?.content_with_weight}
{documentId && ( {document?.doc_name} @@ -156,7 +163,9 @@ const MessageItem = ({ dataSource={referenceDocumentList} renderItem={(item) => ( - [ITEM] + + {/* */} + {item.doc_name} @@ -179,6 +188,8 @@ const ChatContainer = () => { 'completeConversation', 'getConversation', ]); + const ref = useScrollToBottom(); + useGetFileIcon(); const handlePressEnter = () => { setValue(''); @@ -210,6 +221,7 @@ const ChatContainer = () => { ); })} +
{ return { sendMessage: handleSendMessage }; }; +export const useScrollToBottom = () => { + const ref = useRef(null); + let chatModel: ChatModelState = useSelector((state: any) => state.chatModel); + const { currentConversation } = chatModel; + + const scrollToBottom = useCallback(() => { + if (currentConversation.id) { + ref.current?.scrollIntoView({ behavior: 'instant' }); + } + }, [currentConversation]); + + useEffect(() => { + scrollToBottom(); + }, [scrollToBottom]); + + return ref; +}; + +export const useGetFileIcon = () => { + // const req = require.context('@/assets/svg/file-icon'); + // const ret = req.keys().map(req); + // console.info(ret); + // useEffect(() => {}, []); + + const getFileIcon = (filename: string) => { + const ext: string = getFileExtension(filename); + const iconPath = fileIconMap[ext as keyof typeof fileIconMap]; + // const x = require(`@/assets/svg/file-icon/${iconPath}`); + return `@/assets/svg/file-icon/${iconPath}`; + }; + + return getFileIcon; +}; + //#endregion diff --git a/web/src/utils/domUtils.ts b/web/src/utils/domUtils.ts new file mode 100644 index 000000000..8710ec707 --- /dev/null +++ b/web/src/utils/domUtils.ts @@ -0,0 +1,3 @@ +export const scrollToBottom = (element: HTMLElement) => { + element.scrollTo(0, element.scrollHeight); +}; diff --git a/web/src/utils/index.ts b/web/src/utils/index.ts index f27890471..d0cdcef72 100644 --- a/web/src/utils/index.ts +++ b/web/src/utils/index.ts @@ -25,3 +25,6 @@ export default { getWidth, rsaPsw, }; + +export const getFileExtension = (filename: string) => + filename.slice(filename.lastIndexOf('.') + 1).toLowerCase();