chat-admin-web/src/pages/deepseek/knowledgeLib/list/components/InfoModal.tsx

import * as React from 'react';
import { Modal, Spin, Form, Input, Select, message } from 'antd';
import { apis, CreateOrModifyKnowledgeLibApiParams } from '@/apis';

const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;

interface Props {
    id: string,
    open: boolean,
    onClickConfirm: (id: string, data: CreateOrModifyKnowledgeLibApiParams) => Promise<any>,
    onClickCancel: () => void,
};

const InfoModal: React.FC<Props> = (props: Props) => {
    const {
        id,
        open,
        onClickConfirm,
        onClickCancel
    } = props;

    const [form] = Form.useForm();

    const [loading, setLoading] = React.useState<boolean>(false);

    type EmbeddingList = {
        label: string,
        value: string,
    }[];
    type AppTypeList = {
        label: string,
        value: string,
        children: {
            label: string,
            value: string,
        }[],
    }[];
    const [embeddingList, setEmbeddingList] = React.useState<EmbeddingList>([]);
    const [appVisibleList, setAppVisibleList] = React.useState<AppTypeList>([]); // 是否公开 

    const getTitle = () => {
        if (id) {
            return '修改知识库';
        } else {
            return '创建知识库';
        }
    };

    // 获取向量化模型列表
    const fetchEmbeddingList = async () => {
        try {
            const res = await apis.fetchEmbeddingList();
            const list = res.data.list.map((item: any) => {
                return {
                    label: item.name,
                    value: item.id,
                }
            });
            setEmbeddingList(list);
        } catch (error: any) {
            console.error(error);
        }
    }

    // 获取知识库详情
    const fetchDetail = async () => {
        try {
            const res = await apis.fetchTakaiKnowledgeLibDetail(props.id);
            const { name, embeddingId, description,visible } = res.data;
            form.setFieldsValue({
                name: name,
                embeddingId: embeddingId,
                description: description,
                visible: visible, // 是否公开
            });
        } catch (error: any) {
            message.error(error.msg);
        }
    };
    // 获取是否公开类型
    const fetchAppVisible = async (id: string) => {
        try {
            const res = await apis.fetchTakaiAppTypeList('app_visible');
            console.log('res.data', res.data)
            const list = res.data.map((item: any) => {
                return {
                    label: item.dictLabel,
                    value: item.dictValue,
                }
            });
            setAppVisibleList(list);
            if (!id) {
                form.setFieldsValue({
                    visible: list[0]?.value
                });
            }
        } catch (error: any) {
            console.error(error);
        }
    }
    const init = async () => {
        setLoading(true);
        // await fetchEmbeddingList();
        if (props.id) {
            await fetchDetail();
        }
        await fetchAppVisible(props.id);
        setLoading(false);
    };

    React.useEffect(() => {
        init();
    }, []);

    // 点击确定
    const handleClickConfirm = () => {
        form.validateFields().then(async (values) => {
            const data = { ...values };
            await onClickConfirm(props.id, data);
        }).catch((error) => {
            console.error(error);
        });
    };

    return (
        <Modal
            width={500}
            title={getTitle()}
            destroyOnClose={true}
            maskClosable={false}
            centered={true}
            open={open}
            onOk={handleClickConfirm}
            onCancel={onClickCancel}
        >
            <Spin spinning={loading}>
                <Form form={form} layout='vertical'>
                    <FormItem
                        label='知识库名称'
                        name='name'
                        rules={[{ required: true, message: '知识库名称不能为空', whitespace: true }]}
                    >
                        <Input placeholder='请输入知识库名称' />
                    </FormItem>
                    <FormItem
                        label='向量化模型'
                        name='embeddingId'
                        rules={[{ required: true, message: '向量化模型不能为空' }]}
                    >
                        {
                            getTitle() === '创建知识库' &&
                            <Select
                                style={{ width: '100%' }}
                                placeholder='请选择向量化模型'
                                allowClear={true}
                            >
                                <Option value='multilingual-e5-large-instruct'>multilingual-e5-large-instruct</Option>
                            </Select>
                        }

                        {
                            getTitle() === '修改知识库' &&
                            <Select
                                style={{ width: '100%' }}
                                placeholder='请选择向量化模型'
                                allowClear={true}
                                disabled={true}
                            >
                                <Option value='multilingual-e5-large-instruct'>multilingual-e5-large-instruct</Option>
                            </Select>
                        }

                    </FormItem>
                    <FormItem
                        label='是否公开'
                        name='visible'
                    >
                        <Select
                            placeholder='请选择是否公开'
                            allowClear={true}
                        >
                            {
                                appVisibleList.map((item, index) => {
                                    return <Option value={item.value} key={index}>
                                        {item.label}
                                    </Option>
                                })
                            }
                        </Select>
                    </FormItem>
                    <FormItem
                        label='知识库描述'
                        name='description'
                        rules={[{ required: true, message: '知识库描述不能为空', whitespace: true }]}
                    >
                        <TextArea
                            placeholder='知识库描述需要描述清楚知识库中的文件内容，搭建应用时模型会将此作为判断是否获取知识库内容的依据'
                            showCount={true}
                            rows={4}
                            maxLength={100}
                        />
                    </FormItem>
                    <div style={{ width: '100%', height: 10 }}></div>
                </Form>
            </Spin>
        </Modal>
    );
};

export default InfoModal;