Changed onboarding to redirect automatically
This commit is contained in:
Lucas Oliveira
parent
2745846930
commit
67e2f6ee98
1 changed files with 171 additions and 170 deletions
|
|
@ -1,10 +1,11 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
import { Suspense, useEffect, useState } from "react";
|
import { Suspense, useEffect, useState } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import {
|
import {
|
||||||
useOnboardingMutation,
|
type OnboardingVariables,
|
||||||
type OnboardingVariables,
|
useOnboardingMutation,
|
||||||
} from "@/app/api/mutations/useOnboardingMutation";
|
} from "@/app/api/mutations/useOnboardingMutation";
|
||||||
import IBMLogo from "@/components/logo/ibm-logo";
|
import IBMLogo from "@/components/logo/ibm-logo";
|
||||||
import OllamaLogo from "@/components/logo/ollama-logo";
|
import OllamaLogo from "@/components/logo/ollama-logo";
|
||||||
|
|
@ -12,198 +13,198 @@ import OpenAILogo from "@/components/logo/openai-logo";
|
||||||
import { ProtectedRoute } from "@/components/protected-route";
|
import { ProtectedRoute } from "@/components/protected-route";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
CardContent,
|
CardContent,
|
||||||
CardFooter,
|
CardFooter,
|
||||||
CardHeader,
|
CardHeader,
|
||||||
} from "@/components/ui/card";
|
} from "@/components/ui/card";
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
TooltipContent,
|
||||||
|
TooltipTrigger,
|
||||||
|
} from "@/components/ui/tooltip";
|
||||||
|
import { useGetSettingsQuery } from "../api/queries/useGetSettingsQuery";
|
||||||
import { IBMOnboarding } from "./components/ibm-onboarding";
|
import { IBMOnboarding } from "./components/ibm-onboarding";
|
||||||
import { OllamaOnboarding } from "./components/ollama-onboarding";
|
import { OllamaOnboarding } from "./components/ollama-onboarding";
|
||||||
import { OpenAIOnboarding } from "./components/openai-onboarding";
|
import { OpenAIOnboarding } from "./components/openai-onboarding";
|
||||||
import {
|
|
||||||
Tooltip,
|
|
||||||
TooltipContent,
|
|
||||||
TooltipTrigger,
|
|
||||||
} from "@/components/ui/tooltip";
|
|
||||||
import { useGetSettingsQuery } from "../api/queries/useGetSettingsQuery";
|
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
|
|
||||||
function OnboardingPage() {
|
function OnboardingPage() {
|
||||||
const { data: settingsDb, isLoading: isSettingsLoading } =
|
const { data: settingsDb, isLoading: isSettingsLoading } =
|
||||||
useGetSettingsQuery();
|
useGetSettingsQuery();
|
||||||
|
|
||||||
const redirect = "/";
|
const redirect = "/";
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
// Redirect if already authenticated or in no-auth mode
|
// Redirect if already authenticated or in no-auth mode
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isSettingsLoading && settingsDb && settingsDb.edited) {
|
if (!isSettingsLoading && settingsDb && settingsDb.edited) {
|
||||||
router.push(redirect);
|
router.push(redirect);
|
||||||
}
|
}
|
||||||
}, [isSettingsLoading, redirect]);
|
}, [isSettingsLoading, settingsDb, router]);
|
||||||
|
|
||||||
const [modelProvider, setModelProvider] = useState<string>("openai");
|
const [modelProvider, setModelProvider] = useState<string>("openai");
|
||||||
|
|
||||||
const [sampleDataset, setSampleDataset] = useState<boolean>(true);
|
const [sampleDataset, setSampleDataset] = useState<boolean>(true);
|
||||||
|
|
||||||
const handleSetModelProvider = (provider: string) => {
|
const handleSetModelProvider = (provider: string) => {
|
||||||
setModelProvider(provider);
|
setModelProvider(provider);
|
||||||
setSettings({
|
setSettings({
|
||||||
model_provider: provider,
|
model_provider: provider,
|
||||||
embedding_model: "",
|
embedding_model: "",
|
||||||
llm_model: "",
|
llm_model: "",
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const [settings, setSettings] = useState<OnboardingVariables>({
|
const [settings, setSettings] = useState<OnboardingVariables>({
|
||||||
model_provider: modelProvider,
|
model_provider: modelProvider,
|
||||||
embedding_model: "",
|
embedding_model: "",
|
||||||
llm_model: "",
|
llm_model: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
// Mutations
|
// Mutations
|
||||||
const onboardingMutation = useOnboardingMutation({
|
const onboardingMutation = useOnboardingMutation({
|
||||||
onSuccess: (data) => {
|
onSuccess: (data) => {
|
||||||
toast.success("Onboarding completed successfully!");
|
toast.success("Onboarding completed successfully!");
|
||||||
console.log("Onboarding completed successfully", data);
|
console.log("Onboarding completed successfully", data);
|
||||||
},
|
router.push(redirect);
|
||||||
onError: (error) => {
|
},
|
||||||
toast.error("Failed to complete onboarding", {
|
onError: (error) => {
|
||||||
description: error.message,
|
toast.error("Failed to complete onboarding", {
|
||||||
});
|
description: error.message,
|
||||||
},
|
});
|
||||||
});
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const handleComplete = () => {
|
const handleComplete = () => {
|
||||||
if (
|
if (
|
||||||
!settings.model_provider ||
|
!settings.model_provider ||
|
||||||
!settings.llm_model ||
|
!settings.llm_model ||
|
||||||
!settings.embedding_model
|
!settings.embedding_model
|
||||||
) {
|
) {
|
||||||
toast.error("Please complete all required fields");
|
toast.error("Please complete all required fields");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prepare onboarding data
|
// Prepare onboarding data
|
||||||
const onboardingData: OnboardingVariables = {
|
const onboardingData: OnboardingVariables = {
|
||||||
model_provider: settings.model_provider,
|
model_provider: settings.model_provider,
|
||||||
llm_model: settings.llm_model,
|
llm_model: settings.llm_model,
|
||||||
embedding_model: settings.embedding_model,
|
embedding_model: settings.embedding_model,
|
||||||
sample_data: sampleDataset,
|
sample_data: sampleDataset,
|
||||||
};
|
};
|
||||||
|
|
||||||
// Add API key if available
|
// Add API key if available
|
||||||
if (settings.api_key) {
|
if (settings.api_key) {
|
||||||
onboardingData.api_key = settings.api_key;
|
onboardingData.api_key = settings.api_key;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add endpoint if available
|
// Add endpoint if available
|
||||||
if (settings.endpoint) {
|
if (settings.endpoint) {
|
||||||
onboardingData.endpoint = settings.endpoint;
|
onboardingData.endpoint = settings.endpoint;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add project_id if available
|
// Add project_id if available
|
||||||
if (settings.project_id) {
|
if (settings.project_id) {
|
||||||
onboardingData.project_id = settings.project_id;
|
onboardingData.project_id = settings.project_id;
|
||||||
}
|
}
|
||||||
|
|
||||||
onboardingMutation.mutate(onboardingData);
|
onboardingMutation.mutate(onboardingData);
|
||||||
};
|
};
|
||||||
|
|
||||||
const isComplete = !!settings.llm_model && !!settings.embedding_model;
|
const isComplete = !!settings.llm_model && !!settings.embedding_model;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="min-h-dvh w-full flex gap-5 flex-col items-center justify-center bg-background p-4"
|
className="min-h-dvh w-full flex gap-5 flex-col items-center justify-center bg-background p-4"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: "url('/images/background.png')",
|
backgroundImage: "url('/images/background.png')",
|
||||||
backgroundSize: "cover",
|
backgroundSize: "cover",
|
||||||
backgroundPosition: "center",
|
backgroundPosition: "center",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col items-center gap-5 min-h-[550px] w-full">
|
<div className="flex flex-col items-center gap-5 min-h-[550px] w-full">
|
||||||
<div className="flex flex-col items-center justify-center gap-4">
|
<div className="flex flex-col items-center justify-center gap-4">
|
||||||
<h1 className="text-2xl font-medium font-chivo">
|
<h1 className="text-2xl font-medium font-chivo">
|
||||||
Configure your models
|
Configure your models
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-sm text-muted-foreground">[description of task]</p>
|
<p className="text-sm text-muted-foreground">[description of task]</p>
|
||||||
</div>
|
</div>
|
||||||
<Card className="w-full max-w-[580px]">
|
<Card className="w-full max-w-[580px]">
|
||||||
<Tabs
|
<Tabs
|
||||||
defaultValue={modelProvider}
|
defaultValue={modelProvider}
|
||||||
onValueChange={handleSetModelProvider}
|
onValueChange={handleSetModelProvider}
|
||||||
>
|
>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<TabsList>
|
<TabsList>
|
||||||
<TabsTrigger value="openai">
|
<TabsTrigger value="openai">
|
||||||
<OpenAILogo className="w-4 h-4" />
|
<OpenAILogo className="w-4 h-4" />
|
||||||
OpenAI
|
OpenAI
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger value="watsonx">
|
<TabsTrigger value="watsonx">
|
||||||
<IBMLogo className="w-4 h-4" />
|
<IBMLogo className="w-4 h-4" />
|
||||||
IBM
|
IBM
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger value="ollama">
|
<TabsTrigger value="ollama">
|
||||||
<OllamaLogo className="w-4 h-4" />
|
<OllamaLogo className="w-4 h-4" />
|
||||||
Ollama
|
Ollama
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<TabsContent value="openai">
|
<TabsContent value="openai">
|
||||||
<OpenAIOnboarding
|
<OpenAIOnboarding
|
||||||
setSettings={setSettings}
|
setSettings={setSettings}
|
||||||
sampleDataset={sampleDataset}
|
sampleDataset={sampleDataset}
|
||||||
setSampleDataset={setSampleDataset}
|
setSampleDataset={setSampleDataset}
|
||||||
/>
|
/>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
<TabsContent value="watsonx">
|
<TabsContent value="watsonx">
|
||||||
<IBMOnboarding
|
<IBMOnboarding
|
||||||
setSettings={setSettings}
|
setSettings={setSettings}
|
||||||
sampleDataset={sampleDataset}
|
sampleDataset={sampleDataset}
|
||||||
setSampleDataset={setSampleDataset}
|
setSampleDataset={setSampleDataset}
|
||||||
/>
|
/>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
<TabsContent value="ollama">
|
<TabsContent value="ollama">
|
||||||
<OllamaOnboarding
|
<OllamaOnboarding
|
||||||
setSettings={setSettings}
|
setSettings={setSettings}
|
||||||
sampleDataset={sampleDataset}
|
sampleDataset={sampleDataset}
|
||||||
setSampleDataset={setSampleDataset}
|
setSampleDataset={setSampleDataset}
|
||||||
/>
|
/>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
<CardFooter className="flex justify-end">
|
<CardFooter className="flex justify-end">
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger asChild>
|
<TooltipTrigger asChild>
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={handleComplete}
|
onClick={handleComplete}
|
||||||
disabled={!isComplete}
|
disabled={!isComplete}
|
||||||
loading={onboardingMutation.isPending}
|
loading={onboardingMutation.isPending}
|
||||||
>
|
>
|
||||||
Complete
|
Complete
|
||||||
</Button>
|
</Button>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent>
|
<TooltipContent>
|
||||||
{!isComplete ? "Please fill in all required fields" : ""}
|
{!isComplete ? "Please fill in all required fields" : ""}
|
||||||
</TooltipContent>
|
</TooltipContent>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</CardFooter>
|
</CardFooter>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ProtectedOnboardingPage() {
|
export default function ProtectedOnboardingPage() {
|
||||||
return (
|
return (
|
||||||
<ProtectedRoute>
|
<ProtectedRoute>
|
||||||
<Suspense fallback={<div>Loading onboarding...</div>}>
|
<Suspense fallback={<div>Loading onboarding...</div>}>
|
||||||
<OnboardingPage />
|
<OnboardingPage />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue