Function ModelComponent

frontend/src/components/modelComponent/index.tsx:18–118

(props: any)

import CommonComponents from '../../contents/index'
import styles from './modelComponent.module.scss'
function ModelComponent(props: any) {
    const { t } = useTranslation();
    const dispatch = useDispatch();
    const { modelsTableColumn,  } = CommonComponents();
    const [recordsSelected, setRecordsSelected] = useState([])
    const [confirmLoading, setConfirmLoading] = useState(false)
    const [modelOne, setModelOne] = useState(false);
    const childRef = useRef<ChildRefType | null>(null);
    const [updateModelPrevButton, setUpdateModelPrevButton] = useState(false)
    const [options, setOptions] = useState([])
    const [hasModelMore, setHasModelMore] = useState(false)
    const [modelLimit, setModelLimit] = useState(20)
    const [selectedRows, setSelectedRows] = useState<any[]>([])
    const [detailSelectedRowInfo, setDetailSelectedRowInfo] = useState<any>({})
    useEffect(() => {
        fetchModelsList()
    }, [])
    useEffect(() => {
        setSelectedRows(props.defaultSelectedData || [])
    }, [props.defaultSelectedData])
    const handleCreateModelId = async () => {
        await setModelOne(true)
        childRef.current?.fetchAiModelsList()

    }
    const handleSetModelConfirmOne = () => {
        setModelOne(false)
        setUpdateModelPrevButton(true)
    }
    const handleModalCancel = () => {
        setModelOne(false)
    }
    const fetchModelsList = async (value?: any, type?: string) => {
        if (type) {
            dispatch(fetchModelsData(20) as any);
        }
        const params = {
            limit: modelLimit || 20,
            ...value
        }
        try {
            const res: any = await getModelsList(params, 'chat_completion')
            const data = res.data.map((item: any) => {
                return {
                    ...item,
                    key: item.model_id
                }
            })
            setOptions(data)
            setHasModelMore(res.has_more)
        } catch (error) {
            console.log(error)
        }
    }
    const handleModalClose = () => {
       props.handleCloseModal()
    }
    const handleChildModelEvent = async (value: valueLimit) => {