presenton/servers/nextjs/app/storeInitializer.tsx

126 lines
3.8 KiB
TypeScript

'use client';
import { useEffect, useState } from 'react';
import { setCanChangeKeys, setLLMConfig } from '@/store/slices/userConfig';
import { Loader2 } from 'lucide-react';
import { hasValidLLMConfig } from '@/utils/storeHelpers';
import { usePathname, useRouter } from 'next/navigation';
import { useDispatch } from 'react-redux';
export function StoreInitializer({ children }: { children: React.ReactNode }) {
const dispatch = useDispatch();
const [isLoading, setIsLoading] = useState(true);
const router = useRouter();
const route = usePathname();
// Fetch user config state
useEffect(() => {
fetchUserConfigState();
}, []);
const setLoadingToFalseAfterNavigatingTo = (pathname: string) => {
const interval = setInterval(() => {
if (window.location.pathname === pathname) {
clearInterval(interval);
setIsLoading(false);
}
}, 500);
}
const fetchUserConfigState = async () => {
setIsLoading(true);
const response = await fetch('/api/can-change-keys');
const canChangeKeys = (await response.json()).canChange;
dispatch(setCanChangeKeys(canChangeKeys));
if (canChangeKeys) {
const response = await fetch('/api/user-config');
const llmConfig = await response.json();
if (!llmConfig.LLM) {
llmConfig.LLM = 'openai';
}
dispatch(setLLMConfig(llmConfig));
const isValid = hasValidLLMConfig(llmConfig);
if (isValid) {
// Check if the selected Ollama model is pulled
if (llmConfig.LLM === 'ollama') {
const isPulled = await checkIfSelectedOllamaModelIsPulled(llmConfig.OLLAMA_MODEL);
if (!isPulled) {
router.push('/');
setLoadingToFalseAfterNavigatingTo('/');
return;
}
}
if (llmConfig.LLM === 'custom') {
const isAvailable = await checkIfSelectedCustomModelIsAvailable(llmConfig.CUSTOM_MODEL);
if (!isAvailable) {
router.push('/');
setLoadingToFalseAfterNavigatingTo('/');
return;
}
}
if (route === '/') {
router.push('/upload');
setLoadingToFalseAfterNavigatingTo('/upload');
} else {
setIsLoading(false);
}
} else if (route !== '/') {
router.push('/');
setLoadingToFalseAfterNavigatingTo('/');
} else {
setIsLoading(false);
}
} else {
if (route === '/') {
router.push('/upload');
setLoadingToFalseAfterNavigatingTo('/upload');
} else {
setIsLoading(false);
}
}
}
const checkIfSelectedOllamaModelIsPulled = async (ollamaModel: string) => {
try {
const response = await fetch('/api/v1/ppt/ollama/list-pulled-models');
const data = await response.json();
const pulledModels = data.map((model: any) => model.name);
return pulledModels.includes(ollamaModel);
} catch (error) {
console.error('Error checking if selected Ollama model is pulled:', error);
return false;
}
}
const checkIfSelectedCustomModelIsAvailable = async (customModel: string) => {
try {
const response = await fetch('/api/v1/ppt/models/list/custom', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
});
const data = await response.json();
return data.includes(customModel);
} catch (error) {
console.error('Error fetching custom models:', error);
return false;
}
}
if (isLoading) {
return (
<div className="min-h-screen bg-[#E9E8F8] flex items-center justify-center">
<div className="text-center">
<Loader2 className="w-8 h-8 animate-spin text-blue-600 mx-auto mb-4" />
<p className="text-gray-600">Loading configuration...</p>
</div>
</div>
);
}
return children;
}