add front end code (#27)

web/src/pages/add-knowledge/components/knowledge-file/createEFileModal.tsx

@@ -0,0 +1,72 @@
+import { connect } from 'umi';
+import i18n from 'i18next';
+import { useTranslation, Trans } from 'react-i18next'
+import { Input, Modal, Form } from 'antd'
+import { rsaPsw } from '@/utils'
+import styles from './index.less';
+
+type FieldType = {
+    name?: string;
+};
+const Index = ({ kFModel, dispatch, getKfList, kb_id }) => {
+    const { isShowCEFwModal } = kFModel
+    const { t } = useTranslation()
+    const handleCancel = () => {
+        dispatch({
+            type: 'kFModel/updateState',
+            payload: {
+                isShowCEFwModal: false
+            }
+        });
+    };
+    const [form] = Form.useForm()
+    const handleOk = async () => {
+        try {
+            const values = await form.validateFields();
+            dispatch({
+                type: 'kFModel/document_create',
+                payload: {
+                    name: values.name,
+                    kb_id
+                },
+                callback: () => {
+                    dispatch({
+                        type: 'kFModel/updateState',
+                        payload: {
+                            isShowCEFwModal: false
+                        }
+                    });
+                    getKfList && getKfList()
+                }
+            });
+
+        } catch (errorInfo) {
+            console.log('Failed:', errorInfo);
+        }
+    };
+
+    return (
+        <Modal title="Basic Modal" open={isShowCEFwModal} onOk={handleOk} onCancel={handleCancel}>
+            <Form
+                form={form}
+                name="validateOnly"
+                labelCol={{ span: 8 }}
+                wrapperCol={{ span: 16 }}
+                style={{ maxWidth: 600 }}
+                autoComplete="off"
+            >
+                <Form.Item<FieldType>
+                    label="文件名"
+                    name="name"
+                    rules={[{ required: true, message: 'Please input name!' }]}
+                >
+                    <Input />
+                </Form.Item>
+
+            </Form>
+        </Modal >
+
+
+    );
+}
+export default connect(({ kFModel, loading }) => ({ kFModel, loading }))(Index);

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

@@ -0,0 +1,24 @@
+.filter {
+    height: 32px;
+    display: flex;
+    margin: 10px 0;
+    justify-content: space-between;
+
+    .search {
+        flex: 1;
+    }
+
+    .operate {
+        width: 200px;
+    }
+}
+
+.img {
+    height: 16px;
+    width: 16px;
+    margin-right: 6px;
+}
+
+.column {
+    min-width: 200px
+}

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

@@ -0,0 +1,218 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { connect, useNavigate, useLocation } from 'umi'
+import { Space, Table, Tag, Input, Button, Switch, Popover, Dropdown, } from 'antd';
+import type { MenuProps } from 'antd';
+import { PlusOutlined, DownOutlined } from '@ant-design/icons'
+import { debounce } from 'lodash';
+import type { ColumnsType } from 'antd/es/table';
+import UploadFile from './upload'
+import CreateEPModal from './createEFileModal'
+import SegmentSetModal from './segmentSetModal'
+import styles from './index.less'
+
+interface DataType {
+    name: string;
+    chunk_num: string;
+    token_num: number;
+    update_date: string;
+    size: string;
+    status: string;
+    id: string;
+    parser_id: string
+}
+
+
+
+const Index: React.FC = ({ kFModel, dispatch, id }) => {
+    const { data, loading } = kFModel
+    const [inputValue, setInputValue] = useState('')
+    const [doc_id, setDocId] = useState('0')
+    const [parser_id, setParserId] = useState('0')
+    const changeValue = (value: string) => {
+        {
+            console.log(value)
+        }
+    }
+    const getKfList = () => {
+        dispatch({
+            type: 'kFModel/getKfList',
+            payload: {
+                kb_id: id
+            }
+        });
+    }
+    useEffect(() => {
+        if (id) {
+            getKfList()
+        }
+    }, [id])
+    const debounceChange = debounce(changeValue, 300)
+    const debounceCallback = useCallback((value: string) => debounceChange(value), [])
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const value = e.target.value
+        setInputValue(value)
+        debounceCallback(e.target.value)
+
+    }
+    const onChangeStatus = (e: boolean, doc_id: string) => {
+        dispatch({
+            type: 'kFModel/updateDocumentStatus',
+            payload: {
+                doc_id,
+                status: Number(e)
+            },
+            callback() {
+                getKfList()
+            }
+        });
+    }
+    const onRmDocument = () => {
+        dispatch({
+            type: 'kFModel/document_rm',
+            payload: {
+                doc_id
+            },
+            callback() {
+                getKfList()
+            }
+        });
+
+    }
+    const showCEFModal = () => {
+        dispatch({
+            type: 'kFModel/updateState',
+            payload: {
+                isShowCEFwModal: true
+            }
+        });
+    };
+
+    const showSegmentSetModal = () => {
+        dispatch({
+            type: 'kFModel/updateState',
+            payload: {
+                isShowSegmentSetModal: true
+            }
+        });
+    };
+    const actionItems: MenuProps['items'] = useMemo(() => {
+        return [
+            {
+                key: '1',
+                label: (
+                    <div>
+                        <UploadFile kb_id={id} getKfList={getKfList} />
+                    </div>
+
+                ),
+            },
+            {
+                key: '2',
+                label: (
+                    <div>
+                        <Button type="link" onClick={showCEFModal}> 导入虚拟文件</Button>
+                    </div>
+                ),
+                // disabled: true,
+            },
+        ]
+    }, [id]);
+    const chunkItems: MenuProps['items'] = [
+        {
+            key: '1',
+            label: (
+                <div>
+
+                    <Button type="link" onClick={showSegmentSetModal}> 分段设置</Button>
+                </div>
+
+            ),
+        },
+        {
+            key: '2',
+            label: (
+                <div>
+                    <Button type="link" onClick={onRmDocument}> 删除</Button>
+                </div>
+            ),
+            // disabled: true,
+        },
+    ]
+    const columns: ColumnsType<DataType> = [
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+            render: (text) => <a><img className={styles.img} src='https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg' alt="" />{text}</a>,
+            className: `${styles.column}`
+        },
+        {
+            title: '数据总量',
+            dataIndex: 'chunk_num',
+            key: 'chunk_num',
+            className: `${styles.column}`
+        },
+        {
+            title: 'Tokens',
+            dataIndex: 'token_num',
+            key: 'token_num',
+            className: `${styles.column}`
+        },
+        {
+            title: '文件大小',
+            dataIndex: 'size',
+            key: 'size',
+            className: `${styles.column}`
+        },
+        {
+            title: '状态',
+            key: 'status',
+            dataIndex: 'status',
+            className: `${styles.column}`,
+            render: (_, { status: string, id }) => (
+                <>
+                    <Switch defaultChecked={status === '1'} onChange={(e) => {
+                        onChangeStatus(e, id)
+                    }} />
+                </>
+            ),
+        },
+        {
+            title: 'Action',
+            key: 'action',
+            className: `${styles.column}`,
+            render: (_, record) => (
+                <Space size="middle">
+                    <Dropdown menu={{ items: chunkItems }} trigger={['click']}>
+                        <a onClick={() => {
+                            setDocId(record.id)
+                            setParserId(record.parser_id)
+                        }}>
+                            分段设置 <DownOutlined />
+                        </a>
+                    </Dropdown>
+                </Space>
+            ),
+        },
+    ];
+    return <>
+        <div className={styles.filter}>
+            <div className="search">
+                <Input placeholder="搜索" value={inputValue} allowClear onChange={handleInputChange} />
+            </div>
+            <div className="operate">
+                <Dropdown menu={{ items: actionItems }} trigger={['click']} >
+                    <a>
+                        导入文件 <DownOutlined />
+                    </a>
+                </Dropdown>
+
+            </div>
+        </div>
+        <Table rowKey='id' columns={columns} dataSource={data} loading={loading} pagination={false} scroll={{ scrollToFirstRowOnChange: true, x: true }} />
+        <CreateEPModal getKfList={getKfList} kb_id={id} />
+        <SegmentSetModal getKfList={getKfList} parser_id={parser_id} doc_id={doc_id} />
+    </>
+};
+
+export default connect(({ kFModel, loading }) => ({ kFModel, loading }))(Index);

