KMS/ragflow
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add corresponding icons to files (#164)

Browse Source
This commit is contained in:
balibabu 2024-03-28 16:18:16 +08:00 committed by GitHub
parent a5384446e3
commit b6837d4ca6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 137 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/new-document-link.tsx
View File

@ -3,12 +3,18 @@ import React from 'react';
interface IProps extends React.PropsWithChildren {
documentId: string;
preventDefault?: boolean;
}
const NewDocumentLink = ({ children, documentId }: IProps) => {
const NewDocumentLink = ({
children,
documentId,
preventDefault = false,
}: IProps) => {
return (
<a
target="_blank"
onClick={!preventDefault ? undefined : (e) => e.preventDefault()}
href={`${api_host}/document/get/${documentId}`}
rel="noreferrer"
>

23
web/src/hooks/knowledgeHook.ts
View File

@ -206,3 +206,26 @@ export const useSelectKnowledgeDetails = () => {
return knowledgeDetails;
};
//#endregion
//#region Retrieval testing
export const useTestChunkRetrieval = () => {
const dispatch = useDispatch();
const knowledgeBaseId = useKnowledgeBaseId();
const testChunk = useCallback(
(values: any) => {
dispatch({
type: 'testingModel/testDocumentChunk',
payload: {
...values,
kb_id: knowledgeBaseId,
},
});
},
[dispatch, knowledgeBaseId],
);
return testChunk;
};
//#endregion

1
web/src/pages/add-knowledge/components/knowledge-chunk/index.less
View File

@ -37,6 +37,7 @@
}
.chunkContainer {
display: flex;
height: calc(100vh - 332px);
}

1
web/src/pages/add-knowledge/components/knowledge-file/index.less
View File

@ -22,7 +22,6 @@
.img {
height: 24px;
width: 24px;
margin-right: 10px;
display: inline-block;
vertical-align: middle;
}

21
web/src/pages/add-knowledge/components/knowledge-file/index.tsx
View File

@ -1,9 +1,12 @@
import ChunkMethodModal from '@/components/chunk-method-modal';
import SvgIcon from '@/components/svg-icon';
import {
useSelectDocumentList,
useSetDocumentStatus,
} from '@/hooks/documentHooks';
import { useSelectParserList } from '@/hooks/userSettingHook';
import { IKnowledgeFile } from '@/interfaces/database/knowledge';
import { getExtension } from '@/utils/documentUtils';
import {
FileOutlined,
FileTextOutlined,
@ -15,6 +18,7 @@ import {
Button,
Divider,
Dropdown,
Flex,
Input,
Space,
Switch,
@ -38,8 +42,6 @@ import ParsingActionCell from './parsing-action-cell';
import ParsingStatusCell from './parsing-status-cell';
import RenameModal from './rename-modal';
import ChunkMethodModal from '@/components/chunk-method-modal';
import { getExtension } from '@/utils/documentUtils';
import styles from './index.less';
const KnowledgeFile = () => {
@ -114,10 +116,19 @@ const KnowledgeFile = () => {
dataIndex: 'name',
key: 'name',
fixed: 'left',
render: (text: any, { id, thumbnail }) => (
render: (text: any, { id, thumbnail, name }) => (
<div className={styles.tochunks} onClick={() => toChunk(id)}>
<img className={styles.img} src={thumbnail} alt="" />
{text}
<Flex gap={10} align="center">
{thumbnail ? (
<img className={styles.img} src={thumbnail} alt="" />
) : (
<SvgIcon
name={`file-icon/${getExtension(name)}`}
width={24}
></SvgIcon>
)}
{text}
</Flex>
</div>
),
},

17
web/src/pages/add-knowledge/components/knowledge-testing/index.tsx
View File

@ -1,28 +1,21 @@
import { useTestChunkRetrieval } from '@/hooks/knowledgeHook';
import { Flex, Form } from 'antd';
import { useEffect } from 'react';
import { useDispatch } from 'umi';
import TestingControl from './testing-control';
import TestingResult from './testing-result';
import { useKnowledgeBaseId } from '@/hooks/knowledgeHook';
import { useEffect } from 'react';
import { useDispatch } from 'umi';
import styles from './index.less';
const KnowledgeTesting = () => {
const [form] = Form.useForm();
const testChunk = useTestChunkRetrieval();
const dispatch = useDispatch();
const knowledgeBaseId = useKnowledgeBaseId();
const handleTesting = async () => {
const values = await form.validateFields();
console.info(values);
dispatch({
type: 'testingModel/testDocumentChunk',
payload: {
...values,
kb_id: knowledgeBaseId,
},
});
testChunk(values);
};
useEffect(() => {

7
web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx
View File

@ -2,10 +2,9 @@ import SimilaritySlider from '@/components/similarity-slider';
import { Button, Card, Divider, Flex, Form, Input, Slider, Tag } from 'antd';
import { FormInstance } from 'antd/lib';
import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
import styles from './index.less';
const list = [1, 2, 3];
type FieldType = {
similarity_threshold?: number;
vector_similarity_weight?: number;
@ -20,6 +19,9 @@ interface IProps {
const TestingControl = ({ form, handleTesting }: IProps) => {
const question = Form.useWatch('question', { form, preserve: true });
const loading = useOneNamespaceEffectsLoading('testingModel', [
'testDocumentChunk',
]);
const buttonDisabled =
!question || (typeof question === 'string' && question.trim() === '');
@ -65,6 +67,7 @@ const TestingControl = ({ form, handleTesting }: IProps) => {
size="small"
onClick={handleTesting}
disabled={buttonDisabled}
loading={loading}
>
Testing
</Button>

10
web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.less
View File

@ -35,9 +35,11 @@
}
.image {
width: 100px;
}
.imagePreview {
display: block;
width: 260px;
object-fit: contain;
}
}
.imagePreview {
display: block;
max-width: 45vw;
max-height: 40vh;
}

2
web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx
View File

@ -104,7 +104,7 @@ const TestingResult = ({ handleTesting }: IProps) => {
<Flex gap={'middle'}>
{x.img_id && (
<Popover
placement="topRight"
placement="left"
content={
<Image
id={x.img_id}

5
web/src/pages/add-knowledge/components/knowledge-testing/testing-result/select-files.tsx
View File

@ -1,6 +1,7 @@
import { ReactComponent as NavigationPointerIcon } from '@/assets/svg/navigation-pointer.svg';
import NewDocumentLink from '@/components/new-document-link';
import { ITestingDocument } from '@/interfaces/database/knowledge';
import { isPdf } from '@/utils/documentUtils';
import { Table, TableProps } from 'antd';
import { useDispatch, useSelector } from 'umi';
@ -33,8 +34,8 @@ const SelectFiles = ({ handleTesting }: IProps) => {
title: 'View',
key: 'view',
width: 50,
render: (_, { doc_id }) => (
<NewDocumentLink documentId={doc_id}>
render: (_, { doc_id, doc_name }) => (
<NewDocumentLink documentId={doc_id} preventDefault={!isPdf(doc_name)}>
<NavigationPointerIcon />
</NewDocumentLink>
),

3
web/src/pages/chat/chat-container/index.less
View File

@ -64,3 +64,6 @@
max-height: 45vh;
overflow-y: auto;
}
.documentLink {
padding: 0;
}

90
web/src/pages/chat/chat-container/index.tsx
View File

@ -36,6 +36,8 @@ import {
useSendMessage,
} from '../hooks';
import SvgIcon from '@/components/svg-icon';
import { getExtension, isPdf } from '@/utils/documentUtils';
import styles from './index.less';
const reg = /(#{2}\d+\${2})/g;
@ -74,7 +76,10 @@ const MessageItem = ({
const isAssistant = item.role === MessageType.Assistant;
const handleDocumentButtonClick = useCallback(
(documentId: string, chunk: IChunk) => () => {
(documentId: string, chunk: IChunk, isPdf: boolean) => () => {
if (!isPdf) {
return;
}
clickDocumentButton(documentId, chunk);
},
[clickDocumentButton],
@ -88,26 +93,31 @@ const MessageItem = ({
(x) => x?.doc_id === chunkItem?.doc_id,
);
const documentId = document?.doc_id;
const fileThumbnail = documentId ? fileThumbnails[documentId] : '';
const fileExtension = documentId ? getExtension(document?.doc_name) : '';
const imageId = chunkItem?.img_id;
return (
<Flex
key={chunkItem?.chunk_id}
gap={10}
className={styles.referencePopoverWrapper}
>
<Popover
placement="left"
content={
{imageId && (
<Popover
placement="left"
content={
<Image
id={imageId}
className={styles.referenceImagePreview}
></Image>
}
>
<Image
id={chunkItem?.img_id}
className={styles.referenceImagePreview}
id={imageId}
className={styles.referenceChunkImage}
></Image>
}
>
<Image
id={chunkItem?.img_id}
className={styles.referenceChunkImage}
></Image>
</Popover>
</Popover>
)}
<Space direction={'vertical'}>
<div
dangerouslySetInnerHTML={{
@ -116,11 +126,23 @@ const MessageItem = ({
className={styles.chunkContentText}
></div>
{documentId && (
<Flex gap={'middle'}>
<img src={fileThumbnails[documentId]} alt="" />
<Flex gap={'small'}>
{fileThumbnail ? (
<img src={fileThumbnail} alt="" />
) : (
<SvgIcon
name={`file-icon/${fileExtension}`}
width={24}
></SvgIcon>
)}
<Button
type="link"
onClick={handleDocumentButtonClick(documentId, chunkItem)}
className={styles.documentLink}
onClick={handleDocumentButtonClick(
documentId,
chunkItem,
fileExtension === 'pdf',
)}
>
{document?.doc_name}
</Button>
@ -224,17 +246,31 @@ const MessageItem = ({
<List
bordered
dataSource={referenceDocumentList}
renderItem={(item) => (
<List.Item>
{/* <SvgIcon name={getFileIcon(item.doc_name)}></SvgIcon> */}
<Flex gap={'middle'}>
<img src={fileThumbnails[item.doc_id]}></img>
<NewDocumentLink documentId={item.doc_id}>
{item.doc_name}
</NewDocumentLink>
</Flex>
</List.Item>
)}
renderItem={(item) => {
const fileThumbnail = fileThumbnails[item.doc_id];
const fileExtension = getExtension(item.doc_name);
return (
<List.Item>
<Flex gap={'small'} align="center">
{fileThumbnail ? (
<img src={fileThumbnail}></img>
) : (
<SvgIcon
name={`file-icon/${fileExtension}`}
width={24}
></SvgIcon>
)}
<NewDocumentLink
documentId={item.doc_id}
preventDefault={!isPdf(item.doc_name)}
>
{item.doc_name}
</NewDocumentLink>
</Flex>
</List.Item>
);
}}
/>
)}
</Flex>

4
web/src/utils/documentUtils.ts
View File

@ -38,3 +38,7 @@ export const isFileUploadDone = (file: UploadFile) => file.status === 'done';
export const getExtension = (name: string) =>
name?.slice(name.lastIndexOf('.') + 1).toLowerCase() ?? '';
export const isPdf = (name: string) => {
return getExtension(name) === 'pdf';
};