Function ModelsPage

frontend/src/components/modelsPage/index.tsx:24–665

()

import { setLoading } from '../../Redux/actions.ts'
import ApiErrorResponse, { RecordType, ChildRefType, formDataType } from '../../constant/index.ts'
function ModelsPage() {
    const { modelLists, loading } = useSelector((state: any) => state.model);
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const [propertyForm] = Form.useForm()
    const [viewCodeData, setViewCodeData] = useState('')
    const [viewCodeOpen, setViewCodeOpen] = useState(false)
    const {  tooltipEditTitle, tooltipPlaygroundTitle,tooltipMoreTitle } = tooltipTitle();
    const { modelsTableColumn } = CommonComponents();
    const { t } = useTranslation();
    const [form] = Form.useForm()
    const [form1] = Form.useForm()
    const [confirmloading, setConfirmLoading] = useState(false);
    const childRef = useRef<ChildRefType | null>(null);
    const [modelOne, setModelOne] = useState(false);
    const [modelId, setModelId] = useState('');
    const [openDeleteModal, setOpenDeleteModal] = useState(false)
    const [modelList, setModelList] = useState([])
    const [formData, setFormData] = useState<formDataType>({
        properties: {},
        required: []
    })
    const [resetButtonShow, setResetButtonShow] = useState(true)
    const [record, setRecord] = useState<RecordType>({
        name: '',
        model_id: '',
        model_schema_id: '',
        provider_id: '',
        type: '',
        properties: {},
        provider_model_id: ''
    });
    const [limit, setLimit] = useState(20)
    const [isVisible, setIsVisible] = useState(true);
    const [formShow, setFormShow] = useState(false)
    const [updatePrevButton, setUpdatePrevButton] = useState(false)
    const [disabled, setDisabled] = useState(true);
    const [drawerEditOpen, setDrawerEditOpen] = useState(false)
    const [secondModalNameValue, setSecondModalNameValue] = useState('')
    const [selectedSecondId, setSelectedSecondId] = useState('')
    const [deleteValue, setDeleteValue] = useState('');
    const [providerId, setProviderId] = useState('')
    const [hasMore, setHasMore] = useState(false)
    const [type, setType] = useState('')
    const [deleteLoading, setDeleteLoading] = useState(false)
    const [properties, setProperties] = useState({})
    const [wildcardForm] = Form.useForm()
    const [functionCall, setFunctionCall] = useState(false)
    const [streaming, setStreaming] = useState(false)
    const [modelType, setModelType] = useState('')
    const [editLoading, setEditLoading] = useState(false)
    const handleViewCode = () => {
        setIsVisible(false)
        setViewCodeOpen(true)
    }
    const content = (
        <div style={{ cursor: 'pointer' }}>
            <p className={styles['popover-eidt']} onClick={handleViewCode}>View code</p>