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

* 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

frontend/src/app/onboarding/components/animated-provider-steps.tsx

@@ -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>
+  );
+}

frontend/src/app/onboarding/components/onboarding-card.tsx

@@ -1,11 +1,13 @@
 "use client";
 
-import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import {
   type OnboardingVariables,
   useOnboardingMutation,
 } from "@/app/api/mutations/useOnboardingMutation";
+import { useGetTasksQuery } from "@/app/api/queries/useGetTasksQuery";
 import { useDoclingHealth } from "@/components/docling-health-banner";
 import IBMLogo from "@/components/logo/ibm-logo";
 import OllamaLogo from "@/components/logo/ollama-logo";
@@ -23,6 +25,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { AnimatedProviderSteps } from "./animated-provider-steps";
 import { IBMOnboarding } from "./ibm-onboarding";
 import { OllamaOnboarding } from "./ollama-onboarding";
 import { OpenAIOnboarding } from "./openai-onboarding";
@@ -31,11 +34,12 @@ interface OnboardingCardProps {
   onComplete: () => void;
 }
 
+const TOTAL_PROVIDER_STEPS = 4;
+
 const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
   const updatedOnboarding = process.env.UPDATED_ONBOARDING === "true";
   const { isHealthy: isDoclingHealthy } = useDoclingHealth();
 
-
   const [modelProvider, setModelProvider] = useState<string>("openai");
 
   const [sampleDataset, setSampleDataset] = useState<boolean>(true);
