gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

changed onboarding card design to match designs and remove card

Browse source
This commit is contained in:
Lucas Oliveira 2025-10-22 17:46:32 -03:00
parent 9c4a978c89
commit 1e8be3b075
1 changed files with 212 additions and 205 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

417
frontend/src/app/onboarding/components/onboarding-card.tsx
View file

@ -4,8 +4,8 @@ import { AnimatePresence, motion } from "framer-motion";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { import {
type OnboardingVariables, type OnboardingVariables,
useOnboardingMutation, useOnboardingMutation,
} from "@/app/api/mutations/useOnboardingMutation"; } from "@/app/api/mutations/useOnboardingMutation";
import { useGetTasksQuery } from "@/app/api/queries/useGetTasksQuery"; import { useGetTasksQuery } from "@/app/api/queries/useGetTasksQuery";
import { useDoclingHealth } from "@/components/docling-health-banner"; import { useDoclingHealth } from "@/components/docling-health-banner";
@ -14,242 +14,249 @@ import OllamaLogo from "@/components/logo/ollama-logo";
import OpenAILogo from "@/components/logo/openai-logo"; import OpenAILogo from "@/components/logo/openai-logo";
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 { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import { AnimatedProviderSteps } from "./animated-provider-steps"; import { AnimatedProviderSteps } from "./animated-provider-steps";
import { IBMOnboarding } from "./ibm-onboarding"; import { IBMOnboarding } from "./ibm-onboarding";
import { OllamaOnboarding } from "./ollama-onboarding"; import { OllamaOnboarding } from "./ollama-onboarding";
import { OpenAIOnboarding } from "./openai-onboarding"; import { OpenAIOnboarding } from "./openai-onboarding";
interface OnboardingCardProps { interface OnboardingCardProps {
onComplete: () => void; onComplete: () => void;
} }
const TOTAL_PROVIDER_STEPS = 4; const TOTAL_PROVIDER_STEPS = 4;
const OnboardingCard = ({ onComplete }: OnboardingCardProps) => { const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
const updatedOnboarding = process.env.UPDATED_ONBOARDING === "true"; const updatedOnboarding = process.env.UPDATED_ONBOARDING === "true";
const { isHealthy: isDoclingHealthy } = useDoclingHealth(); const { isHealthy: isDoclingHealthy } = useDoclingHealth();
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: "",
}); });
const [currentStep, setCurrentStep] = useState<number | null>(null); const [currentStep, setCurrentStep] = useState<number | null>(null);
// Query tasks to track completion // Query tasks to track completion
const { data: tasks } = useGetTasksQuery({ const { data: tasks } = useGetTasksQuery({
enabled: currentStep !== null, // Only poll when onboarding has started enabled: currentStep !== null, // Only poll when onboarding has started
refetchInterval: currentStep !== null ? 1000 : false, // Poll every 1 second during onboarding refetchInterval: currentStep !== null ? 1000 : false, // Poll every 1 second during onboarding
}); });
// Monitor tasks and call onComplete when all tasks are done // Monitor tasks and call onComplete when all tasks are done
useEffect(() => { useEffect(() => {
if (currentStep === null || !tasks) { if (currentStep === null || !tasks) {
return; return;
} }
// Check if there are any active tasks (pending, running, or processing) // Check if there are any active tasks (pending, running, or processing)
const activeTasks = tasks.find( const activeTasks = tasks.find(
(task) => (task) =>
task.status === "pending" || task.status === "pending" ||
task.status === "running" || task.status === "running" ||
task.status === "processing", task.status === "processing",
); );
// If no active tasks and we've started onboarding, complete it // If no active tasks and we've started onboarding, complete it
if ( if (
(!activeTasks || (activeTasks.processed_files ?? 0) > 0) && (!activeTasks || (activeTasks.processed_files ?? 0) > 0) &&
tasks.length > 0 tasks.length > 0
) { ) {
// Set to final step to show "Done" // Set to final step to show "Done"
setCurrentStep(TOTAL_PROVIDER_STEPS); setCurrentStep(TOTAL_PROVIDER_STEPS);
// Wait a bit before completing // Wait a bit before completing
setTimeout(() => { setTimeout(() => {
onComplete(); onComplete();
}, 1000); }, 1000);
} }
}, [tasks, currentStep, onComplete]); }, [tasks, currentStep, onComplete]);
// Mutations // Mutations
const onboardingMutation = useOnboardingMutation({ const onboardingMutation = useOnboardingMutation({
onSuccess: (data) => { onSuccess: (data) => {
console.log("Onboarding completed successfully", data); console.log("Onboarding completed successfully", data);
setCurrentStep(0); setCurrentStep(0);
}, },
onError: (error) => { onError: (error) => {
toast.error("Failed to complete onboarding", { toast.error("Failed to complete onboarding", {
description: error.message, 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);
setCurrentStep(0); setCurrentStep(0);
}; };
const isComplete = const isComplete =
!!settings.llm_model && !!settings.embedding_model && isDoclingHealthy; !!settings.llm_model && !!settings.embedding_model && isDoclingHealthy;
return ( return (
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
{currentStep === null ? ( {currentStep === null ? (
<motion.div <motion.div
key="onboarding-form" key="onboarding-form"
initial={{ opacity: 1, y: 0 }} initial={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -24 }} exit={{ opacity: 0, y: -24 }}
transition={{ duration: 0.4, ease: "easeInOut" }} transition={{ duration: 0.4, ease: "easeInOut" }}
> >
<Card <div className={`w-full max-w-[600px] flex flex-col gap-6`}>
className={`w-full max-w-[600px] ${ <Tabs
updatedOnboarding ? "border-none" : "" defaultValue={modelProvider}
}`} onValueChange={handleSetModelProvider}
> >
<Tabs <TabsList className="mb-4">
defaultValue={modelProvider} <TabsTrigger
onValueChange={handleSetModelProvider} value="openai"
> >
<CardHeader className={`${updatedOnboarding ? "px-0" : ""}`}> <div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "openai" ? "bg-white" : "bg-muted")}>
<TabsList> <OpenAILogo className={cn("w-4 h-4 shrink-0", modelProvider === "openai" ? "text-black" : "text-muted-foreground")} />
<TabsTrigger value="openai"> </div>
<OpenAILogo className="w-4 h-4" /> OpenAI
OpenAI </TabsTrigger>
</TabsTrigger> <TabsTrigger
<TabsTrigger value="watsonx"> value="watsonx"
<IBMLogo className="w-4 h-4" /> >
IBM watsonx.ai <div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "watsonx" ? "bg-[#1063FE]" : "bg-muted")}>
</TabsTrigger> <IBMLogo className={cn("w-4 h-4 shrink-0", modelProvider === "watsonx" ? "text-white" : "text-muted-foreground")} />
<TabsTrigger value="ollama"> </div>
<OllamaLogo className="w-4 h-4" /> IBM watsonx.ai
Ollama </TabsTrigger>
</TabsTrigger> <TabsTrigger
</TabsList> value="ollama"
</CardHeader> >
<CardContent className={`${updatedOnboarding ? "px-0" : ""}`}> <div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "ollama" ? "bg-white" : "bg-muted")}>
<TabsContent value="openai"> <OllamaLogo
<OpenAIOnboarding className={cn(
setSettings={setSettings} "w-4 h-4 shrink-0",
sampleDataset={sampleDataset} modelProvider === "ollama" ? "text-black" : "text-muted-foreground",
setSampleDataset={setSampleDataset} )}
/> />
</TabsContent> </div>
<TabsContent value="watsonx"> Ollama
<IBMOnboarding </TabsTrigger>
setSettings={setSettings} </TabsList>
sampleDataset={sampleDataset} <TabsContent value="openai">
setSampleDataset={setSampleDataset} <OpenAIOnboarding
/> setSettings={setSettings}
</TabsContent> sampleDataset={sampleDataset}
<TabsContent value="ollama"> setSampleDataset={setSampleDataset}
<OllamaOnboarding />
setSettings={setSettings} </TabsContent>
sampleDataset={sampleDataset} <TabsContent value="watsonx">
setSampleDataset={setSampleDataset} <IBMOnboarding
/> setSettings={setSettings}
</TabsContent> sampleDataset={sampleDataset}
</CardContent> setSampleDataset={setSampleDataset}
</Tabs> />
<CardFooter </TabsContent>
className={`flex ${updatedOnboarding ? "px-0" : "justify-end"}`} <TabsContent value="ollama">
> <OllamaOnboarding
<Tooltip> setSettings={setSettings}
<TooltipTrigger asChild> sampleDataset={sampleDataset}
<div> setSampleDataset={setSampleDataset}
<Button />
size="sm" </TabsContent>
onClick={handleComplete} </Tabs>
disabled={!isComplete}
loading={onboardingMutation.isPending} <Tooltip>
> <TooltipTrigger asChild>
<span className="select-none">Complete</span> <div>
</Button> <Button
</div> size="sm"
</TooltipTrigger> onClick={handleComplete}
{!isComplete && ( disabled={!isComplete}
<TooltipContent> loading={onboardingMutation.isPending}
{!!settings.llm_model && >
!!settings.embedding_model && <span className="select-none">Complete</span>
!isDoclingHealthy </Button>
? "docling-serve must be running to continue" </div>
: "Please fill in all required fields"} </TooltipTrigger>
</TooltipContent> {!isComplete && (
)} <TooltipContent>
</Tooltip> {!!settings.llm_model &&
</CardFooter> !!settings.embedding_model &&
</Card> !isDoclingHealthy
</motion.div> ? "docling-serve must be running to continue"
) : ( : "Please fill in all required fields"}
<motion.div </TooltipContent>
key="provider-steps" )}
initial={{ opacity: 0, y: 24 }} </Tooltip>
animate={{ opacity: 1, y: 0 }} </div>
transition={{ duration: 0.4, ease: "easeInOut" }} </motion.div>
> ) : (
<AnimatedProviderSteps <motion.div
currentStep={currentStep} key="provider-steps"
setCurrentStep={setCurrentStep} initial={{ opacity: 0, y: 24 }}
/> animate={{ opacity: 1, y: 0 }}
</motion.div> transition={{ duration: 0.4, ease: "easeInOut" }}
)} >
</AnimatePresence> <AnimatedProviderSteps
); currentStep={currentStep}
setCurrentStep={setCurrentStep}
/>
</motion.div>
)}
</AnimatePresence>
);
}; };
export default OnboardingCard; export default OnboardingCard;