web/src/pages/add-knowledge/components/knowledge-file/model.ts

@@ -0,0 +1,127 @@
+import { message } from 'antd';
+import { addParam } from '@/utils';
+import kbService from '@/services/kbService';
+
+const Model = {
+  namespace: 'kFModel',
+  state: {
+    isShowCEFwModal: false,
+    isShowTntModal: false,
+    isShowSegmentSetModal: false,
+    loading: false,
+    tenantIfo: {}
+  },
+  subscriptions: {
+    setup({ dispatch, history }) {
+      history.listen(location => {
+      });
+    }
+  },
+  effects: {
+    * createKf({ payload = {}, callback }, { call, put }) {
+      const { data, response } = yield call(kbService.createKb, payload);
+      const { retcode, data: res, retmsg } = data
+      if (retcode === 0) {
+
+        message.success('创建成功！');
+      }
+    },
+    * updateKf({ payload = {}, callback }, { call, put }) {
+      const { data, response } = yield call(kbService.updateKb, payload);
+      const { retcode, data: res, retmsg } = data
+      if (retcode === 0) {
+        message.success('修改成功！');
+
+      }
+    },
+    *getKfDetail({ payload = {}, callback }, { call, put }) {
+      const { data, response } = yield call(kbService.get_kb_detail, payload);
+      const { retcode, data: res, retmsg } = data
+      if (retcode === 0) {
+        // localStorage.setItem('userInfo',res.)
+        callback && callback(res)
+      }
+    },
+    *getKfList({ payload = {} }, { call, put }) {
+      yield put({
+        type: 'updateState',
+        payload: {
+          loading: true
+        }
+      });
+      const { data, response } = yield call(kbService.get_document_list, payload);
+      const { retcode, data: res, retmsg } = data
+      yield put({
+        type: 'updateState',
+        payload: {
+          loading: false
+        }
+      });
+      if (retcode === 0) {
+        yield put({
+          type: 'updateState',
+          payload: {
+            data: res
+          }
+        });
+      }
+    },
+    *updateDocumentStatus({ payload = {}, callback }, { call, put }) {
+      yield put({
+        type: 'updateState',
+        payload: {
+          loading: true
+        }
+      });
+      const { data, response } = yield call(kbService.document_change_status, payload);
+      const { retcode, data: res, retmsg } = data
+      if (retcode === 0) {
+        message.success('修改成功！');
+        yield put({
+          type: 'updateState',
+          payload: {
+            loading: false
+          }
+        });
+        callback && callback()
+      }
+
+    },
+    *document_rm({ payload = {}, callback }, { call, put }) {
+      const { data, response } = yield call(kbService.document_rm, payload);
+      const { retcode, data: res, retmsg } = data
+      if (retcode === 0) {
+        message.success('删除成功！');
+        callback && callback()
+      }
+
+    },
+    *document_create({ payload = {}, callback }, { call, put }) {
+      const { data, response } = yield call(kbService.document_create, payload);
+      const { retcode, data: res, retmsg } = data
+      if (retcode === 0) {
+        message.success('创建成功！');
+        callback && callback()
+      }
+
+    },
+    *document_change_parser({ payload = {}, callback }, { call, put }) {
+      const { data, response } = yield call(kbService.document_change_parser, payload);
+      const { retcode, data: res, retmsg } = data
+      if (retcode === 0) {
+        message.success('修改成功！');
+        callback && callback()
+      }
+
+    },
+  },
+  reducers: {
+    updateState(state, { payload }) {
+      return {
+        ...state,
+        ...payload
+      };
+    }
+  }
+};
+export default Model;

