feat: test document chunks (#62)

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

@@ -2,6 +2,9 @@
   width: 350px;
   background-color: white;
   padding: 30px 20px;
+  overflow: auto;
+  height: calc(100vh - 160px);
+
   .historyTitle {
     padding: 30px 0 20px;
   }

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

@@ -3,6 +3,7 @@ import {
   Card,
   Divider,
   Flex,
+  Form,
   Input,
   Slider,
   SliderSingleProps,
@@ -11,50 +12,95 @@ import {
 } from 'antd';
 
 import { DeleteOutlined, HistoryOutlined } from '@ant-design/icons';
+import { FormInstance } from 'antd/lib';
 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>,
-  },
+  0: '0',
+  100: '1',
 };
 
-const TestingControl = () => {
+type FieldType = {
+  similarity_threshold?: number;
+  vector_similarity_weight?: number;
+  top_k?: number;
+  question: string;
+};
+
+const formatter = (value: number | undefined) => {
+  return typeof value === 'number' ? value / 100 : 0;
+};
+
+const tooltip = { formatter };
+
+interface IProps {
+  form: FormInstance;
+  handleTesting: () => Promise<any>;
+}
+
+const TestingControl = ({ form, handleTesting }: IProps) => {
+  const question = Form.useWatch('question', { form, preserve: true });
+
+  const buttonDisabled =
+    !question || (typeof question === 'string' && question.trim() === '');
+
   return (
     <section className={styles.testingControlWrapper}>
       <p>
         <b>Retrieval testing</b>
       </p>
-      <p>xxxx</p>
+      <p>Final step! After success, leave the rest to Infiniflow AI.</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>
-          }
+        <Form
+          name="testing"
+          layout="vertical"
+          form={form}
+          initialValues={{
+            similarity_threshold: 20,
+            vector_similarity_weight: 30,
+            top_k: 1024,
+          }}
         >
-          <Input.TextArea autoSize={{ minRows: 8 }}></Input.TextArea>
-          <Flex justify={'space-between'}>
-            <Tag>10/200</Tag>
-            <Button type="primary" size="small">
-              Testing
-            </Button>
-          </Flex>
-        </Card>
+          <Form.Item<FieldType>
+            label="Similarity threshold"
+            name={'similarity_threshold'}
+          >
+            <Slider marks={marks} defaultValue={0} tooltip={tooltip} />
+          </Form.Item>
+          <Form.Item<FieldType>
+            label="Vector similarity weight"
+            name={'vector_similarity_weight'}
+          >
+            <Slider marks={marks} defaultValue={0} tooltip={tooltip} />
+          </Form.Item>
+          <Form.Item<FieldType> label="Top k" name={'top_k'}>
+            <Slider marks={{ 0: 0, 2048: 2048 }} defaultValue={0} max={2048} />
+          </Form.Item>
+          <Card size="small" title="Test text">
+            <Form.Item<FieldType>
+              name={'question'}
+              rules={[
+                { required: true, message: 'Please input your question!' },
+              ]}
+            >
+              <Input.TextArea autoSize={{ minRows: 8 }}></Input.TextArea>
+            </Form.Item>
+            <Flex justify={'space-between'}>
+              <Tag>10/200</Tag>
+              <Button
+                type="primary"
+                size="small"
+                onClick={handleTesting}
+                disabled={buttonDisabled}
+              >
+                Testing
+              </Button>
+            </Flex>
+          </Card>
+        </Form>
       </section>
       <section>
         <p className={styles.historyTitle}>