@@ -55,11 +59,47 @@ const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
     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
   const onboardingMutation = useOnboardingMutation({
     onSuccess: (data) => {
       console.log("Onboarding completed successfully", data);
-      onComplete();
+      setCurrentStep(0);
     },
     onError: (error) => {
       toast.error("Failed to complete onboarding", {
@@ -102,81 +142,114 @@ const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
     }
 
     onboardingMutation.mutate(onboardingData);
+    setCurrentStep(0);
   };
 
-  const isComplete = !!settings.llm_model && !!settings.embedding_model && isDoclingHealthy;
+  const isComplete =
+    !!settings.llm_model && !!settings.embedding_model && isDoclingHealthy;
 
   return (
-    <Card className={`w-full max-w-[600px] ${updatedOnboarding ? "border-none" : ""}`}>
-      <Tabs
-        defaultValue={modelProvider}
-        onValueChange={handleSetModelProvider}
-      >
-        <CardHeader className={`${updatedOnboarding ? "px-0" : ""}`}>
-          <TabsList>
-            <TabsTrigger value="openai">
-              <OpenAILogo className="w-4 h-4" />
-              OpenAI
-            </TabsTrigger>
-            <TabsTrigger value="watsonx">
-              <IBMLogo className="w-4 h-4" />
-              IBM watsonx.ai
-            </TabsTrigger>
-            <TabsTrigger value="ollama">
-              <OllamaLogo className="w-4 h-4" />
-              Ollama
-            </TabsTrigger>
-          </TabsList>
-        </CardHeader>
-        <CardContent className={`${updatedOnboarding ? "px-0" : ""}`}>
-          <TabsContent value="openai">
-            <OpenAIOnboarding
-              setSettings={setSettings}
-              sampleDataset={sampleDataset}
-              setSampleDataset={setSampleDataset}
-            />
-          </TabsContent>
-          <TabsContent value="watsonx">
-            <IBMOnboarding
-              setSettings={setSettings}
-              sampleDataset={sampleDataset}
-              setSampleDataset={setSampleDataset}
-            />
-          </TabsContent>
-          <TabsContent value="ollama">
-            <OllamaOnboarding
-              setSettings={setSettings}
-              sampleDataset={sampleDataset}
-              setSampleDataset={setSampleDataset}
-            />
-          </TabsContent>
-        </CardContent>
-      </Tabs>
-      <CardFooter className={`flex  ${updatedOnboarding ? "px-0" : "justify-end"}`}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div>
-              <Button
-                size="sm"
-                onClick={handleComplete}
-                disabled={!isComplete}
-                loading={onboardingMutation.isPending}
-              >
-                <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>
-  )
-}
+    <AnimatePresence mode="wait">
+      {currentStep === null ? (
+        <motion.div
+          key="onboarding-form"
+          initial={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -24 }}
+          transition={{ duration: 0.4, ease: "easeInOut" }}
+        >
+          <Card
+            className={`w-full max-w-[600px] ${
+              updatedOnboarding ? "border-none" : ""
+            }`}
+          >
+            <Tabs
+              defaultValue={modelProvider}
+              onValueChange={handleSetModelProvider}
+            >
+              <CardHeader className={`${updatedOnboarding ? "px-0" : ""}`}>
+                <TabsList>
+                  <TabsTrigger value="openai">
+                    <OpenAILogo className="w-4 h-4" />
+                    OpenAI
+                  </TabsTrigger>
+                  <TabsTrigger value="watsonx">
+                    <IBMLogo className="w-4 h-4" />
+                    IBM watsonx.ai
+                  </TabsTrigger>
+                  <TabsTrigger value="ollama">
+                    <OllamaLogo className="w-4 h-4" />
+                    Ollama
+                  </TabsTrigger>
+                </TabsList>
+              </CardHeader>
+              <CardContent className={`${updatedOnboarding ? "px-0" : ""}`}>
+                <TabsContent value="openai">
+                  <OpenAIOnboarding
+                    setSettings={setSettings}
+                    sampleDataset={sampleDataset}
+                    setSampleDataset={setSampleDataset}
+                  />
+                </TabsContent>
+                <TabsContent value="watsonx">
+                  <IBMOnboarding
+                    setSettings={setSettings}
+                    sampleDataset={sampleDataset}
+                    setSampleDataset={setSampleDataset}
+                  />
+                </TabsContent>
+                <TabsContent value="ollama">
+                  <OllamaOnboarding
+                    setSettings={setSettings}
+                    sampleDataset={sampleDataset}
+                    setSampleDataset={setSampleDataset}
+                  />
+                </TabsContent>
+              </CardContent>
+            </Tabs>
+            <CardFooter
+              className={`flex  ${updatedOnboarding ? "px-0" : "justify-end"}`}
+            >
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div>
+                    <Button
+                      size="sm"
+                      onClick={handleComplete}
+                      disabled={!isComplete}
+                      loading={onboardingMutation.isPending}
+                    >
+                      <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;

frontend/src/components/chat-renderer.tsx

@@ -2,7 +2,7 @@
 
 import { motion } from "framer-motion";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   type ChatConversation,
   useGetConversationsQuery,
@@ -18,6 +18,7 @@ import { useChat } from "@/contexts/chat-context";
 import {
   ANIMATION_DURATION,
   HEADER_HEIGHT,
+  ONBOARDING_STEP_KEY,
   SIDEBAR_WIDTH,
   TOTAL_ONBOARDING_STEPS,
 } from "@/lib/constants";
@@ -39,8 +40,20 @@ export function ChatRenderer({
     startNewConversation,
   } = useChat();
 
-  // Onboarding animation state
-  const [showLayout, setShowLayout] = useState(!!settings?.edited);
+  // Initialize onboarding state based on local storage and settings
+  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
   const isOnChatPage = pathname === "/" || pathname === "/chat";
   const { data: conversations = [], isLoading: isConversationsLoading } =
@@ -53,12 +66,21 @@ export function ChatRenderer({
     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 = () => {
     if (currentStep < TOTAL_ONBOARDING_STEPS - 1) {
       setCurrentStep(currentStep + 1);
     } else {
+      // Onboarding is complete - remove from local storage and show layout
+      if (typeof window !== "undefined") {
+        localStorage.removeItem(ONBOARDING_STEP_KEY);
+      }
       setShowLayout(true);
     }
   };

frontend/src/lib/constants.ts

@@ -27,4 +27,9 @@ export const UI_CONSTANTS = {
 export const ANIMATION_DURATION = 0.4;
 export const SIDEBAR_WIDTH = 280;
 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";