fix: added onboarding steps accordion, changed bg color (#313)

* fixed accordion chevron side

* Added steps history to animated provider steps

* always reserve space for thinking, and pass required things for children

* update onboarding card to reflect changes

* added showCompleted

* passed required props

* Added background to other pages

* Made tasks just appear when not on onboarding

* changed task context to not have error

* changed default to closed

* fixed onboarding card

* changed line to show up centered

frontend/components/ui/accordion.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown } from "lucide-react";
+import { ChevronRight } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -28,12 +28,12 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center p-4 py-2.5 gap-2 font-medium !text-mmd text-muted-foreground transition-all [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center p-4 py-2.5 gap-2 font-medium !text-mmd text-muted-foreground transition-all [&[data-state=open]>svg]:rotate-90",
         className,
       )}
       {...props}
     >
-      <ChevronDown className="h-3.5 w-3.5 shrink-0 transition-transform duration-200" />
+      <ChevronRight className="h-3.5 w-3.5 shrink-0 transition-transform duration-200" />
       {children}
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>

frontend/src/app/new-onboarding/components/onboarding-content.tsx

@@ -26,7 +26,6 @@ export function OnboardingContent({
 	);
 	const [isLoadingModels, setIsLoadingModels] = useState<boolean>(false);
 	const [loadingStatus, setLoadingStatus] = useState<string[]>([]);
-	const [hasStartedOnboarding, setHasStartedOnboarding] = useState<boolean>(false);
 
 	const { streamingMessage, isLoading, sendMessage } = useChatStreaming({
 		onComplete: (message, newResponseId) => {
@@ -81,16 +80,17 @@ export function OnboardingContent({
 					<OnboardingStep
 						isVisible={currentStep >= 0}
 						isCompleted={currentStep > 0}
+						showCompleted={true}
 						text="Let's get started by setting up your model provider."
 						isLoadingModels={isLoadingModels}
 						loadingStatus={loadingStatus}
-						reserveSpaceForThinking={!hasStartedOnboarding}
+						reserveSpaceForThinking={true}
 					>
 						<OnboardingCard
 							onComplete={() => {
-								setHasStartedOnboarding(true);
 								handleStepComplete();
 							}}
+							isCompleted={currentStep > 0}
 							setIsLoadingModels={setIsLoadingModels}
 							setLoadingStatus={setLoadingStatus}
 						/>

frontend/src/app/new-onboarding/components/onboarding-step.tsx

@@ -2,8 +2,8 @@ import { AnimatePresence, motion } from "motion/react";
 import { type ReactNode, useEffect, useState } from "react";
 import { Message } from "@/app/chat/components/message";
 import DogIcon from "@/components/logo/dog-icon";
-import AnimatedProcessingIcon from "@/components/ui/animated-processing-icon";
 import { MarkdownRenderer } from "@/components/markdown-renderer";
+import AnimatedProcessingIcon from "@/components/ui/animated-processing-icon";
 import { cn } from "@/lib/utils";
 
 interface OnboardingStepProps {
@@ -11,6 +11,7 @@ interface OnboardingStepProps {
 	children?: ReactNode;
 	isVisible: boolean;
 	isCompleted?: boolean;
+	showCompleted?: boolean;
 	icon?: ReactNode;
 	isMarkdown?: boolean;
 	hideIcon?: boolean;
@@ -24,6 +25,7 @@ export function OnboardingStep({
 	children,
 	isVisible,
 	isCompleted = false,
+	showCompleted = false,
 	icon,
 	isMarkdown = false,
 	hideIcon = false,
@@ -116,7 +118,7 @@ export function OnboardingStep({
 					{isLoadingModels && loadingStatus.length > 0 ? (
 						<div className="flex flex-col gap-2 py-1.5">
 							<div className="flex items-center gap-2">
-                <div className="relative w-1.5 h-2.5">
+								<div className="relative w-3.5 h-2.5">
 									<AnimatedProcessingIcon className="text-current shrink-0 absolute inset-0" />
 								</div>
 								<span className="text-mmd font-medium text-muted-foreground">
@@ -146,9 +148,7 @@ export function OnboardingStep({
 					) : isMarkdown ? (
 						<MarkdownRenderer
 							className={cn(
-                  isCompleted
+								isCompleted ? "text-placeholder-foreground" : "text-foreground",
-                    ? "text-placeholder-foreground"
-                    : "text-foreground",
 								"text-sm py-1.5 transition-colors duration-300",
 							)}
 							chatMessage={text}
@@ -165,22 +165,20 @@ export function OnboardingStep({
 									<span className="inline-block w-1 h-3.5 bg-primary ml-1 animate-pulse" />
 								)}
 							</p>
-              {reserveSpaceForThinking && (
+							{reserveSpaceForThinking && <div className="h-8" />}
-                <div className="h-8" />
-              )}
 						</>
 					)}
 					{children && (
 						<AnimatePresence>
-              {((showChildren && !isCompleted) || isMarkdown) && (
+							{((showChildren && (!isCompleted || showCompleted)) ||
+								isMarkdown) && (
 								<motion.div
 									initial={{ opacity: 0, y: -10 }}
 									animate={{ opacity: 1, y: 0 }}
 									exit={{ opacity: 0, height: 0 }}
 									transition={{ duration: 0.3, delay: 0.3, ease: "easeOut" }}
 								>
-                  <div className="pt-2">
+									<div className="pt-2">{children}</div>
-                  {children}</div>
 								</motion.div>
 							)}
 						</AnimatePresence>

frontend/src/app/new-onboarding/components/onboarding-upload.tsx

@@ -1,8 +1,8 @@
-import { ChangeEvent, useRef, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { type ChangeEvent, useRef, useState } from "react";
+import { AnimatedProviderSteps } from "@/app/onboarding/components/animated-provider-steps";
 import { Button } from "@/components/ui/button";
 import { uploadFileForContext } from "@/lib/upload-utils";
-import { AnimatePresence, motion } from "motion/react";
-import { AnimatedProviderSteps } from "@/app/onboarding/components/animated-provider-steps";
 
 interface OnboardingUploadProps {
 	onComplete: () => void;
@@ -13,10 +13,7 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
 	const [isUploading, setIsUploading] = useState(false);
 	const [currentStep, setCurrentStep] = useState<number | null>(null);
 
-  const STEP_LIST = [
+	const STEP_LIST = ["Uploading your document", "Processing your document"];
-    "Uploading your document",
-    "Processing your document",
-  ];
 
 	const resetFileInput = () => {
 		if (fileInputRef.current) {
@@ -38,9 +35,9 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
 			console.error("Upload failed", (error as Error).message);
 		} finally {
 			setIsUploading(false);
-      await new Promise(resolve => setTimeout(resolve, 1000));
+			await new Promise((resolve) => setTimeout(resolve, 1000));
 			setCurrentStep(STEP_LIST.length);
-      await new Promise(resolve => setTimeout(resolve, 500));
+			await new Promise((resolve) => setTimeout(resolve, 500));
 			onComplete();
 		}
 	};
@@ -55,13 +52,15 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
 		try {
 			await performUpload(selectedFile);
 		} catch (error) {
-      console.error("Unable to prepare file for upload", (error as Error).message);
+			console.error(
+				"Unable to prepare file for upload",
+				(error as Error).message,
+			);
 		} finally {
 			resetFileInput();
 		}
 	};
 
-
 	return (
 		<AnimatePresence mode="wait">
 			{currentStep === null ? (
@@ -97,12 +96,13 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
 					<AnimatedProviderSteps
 						currentStep={currentStep}
 						setCurrentStep={setCurrentStep}
+						isCompleted={false}
 						steps={STEP_LIST}
 					/>
 				</motion.div>
 			)}
 		</AnimatePresence>
-  )
+	);
-}
+};
 
 export default OnboardingUpload;

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

@@ -2,38 +2,90 @@
 
 import { AnimatePresence, motion } from "framer-motion";
 import { CheckIcon } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
 import AnimatedProcessingIcon from "@/components/ui/animated-processing-icon";
 import { cn } from "@/lib/utils";
 
 export function AnimatedProviderSteps({
 	currentStep,
+	isCompleted,
 	setCurrentStep,
 	steps,
+	storageKey = "provider-steps",
 }: {
 	currentStep: number;
+	isCompleted: boolean;
 	setCurrentStep: (step: number) => void;
 	steps: string[];
+	storageKey?: string;
 }) {
+	const [startTime, setStartTime] = useState<number | null>(null);
+	const [elapsedTime, setElapsedTime] = useState<number>(0);
 
+	// Initialize start time from local storage or set new one
 	useEffect(() => {
-    if (currentStep < steps.length - 1) {
+		const storedStartTime = localStorage.getItem(`${storageKey}-start`);
+		const storedElapsedTime = localStorage.getItem(`${storageKey}-elapsed`);
+
+		if (isCompleted && storedElapsedTime) {
+			// If completed, use stored elapsed time
+			setElapsedTime(parseFloat(storedElapsedTime));
+		} else if (storedStartTime) {
+			// If in progress, use stored start time
+			setStartTime(parseInt(storedStartTime));
+		} else {
+			// First time, set new start time
+			const now = Date.now();
+			setStartTime(now);
+			localStorage.setItem(`${storageKey}-start`, now.toString());
+		}
+	}, [storageKey, isCompleted]);
+
+	// Progress through steps
+	useEffect(() => {
+		if (currentStep < steps.length - 1 && !isCompleted) {
 			const interval = setInterval(() => {
 				setCurrentStep(currentStep + 1);
 			}, 1500);
 			return () => clearInterval(interval);
 		}
-  }, [currentStep, setCurrentStep, steps]);
+	}, [currentStep, setCurrentStep, steps, isCompleted]);
 
-  const isDone = currentStep >= steps.length;
+	// Calculate and store elapsed time when completed
+	useEffect(() => {
+		if (isCompleted && startTime) {
+			const elapsed = Date.now() - startTime;
+			setElapsedTime(elapsed);
+			localStorage.setItem(`${storageKey}-elapsed`, elapsed.toString());
+			localStorage.removeItem(`${storageKey}-start`);
+		}
+	}, [isCompleted, startTime, storageKey]);
+
+	const isDone = currentStep >= steps.length && !isCompleted;
 
 	return (
-    <div className="flex flex-col gap-2">
+		<AnimatePresence mode="wait">
+			{!isCompleted ? (
+				<motion.div
+					key="processing"
+					initial={{ opacity: 0 }}
+					animate={{ opacity: 1 }}
+					exit={{ opacity: 0 }}
+					transition={{ duration: 0.3 }}
+					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",
+								isDone ? "w-3.5 h-3.5" : "w-3.5 h-2.5",
 							)}
 						>
 							<CheckIcon
@@ -61,9 +113,9 @@ export function AnimatedProviderSteps({
 									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"
+									className="flex items-center gap-4 overflow-y-hidden relative h-6"
 								>
-              <div className="w-px h-6 bg-border" />
+									<div className="w-px h-6 bg-border ml-2" />
 									<div className="relative h-5 w-full">
 										<AnimatePresence mode="sync" initial={false}>
 											<motion.span
@@ -82,6 +134,79 @@ export function AnimatedProviderSteps({
 							)}
 						</AnimatePresence>
 					</div>
+				</motion.div>
+			) : (
+				<motion.div
+					key="completed"
+					initial={{ opacity: 0 }}
+					animate={{ opacity: 1 }}
+					exit={{ opacity: 0 }}
+					transition={{ duration: 0.3 }}
+				>
+					<Accordion type="single" collapsible>
+						<AccordionItem value="steps" className="border-none">
+							<AccordionTrigger className="hover:no-underline p-0 py-2">
+								<div className="flex items-center gap-2">
+									<span className="text-mmd font-medium text-muted-foreground">
+										{`Initialized in ${(elapsedTime / 1000).toFixed(1)} seconds`}
+									</span>
 								</div>
+							</AccordionTrigger>
+							<AccordionContent className="pl-0 pt-2 pb-0">
+								<div className="relative pl-1">
+									{/* Connecting line on the left */}
+									<motion.div
+										className="absolute left-[7px] top-0 bottom-0 w-px bg-border z-0"
+										initial={{ scaleY: 0 }}
+										animate={{ scaleY: 1 }}
+										transition={{ duration: 0.3, ease: "easeOut" }}
+										style={{ transformOrigin: "top" }}
+									/>
+
+									<div className="space-y-3 ml-4">
+										<AnimatePresence>
+											{steps.map((step, index) => (
+												<motion.div
+													key={step}
+													initial={{ opacity: 0, x: -10 }}
+													animate={{ opacity: 1, x: 0 }}
+													transition={{
+														duration: 0.3,
+														delay: index * 0.05,
+													}}
+													className="flex items-center gap-1.5"
+												>
+													<motion.div
+														className="relative w-3.5 h-3.5 shrink-0 z-10 bg-background"
+														initial={{ scale: 0 }}
+														animate={{ scale: 1 }}
+														transition={{
+															duration: 0.2,
+															delay: index * 0.05 + 0.1,
+														}}
+													>
+														<motion.div
+															key="check"
+															initial={{ scale: 0, rotate: -180 }}
+															animate={{ scale: 1, rotate: 0 }}
+															transition={{ duration: 0.3 }}
+														>
+															<CheckIcon className="text-accent-emerald-foreground w-3.5 h-3.5" />
+														</motion.div>
+													</motion.div>
+													<span className="text-mmd text-muted-foreground">
+														{step}
+													</span>
+												</motion.div>
+											))}
+										</AnimatePresence>
+									</div>
+								</div>
+							</AccordionContent>
+						</AccordionItem>
+					</Accordion>
+				</motion.div>
+			)}
+		</AnimatePresence>
 	);
 }

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

@@ -27,6 +27,7 @@ import { OpenAIOnboarding } from "./openai-onboarding";
 
 interface OnboardingCardProps {
 	onComplete: () => void;
+	isCompleted?: boolean;
 	setIsLoadingModels?: (isLoading: boolean) => void;
 	setLoadingStatus?: (status: string[]) => void;
 }
@@ -43,6 +44,7 @@ const TOTAL_PROVIDER_STEPS = STEP_LIST.length;
 
 const OnboardingCard = ({
 	onComplete,
+	isCompleted = false,
 	setIsLoadingModels: setIsLoadingModelsParent,
 	setLoadingStatus: setLoadingStatusParent,
 }: OnboardingCardProps) => {
@@ -104,7 +106,7 @@ const OnboardingCard = ({
 		llm_model: "",
 	});
 
-	const [currentStep, setCurrentStep] = useState<number | null>(null);
+	const [currentStep, setCurrentStep] = useState<number | null>(isCompleted ? TOTAL_PROVIDER_STEPS : null);
 
 	// Query tasks to track completion
 	const { data: tasks } = useGetTasksQuery({
@@ -130,6 +132,7 @@ const OnboardingCard = ({
 		if (
 			(!activeTasks || (activeTasks.processed_files ?? 0) > 0) &&
 			tasks.length > 0
+			&& !isCompleted
 		) {
 			// Set to final step to show "Done"
 			setCurrentStep(TOTAL_PROVIDER_STEPS);
@@ -138,7 +141,7 @@ const OnboardingCard = ({
 				onComplete();
 			}, 1000);
 		}
-	}, [tasks, currentStep, onComplete]);
+	}, [tasks, currentStep, onComplete, isCompleted]);
 
 	// Mutations
 	const onboardingMutation = useOnboardingMutation({
@@ -267,14 +270,13 @@ const OnboardingCard = ({
 							</TabsContent>
 						</Tabs>
 
-						{!isLoadingModels && (
 						<Tooltip>
 							<TooltipTrigger asChild>
 								<div>
 									<Button
 										size="sm"
 										onClick={handleComplete}
-											disabled={!isComplete}
+										disabled={!isComplete || isLoadingModels}
 										loading={onboardingMutation.isPending}
 									>
 										<span className="select-none">Complete</span>
@@ -283,15 +285,14 @@ const OnboardingCard = ({
 							</TooltipTrigger>
 							{!isComplete && (
 								<TooltipContent>
-										{!!settings.llm_model &&
+									{isLoadingModels ? "Loading models..." : (!!settings.llm_model &&
 									!!settings.embedding_model &&
 									!isDoclingHealthy
 										? "docling-serve must be running to continue"
-											: "Please fill in all required fields"}
+										: "Please fill in all required fields")}
 								</TooltipContent>
 							)}
 						</Tooltip>
-						)}
 					</div>
 				</motion.div>
 			) : (
@@ -303,6 +304,7 @@ const OnboardingCard = ({
 				>
 					<AnimatedProviderSteps
             currentStep={currentStep}
+			isCompleted={isCompleted}
             setCurrentStep={setCurrentStep}
             steps={STEP_LIST}
           />

frontend/src/components/chat-renderer.tsx

@@ -149,6 +149,7 @@ export function ChatRenderer({
 					className={cn(
 						"flex h-full w-full max-w-full max-h-full items-center justify-center overflow-hidden",
 						!showLayout && "absolute",
+						showLayout && !isOnChatPage && "bg-background",
 					)}
 				>
 					<div
@@ -172,7 +173,7 @@ export function ChatRenderer({
 								ease: "easeOut",
 								delay: ANIMATION_DURATION,
 							}}
-							className={cn("w-full h-full 0v")}
+							className={cn("w-full h-full")}
 						>
 							<div className={cn("w-full h-full", !showLayout && "hidden")}>
 								{children}

frontend/src/contexts/task-context.tsx

@@ -18,6 +18,7 @@ import {
 	useGetTasksQuery,
 } from "@/app/api/queries/useGetTasksQuery";
 import { useAuth } from "@/contexts/auth-context";
+import { ONBOARDING_STEP_KEY } from "@/lib/constants";
 
 // Task interface is now imported from useGetTasksQuery
 export type { Task };
@@ -89,6 +90,12 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
 		},
 	});
 
+	// Helper function to check if onboarding is active
+	const isOnboardingActive = useCallback(() => {
+		if (typeof window === "undefined") return false;
+		return localStorage.getItem(ONBOARDING_STEP_KEY) !== null;
+	}, []);
+
 	const refetchSearch = useCallback(() => {
 		queryClient.invalidateQueries({
 			queryKey: ["search"],
@@ -148,9 +155,7 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
 							const fileInfoEntry = fileInfo as TaskFileEntry;
 							// Use the filename from backend if available, otherwise extract from path
 							const fileName =
-                fileInfoEntry.filename ||
+								fileInfoEntry.filename || filePath.split("/").pop() || filePath;
-                filePath.split("/").pop() ||
-                filePath;
 							const fileStatus = fileInfoEntry.status ?? "processing";
 
 							// Map backend file status to our TaskFile status
@@ -262,7 +267,7 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
 							successfulFiles !== 1 ? "s" : ""
 						} uploaded successfully`;
 					}
-
+					if (!isOnboardingActive()) {
 						toast.success("Task completed", {
 							description,
 							action: {
@@ -273,6 +278,7 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
 								},
 							},
 						});
+					}
 					setTimeout(() => {
 						setFiles((prevFiles) =>
 							prevFiles.filter(
@@ -301,7 +307,7 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
 
 		// Store current tasks as previous for next comparison
 		previousTasksRef.current = tasks;
-  }, [tasks, refetchSearch]);
+	}, [tasks, refetchSearch, isOnboardingActive]);
 
 	const addTask = useCallback(
 		(_taskId: string) => {
@@ -319,7 +325,6 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
 		await refetchTasks();
 	}, [refetchTasks]);
 
-
 	const cancelTask = useCallback(
 		async (taskId: string) => {
 			cancelTaskMutation.mutate({ taskId });