diff --git a/web/src/assets/svg/navigation-pointer.svg b/web/src/assets/svg/navigation-pointer.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b8abd685df9cd0a2e66b878fee0566d5da4caef1
--- /dev/null
+++ b/web/src/assets/svg/navigation-pointer.svg
@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g clip-path="url(#clip0_448_5461)">
+ <path
+ d="M2.84455 8.95373C2.34843 8.7608 2.10037 8.66433 2.02795 8.52533C1.96517 8.40483 1.96508 8.26129 2.02772 8.14071C2.09998 8.00163 2.34793 7.90486 2.84383 7.71134L16.9169 2.21939C17.3646 2.0447 17.5884 1.95736 17.7314 2.00514C17.8557 2.04663 17.9531 2.1441 17.9946 2.26831C18.0424 2.41133 17.9551 2.63516 17.7804 3.08281L12.2884 17.1559C12.0949 17.6518 11.9981 17.8998 11.859 17.972C11.7385 18.0347 11.5949 18.0346 11.4744 17.9718C11.3354 17.8994 11.239 17.6513 11.046 17.1552L8.85593 11.5235C8.81677 11.4228 8.79718 11.3725 8.76694 11.3301C8.74013 11.2925 8.70727 11.2596 8.66969 11.2328C8.62728 11.2026 8.57693 11.183 8.47622 11.1438L2.84455 8.95373Z"
+ stroke="#475467" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+ </g>
+ <defs>
+ <clipPath id="clip0_448_5461">
+ <rect width="20" height="20" fill="white" />
+ </clipPath>
+ </defs>
+</svg>
\ No newline at end of file
diff --git a/web/src/assets/svg/selected-files-collapse.svg b/web/src/assets/svg/selected-files-collapse.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4ef8e368d6bbe4923d9d3e2e6e62d2524f4b3a54
--- /dev/null
+++ b/web/src/assets/svg/selected-files-collapse.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M6.66667 10H13.3333M6.5 17.5H13.5C14.9001 17.5 15.6002 17.5 16.135 17.2275C16.6054 16.9878 16.9878 16.6054 17.2275 16.135C17.5 15.6002 17.5 14.9001 17.5 13.5V6.5C17.5 5.09987 17.5 4.3998 17.2275 3.86502C16.9878 3.39462 16.6054 3.01217 16.135 2.77248C15.6002 2.5 14.9001 2.5 13.5 2.5H6.5C5.09987 2.5 4.3998 2.5 3.86502 2.77248C3.39462 3.01217 3.01217 3.39462 2.77248 3.86502C2.5 4.3998 2.5 5.09987 2.5 6.5V13.5C2.5 14.9001 2.5 15.6002 2.77248 16.135C3.01217 16.6054 3.39462 16.9878 3.86502 17.2275C4.3998 17.5 5.09987 17.5 6.5 17.5Z"
+ stroke="#7F56D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/web/src/constants/knowledge.ts b/web/src/constants/knowledge.ts
index cf117d31c474e1b5298e93adc66374bb3694c81e..043c445e2b0c824436b4fbc38b4c22c5dc1d229f 100644
--- a/web/src/constants/knowledge.ts
+++ b/web/src/constants/knowledge.ts
@@ -2,6 +2,7 @@ export enum KnowledgeRouteKey {
Dataset = 'dataset',
Testing = 'testing',
Configuration = 'configuration',
+ TempTesting = 'tempTesting',
}
export enum RunningStatus {
diff --git a/web/src/less/variable.less b/web/src/less/variable.less
index 3ade35962c2806263d9f517631d88eff7ec0867b..7577f74ab0b8b30f3cae803f55859810897434ac 100644
--- a/web/src/less/variable.less
+++ b/web/src/less/variable.less
@@ -1,6 +1,7 @@
@fontWeight600: 600;
@fontWeight700: 700;
+@grayBackground: rgba(247, 248, 250, 1);
@gray2: rgba(29, 25, 41, 1);
@gray3: rgba(52, 48, 62, 1);
@gray8: rgba(165, 163, 169, 1);
diff --git a/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx b/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx
index 932737fcdc27a3cd4b1161baf288b3db9352918f..e24e0bf320b1912ae61f9cba16eb245af1a2bcd1 100644
--- a/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx
@@ -6,7 +6,7 @@ import { getWidth } from '@/utils';
import { AntDesignOutlined } from '@ant-design/icons';
import { Avatar, Menu, MenuProps, Space } from 'antd';
import classNames from 'classnames';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
import { useNavigate, useSelector } from 'umi';
import { KnowledgeRouteKey, routeMap } from '../../constant';
import styles from './index.less';
@@ -26,23 +26,27 @@ const KnowledgeSidebar = () => {
type MenuItem = Required<MenuProps>['items'][number];
- function getItem(
- label: React.ReactNode,
- key: React.Key,
- icon?: React.ReactNode,
- disabled?: boolean,
- children?: MenuItem[],
- type?: 'group',
- ): MenuItem {
- return {
- key,
- icon,
- children,
- label,
- type,
- disabled,
- } as MenuItem;
- }
+ const getItem = useCallback(
+ (
+ label: React.ReactNode,
+ key: React.Key,
+ icon?: React.ReactNode,
+ disabled?: boolean,
+ children?: MenuItem[],
+ type?: 'group',
+ ): MenuItem => {
+ return {
+ key,
+ icon,
+ children,
+ label,
+ type,
+ disabled,
+ } as MenuItem;
+ },
+ [],
+ );
+
const items: MenuItem[] = useMemo(() => {
return [
getItem(
@@ -60,8 +64,13 @@ const KnowledgeSidebar = () => {
KnowledgeRouteKey.Configuration,
<ConfigrationIcon />,
),
+ getItem(
+ routeMap[KnowledgeRouteKey.TempTesting],
+ KnowledgeRouteKey.TempTesting,
+ <TestingIcon />,
+ ),
];
- }, [id]);
+ }, [getItem]);
useEffect(() => {
if (windowWidth.width > 957) {
diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/index.less b/web/src/pages/add-knowledge/components/knowledge-testing/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..e75ea35eb6ec0409f23330a70d89f28dd58b344f
--- /dev/null
+++ b/web/src/pages/add-knowledge/components/knowledge-testing/index.less
@@ -0,0 +1,5 @@
+.testingWrapper {
+ flex: 1;
+ background-color: @grayBackground;
+ height: 100%;
+}
diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/index.tsx b/web/src/pages/add-knowledge/components/knowledge-testing/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5c4d22d98f09cc9b10c0a9065800f203a3617bbe
--- /dev/null
+++ b/web/src/pages/add-knowledge/components/knowledge-testing/index.tsx
@@ -0,0 +1,16 @@
+import { Flex } from 'antd';
+import TestingControl from './testing-control';
+import TestingResult from './testing-result';
+
+import styles from './index.less';
+
+const KnowledgeTesting = () => {
+ return (
+ <Flex className={styles.testingWrapper} gap={16}>
+ <TestingControl></TestingControl>
+ <TestingResult></TestingResult>
+ </Flex>
+ );
+};
+
+export default KnowledgeTesting;
diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.less b/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..42842a27801cc41b48abff99da5bf6508a40f8af
--- /dev/null
+++ b/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.less
@@ -0,0 +1,26 @@
+.testingControlWrapper {
+ width: 350px;
+ background-color: white;
+ padding: 30px 20px;
+ .historyTitle {
+ padding: 30px 0 20px;
+ }
+ .historyIcon {
+ vertical-align: middle;
+ }
+ .historyCardWrapper {
+ width: 100%;
+ }
+ .historyCard {
+ width: 100%;
+ :global(.ant-card-body) {
+ padding: 10px;
+ }
+ }
+ .historyText {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ flex: 1;
+ }
+}
diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx b/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..97ef9d5f24e4e5572c95d1d9f7634d8562b632ff
--- /dev/null
+++ b/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx
@@ -0,0 +1,92 @@
+import {
+ Button,
+ Card,
+ Divider,
+ Flex,
+ Input,
+ Slider,
+ SliderSingleProps,
+ Space,
+ Tag,
+} from 'antd';
+
+import { DeleteOutlined, HistoryOutlined } from '@ant-design/icons';
+import styles from './index.less';
+
+const list = [1, 2, 3];
+
+const marks: SliderSingleProps['marks'] = {
+ 0: '0°C',
+ 26: '26°C',
+ 37: '37°C',
+ 100: {
+ style: {
+ color: '#f50',
+ },
+ label: <strong>100°C</strong>,
+ },
+};
+
+const TestingControl = () => {
+ return (
+ <section className={styles.testingControlWrapper}>
+ <p>
+ <b>Retrieval testing</b>
+ </p>
+ <p>xxxx</p>
+ <Divider></Divider>
+ <section>
+ <Slider range marks={marks} defaultValue={[26, 37]} />
+ <Slider range marks={marks} defaultValue={[26, 37]} />
+ <Card
+ size="small"
+ title="Test text"
+ extra={
+ <Button type="primary" ghost>
+ Semantic Search
+ </Button>
+ }
+ >
+ <Input.TextArea autoSize={{ minRows: 8 }}></Input.TextArea>
+ <Flex justify={'space-between'}>
+ <Tag>10/200</Tag>
+ <Button type="primary" size="small">
+ Testing
+ </Button>
+ </Flex>
+ </Card>
+ </section>
+ <section>
+ <p className={styles.historyTitle}>
+ <Space size={'middle'}>
+ <HistoryOutlined className={styles.historyIcon} />
+ <b>Test history</b>
+ </Space>
+ </p>
+ <Space
+ direction="vertical"
+ size={'middle'}
+ className={styles.historyCardWrapper}
+ >
+ {list.map((x) => (
+ <Card className={styles.historyCard} key={x}>
+ <Flex justify={'space-between'} gap={'small'}>
+ <span>{x}</span>
+ <div className={styles.historyText}>
+ content dcjsjl snldsh svnodvn svnodrfn svjdoghdtbnhdo
+ sdvhodhbuid sldghdrlh
+ </div>
+ <Flex gap={'small'}>
+ <span>time</span>
+ <DeleteOutlined></DeleteOutlined>
+ </Flex>
+ </Flex>
+ </Card>
+ ))}
+ </Space>
+ </section>
+ </section>
+ );
+};
+
+export default TestingControl;
diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.less b/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..2a1d8c01fa3545e3c4066e49ec2f068b91ffd4dc
--- /dev/null
+++ b/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.less
@@ -0,0 +1,16 @@
+.testingResultWrapper {
+ flex: 1;
+ background-color: white;
+ padding: 30px 20px;
+
+ .selectFilesCollapse {
+ :global(.ant-collapse-header) {
+ padding-left: 22px;
+ }
+ margin-bottom: 32px;
+ }
+
+ .selectFilesTitle {
+ padding-right: 10px;
+ }
+}
diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx b/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..14a04ac96b1347bf8f867c4d5a577f19e692d754
--- /dev/null
+++ b/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx
@@ -0,0 +1,54 @@
+import { ReactComponent as SelectedFilesCollapseIcon } from '@/assets/svg/selected-files-collapse.svg';
+import { Card, Collapse, Flex, Space } from 'antd';
+import SelectFiles from './select-files';
+
+import styles from './index.less';
+
+const list = [1, 2, 3, 4];
+
+const TestingResult = () => {
+ return (
+ <section className={styles.testingResultWrapper}>
+ <Collapse
+ expandIcon={() => (
+ <SelectedFilesCollapseIcon></SelectedFilesCollapseIcon>
+ )}
+ className={styles.selectFilesCollapse}
+ items={[
+ {
+ key: '1',
+ label: (
+ <Flex
+ justify={'space-between'}
+ align="center"
+ className={styles.selectFilesTitle}
+ >
+ <span>4/25 Files Selected</span>
+ <Space size={52}>
+ <b>Hits</b>
+ <b>View</b>
+ </Space>
+ </Flex>
+ ),
+ children: (
+ <div>
+ <SelectFiles></SelectFiles>
+ </div>
+ ),
+ },
+ ]}
+ />
+ <Flex gap={'large'} vertical>
+ {list.map((x) => (
+ <Card key={x} title="Default size card" extra={<a href="#">More</a>}>
+ <p>Card content</p>
+ <p>Card content</p>
+ <p>Card content</p>
+ </Card>
+ ))}
+ </Flex>
+ </section>
+ );
+};
+
+export default TestingResult;
diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/select-files.tsx b/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/select-files.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0aee3dc1330e958d513d1eba466c595a881fe1a0
--- /dev/null
+++ b/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/select-files.tsx
@@ -0,0 +1,82 @@
+import { ReactComponent as NavigationPointerIcon } from '@/assets/svg/navigation-pointer.svg';
+import { Table, TableProps } from 'antd';
+
+interface DataType {
+ key: string;
+ name: string;
+ hits: number;
+ address: string;
+ tags: string[];
+}
+
+const SelectFiles = () => {
+ const columns: TableProps<DataType>['columns'] = [
+ {
+ title: 'Name',
+ dataIndex: 'name',
+ key: 'name',
+ render: (text) => <p>{text}</p>,
+ },
+
+ {
+ title: 'Hits',
+ dataIndex: 'hits',
+ key: 'hits',
+ width: 80,
+ },
+ {
+ title: 'View',
+ key: 'view',
+ width: 50,
+ render: () => <NavigationPointerIcon />,
+ },
+ ];
+
+ const rowSelection = {
+ onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
+ console.log(
+ `selectedRowKeys: ${selectedRowKeys}`,
+ 'selectedRows: ',
+ selectedRows,
+ );
+ },
+ getCheckboxProps: (record: DataType) => ({
+ disabled: record.name === 'Disabled User', // Column configuration not to be checked
+ name: record.name,
+ }),
+ };
+
+ const data: DataType[] = [
+ {
+ key: '1',
+ name: 'John Brown',
+ hits: 32,
+ address: 'New York No. 1 Lake Park',
+ tags: ['nice', 'developer'],
+ },
+ {
+ key: '2',
+ name: 'Jim Green',
+ hits: 42,
+ address: 'London No. 1 Lake Park',
+ tags: ['loser'],
+ },
+ {
+ key: '3',
+ name: 'Joe Black',
+ hits: 32,
+ address: 'Sydney No. 1 Lake Park',
+ tags: ['cool', 'teacher'],
+ },
+ ];
+ return (
+ <Table
+ columns={columns}
+ dataSource={data}
+ showHeader={false}
+ rowSelection={rowSelection}
+ />
+ );
+};
+
+export default SelectFiles;
diff --git a/web/src/pages/add-knowledge/constant.ts b/web/src/pages/add-knowledge/constant.ts
index f68a7d0f947c8a2e721fc8f764ccc37c7e0f3db8..fb0e55946466193477f5cad9ea674af589c0e362 100644
--- a/web/src/pages/add-knowledge/constant.ts
+++ b/web/src/pages/add-knowledge/constant.ts
@@ -4,6 +4,7 @@ export const routeMap = {
[KnowledgeRouteKey.Dataset]: 'Dataset',
[KnowledgeRouteKey.Testing]: 'Retrieval testing',
[KnowledgeRouteKey.Configuration]: 'Configuration',
+ [KnowledgeRouteKey.TempTesting]: 'Testing',
};
export enum KnowledgeDatasetRouteKey {
diff --git a/web/src/routes.ts b/web/src/routes.ts
index 2b7a251997a1826ef3cf771c1ae64bec11f23ff5..c2f8aebcf024b1ec1b8b9767d4bfde84fff100a4 100644
--- a/web/src/routes.ts
+++ b/web/src/routes.ts
@@ -46,6 +46,10 @@ const routes = [
path: '/knowledge/testing',
component: '@/pages/add-knowledge/components/knowledge-search',
},
+ {
+ path: '/knowledge/tempTesting',
+ component: '@/pages/add-knowledge/components/knowledge-testing',
+ },
],
},
{