web/src/pages/add-knowledge/components/knowledge-file/segmentSetModal.tsx

@@ -0,0 +1,84 @@
+import { connect } from 'umi';
+import i18n from 'i18next';
+import { useTranslation, Trans } from 'react-i18next'
+import { Input, Modal, Form, Tag, Space } from 'antd'
+import { rsaPsw } from '@/utils'
+import { useEffect, useState } from 'react';
+import styles from './index.less';
+const { CheckableTag } = Tag;
+type FieldType = {
+    name?: string;
+};
+const Index = ({ kFModel, settingModel, dispatch, getKfList, parser_id, doc_id }) => {
+    const [selectedTag, setSelectedTag] = useState('')
+    const { tenantIfo = {} } = settingModel
+    const { parser_ids = '' } = tenantIfo
+    useEffect(() => {
+        dispatch({
+            type: 'settingModel/getTenantInfo',
+            payload: {
+            }
+        });
+        setSelectedTag(parser_id)
+    }, [parser_id])
+    const { isShowSegmentSetModal } = kFModel
+    const { t } = useTranslation()
+    const handleCancel = () => {
+        dispatch({
+            type: 'kFModel/updateState',
+            payload: {
+                isShowSegmentSetModal: false
+            }
+        });
+    };
+    const handleOk = () => {
+        console.log(1111, selectedTag)
+        dispatch({
+            type: 'kFModel/document_change_parser',
+            payload: {
+                parser_id: selectedTag,
+                doc_id
+            },
+            callback: () => {
+                dispatch({
+                    type: 'kFModel/updateState',
+                    payload: {
+                        isShowSegmentSetModal: false
+                    }
+                });
+                getKfList && getKfList()
+            }
+        });
+    };
+
+    const handleChange = (tag: string, checked: boolean) => {
+        const nextSelectedTag = checked
+            ? tag
+            : selectedTag;
+        console.log('You are interested in: ', nextSelectedTag);
+        setSelectedTag(nextSelectedTag);
+    };
+
+    return (
+        <Modal title="Basic Modal" open={isShowSegmentSetModal} onOk={handleOk} onCancel={handleCancel}>
+            <Space size={[0, 8]} wrap>
+                <div className={styles.tags}>
+                    {
+                        parser_ids.split(',').map((tag: string) => {
+                            return (<CheckableTag
+                                key={tag}
+                                checked={selectedTag === tag}
+                                onChange={(checked) => handleChange(tag, checked)}
+                            >
+                                {tag}
+                            </CheckableTag>)
+                        })
+                    }
+                </div>
+            </Space>
+        </Modal >
+
+
+    );
+}
+export default connect(({ kFModel, settingModel, loading }) => ({ kFModel, settingModel, loading }))(Index);

