Function PlaygroundModel

frontend/src/components/playgroundModel/index.tsx:18–494

()

const origin = window.location.origin;
import IconComponent from '@/commonComponent/iconComponent/index.jsx';
function PlaygroundModel() {
    const [loading, setLoading] = useState(false)
    const { search, pathname } = useLocation();
    const [selectedModel, setSelectedModel] = useState<any>([{
        id: '',
        name: ''
    }])
    const navigation = useNavigate();
    const { modelReduxId } = useSelector((state: any) => state.modelId)
    const {temperatureRedux,maxTokenRedux,topPValueRedux,topKValueRedux,stopSequenceValueRedux }= useSelector((state: any) => state.playgroundModelRedux)
    const dispatch = useDispatch();
    const [systemContent, setSystemContent] = useState('')
    const [temperatureValue, setTemperatureValue] = useState(0.8)
    const [maxTokenValue, setMaxTokenValue] = useState(4096)
    const [topValue, setTopValue] = useState(0.1)
    const [topkValue, setTopkValue] = useState(5)
    const [providerId, setProviderId] = useState('')
    const [generateLoading, setGenerateLoading] = useState(false)
    const [streamSwitch, setStreamSwitch] = useState(true)
    const [open, setOpen] = useState(false)
    const [stopSequences, setStopSequences] = useState<any>()
    const [allowedConfigs, setAllowedConfigs] = useState<any>([])
    const [selectedData, setSelectedData] = useState<any>([])
    const [streamShow, setStreamShow] = useState(false)
    const contentListRef = useRef(null);
    const [temperatureCheckbox, setTemperatureCheckbox] = useState(false)
    const [maxTokenCheckbox, setMaxTokenCheckbox] = useState(false)
    const [stopSequencesCheckbox, setStopSequenceCheckbox] = useState(false)
    const [topPCheckbox, setTopPCheckbox] = useState(false)
    const [topKCheckbox, setTopKCheckbox] = useState(false)
    const [modelSchemaId, setModelSchemaId] = useState('')
    const [contentList, setContentList] = useState([{
        role: 'user',
        content: ''
    }])
    useEffect(() => {
        const list: any = contentListRef.current;
        if (list) {
            setTimeout(() => {
                list.scrollTop = list.scrollHeight;
                list.scrollTo({
                    top: list.scrollHeight,
                    behavior: 'smooth'
                });
            }, 0);
        }
    }, [contentList]);
    useEffect(() => {
        const fetchData = async () => {
            setLoading(true)
            const queryParams = new URLSearchParams(search);
            const modelSchemaId = localStorage.getItem('modelSchemaId')
            const providerId = localStorage.getItem('providerId')
            if (modelSchemaId && providerId) {
                setModelSchemaId(modelSchemaId)
                setProviderId(providerId)
                const modelId = queryParams.get('model_id');
                if (modelReduxId === modelId && modelId) {