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

feat: adds provider step status, adds current step to local storage (#269)

Browse source 
* Added mock provider status when completing the provider selection

* Refactor

* Added transitions to elements on steps

* delete test timeout

* fixed animation glitch

* Added animation to onboarding card status

* bump up time

* Changed interval to 1000

* Adds useEffect to complete onboarding step only when one file is uploaded

* Add local storage storing of step

* formatting
This commit is contained in:
Lucas Oliveira 2025-10-20 11:14:13 -03:00 • committed by GitHub
parent a2fb385a1f
commit c5447f6c5d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 271 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
frontend/src/app/onboarding/components/animated-provider-steps.tsx Normal file
View file

@ -0,0 +1,91 @@
"use client";
import { AnimatePresence, motion } from "framer-motion";
import { CheckIcon } from "lucide-react";
import { useEffect } from "react";
import { AnimatedProcessingIcon } from "@/components/ui/animated-processing-icon";
import { cn } from "@/lib/utils";
export function AnimatedProviderSteps({
currentStep,
setCurrentStep,
}: {
currentStep: number;
setCurrentStep: (step: number) => void;
}) {
const steps = [
"Setting up your model provider",
"Defining schema",
"Configuring Langflow",
"Ingesting sample data",
];
useEffect(() => {
if (currentStep < steps.length - 1) {
const interval = setInterval(() => {
setCurrentStep(currentStep + 1);
}, 1000);
return () => clearInterval(interval);
}
}, [currentStep, setCurrentStep]);
const isDone = currentStep >= steps.length;
return (
<div className="flex flex-col gap-2">
<div className="flex items-center gap-2">
<div
className={cn(
"transition-all duration-150 relative",
isDone ? "w-3.5 h-3.5" : "w-1.5 h-2.5",
)}
>
<CheckIcon
className={cn(
"text-accent-emerald-foreground shrink-0 w-3.5 h-3.5 absolute inset-0 transition-all duration-150",
isDone ? "opacity-100" : "opacity-0",
)}
/>
<AnimatedProcessingIcon
className={cn(
"text-current shrink-0 absolute inset-0 transition-all duration-150",
isDone ? "opacity-0" : "opacity-100",
)}
/>
</div>
<span className="text-mmd font-medium text-muted-foreground">
{isDone ? "Done" : "Thinking"}
</span>
</div>
<div className="overflow-hidden">
<AnimatePresence>
{!isDone && (
<motion.div
initial={{ opacity: 1, y: 0, height: "auto" }}
exit={{ opacity: 0, y: -24, height: 0 }}
transition={{ duration: 0.4, ease: "easeInOut" }}
className="flex items-center gap-5 overflow-y-hidden relative h-6"
>
<div className="w-px h-6 bg-border" />
<div className="relative h-5 w-full">
<AnimatePresence mode="sync" initial={false}>
<motion.span
key={currentStep}
initial={{ y: 24, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
exit={{ y: -24, opacity: 0 }}
transition={{ duration: 0.3, ease: "easeInOut" }}
className="text-mmd font-medium text-primary absolute left-0"
>
{steps[currentStep]}
</motion.span>
</AnimatePresence>
</div>
</motion.div>
)}
</AnimatePresence>
</div>
</div>
);
}

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

@ -1,11 +1,13 @@
"use client"; "use client";
import { useState } from "react"; import { AnimatePresence, motion } from "framer-motion";
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 { useDoclingHealth } from "@/components/docling-health-banner"; import { useDoclingHealth } from "@/components/docling-health-banner";
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";
@ -23,6 +25,7 @@ import {
TooltipContent, TooltipContent,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
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";
@ -31,11 +34,12 @@ interface OnboardingCardProps {
onComplete: () => void; onComplete: () => void;
} }
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);
@ -55,11 +59,47 @@ const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
llm_model: "", llm_model: "",
}); });
const [currentStep, setCurrentStep] = useState<number | null>(null);
// Query tasks to track completion
const { data: tasks } = useGetTasksQuery({
enabled: currentStep !== null, // Only poll when onboarding has started
refetchInterval: currentStep !== null ? 1000 : false, // Poll every 1 second during onboarding
});
// Monitor tasks and call onComplete when all tasks are done
useEffect(() => {
if (currentStep === null || !tasks) {
return;
}
// Check if there are any active tasks (pending, running, or processing)
const activeTasks = tasks.find(
(task) =>
task.status === "pending" ||
task.status === "running" ||
task.status === "processing",
);
// If no active tasks and we've started onboarding, complete it
if (
(!activeTasks || (activeTasks.processed_files ?? 0) > 0) &&
tasks.length > 0
) {
// Set to final step to show "Done"
setCurrentStep(TOTAL_PROVIDER_STEPS);
// Wait a bit before completing
setTimeout(() => {
onComplete();
}, 1000);
}
}, [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);
onComplete(); setCurrentStep(0);
}, },
onError: (error) => { onError: (error) => {
toast.error("Failed to complete onboarding", { toast.error("Failed to complete onboarding", {
@ -102,81 +142,114 @@ const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
} }
onboardingMutation.mutate(onboardingData); onboardingMutation.mutate(onboardingData);
setCurrentStep(0);
}; };
const isComplete = !!settings.llm_model && !!settings.embedding_model && isDoclingHealthy; const isComplete =
!!settings.llm_model && !!settings.embedding_model && isDoclingHealthy;
return ( return (
<Card className={`w-full max-w-[600px] ${updatedOnboarding ? "border-none" : ""}`}> <AnimatePresence mode="wait">
<Tabs {currentStep === null ? (
defaultValue={modelProvider} <motion.div
onValueChange={handleSetModelProvider} key="onboarding-form"
> initial={{ opacity: 1, y: 0 }}
<CardHeader className={`${updatedOnboarding ? "px-0" : ""}`}> exit={{ opacity: 0, y: -24 }}
<TabsList> transition={{ duration: 0.4, ease: "easeInOut" }}
<TabsTrigger value="openai"> >
<OpenAILogo className="w-4 h-4" /> <Card
OpenAI className={`w-full max-w-[600px] ${
</TabsTrigger> updatedOnboarding ? "border-none" : ""
<TabsTrigger value="watsonx"> }`}
<IBMLogo className="w-4 h-4" /> >
IBM watsonx.ai <Tabs
</TabsTrigger> defaultValue={modelProvider}
<TabsTrigger value="ollama"> onValueChange={handleSetModelProvider}
<OllamaLogo className="w-4 h-4" /> >
Ollama <CardHeader className={`${updatedOnboarding ? "px-0" : ""}`}>
</TabsTrigger> <TabsList>
</TabsList> <TabsTrigger value="openai">
</CardHeader> <OpenAILogo className="w-4 h-4" />
<CardContent className={`${updatedOnboarding ? "px-0" : ""}`}> OpenAI
<TabsContent value="openai"> </TabsTrigger>
<OpenAIOnboarding <TabsTrigger value="watsonx">
setSettings={setSettings} <IBMLogo className="w-4 h-4" />
sampleDataset={sampleDataset} IBM watsonx.ai
setSampleDataset={setSampleDataset} </TabsTrigger>
/> <TabsTrigger value="ollama">
</TabsContent> <OllamaLogo className="w-4 h-4" />
<TabsContent value="watsonx"> Ollama
<IBMOnboarding </TabsTrigger>
setSettings={setSettings} </TabsList>
sampleDataset={sampleDataset} </CardHeader>
setSampleDataset={setSampleDataset} <CardContent className={`${updatedOnboarding ? "px-0" : ""}`}>
/> <TabsContent value="openai">
</TabsContent> <OpenAIOnboarding
<TabsContent value="ollama"> setSettings={setSettings}
<OllamaOnboarding sampleDataset={sampleDataset}
setSettings={setSettings} setSampleDataset={setSampleDataset}
sampleDataset={sampleDataset} />
setSampleDataset={setSampleDataset} </TabsContent>
/> <TabsContent value="watsonx">
</TabsContent> <IBMOnboarding
</CardContent> setSettings={setSettings}
</Tabs> sampleDataset={sampleDataset}
<CardFooter className={`flex ${updatedOnboarding ? "px-0" : "justify-end"}`}> setSampleDataset={setSampleDataset}
<Tooltip> />
<TooltipTrigger asChild> </TabsContent>
<div> <TabsContent value="ollama">
<Button <OllamaOnboarding
size="sm" setSettings={setSettings}
onClick={handleComplete} sampleDataset={sampleDataset}
disabled={!isComplete} setSampleDataset={setSampleDataset}
loading={onboardingMutation.isPending} />
> </TabsContent>
<span className="select-none">Complete</span> </CardContent>
</Button> </Tabs>
</div> <CardFooter
</TooltipTrigger> className={`flex ${updatedOnboarding ? "px-0" : "justify-end"}`}
{!isComplete && ( >
<TooltipContent> <Tooltip>
{!!settings.llm_model && !!settings.embedding_model && !isDoclingHealthy <TooltipTrigger asChild>
? "docling-serve must be running to continue" <div>
: "Please fill in all required fields"} <Button
</TooltipContent> size="sm"
)} onClick={handleComplete}
</Tooltip> disabled={!isComplete}
</CardFooter> loading={onboardingMutation.isPending}
</Card> >
) <span className="select-none">Complete</span>
} </Button>
</div>
</TooltipTrigger>
{!isComplete && (
<TooltipContent>
{!!settings.llm_model &&
!!settings.embedding_model &&
!isDoclingHealthy
? "docling-serve must be running to continue"
: "Please fill in all required fields"}
</TooltipContent>
)}
</Tooltip>
</CardFooter>
</Card>
</motion.div>
) : (
<motion.div
key="provider-steps"
initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, ease: "easeInOut" }}
>
<AnimatedProviderSteps
currentStep={currentStep}
setCurrentStep={setCurrentStep}
/>
</motion.div>
)}
</AnimatePresence>
);
};
export default OnboardingCard; export default OnboardingCard;