web/src/pages/add-knowledge/components/knowledge-file/upload.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { connect } from 'umi'
+import { UploadOutlined } from '@ant-design/icons';
+import type { UploadProps } from 'antd';
+import { Button, message, Upload } from 'antd';
+import uploadService from '@/services/uploadService'
+
+
+const Index = ({ kb_id, getKfList }) => {
+    console.log(kb_id)
+    const createRequest = async function ({ file, onSuccess, onError }) {
+        const { retcode, data } = await uploadService.uploadFile(file, kb_id);
+        if (retcode === 0) {
+            onSuccess(data, file);
+
+        } else {
+            onError(data);
+        }
+        getKfList && getKfList()
+    };
+    const uploadProps: UploadProps = {
+        customRequest: createRequest,
+        showUploadList: false,
+    };
+    return (<Upload {...uploadProps} >
+        <Button type="link">导入文件</Button>
+    </Upload>)
+}
+
+export default connect(({ kFModel, settingModel, loading }) => ({ kFModel, settingModel, loading }))(Index);

web/src/pages/add-knowledge/components/knowledge-search/index.tsx

@@ -0,0 +1,3 @@
+export default () => {
+    return <div>知识库搜索</div>
+}

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

@@ -0,0 +1,24 @@
+.tags {
+    margin-bottom: 24px;
+}
+
+.preset {
+    display: flex;
+    height: 80px;
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    padding: 5px;
+    margin-bottom: 24px;
+
+    .left {
+        flex: 1;
+
+    }
+
+    .right {
+        width: 100px;
+        border-left: 1px solid rgba(0, 0, 0, 0.4);
+        margin: 10px 0px;
+        padding: 5px;
+    }
+}

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

