web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx

import { normFile } from '@/utils/fileUtil';
import { PlusOutlined } from '@ant-design/icons';
import {
  Button,
  Flex,
  Form,
  Input,
  InputNumber,
  Radio,
  Select,
  Slider,
  Space,
  Upload,
} from 'antd';
import {
  useFetchKnowledgeConfigurationOnMount,
  useSubmitKnowledgeConfiguration,
} from './hooks';

import { FormInstance } from 'antd/lib';
import styles from './index.less';

const { Option } = Select;

const ConfigurationForm = ({ form }: { form: FormInstance }) => {
  const { submitKnowledgeConfiguration, submitLoading } =
    useSubmitKnowledgeConfiguration();
  const { parserList, embeddingModelOptions } =
    useFetchKnowledgeConfigurationOnMount(form);

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      form={form}
      name="validateOnly"
      layout="vertical"
      autoComplete="off"
      onFinish={submitKnowledgeConfiguration}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        name="name"
        label="Knowledge base name"
        rules={[{ required: true }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="avatar"
        label="Knowledge base photo"
        valuePropName="fileList"
        getValueFromEvent={normFile}
      >
        <Upload
          listType="picture-card"
          maxCount={1}
          beforeUpload={() => false}
          showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
        >
          <button style={{ border: 0, background: 'none' }} type="button">
            <PlusOutlined />
            <div style={{ marginTop: 8 }}>Upload</div>
          </button>
        </Upload>
      </Form.Item>
      <Form.Item name="description" label="Description">
        <Input />
      </Form.Item>
      <Form.Item
        label="Language"
        name="language"
        initialValue={'Chinese'}
        rules={[{ required: true, message: 'Please input your language!' }]}
      >
        <Select placeholder="select your language">
          <Option value="English">English</Option>
          <Option value="Chinese">Chinese</Option>
        </Select>
      </Form.Item>
      <Form.Item
        name="permission"
        label="Permissions"
        tooltip="coming soon"
        rules={[{ required: true }]}
      >
        <Radio.Group>
          <Radio value="me">Only me</Radio>
          <Radio value="team">Team</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item
        name="embd_id"
        label="Embedding Model"
        rules={[{ required: true }]}
        tooltip="xx"
      >
        <Select
          placeholder="Please select a country"
          options={embeddingModelOptions}
        ></Select>
      </Form.Item>
      <Form.Item
        name="parser_id"
        label="Chunk method"
        tooltip="xx"
        rules={[{ required: true }]}
      >
        <Select placeholder="Please select a country">
          {parserList.map((x) => (
            <Option value={x.value} key={x.value}>
              {x.label}
            </Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item noStyle dependencies={['parser_id']}>
        {({ getFieldValue }) => {
          const parserId = getFieldValue('parser_id');

          if (parserId === 'naive') {
            return (
              <Form.Item label="Max token number" tooltip="xxx">
                <Flex gap={20} align="center">
                  <Flex flex={1}>
                    <Form.Item
                      name={['parser_config', 'chunk_token_num']}
                      noStyle
                      initialValue={128}
                      rules={[
                        { required: true, message: 'Province is required' },
                      ]}
                    >
                      <Slider className={styles.variableSlider} max={2048} />
                    </Form.Item>
                  </Flex>
                  <Form.Item
                    name={['parser_config', 'chunk_token_num']}
                    noStyle
                    rules={[{ required: true, message: 'Street is required' }]}
                  >
                    <InputNumber
                      className={styles.sliderInputNumber}
                      max={2048}
                      min={0}
                    />
                  </Form.Item>
                </Flex>
              </Form.Item>
            );
          }
          return null;
        }}
      </Form.Item>
      <Form.Item>
        <div className={styles.buttonWrapper}>
          <Space>
            <Button htmlType="reset" size={'middle'}>
              Cancel
            </Button>
            <Button
              htmlType="submit"
              type="primary"
              size={'middle'}
              loading={submitLoading}
            >
              Save
            </Button>
          </Space>
        </div>
      </Form.Item>
    </Form>
  );
};

export default ConfigurationForm;