feat: add SelectFiles and add KnowledgeTesting (#60)

* feat: add KnowledgeTesting

* feat: add SelectFiles

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>

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>

web/src/constants/knowledge.ts

@@ -2,6 +2,7 @@ export enum KnowledgeRouteKey {
   Dataset = 'dataset',
   Testing = 'testing',
   Configuration = 'configuration',
+  TempTesting = 'tempTesting',
 }
 
 export enum RunningStatus {

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);

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) {

web/src/pages/add-knowledge/components/knowledge-testing/index.less

@@ -0,0 +1,5 @@
+.testingWrapper {
+  flex: 1;
+  background-color: @grayBackground;
+  height: 100%;
+}

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;

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;
+  }
+}

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;

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;
+  }
+}

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;

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;

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 {

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',
+          },
         ],
       },
       {