@@ -0,0 +1,192 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate, connect } from 'umi'
+import { Button, Form, Input, InputNumber, Radio, Select, Tag, Space, Avatar, Divider, List, Skeleton } from 'antd';
+import styles from './index.less'
+const { CheckableTag } = Tag;
+const layout = {
+    labelCol: { span: 8 },
+    wrapperCol: { span: 16 },
+    labelAlign: 'left' as const
+};
+const { Option } = Select
+/* eslint-disable no-template-curly-in-string */
+const validateMessages = {
+    required: '${label} is required!',
+    types: {
+        email: '${label} is not a valid email!',
+        number: '${label} is not a valid number!',
+    },
+    number: {
+        range: '${label} must be between ${min} and ${max}',
+    },
+};
+/* eslint-enable no-template-curly-in-string */
+
+
+interface DataType {
+    gender: string;
+    name: {
+        title: string;
+        first: string;
+        last: string;
+    };
+    email: string;
+    picture: {
+        large: string;
+        medium: string;
+        thumbnail: string;
+    };
+    nat: string;
+}
+const tags = [{ title: '研报' }, { title: '法律' }, { title: '简历' }, { title: '说明书' }, { title: '书籍' }, { title: '演讲稿' }]
+
+const Index: React.FC = ({ settingModel, kSModel, dispatch, ...props }) => {
+    let navigate = useNavigate();
+    const { tenantIfo = {} } = settingModel
+    const { parser_ids = '', embd_id = '' } = tenantIfo
+    const { id = '' } = props
+    const [form] = Form.useForm();
+
+    useEffect(() => {
+        dispatch({
+            type: 'settingModel/getTenantInfo',
+            payload: {
+            }
+        });
+        if (id) {
+
+            dispatch({
+                type: 'kSModel/getKbDetail',
+                payload: {
+                    kb_id: id
+                },
+                callback(detail: any) {
+                    console.log(detail)
+                    const { description, name, permission, embd_id } = detail
+                    form.setFieldsValue({ description, name, permission, embd_id })
+                    setSelectedTag(detail.parser_id)
+                }
+            });
+        }
+
+    }, [id])
+    const [selectedTag, setSelectedTag] = useState('')
+    const values = Form.useWatch([], form);
+    console.log(values, '......变化')
+    const onFinish = () => {
+        form.validateFields().then(
+            () => {
+                if (id) {
+                    dispatch({
+                        type: 'kSModel/updateKb',
+                        payload: {
+                            ...values,
+                            parser_id: selectedTag,
+                            kb_id: id,
+                            embd_id: undefined
+                        }
+                    });
+                } else {
+                    dispatch({
+                        type: 'kSModel/createKb',
+                        payload: {
+                            ...values,
+                            parser_id: selectedTag
+                        },
+                        callback(id: string) {
+                            navigate(`/knowledge/add/setting?activeKey=file&id=${id}`);
+                        }
+                    });
+                }
+            },
+            () => {
+
+            },
+        );
+
+
+
+    };
+
+    const handleChange = (tag: string, checked: boolean) => {
+        const nextSelectedTag = checked
+            ? tag
+            : selectedTag;
+        console.log('You are interested in: ', nextSelectedTag);
+        setSelectedTag(nextSelectedTag);
+    };
+
+    return <Form
+        {...layout}
+        form={form}
+        name="validateOnly"
+        style={{ maxWidth: 1000, padding: 14 }}
+    >
+        <Form.Item name='name' label="知识库名称" rules={[{ required: true }]}>
+            <Input />
+        </Form.Item>
+        <Form.Item name='description' label="知识库描述">
+            <Input.TextArea />
+        </Form.Item>
+        <Form.Item name="permission" label="可见权限">
+            <Radio.Group>
+                <Radio value="me">只有我</Radio>
+                <Radio value="team">所有团队成员</Radio>
+            </Radio.Group>
+        </Form.Item>
+        <Form.Item
+            name="embd_id"
+            label="Embedding 模型"
+            hasFeedback
+            rules={[{ required: true, message: 'Please select your country!' }]}
+        >
+            <Select placeholder="Please select a country" disabled={id}>
+                {embd_id.split(',').map((item: string) => {
+                    return <Option value={item} key={item}>{item}</Option>
+                })}
+
+            </Select>
+        </Form.Item>
+        <div style={{ marginTop: '5px' }}>
+            修改Embedding 模型，请去<span style={{ color: '#1677ff' }}>设置</span>
+        </div>
+        <Space size={[0, 8]} wrap>
+            <div className={styles.tags}>
+                {
+                    parser_ids.split(',').map((tag: string) => {
+                        return (<CheckableTag
+                            key={tag}
+                            checked={selectedTag === tag}
+                            onChange={(checked) => handleChange(tag, checked)}
+                        >
+                            {tag}
+                        </CheckableTag>)
+                    })
+                }
+            </div>
+        </Space>
+        <Space size={[0, 8]} wrap>
+
+        </Space>
+        <div className={styles.preset}>
+            <div className={styles.left}>
+                xxxxx文章
+            </div>
+            <div className={styles.right}>
+                预估份数
+            </div>
+        </div>
+        <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
+            <Button type="primary" onClick={onFinish}>
+                保存并处理
+            </Button>
+            <Button htmlType="button" style={{ marginLeft: '20px' }}>
+                取消
+            </Button>
+        </Form.Item>
+    </Form>
+}
+
+
+
+export default connect(({ settingModel, kSModel, loading }) => ({ settingModel, kSModel, loading }))(Index);