30
frontend/src/components/chat-renderer.tsx
View file

@ -2,7 +2,7 @@
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { useState } from "react"; import { useEffect, useState } from "react";
import { import {
type ChatConversation, type ChatConversation,
useGetConversationsQuery, useGetConversationsQuery,
@ -18,6 +18,7 @@ import { useChat } from "@/contexts/chat-context";
import { import {
ANIMATION_DURATION, ANIMATION_DURATION,
HEADER_HEIGHT, HEADER_HEIGHT,
ONBOARDING_STEP_KEY,
SIDEBAR_WIDTH, SIDEBAR_WIDTH,
TOTAL_ONBOARDING_STEPS, TOTAL_ONBOARDING_STEPS,
} from "@/lib/constants"; } from "@/lib/constants";
@ -39,8 +40,20 @@ export function ChatRenderer({
startNewConversation, startNewConversation,
} = useChat(); } = useChat();
// Onboarding animation state // Initialize onboarding state based on local storage and settings
const [showLayout, setShowLayout] = useState(!!settings?.edited); const [currentStep, setCurrentStep] = useState<number>(() => {
if (typeof window === "undefined") return 0;
const savedStep = localStorage.getItem(ONBOARDING_STEP_KEY);
return savedStep !== null ? parseInt(savedStep, 10) : 0;
});
const [showLayout, setShowLayout] = useState<boolean>(() => {
if (typeof window === "undefined") return false;
const savedStep = localStorage.getItem(ONBOARDING_STEP_KEY);
// Show layout if settings.edited is true and if no onboarding step is saved
return !!settings?.edited && savedStep === null;
});
// Only fetch conversations on chat page // Only fetch conversations on chat page
const isOnChatPage = pathname === "/" || pathname === "/chat"; const isOnChatPage = pathname === "/" || pathname === "/chat";
const { data: conversations = [], isLoading: isConversationsLoading } = const { data: conversations = [], isLoading: isConversationsLoading } =
@ -53,12 +66,21 @@ export function ChatRenderer({
startNewConversation(); startNewConversation();
}; };
const [currentStep, setCurrentStep] = useState(0); // Save current step to local storage whenever it changes
useEffect(() => {
if (typeof window !== "undefined" && !showLayout) {
localStorage.setItem(ONBOARDING_STEP_KEY, currentStep.toString());
}
}, [currentStep, showLayout]);
const handleStepComplete = () => { const handleStepComplete = () => {
if (currentStep < TOTAL_ONBOARDING_STEPS - 1) { if (currentStep < TOTAL_ONBOARDING_STEPS - 1) {
setCurrentStep(currentStep + 1); setCurrentStep(currentStep + 1);
} else { } else {
// Onboarding is complete - remove from local storage and show layout
if (typeof window !== "undefined") {
localStorage.removeItem(ONBOARDING_STEP_KEY);
}
setShowLayout(true); setShowLayout(true);
} }
}; };

7
frontend/src/lib/constants.ts
View file

@ -27,4 +27,9 @@ export const UI_CONSTANTS = {
export const ANIMATION_DURATION = 0.4; export const ANIMATION_DURATION = 0.4;
export const SIDEBAR_WIDTH = 280; export const SIDEBAR_WIDTH = 280;
export const HEADER_HEIGHT = 54; export const HEADER_HEIGHT = 54;
export const TOTAL_ONBOARDING_STEPS = 4; export const TOTAL_ONBOARDING_STEPS = 4;
/**
* Local Storage Keys
*/
export const ONBOARDING_STEP_KEY = "onboarding_current_step";