xiaozhi/jk-rag-platform/src/pages/questionAnswer/info/index.tsx

import * as React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { LeftOutlined } from '@ant-design/icons';
import './style.scss';
import {
    Button, Input, Form, Divider, Splitter, Select, InputNumber, InputNumberProps,
    Radio, Switch, Row, Col, Slider, Space, RadioChangeEvent,
    Spin, message, Typography, Tooltip,
    Cascader,
    Tag, Modal, Table, TablePaginationConfig, Drawer, ColorPicker
} from 'antd';
import type { TableProps } from 'antd';

import { PlusCircleOutlined, MinusCircleOutlined, ArrowLeftOutlined, InfoCircleOutlined, CloseCircleOutlined, LinkOutlined, FileDoneOutlined } from '@ant-design/icons';
import * as AllIcons from '@ant-design/icons';
import IconPicker from './component/IconPicker';
import { apis } from '@/apis';
import router from '@/router';
import LocalStorage from '@/LocalStorage';
import Chat from '@/components/chat';
import { useQuestionAnswerInfoStore } from './store';
import DrawerIndex from '@/pages/knowledgeLib/detail/drawerIndex'

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

const QuestionAnswerInfo: React.FC = () => {

    const { 
        page, 
        sourceData, 
        pageLoading,
        setPageLoading,
        setPage,
        setSourceData,
        fetchUserListApi,
    } = useQuestionAnswerInfoStore();
    const navigate = useNavigate();


    const [form] = Form.useForm();
    const [iconPickerVisible, setIconPickerVisible] = React.useState(false);
    const [selectedIcon, setSelectedIcon] = React.useState<string | null>(null);
    const [previewBg, setPreviewBg] = React.useState<string>('#ffffff');

    const getContrastColor = (hex: string) => {
        // remove #
        const c = hex.replace('#', '');
        const r = parseInt(c.substring(0, 2), 16);
        const g = parseInt(c.substring(2, 4), 16);
        const b = parseInt(c.substring(4, 6), 16);
        // relative luminance
        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
        return luminance > 0.6 ? '#000' : '#fff';
    }

    const presetColors = ['#1677ff', '#52c41a', '#fa8c16', '#f5222d', '#722ed1', '#ffffff', '#f0f0f0'];
    const presetItems = [{ label: '', colors: presetColors }];

    // top_p
    const [topPValue, setTopPValue] = React.useState(0.1);
    const [topKValue, setTopKValue] = React.useState(1);


    const TopPDecimalStep: React.FC = () => {

        const onChange: InputNumberProps['onChange'] = (value) => {
            if (Number.isNaN(value)) {
                return;
            }
            setTopPValue(value as number);
        };

        return (
            <Row>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={1}
                        onChange={onChange}
                        // value={typeof topPValue === 'number' ? topPValue : 0}
                        value={topPValue}
                        step={0.1}
                    />
                </Col>
                <Col span={4}>
                    <InputNumber
                        min={0}
                        max={1}
                        className='form-input-number-small'
                        step={0.01}
                        value={topPValue}
                        onChange={onChange}
                    />
                </Col>
            </Row>
        );
    };
    const [tempValue, setTempValue] = React.useState(0.01);
    // temperature
    const TempDecimalStep: React.FC = () => {
        const onChange: InputNumberProps['onChange'] = (value) => {
            if (Number.isNaN(value)) {
                return;
            }
            setTempValue(value as number);
        };

        return (
            <Row>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={1}
                        onChange={onChange}
                        // value={typeof tempValue === 'number' ? tempValue : 0}
                        value={tempValue}
                        step={0.01}
                    />
                </Col>
                <Col span={4}>
                    <InputNumber
                        min={0}
                        max={1}
                        className='form-input-number-small'
                        step={0.01}
                        value={tempValue}
                        onChange={onChange}
                    />
                </Col>
            </Row>
        );
    };

    type ModelList = {
        label: string,
        value: string,
    }[];

    type KnowledgeList = {
        label: string,
        value: string,
        createBy: string,
    }[];

    type AppTypeList = {
        label: string,
        value: string,
        children: {
            label: string,
            value: string,
        }[],
    }[];
    const tagRender = (props: any) => {
        const { label, value, closable, onClose } = props;
        return (
            <Tag
                color="blue"
                closable={closable}
                onClose={onClose} // 保留原有的删除事件
                style={{ marginRight: 4 }}
            >
                {label}
                {/* 在删除按钮后添加自定义图标 */}
                <LinkOutlined style={{
                    marginLeft: 4,
                    fontSize: 12,
                    cursor: 'pointer',
                    color: '#FF9500',
                    fontWeight: 'bold',
                }}
                    onMouseDown={(e) => {
                        e.stopPropagation();
                        e.preventDefault();
                    }}
                    onMouseUp={(e) => {
                        e.stopPropagation();
                        e.preventDefault();
                    }}
                    // 自定义图标点击事件
                    onClick={(e) => {
                        // 阻止事件冒泡到Tag，避免触发删除
                        e.stopPropagation();
                        e.preventDefault();
                        knowledgeList.forEach((item) => {
                            if (item.value === value) {
                                // router.navigate({ pathname: `/deepseek/knowledgeLib/${value}/${item.createBy}`,},);
                                setDrawerItem(item);
                                setOpenDrawer(true)
                                e.stopPropagation();
                            }
                        });
                        // console.log('点击了额外图标，当前选项值：', value,props);
                        // 这里可以添加你的业务逻辑，如：打开详情、编辑等
                    }} />
            </Tag>
        );
    };

    const [step, setStep] = React.useState(1);
    const [modelList, setModelList] = React.useState<ModelList>([]);
    const [knowledgeList, setKnowledgeList] = React.useState<KnowledgeList>([]);
    const [isVisible, setIsVisible] = React.useState(true);
    const [isVisibleCus, setIsVisibleCus] = React.useState(false);
    const [isVisibleSlice, setIsVisibleSlice] = React.useState(false);
    const [isVisibleRerank, setIsVisibleRerank] = React.useState(true);
    const [isDeepThinkVisible, setIsDeepThinkVisible] = React.useState(true);
    const [name, setName] = React.useState('');
    const [appTypeList, setAppTypeList] = React.useState<AppTypeList>([]);
    const [appVisibleList, setAppVisibleList] = React.useState<AppTypeList>([]); // 是否公开
    const [visibleFlag, setVisibleFlag] = React.useState<string | number>(0); // 是否公开用来判断是否展示VIP用户
    const [updateFlag, setUpdateFlag] = React.useState<boolean>();
    const [createFlag, setCreateFlag] = React.useState<boolean>();
    const [appProjectList, setAppProjectList] = React.useState<AppTypeList>([]);
    const [isAppPro, setIsAppPro] = React.useState<boolean>(false);
    const [appId, setAppId] = React.useState<string>('');
    const [fetchUserTypeList, setFetchUserTypeList] = React.useState<AppTypeList>([]); // 用户类型
    const [userName, setUserName] = React.useState<string>(''); // 用户名
    const [userNickName, setUserNickName] = React.useState<string>(''); // 用户昵称
    const [userType, setUserType] = React.useState<string>(''); // 用户类型
    const [vipList, setVipList] = React.useState<any>([]); // 用户列表
    const [infoDetail, setinfoDetail] = React.useState<any>(null);// 知识库详情
    const [parameter,setParameter] = React.useState<any>(null);
    const style: React.CSSProperties = {
        display: 'flex',
        flexDirection: 'column',
        gap: 8,
        width: 300,
    };
    const userInfo = LocalStorage.getUserInfo();
    const userId = (userInfo?.id ?? '').toString();

    const location = useLocation();

    const [modeList,setModeList] = React.useState<any>([]); // 模型列表数据
    const [modeOldList,setModeOldList] = React.useState<any>([]); // 模型列表数据（原始）
    // 获取调用模型的列表数据
    const onFetchRerankModelList = async () => {
        const res = await apis.fetchRerankModelList();
        if(res && res.data){
            const list = res.data.map((item: any) => {
                return {
                    label: item.model,
                    value: item.model,
                }
            })
            setModeList(list);
            setModeOldList(res.data);
        }
    }



    const init = async (id: string) => {
        await Promise.all([
            api.fetchKnowlegde(),
            api.fetchAppType(),
            // api.fetchModelList(),
            api.fetchAppProType(),
            api.fetchAppVisible(id)
        ])
        if (id) {
            await api.fetchDetail(id);
        }
        onFetchUserListApi('', '', '');
        onFetchRerankModelList();
        await api.fetchUserType();
    }
    React.useEffect(() => {
        const id = location?.state?.id;
        init(id);
        const uFlag = LocalStorage.getStatusFlag('deepseek:application:update');
        setUpdateFlag(uFlag);
        setParameter(LocalStorage.getStatusFlag('appCenter:questionAnswer:parameter'));
        setEditPrompt(LocalStorage.getStatusFlag('appCenter:questionAnswer:parameter'))
        setCreateFlag(true);
    }, []);

    // 定义一个状态来存储输入框数组
    const [inputs, setInputs] = React.useState([{ id: 1, value: '' }]);



    // 添加新输入框的函数
    const addInput = () => {
        const newId = inputs.length + 1; // 生成新的唯一ID
        setInputs([...inputs, { id: newId, value: '' }]);
    };

    // 删除输入框（按id删除+最少数量限制）
    const delInput = (id: number) => {
        if (inputs.length <= 1) {
            message.warning("至少保留1个预设问题");
            return;
        }
        setInputs(inputs.filter(input => input.id !== id));
    };

    // 处理输入变更的函数
    const handleChange = (id: number, value: string) => {
        setInputs(inputs.map(input => (input.id === id ? { ...input, value } : input)));
    };

    const handleAppChange = (typeId: number) => {
        console.log('typeId', typeId)
        if (typeId === 62) { // 根据实际值进行判断
            setIsAppPro(true);
        } else {
            setIsAppPro(false);
        }
    };


    const onChangeShow = (checked: boolean) => {
        console.log(`switch to ${checked}`);
    };

    const onChangeCount = (value: string) => {
        if (value === 'fixed') {
            setIsVisibleSlice(!isVisibleSlice);
        } else {
            setIsVisibleSlice(false);
        }
    };

    // 召回方式
    const onChangeRecallMethod = (e: RadioChangeEvent) => {

    };

    // 获取应用详情
    const api = {
        fetchDetail: async (app_id: string) => {
            setPageLoading(true);
            try {
                const res = await apis.fetchTakaiApplicationDetail(app_id);
                const sd = res.data.questionlist.map((item: any, index: number) => {
                    return {
                        "id": index + 1,
                        "value": item.question,
                    }
                });

                const info = res.data.detail;

                setAppId(info.appId);

                setTopPValue(info.topP as number);
                setTempValue(info.temperature as number);
                setName(info.name);
                setinfoDetail(res.data);
                interface Item2 {
                    index_type_id: number,
                    knowledge_id: string
                }

                interface Item {
                    show_recall_result: boolean,
                    recall_method: string,
                    rerank_status: boolean,
                    slice_config_type: string,
                    slice_count: number,
                    param_desc: string,
                    rerank_model_name: string,
                    is_multi_round: string,
                    multi_round: string,
                    rerank_index_type_list: [Item2],
                    recall_index_type_list: [Item2]
                }

                const data_info: Item = JSON.parse(info.knowledgeInfo);

                if (data_info.param_desc === 'custom') {

                    setIsVisibleCus(!isVisibleCus);    //自定义回答风格
                }
                if (data_info.rerank_status === true) {
                    setIsVisibleRerank(data_info.rerank_status) //模型
                }
                //召回切片数量
                if (data_info.slice_config_type === 'fixed') {
                    setIsVisibleSlice(!isVisibleSlice);
                } else {
                    setIsVisibleSlice(false);
                }

                if (info.typeId === 62) {
                    setIsAppPro(true);
                } else {
                    setIsAppPro(false);
                }

                if (info.model === 'Qwen3-30B') {
                    setIsDeepThinkVisible(true);
                } else {
                    setIsDeepThinkVisible(false);
                }

                form.setFieldsValue({
                    id: info.id,
                    name: info.name,  //应用名称
                    desc: info.desc,  //应用描述
                    prompt: info.prompt, //应用提示语
                    topP: info.topP as string, //topP
                    topK: info.topK as number, //topK
                    temperature: info.temperature as number, //温度
                    knowledge_ids: info.knowledgeIds,
                    model: info.model,
                    isDeepThink: 'N',
                    iconColor: info.iconColor,
                    iconType: info.iconType,
                    questionList: sd, //问题列表
                    max_token: info.maxToken, //应用最大token
                    updateDate: info.updateDate, // 更新时间
                    appProId: info.appProId,// 项目
                    typeId: info.typeId, //应用类型
                    visible: info.visible || '0', //是否公开
                    sort: info.sort || null, //显示顺序
                    param_desc: data_info.param_desc, //回答风格
                    show_recall_result: data_info.show_recall_result, //是否展示召回结果
                    recall_method: data_info.recall_method, //召回方式
                    rerank_status: data_info.rerank_status, //开启rerank
                    rerank_model_name: data_info.rerank_model_name, //模型名称
                    slice_config_type: data_info.slice_config_type, // 召回切片数量
                    slice_count: data_info.slice_count, // 切片数量
                    is_multi_round: data_info.is_multi_round==='Y'?true:false, // 多轮对话
                    multi_round: data_info.multi_round, // 多轮对话
                    groupVisible: info.groupVisible === '1' ? true : false,// 集团是否公开

                })
                if(data_info.is_multi_round === 'Y'){
                    setIsMultiRound(true);
                }else{
                    setIsMultiRound(false);
                }
                // 如果接口返回 iconType，设置选中图标显示
                if (info.iconType) {
                    setSelectedIcon(info.iconType);
                }
                if (info.iconColor) {
                    setPreviewBg(info.iconColor);
                    form.setFieldsValue({ iconColor: info.iconColor });
                }
                setVisibleFlag(info.visible || '0')
                if (info.vipList && info.vipList.length > 0) {
                    setVipList(info.vipList);
                }
                if (sd.length > 0) {
                    setInputs(sd);
                }
            } catch (error) {
                console.error(error);
            } finally {
                setPageLoading(false);
            }
        },

        //获取知识库列表
        fetchKnowlegde: async () => {
            try {
                const res = await apis.fetchTakaiKnowledgeList();
                const list = res.data.map((item: any) => {
                    return {
                        label: item.name,
                        value: item.knowledgeId,
                        createBy: item.createBy,
                    }
                });

                setKnowledgeList(list);
            } catch (error: any) {
                console.error(error);
            }
        },

        // 获取应用类型
        fetchAppType: async () => {
            try {
                const res = await apis.fetchTakaiAppTypeList('app_type');
                const list = res.data.map((item: any) => {
                    return {
                        label: item.dictLabel,
                        value: item.dictCode,
                    }
                });
                setAppTypeList(list);
            } catch (error: any) {
                console.error(error);
            }
        },
        // 获取是否公开类型
        fetchAppVisible: async (id: string) => {
            try {
                const res = await apis.fetchTakaiAppTypeList('app_visible');
                const list = res.data.map((item: any) => {
                    return {
                        label: item.dictLabel,
                        value: item.dictValue,
                    }
                });
                setAppVisibleList(list);
                if (!id) {
                    form.setFieldsValue({
                        visible: list[0]?.value
                    });
                    setVisibleFlag(list[0]?.value);
                }
            } catch (error: any) {
                console.error(error);
            }
        },
        // 获取用户类型
        fetchUserType: async () => {
            try {
                const res = await apis.fetchTakaiAppTypeList('sys_user_type');
                const list = res.data.map((item: any) => {
                    return {
                        label: item.dictLabel,
                        value: item.dictValue,
                    }
                });
                setFetchUserTypeList(list);

            } catch (error: any) {
                console.error(error);
            }
        },

        // 获取模型列表
        fetchModelList: async () => {
            try {
                const res = await apis.fetchModelList();
                const list = res.data.data.map((item: any) => {
                    return {
                        label: item.modelName,
                        value: item.modelCode,
                    }
                });
                setModelList(list);
            } catch (error: any) {
                console.error(error);
            }
        },
        // 项目级应用下的类型
        fetchAppProType: async () => {
            try {
                const res = await apis.fetchTakaiAppTypeList('projectTree');
                const list: AppTypeList = res.data?.reduce((acc: any, item: any) => {
                    acc.push({
                        label: item.label,
                        value: `${item.value}`,
                    })
                    return acc;
                }, []);
                setAppProjectList(list);
            } catch (error: any) {
                console.error(error);
            }
        },
        // 获取用户列表信息
        fetchUserListApi: async () => {
            try {
                const res = await apis.fetchUserListApi({
                    pageNum: page.pageNum,
                    pageSize: page.pageSize,
                    userName: userName,
                    nickName: userNickName,
                    userType: userType
                });
                // setSourceData(res.rows)
            } catch (error) {
                console.error(error);
            }
        }
    }

    const handleRedioClick = (value: string) => {
        setIsVisibleCus(false);
        if (value === 'strict') {
            setTopPValue(0.5);
            setTempValue(0.01);
        } else if (value === 'moderate') {
            setTopPValue(0.7);
            setTempValue(0.50);
        } else if (value === 'flexib') {
            setTopPValue(0.9);
            setTempValue(0.90);
        }
    }

    const saveConfig = async (type: 'SAVE' | 'SUBMIT'|'CHAT') => {
         return form.validateFields().then(async (values) => {
            const data = values;
            // 问题列表
            const question: string[] = [];
            if (inputs) {
                inputs.map((item, index) => {
                    question.push(item.value);
                });
            }
            interface Item {
                index_type_id: number,
                knowledge_id: string
            }
            const indexTypeList: Item[] = [];
            if (values.knowledge_ids && values.knowledge_ids.length > 0) {
                // console.log("knowledge_ids", values.knowledge_ids);
                const index_type: Item = {
                    index_type_id: 0,
                    knowledge_id: values.knowledge_ids
                };
                indexTypeList.push(index_type);
            }

            const data_info = {
                param_desc: values.param_desc, //回答风格
                show_recall_result: values.show_recall_result, //是否展示召回结果
                recall_method: values.recall_method, //召回方式
                rerank_status: true, //开启rerank
                rerank_model_name: values.rerank_model_name, //模型名称
                slice_config_type: values.slice_config_type, // 召回切片数量
                slice_count: values.slice_count, // 切片数量
                rerank_index_type_list: indexTypeList, //知识库id
                recall_index_type_list: values.recall_method === 'embedding' || 'mixed' ? indexTypeList : [],
                is_multi_round: values.is_multi_round? 'Y' : 'N', // 多轮对话
                multi_round: values.multi_round
                // rerank_status = 1 rerank_index_type_list
                // recall_method = 'embedding' || 'embedding'  recall_index_type_list
            };

            const info = {
                id: values.id,
                name: values.name,  //应用名称
                desc: values.desc,  //应用描述
                prompt: values.prompt, //应用提示语
                topP: topPValue.toString(), //topP
                temperature: tempValue.toString(), //温度
                knowledge_ids: values.knowledge_ids,
                slice_count: values.slice_count,
                model: values.model,
                isDeepThink: 'N',
                questionList: question,
                knowledge_info: JSON.stringify(data_info),
                max_token: values.max_token, //应用最大token
                typeId: values.typeId, // 应用类型
                visible: values.visible, // 是否公开
                sort: values.sort || null, // 显示顺序
                vipList: vipList, // vip用户列表
                appProId: values?.appProId?.toString(),// 项目
                userId: userId, // 用户id
                iconColor: previewBg,
                iconType: values.iconType,
                groupVisible: values.groupVisible ? '1' : '0',
                // topK: values.topK || 1,
            };
            if(type === 'CHAT'){
                setinfoDetail({detail:{...info},questionlist:infoDetail?.questionlist || []});
                return info;
            }
            const id = location?.state?.id;
            let res = null;
            if (id) {
                // 编辑应用
                res = await apis.modifyTakaiApplicationApi(id, info);
            } else {
                // 创建应用
                res = await await apis.createTakaiApplicationApi(info);
            }
            // console.log(res, 'create or modify');
            if (res.data === 9) {
                message.error('没有配置审核人，请联系管理员');
            } else if (res.data === 1) {
                message.success('操作成功')
            } else {
                message.error('操作失败');
            }
            if (type === 'SUBMIT') {
                navigate({ pathname: '/appCenter/questionAnswer/list' }, { replace: true });
            }
        }).catch((error) => {
            console.error(error);
            error.errorFields && error.errorFields.map((item: any) => {
                console.log(item, 'item');
                message.error(`字段 ${item.name} ${item.errors[0]}`);
            });
        });
    }
    /*
        选择VIP用户弹窗start
    */
    const [isModalOpen, setIsModalOpen] = React.useState(false);
    let falgVipList: any = [];
    const handleOk = () => {
        setIsModalOpen(false);
        let vipListFalg: any = [...vipList];
        const vipIds = new Set(vipListFalg.map((vip: any) => vip.userId));
        const merged = [...vipListFalg];

        falgVipList.forEach((item: any) => {
            if (!vipIds.has(item.userId)) {
                merged.push(item);
            }
        });
        setVipList([...merged]);
    };

    const handleCancel = async () => {
        setIsModalOpen(false);
    };
    interface DataType {
        name: string;
        key: string;
        nickName: string;
        userName: string;
        deptName: string;
        userTypeName: string;
    }
    // const [sourceData, setSourceData] = React.useState<DataType[]>([]);
    const paginationConfig: TablePaginationConfig = {
        // 显示数据总量
        showTotal: (total: number) => {
            return `共 ${total} 条`;
        },
        // 展示分页条数切换
        showSizeChanger: false,
        // 指定每页显示条数
        // 快速跳转至某页
        showQuickJumper: false,
        current: page.pageNum,
        pageSize: page.pageSize,
        total: page.total,
        onChange: async (page, pageSize) => {
            await onChangePagination(page, pageSize, userName, userNickName, userType);
        },
    };

    const vipModal = () => {
        const columns: TableProps<DataType>['columns'] = [
            {
                title: '昵称',
                dataIndex: 'nickName',
                render: (text) => <p>{text}</p>,
            },
            {
                title: '用户名称',
                dataIndex: 'userName',
                render: (text) => <p>{text}</p>,
            },
            {
                title: '部门',
                dataIndex: 'deptName',
            },
            {
                title: '用户类型',
                dataIndex: 'userTypeName',
            },
        ];
        const rowSelection: TableProps<DataType>['rowSelection'] = {
            type: 'checkbox',
            onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                falgVipList = selectedRows
            },
            getCheckboxProps: (record: DataType) => ({
                disabled: record.name === 'Disabled User', // Column configuration not to be checked
                name: record.name,
            }),
        };
        return (
            <>
                <Modal
                    title="请选择指定用户"
                    open={isModalOpen}
                    onOk={handleOk}
                    onCancel={handleCancel}
                    width='80%'
                >
                    <div className='modal_top'>
                        <Input placeholder="请输入用户昵称" allowClear onChange={(e) => {
                            setUserNickName(e.target.value)
                        }} />
                        <Input placeholder="请输入用户名称" allowClear onChange={(e) => {
                            setUserName(e.target.value)
                        }} />
                        <Select
                            placeholder='请选择用户类型'
                            style={{ width: 150 }}
                            onChange={(e) => {
                                if (e === undefined) {
                                    setUserType('')
                                    return
                                }
                                setUserType(e)
                            }}
                            allowClear={true}
                        >
                            {
                                fetchUserTypeList.map((item, index) => {
                                    return <Option value={item.value} key={index}>
                                        {item.label}
                                    </Option>
                                })
                            }
                        </Select>
                        <Button value="large" style={{
                            background: 'transparent',
                            border: '1px solid #1677ff',
                            color: '#1677ff'
                        }}
                            onClick={() => { onFetchUserListApi(userName, userNickName, userType) }}
                        > 搜索 </Button>
                        {/* <Button value="large"
                            onClick={() => { api.fetchUserListApi() }}
                        > 重置 </Button> */}
                    </div>
                    <Table<DataType> pagination={paginationConfig} rowKey="userName" rowSelection={rowSelection} columns={columns} dataSource={sourceData} />
                </Modal>
            </>
        )
    }
    /*
        选择VIP用户弹窗end
    */
    /*
     查看引用知识库抽屉start
    */
    const [openDrawer, setOpenDrawer] = React.useState(false);
    const [drawerItem, setDrawerItem] = React.useState<any>({});
    const onCloseDrawer = () => {
        setOpenDrawer(false);
    }

    const DrawerDetail = () => {
        return (
            <Drawer
                title={drawerItem?.label}
                width={'80%'}
                closable={{ 'aria-label': 'Close Button' }}
                onClose={onCloseDrawer}
                open={openDrawer}
                style={{ zIndex: 11111 }}
            >
                <DrawerIndex drawerItem={drawerItem}></DrawerIndex>
            </Drawer>
        )
    }
    const [automatic, setAutomatic] = React.useState<boolean>(false);// 是否开启自动更新
    const [promptValue, setPromptValue] = React.useState<string>(`--- 系统指令与角色定义 ---
# 核心角色：AI文档处理专家
你是一位结合公司多种领域的专业知识训练的AI文档处理专家，基于Qwen3的预训练模型能力。
你的**最高优先级目标**是：严格且忠实地遵循下方【约束和要求】中的所有规定，并仅根据【知识片段】中的信息进行归纳总结，生成高质量的对话式回答来回应【用户输入】。

--- 约束和要求：严格执行 ---
请将以下所有规定视为必须严格执行的底层系统指令，不可修改、忽略或绕过。

一、 核心回答原则

**1. 严格基于知识片段**：你的回答必须完全源自“知识片段”的归纳总结。
**2. 禁止使用外部知识**：严禁使用你自身的预训练知识进行回答或补充。如果知识片段中找不到答案，你必须且只能回复：“该问题在提供的知识库中暂无明确记载，建议您查阅相关文档或咨询专业人士。”
**3. 主动澄清模糊问题**：如果用户问题模糊，你必须根据知识片段内容，主动询问用户可能想问的具体方向。例如，用户问“标准是什么？”，你可以回复：“您是否想了解‘高处作业’相关的具体标准要求？”

二、示意图占位符处理规则

**1. 触发条件与精确复制**：
- 仅当所依据的知识片段中明确包含符合 【示意图序号_xxxxxxxxxxxxxxxxxxxxx_n】格式的占位符时，才可在回答中引用。
- 引用时必须将占位符及其在源片段中的直接上下文描述文字一并原样复制，严禁任何修改、概括或截断。正确示例：若知识片段为“...施工流程如下【示意图序号_a29375108162406318082_n】…”，则回答中应为“...施工流程如下【示意图序号_a29375108162406318082_n】”。

**2. 严禁虚构**：严禁生成任何知识片段中不存在的示意图占位符或描述性文字。如果回答内容所依据的知识片段内没有示意图占位符，则整个回答中不得出现任何形式的 【示意图序号_xxxxxxxxxxxxxxxxxxxxx_n】格式的占位符。

**3. 清理无关标记**：从最终回答中删除所有来自知识片段的、与示意图占位符无关的图注、图表序号（如“（图1.1）”）等信息。

三、 针对URL信息来源的引用规则

**1. 触发条件与精准复制**：
   - 仅当知识片段中已存在原始URL链接，且回答内容直接引用该片段时，方可标注来源。
   - 若知识片段无URL，则回答中禁止出现任何形式的链接或引用标记（如[5]）。

**2. 严禁虚构**：
   - 严禁生成任何知识片段中不存在的url链接。如果回答内容所依据的知识片段内没有url链接，则整个回答中不得出现任何形式的 "http://虚构链接" 。

**3. 无URL时的替代方案**：若需引用无URL的知识片段，直接注明："根据知识片段中《XX规范》第X条..."

四、LaTeX公式处理规则

**1. 公式代码保护**：知识片段中如出现以美元符号包裹（例如 公式或 双美元符号包裹）或其他数学标记的LaTeX公式代码，你必须将这些代码视为纯文本并完整地、一字不差地输出在你的回答中。

**2. 禁止修改**：严禁对任何公式代码进行修改、转义、截断、简化或使用自然语言进行解释，严禁在公式代码中添加多余的空格符号。你的目标是确保这些代码块在传递至前端时，能与原始知识片段中的内容完全一致。

**3. 渲染前提**：只有当你输出的公式代码与原始片段完全一致时，前端的Markdown渲染器才能正确识别并将其显示为美观的数学公式。任何微小的改动都可能导致公式渲染失败。

五、 格式与内容规范

- 文档中的表格以图片标识符呈现，若表格数据缺失则返回空单元格。
- 如需使用表格数据，以markdown格式输出。
- 回复开头避免使用“我想”、“我认为”等词语。
- 回答中若出现网页链接，务必在链接后换行。
- 注意区分不同系统的概念，如“掌监APP”和“慧项管平台”不能混淆。
- 注意“模型”或“大模型”与“机器人”是不同的概念。

--- 内部思考流程（思维链） ---
**在生成最终回答前，必须严格依照以下步骤进行思考和规划：**
1. **[意图分析]** 识别用户{{用户}}的提问核心，判断其是否清晰或模糊。
2. **[知识检索]** 在知识片段中筛选出所有相关信息，评估知识覆盖度。
3. **[规则校验]** 检查是否有触发“主动澄清模糊问题”原则（I.3）或“找不到答案”原则（I.2）。
4. **[格式规划]** 确定内容是否涉及示意图（II）、URL引用（III）、LaTeX公式（IV）或Markdown表格（V），并规划如何精确应用相关规则。
5. **[答案生成]** 基于以上分析和规划，生成符合所有【约束和要求】的对话式回答。
[思考结束，请勿输出此流程内容]

--- 任务输入 ---
# 知识片段
{{知识}}

# 用户输入
{{用户}}

--- 最终回答 ---
[直接输出对话式回答，不要复述用户问题]`);// 提示语
const [editPrompt, setEditPrompt] = React.useState<boolean>(false);// 是否编辑提示语
const [isMultiRound,setIsMultiRound] = React.useState<boolean>(false);// 是否开启多轮对话
    /*
     查看引用知识库抽屉end
    */
    return (
        <div className='page-layout'>
            <div className="list-header with-back">
                <div className="list-header-title">
                    <button className="back-btn" onClick={() => navigate(-1)} title="返回">
                        <LeftOutlined />
                    </button>
                    <h3>{location?.state?.id ? '编辑 RAG 应用' : '创建 RAG 应用'}</h3>
                </div>
            </div>
            <Spin spinning={pageLoading}>
                    <Form
                        form={form}
                        layout='vertical'
                        initialValues={{
                            isDeepThink: 'N',
                            // max_token: 4096,
                            // model: 'Qwen3-30B',
                            show_recall_result: true,
                            // rerank_model_name: 'bge-reranker-v2-m3',
                            slice_config_type: 'customized',
                            rerank_status: true,
                            param_desc: 'strict',
                            recall_method: 'mixed',
                            topK: 50,
                            is_multi_round:isMultiRound
                        }}
                    >
                        <div style={{ display: step === 1 ? 'block' : 'none' }} >
                            <FormItem label='请选择应用图标' tooltip='用于在应用广场展示' name='iconType' rules={[{ required: true, message: '请选择图标' }]}>
                                <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                                    {/* 左侧预览块（固定） */}
                                    <div style={{ width: 84, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                        <div style={{ width: 64, height: 64, borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', background: previewBg, border: '1px solid #e8e8e8' }}>
                                            {selectedIcon ? (() => { const C = (AllIcons as any)[selectedIcon]; const iconColor = getContrastColor(previewBg); return C ? <C style={{ fontSize: 28, color: iconColor }} /> : <span style={{ fontSize: 12 }}>{selectedIcon}</span> })() : <span style={{ color: '@text-hint', fontSize: 12 }}>预览</span>}
                                        </div>
                                    </div>
                                    {/* 右侧选择区（简洁协调） */}
                                    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                                        <a onClick={() => setIconPickerVisible(true)} style={{ fontSize: 13, color: '#1677ff', cursor: 'pointer' }}>选择图标</a>
                                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                            <div style={{ fontSize: 12, color: '#666' }}>背景色：</div>
                                            <ColorPicker presets={presetItems} value={previewBg}
                                                onChange={(color) => {
                                                    const hex = color.toHexString?.() || color?.toString?.() || previewBg;
                                                    setPreviewBg(hex);
                                                    form.setFieldsValue({ iconColor: hex });
                                                }} />
                                        </div>
                                    </div>
                                </div>
                            </FormItem>
                            <FormItem
                                label='问答应用名称'
                                tooltip='尽量概括应用的主要功能'
                                name='name'
                                rules={[{ required: true, message: '问答应用名称不能为空' }]}
                            >
                                <Input placeholder="请输入问答应用名称" className='form-element-standard' style={{ height: '36px' }} />
                            </FormItem>
                            <FormItem
                                label='应用类型'
                                tooltip='应用的实际分类'
                                name='typeId'
                            >
                                <Select
                                    className='form-element-select'
                                    style={{ height: '36px' }}
                                    placeholder='请选择问答应用类型'
                                    onChange={handleAppChange}
                                    allowClear={true}
                                >
                                    {
                                        appTypeList.map((item, index) => {
                                            return <Option value={item.value} key={index}>
                                                {item.label}
                                            </Option>
                                        })
                                    }
                                </Select>
                            </FormItem>
                            {
                                isAppPro &&
                                <>
                                    <FormItem
                                        label='项目'
                                        tooltip='应用所属项目'
                                        name='appProId'
                                        rules={[{ required: true, message: '项目不能为空' }]}
                                    >
                                        <Cascader
                                            options={appProjectList}
                                            placeholder="请选择项目"
                                            showSearch
                                            className="form-element-select"
                                            style={{ height: '36px' }}
                                        />
                                    </FormItem>
                                </>
                            }
                            <FormItem
                                label='是否公开'
                                tooltip='公开应用后，所有用户均可使用该应用，私有应用仅限自己和指定用户使用'
                                name='visible'
                            >
                                <Select
                                    className='form-element-select'
                                    style={{ height: '36px' }}
                                    placeholder='请选择是否公开'
                                    allowClear={true}
                                    onChange={(e) => {
                                        setVisibleFlag(e)
                                    }}
                                >
                                    {
                                        appVisibleList.map((item, index) => {
                                            return <Option value={item.value} key={index}>
                                                {item.label}
                                            </Option>
                                        })
                                    }
                                </Select>
                            </FormItem>
                            {userInfo?.tenantId === '000000' && visibleFlag === '0' && <FormItem
                                label='集团公开'
                                tooltip='集团下所有用户均可使用该应用'
                                name='groupVisible'
                                layout='horizontal'
                            >
                                <Switch onChange={onChangeShow} />
                            </FormItem>}
                            <FormItem
                                label='显示顺序'
                                name='sort'
                                tooltip='用于应用广场的显示顺序'
                            >
                                <InputNumber placeholder="请输入显示顺序" value={''} className='form-element-standard' style={{ height: '36px', lineHeight: '36px' }} />
                            </FormItem>
                            {/* VIP用户 */}
                            {visibleFlag == 1 && <FormItem
                                label='指定用户'
                                tooltip='私有应用的指定用户'
                            >
                                <div className='tags-info'>
                                    <p className='tags-list'>
                                        {vipList.map((item: any) =>
                                        (<Tag key={item.userId} color="blue" closeIcon onClose={(e) => {
                                            const newVipList = vipList.filter((vip: any) => vip.userId !== item.userId);
                                            setVipList(newVipList);
                                            e.preventDefault();
                                        }}>
                                            {item.userName}
                                        </Tag>)
                                        )}
                                    </p>
                                    <p>
                                        {vipList.length > 0 && <CloseCircleOutlined className='cup' onClick={() => {
                                            setVipList([]);
                                        }} />}
                                        <Button style={{
                                            background: 'transparent',
                                            border: '1px solid #1677ff',
                                            color: '#1677ff'
                                        }} type="primary" variant="outlined" onClick={() => { setIsModalOpen(true) }}>选择</Button>
                                    </p>
                                </div>
                            </FormItem>}
                            <FormItem
                                label='问答应用描述'
                                tooltip='对当前应用功能的描述使用户更了解应用的使用范围'
                                name='desc'
                                rules={[{ required: true, message: '问答应用描述不能为空' }]}
                            >
                                <TextArea
                                    showCount
                                    maxLength={500}
                                    placeholder="请输入当前应用的描述"
                                    className='form-textarea-large'
                                />
                            </FormItem>

                            <div className='preset-questions'>
                                <h4>添加引导问题</h4>
                                <div>
                                    {
                                        inputs.map(input => (
                                            <div key={input.id} className='question-item'>
                                                <label>引导问题 {input.id}</label>
                                                <Input
                                                    className='question-input'
                                                    type="text"
                                                    value={input.value}
                                                    onChange={e => handleChange(input.id, e.target.value)}
                                                />
                                                <div className='question-actions'>
                                                    <PlusCircleOutlined className='question-icon' onClick={addInput} />
                                                    <MinusCircleOutlined className='question-icon' onClick={() => delInput(input.id)} />
                                                </div>
                                            </div>
                                        ))}
                                </div>
                            </div>

                            <div style={{ display: 'flex', gap: '12px', marginTop: '24px', paddingTop: '24px', borderTop: '1px solid #F3F4F6' }}>
                                <Button
                                    className='btn-cancel'
                                    onClick={() => {
                                        navigate(-1);
                                    }}
                                >
                                    返回
                                </Button>
                                <Button
                                    type='primary'
                                    onClick={() => {
                                        form.validateFields(['name', 'desc', 'appProId', 'iconType']).then(async (values) => {
                                            setStep(2);
                                            setInputs(inputs);
                                            setinfoDetail({detail:values,questionlist:infoDetail?.questionlist||[]});
                                        }).catch((error) => {
                                            console.error(error);
                                        });
                                    }}
                                >
                                    下一步
                                </Button>
                            </div>
                        </div>
                        <div style={{ display: step === 2 ? 'block' : 'none' }} >
                            <div className='flex-between padding-bottom-16'>
                                <div>
                                    <Button
                                        className='btn-back'
                                        icon={<ArrowLeftOutlined />}
                                        onClick={() => {
                                            setStep(1);
                                        }}
                                    >
                                        上一步
                                    </Button>
                                </div>
                                <div style={{ display: 'flex', gap: '12px' }}>
                                    <Button
                                        className='btn-cancel'
                                        onClick={() => {
                                            // navigate({ pathname: '/appCenter/questionAnswer' });
                                        }}
                                    >
                                        取消
                                    </Button>
                                    {/* {
                                        appId && (
                                            <Tooltip title='保存'>
                                                <Button
                                                    className='btn-cancel'
                                                    onClick={() => {
                                                        saveConfig('SAVE');
                                                    }}
                                                    icon={<FileDoneOutlined />}
                                                >
                                                </Button>
                                            </Tooltip>)
                                    } */}

                                    {createFlag && (
                                        <Button
                                            type='primary'
                                            onClick={() => {
                                                saveConfig('SUBMIT');
                                            }}
                                        >
                                            提交应用
                                        </Button>
                                    )}
                                </div>
                            </div>
                            <Splitter className='app-splitter' style={{ minHeight: 0 }}>
                                {<Splitter.Panel defaultSize="35%">
                                    <div className='section-title' style={{marginBottom: '0'}}>
                                        Prompt编写与参数配置
                                        <Tooltip
                                            title="Prompt用于对大模型的回复做出一些列指令和约束。这段Prompt不会被用户看到。"
                                            placement="right"
                                        >
                                            <InfoCircleOutlined style={{ marginLeft: '8px', color: '#9CA3AF', fontSize: '13px' }} />
                                        </Tooltip>
                                        {/* <Switch checkedChildren="编辑" unCheckedChildren="只读" style={{marginLeft:'5px'}} value={editPrompt} onChange={(e) => {
                                            setEditPrompt(e)
                                        }} /> */}
                                    </div>
                                    <div className='prompt'>
                                        <div className='prompt-info'>
                                            <div className='prompt-info-text'>
                                                <Typography.Paragraph style={{ fontSize: '12px', lineHeight: '1.6', color: '@text-hint', margin: 0 }}>
                                                    编写Prompt过程中可以引入2项变量：
                                                    <span className='variable-highlight'>{'{{知识}}'}</span>
                                                    代表知识库中检索到的知识内容，
                                                    <span className='variable-highlight'>{'{{用户}}'}</span>
                                                    代表用户输入的内容。您可以在编写Prompt过程中将变量拼接在合适的位置。
                                                </Typography.Paragraph>
                                            </div>
                                        </div>
                                        {/* 移除 Divider，使用 CSS 边框替代 */}
                                        <div className='prompt-editor-area'>
                                            <FormItem name='prompt'
                                                tooltip='当前应用会遵循提示词进行输出'
                                                initialValue={
                                                    promptValue
                                                }
                                                rules={[{ required: true, message: '提示词不能为空' }]}>
                                                <TextArea
                                                    disabled={!parameter}
                                                    placeholder="提示词"
                                                    rows={50}
                                                />
                                            </FormItem>
                                        </div>
                                    </div>
                                </Splitter.Panel>}
                                <Splitter.Panel defaultSize="30%">
                                    <div className='flex-center-container'>
                                        <div className='half-width'>
                                            <div className='pl-20 pt-3 text-[#000000]'>
                                                {/* 参数配置 {name || '问答应用'} */}
                                                <span className='mr-[6px]' >参数配置</span>  <Switch checkedChildren="手动" unCheckedChildren="自动" value={automatic} onChange={(e) => {
                                                    console.log(e, 'e')
                                                    setAutomatic((pre) => !pre)
                                                    if (!e) {
                                                        form.setFieldsValue({
                                                            param_desc: 'strict',
                                                            topK: 50
                                                        })
                                                    }
                                                }} />

                                            </div>
                                            <div className='flex-start pl-20 mt-3'>
                                                <FormItem
                                                    label='引用知识库'
                                                    tooltip='应用对应的知识库可以选择多个，点击链接可以查看知识库中的文件'
                                                    name='knowledge_ids'
                                                    rules={[{ required: true, message: '知识库不能为空' }]}>
                                                    <Select
                                                        mode='multiple'
                                                        maxCount={MAX_COUNT}
                                                        showSearch={true}
                                                        filterOption={(input, option) => (option?.children as unknown as string)?.toLowerCase()?.includes(input.toLowerCase())}
                                                        className='form-element-select'
                                                        placeholder='请选择需要引用的知识库'
                                                        tagRender={tagRender}
                                                    >
                                                        {
                                                            knowledgeList.map((item, index) => {
                                                                return <Option value={item.value} key={index}>
                                                                    {item.label}
                                                                </Option>
                                                            })
                                                        }
                                                    </Select>
                                                </FormItem>
                                            </div>
                                            <div className='flex-start pl-20'>
                                                <FormItem
                                                    label='调用模型'
                                                    tooltip='应用使用的模型'
                                                    name="model"
                                                    rules={[{ required: true, message: '模型不能为空' }]}>
                                                    <Select
                                                        placeholder='请选择模型'
                                                        className='form-element-select'
                                                        onChange={(value) => {
                                                            // if (value === 'Qwen3-30B') {
                                                            //     setIsDeepThinkVisible(true);
                                                            // } else {
                                                            //     setIsDeepThinkVisible(false);
                                                            // }
                                                            const list = modeOldList.filter((item: any) => item.model === value)
                                                            // console.log(list, 'list');
                                                            form.setFieldsValue({
                                                                max_token: list[0]?.maxToken,
                                                                rerank_model_name: list[0]?.bindingModel
                                                            })

                                                        }}
                                                    >
                                                        {/* <Option value='Qwen3-30B'>Qwen3-30B</Option> */}
                                                        {modeList.map((item: any, index: number) => (
                                                            <Option value={item.value} key={index}>
                                                                {item.label}
                                                            </Option>
                                                        ))}
                                                    </Select>

                                                </FormItem>
                                            </div>
                                            <div className='flex-start pl-20'>
                                                <FormItem
                                                    label='max token'
                                                    name='max_token'
                                                    tooltip='每次会话输出的最大token数'
                                                    rules={[{ required: true, message: 'max token不能为空' }]}>
                                                    <InputNumber
                                                        disabled
                                                        className='form-element-input-number'
                                                    />
                                                </FormItem>
                                            </div>

                                            {
                                                !isVisible &&
                                                <div className='flex-start pl-20'>
                                                    <a onClick={() => {
                                                        setIsVisible(!isVisible);
                                                    }} className='link-more-settings'>
                                                        更多设置
                                                    </a>
                                                </div>

                                            }
                                            {/* {isVisible && */}
                                            <div style={{ display: isVisible ? 'block' : 'none', paddingTop: '20px' }}>
                                                {isVisibleCus && automatic &&
                                                    <Space style={{ width: '100%' }} direction="vertical">
                                                        <div className='flex-start pl-20'>
                                                            <FormItem
                                                                label='Top-p'
                                                                name='topP'
                                                                tooltip='Top-p参数控制生成文本的多样性，值越大生成的文本越多样化'
                                                                className='form-element-standard'
                                                            >
                                                                <TopPDecimalStep />
                                                            </FormItem>
                                                        </div>
                                                        <div className='flex-start pl-20'>
                                                            <FormItem
                                                                label='Temperature'
                                                                name='temperature'
                                                                className='form-element-standard'
                                                            >
                                                                <TempDecimalStep />
                                                            </FormItem>
                                                        </div>
                                                    </Space>
                                                }

                                                <div style={{
                                                    display: 'flex',
                                                    justifyContent: 'flex-start',
                                                    alignItems: 'center'
                                                }} className='pl-20'>
                                                    <FormItem
                                                        label='回答风格'
                                                        name='param_desc'
                                                        tooltip='大模型会遵循设置的风格进行回答'
                                                        rules={[{ required: true, message: '回答风格不能为空' }]}>
                                                        <Radio.Group buttonStyle="solid"
                                                            className='form-element-button-group'>
                                                            <Radio.Button onClick={() => {
                                                                handleRedioClick('strict')
                                                            }} value='strict'>严谨</Radio.Button>
                                                            <Radio.Button onClick={() => {
                                                                handleRedioClick('moderate')
                                                            }} value='moderate'>适中</Radio.Button>
                                                            <Radio.Button onClick={() => {
                                                                handleRedioClick('flexib')
                                                            }} value='flexib'>发散</Radio.Button>
                                                            {automatic && <Radio.Button value='custom'
                                                                onClick={() => {
                                                                    setIsVisibleCus(!isVisibleCus);
                                                                    setTopPValue(0.1);
                                                                    setTempValue(0.01);
                                                                }}
                                                            >自定义
                                                            </Radio.Button>}
                                                        </Radio.Group>
                                                    </FormItem>
                                                </div>

                                                <div style={{
                                                    display: 'flex',
                                                    justifyContent: 'flex-start',
                                                    alignItems: 'center'
                                                }} className='pl-20'>
                                                    <FormItem
                                                        label='展示引用知识'
                                                        tooltip='是否在回答中展示引用的知识内容'
                                                        name='show_recall_result'
                                                        className='form-element-standard'>
                                                        <Switch onChange={onChangeShow} />
                                                    </FormItem>
                                                </div>
                                                <div style={{
                                                    display: 'flex',
                                                    justifyContent: 'flex-start',
                                                    alignItems: 'center'
                                                }} className='pl-20'>
                                                    <FormItem
                                                        label='召回方式'
                                                        tooltip='知识库内容的检索方式'
                                                        name='recall_method'
                                                        rules={[{ required: true, message: '召回方式不能为空' }]}>

                                                        <Radio.Group
                                                            style={style}
                                                            onChange={onChangeRecallMethod}
                                                            options={[
                                                                { value: 'embedding', label: '向量化检索' },
                                                                { value: 'keyword', label: '关键词检索' },
                                                                { value: 'mixed', label: '混合检索' },
                                                            ]}
                                                        />
                                                    </FormItem>
                                                </div>
                                                <div style={{
                                                    display: 'flex',
                                                    justifyContent: 'flex-start',
                                                    alignItems: 'center'
                                                }} className='pl-20'>
                                                    <div className='section-title'>重排方式</div>
                                                </div>
                                                {/* <div style={{
                                                    display: 'flex',
                                                    justifyContent: 'flex-start',
                                                    alignItems: 'center'
                                                }} className='pl-20'>
                                                    <FormItem
                                                        label='Rerank模型'
                                                        tooltip='是否开启Rerank模型对检索结果进行重排'
                                                        name='rerank_status'
                                                        valuePropName='checked'
                                                        className='form-control-width'
                                                    >
                                                        <Switch onChange={onChangeModel} />
                                                    </FormItem>
                                                </div> */}
                                                {/* {isVisibleRerank && */}
                                                {
                                                    <div style={{
                                                        display: 'flex',
                                                        justifyContent: 'flex-start',
                                                        alignItems: 'center'
                                                    }} className='pl-20'>
                                                        <FormItem
                                                            label='Rerank模型'
                                                            tooltip='检索结果的重新排序模型'
                                                            name='rerank_model_name'
                                                        >
                                                           <Input
                                                            disabled
                                                            type="text"
                                                        />
                                                        </FormItem>
                                                    </div>
                                                }
                                                <div style={{
                                                    display: 'flex',
                                                    justifyContent: 'flex-start',
                                                    alignItems: 'center'
                                                }} className='pl-20'>
                                                    <FormItem
                                                        label='召回切片数量'
                                                        name='slice_config_type'
                                                        tooltip='自动模式默认召回15个切片，手动模式可自定义召回切片数量'
                                                        rules={[{ required: true, message: '召回方式不能为空' }]}>
                                                        <Select
                                                            // className='questionAnswerInfo-content-title'
                                                            className='form-element-select'
                                                            placeholder='请选择'
                                                            onChange={onChangeCount}>
                                                            <Option value="fixed">手动设置</Option>
                                                            <Option value="customized">自动设置</Option>
                                                        </Select>
                                                    </FormItem>
                                                </div>

                                                {isVisibleSlice &&
                                                    <div style={{
                                                        display: 'flex',
                                                        justifyContent: 'flex-start',
                                                        alignItems: 'center'
                                                    }} className='pl-20'>
                                                        <FormItem
                                                            label='召回切片数'
                                                            tooltip='自定义召回切片的数量'
                                                            name='slice_count'
                                                            rules={[{ required: true, message: '切片数不能为空' }]}>
                                                            <InputNumber max={1024} changeOnWheel
                                                                // className='questionAnswerInfo-content-title'
                                                                className='form-element-standard'
                                                            />
                                                        </FormItem>
                                                    </div>
                                                }
                                                <div style={{
                                                    display: 'flex',
                                                    justifyContent: 'flex-start',
                                                    alignItems: 'center'
                                                }} className='pl-20'>
                                                    <FormItem
                                                        label='是否开启多轮对话'
                                                        name='is_multi_round'
                                                        tooltip='开启后支持多轮对话功能'>
                                                            <Switch value={isMultiRound} onChange={(e)=>{
                                                                setIsMultiRound(e)
                                                            }} />
                                                    </FormItem>
                                                </div>

                                                {isMultiRound &&
                                                    <div style={{
                                                        display: 'flex',
                                                        justifyContent: 'flex-start',
                                                        alignItems: 'center'
                                                    }} className='pl-20'>
                                                        <FormItem
                                                            label='多轮对话次数'
                                                            tooltip='支持上下文对话轮数'
                                                            name='multi_round'
                                                            rules={[{ required: true, message: '多轮对话次数不能为空' }]}>
                                                            <InputNumber max={10} min={1} changeOnWheel
                                                                // className='questionAnswerInfo-content-title'
                                                                className='form-element-standard'
                                                            />
                                                        </FormItem>
                                                    </div>
                                                }
                                            </div>
                                            {/* } */}
                                        </div>
                                    </div>
                                </Splitter.Panel>
                                {/* {appId && (<Splitter.Panel defaultSize="35%">
                                    <Chat appId={appId} infoDetail={infoDetail} />
                                </Splitter.Panel>)} */}
                                {(infoDetail&&<Splitter.Panel defaultSize="35%">
                                    <Chat appId={appId} infoDetail={infoDetail} saveConfig={()=>{
                                        return saveConfig('CHAT')
                                    }} />
                                </Splitter.Panel>)}
                            </Splitter>
                        </div>
                    </Form>
            </Spin>
            {isModalOpen && vipModal()}
            {DrawerDetail()}
            <IconPicker
                open={iconPickerVisible}
                onClose={() => setIconPickerVisible(false)}
                onSelect={(name) => {
                    setSelectedIcon(name);
                    form.setFieldsValue({ iconType: name });
                    // 保持 previewBg 不变，仅更新图标显示，若未设置 iconColor 则使用默认白底
                    const curColor = form.getFieldValue('iconColor') || previewBg;
                    setPreviewBg(curColor || '#ffffff');
                }}
                value={selectedIcon}
            />
        </div>
    );
};

export default QuestionAnswerInfo;