web/src/pages/add-knowledge/components/knowledge-setting/model.ts

@@ -0,0 +1,53 @@
+import { message } from 'antd';
+import { addParam } from '@/utils';
+import kbService from '@/services/kbService';
+
+const Model = {
+  namespace: 'kSModel',
+  state: {
+    isShowPSwModal: false,
+    isShowTntModal: false,
+    loading: false,
+    tenantIfo: {}
+  },
+  subscriptions: {
+    setup({ dispatch, history }) {
+      history.listen(location => {
+      });
+    }
+  },
+  effects: {
+    * createKb({ payload = {}, callback }, { call, put }) {
+      const { data, response } = yield call(kbService.createKb, payload);
+      const { retcode, data: res, retmsg } = data
+      if (retcode === 0) {
+        message.success('创建知识库成功！');
+        callback && callback(res.kb_id)
+      }
+    },
+    * updateKb({ payload = {}, callback }, { call, put }) {
+      const { data, response } = yield call(kbService.updateKb, payload);
+      const { retcode, data: res, retmsg } = data
+      if (retcode === 0) {
+        message.success('更新知识库成功！');
+      }
+    },
+    *getKbDetail({ payload = {}, callback }, { call, put }) {
+      const { data, response } = yield call(kbService.get_kb_detail, payload);
+      const { retcode, data: res, retmsg } = data
+      if (retcode === 0) {
+        // localStorage.setItem('userInfo',res.)
+        callback && callback(res)
+      }
+    },
+  },
+  reducers: {
+    updateState(state, { payload }) {
+      return {
+        ...state,
+        ...payload
+      };
+    }
+  }
+};
+export default Model;