fixed conversation be selected when exiting onboarding

set the messages as just the user message when messages.length is 1
fixed conversation be selected even though its a new conversation
2025-11-18 18:22:26 -03:00 · 2025-11-18 17:56:02 -03:00 · 2025-11-18 17:49:34 -03:00 · 2025-11-18 17:38:21 -03:00 · 2025-11-18 17:28:38 -03:00 · 2025-11-18 17:15:33 -03:00
12 changed files with 1132 additions and 1148 deletions
--- a/Dockerfile.langflow
+++ b/Dockerfile.langflow
@ -1,4 +1,4 @@
-FROM langflowai/langflow-nightly:1.6.3.dev1
+FROM langflowai/langflow-nightly:1.7.0.dev5

 EXPOSE 7860

--- a/docker-compose-cpu.yml
+++ b/docker-compose-cpu.yml
@ -91,7 +91,7 @@ services:
  langflow:
    volumes:
      - ./flows:/app/flows:U,z
-    image: langflowai/langflow-nightly:${LANGFLOW_VERSION:-1.7.0.dev5}
+    image: phact/openrag-langflow:${LANGFLOW_VERSION:-latest}
    # build:
    #   context: .
    #   dockerfile: Dockerfile.langflow
--- a/frontend/app/api/queries/useGetNudgesQuery.ts
+++ b/frontend/app/api/queries/useGetNudgesQuery.ts
@ -76,6 +76,11 @@ export const useGetNudgesQuery = (
    {
      queryKey: ["nudges", chatId, filters, limit, scoreThreshold],
      queryFn: getNudges,
+      refetchInterval: (query) => {
+        // If data is empty, refetch every 5 seconds
+        const data = query.state.data;
+        return Array.isArray(data) && data.length === 0 ? 5000 : false;
+      },
      ...options,
    },
    queryClient,
--- a/frontend/app/chat/page.tsx
+++ b/frontend/app/chat/page.tsx
@ -782,7 +782,11 @@ function ChatPage() {
      timestamp: new Date(),
    };

-    setMessages((prev) => [...prev, userMessage]);
+    if (messages.length === 1) {
+      setMessages([userMessage]);
+    } else {
+      setMessages((prev) => [...prev, userMessage]);
+    }
    setInput("");
    setLoading(true);
    setIsFilterHighlighted(false);
--- a/frontend/app/onboarding/_components/animated-provider-steps.tsx
+++ b/frontend/app/onboarding/_components/animated-provider-steps.tsx
@ -5,210 +5,211 @@ import { CheckIcon, XIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import AnimatedProcessingIcon from "@/components/icons/animated-processing-icon";
 import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
 } from "@/components/ui/accordion";
+import { ONBOARDING_CARD_STEPS_KEY } from "@/lib/constants";
 import { cn } from "@/lib/utils";

 export function AnimatedProviderSteps({
-  currentStep,
-  isCompleted,
-  setCurrentStep,
-  steps,
-  storageKey = "provider-steps",
-  processingStartTime,
-  hasError = false,
+	currentStep,
+	isCompleted,
+	setCurrentStep,
+	steps,
+	storageKey = ONBOARDING_CARD_STEPS_KEY,
+	processingStartTime,
+	hasError = false,
 }: {
-  currentStep: number;
-  isCompleted: boolean;
-  setCurrentStep: (step: number) => void;
-  steps: string[];
-  storageKey?: string;
-  processingStartTime?: number | null;
-  hasError?: boolean;
+	currentStep: number;
+	isCompleted: boolean;
+	setCurrentStep: (step: number) => void;
+	steps: string[];
+	storageKey?: string;
+	processingStartTime?: number | null;
+	hasError?: boolean;
 }) {
-  const [startTime, setStartTime] = useState<number | null>(null);
-  const [elapsedTime, setElapsedTime] = useState<number>(0);
+	const [startTime, setStartTime] = useState<number | null>(null);
+	const [elapsedTime, setElapsedTime] = useState<number>(0);

-  // Initialize start time from prop or local storage
-  useEffect(() => {
-    const storedElapsedTime = localStorage.getItem(`${storageKey}-elapsed`);
+	// Initialize start time from prop or local storage
+	useEffect(() => {
+		const storedElapsedTime = localStorage.getItem(storageKey);

-    if (isCompleted && storedElapsedTime) {
-      // If completed, use stored elapsed time
-      setElapsedTime(parseFloat(storedElapsedTime));
-    } else if (processingStartTime) {
-      // Use the start time passed from parent (when user clicked Complete)
-      setStartTime(processingStartTime);
-    }
-  }, [storageKey, isCompleted, processingStartTime]);
+		if (isCompleted && storedElapsedTime) {
+			// If completed, use stored elapsed time
+			setElapsedTime(parseFloat(storedElapsedTime));
+		} else if (processingStartTime) {
+			// Use the start time passed from parent (when user clicked Complete)
+			setStartTime(processingStartTime);
+		}
+	}, [storageKey, isCompleted, processingStartTime]);

-  // Progress through steps
-  useEffect(() => {
-    if (currentStep < steps.length - 1 && !isCompleted) {
-      const interval = setInterval(() => {
-        setCurrentStep(currentStep + 1);
-      }, 1500);
-      return () => clearInterval(interval);
-    }
-  }, [currentStep, setCurrentStep, steps, isCompleted]);
+	// Progress through steps
+	useEffect(() => {
+		if (currentStep < steps.length - 1 && !isCompleted) {
+			const interval = setInterval(() => {
+				setCurrentStep(currentStep + 1);
+			}, 1500);
+			return () => clearInterval(interval);
+		}
+	}, [currentStep, setCurrentStep, steps, isCompleted]);

-  // Calculate and store elapsed time when completed
-  useEffect(() => {
-    if (isCompleted && startTime) {
-      const elapsed = Date.now() - startTime;
-      setElapsedTime(elapsed);
-      localStorage.setItem(`${storageKey}-elapsed`, elapsed.toString());
-    }
-  }, [isCompleted, startTime, storageKey]);
+	// Calculate and store elapsed time when completed
+	useEffect(() => {
+		if (isCompleted && startTime) {
+			const elapsed = Date.now() - startTime;
+			setElapsedTime(elapsed);
+			localStorage.setItem(storageKey, elapsed.toString());
+		}
+	}, [isCompleted, startTime, storageKey]);

-  const isDone = currentStep >= steps.length && !isCompleted && !hasError;
+	const isDone = currentStep >= steps.length && !isCompleted && !hasError;

-  return (
-    <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-300 relative",
-                isDone || hasError ? "w-3.5 h-3.5" : "w-6 h-6",
-              )}
-            >
-              <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",
-                )}
-              />
-              <XIcon
-                className={cn(
-                  "text-accent-red-foreground shrink-0 w-3.5 h-3.5 absolute inset-0 transition-all duration-150",
-                  hasError ? "opacity-100" : "opacity-0",
-                )}
-              />
-              <AnimatedProcessingIcon
-                className={cn(
-                  "text-current shrink-0 absolute inset-0 transition-all duration-150",
-                  isDone || hasError ? "opacity-0" : "opacity-100",
-                )}
-              />
-            </div>
+	return (
+		<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-300 relative",
+								isDone || hasError ? "w-3.5 h-3.5" : "w-6 h-6",
+							)}
+						>
+							<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",
+								)}
+							/>
+							<XIcon
+								className={cn(
+									"text-accent-red-foreground shrink-0 w-3.5 h-3.5 absolute inset-0 transition-all duration-150",
+									hasError ? "opacity-100" : "opacity-0",
+								)}
+							/>
+							<AnimatedProcessingIcon
+								className={cn(
+									"text-current shrink-0 absolute inset-0 transition-all duration-150",
+									isDone || hasError ? "opacity-0" : "opacity-100",
+								)}
+							/>
+						</div>

-            <span className="!text-mmd font-medium text-muted-foreground">
-              {hasError ? "Error" : isDone ? "Done" : "Thinking"}
-            </span>
-          </div>
-          <div className="overflow-hidden">
-            <AnimatePresence>
-              {!isDone && !hasError && (
-                <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-4 overflow-y-hidden relative h-6"
-                >
-                  <div className="w-px h-6 bg-border ml-3" />
-                  <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>
-        </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" }}
-                  />
+						<span className="!text-mmd font-medium text-muted-foreground">
+							{hasError ? "Error" : isDone ? "Done" : "Thinking"}
+						</span>
+					</div>
+					<div className="overflow-hidden">
+						<AnimatePresence>
+							{!isDone && !hasError && (
+								<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-4 overflow-y-hidden relative h-6"
+								>
+									<div className="w-px h-6 bg-border ml-3" />
+									<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>
+				</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>
-  );
+									<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>
+	);
 }
--- a/frontend/app/onboarding/_components/onboarding-card.tsx
+++ b/frontend/app/onboarding/_components/onboarding-card.tsx
@ -6,8 +6,8 @@ import { Info, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import {
-  type OnboardingVariables,
-  useOnboardingMutation,
+	type OnboardingVariables,
+	useOnboardingMutation,
 } from "@/app/api/mutations/useOnboardingMutation";
 import { useGetSettingsQuery } from "@/app/api/queries/useGetSettingsQuery";
 import { useGetTasksQuery } from "@/app/api/queries/useGetTasksQuery";
@ -20,10 +20,11 @@ import OpenAILogo from "@/components/icons/openai-logo";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { ONBOARDING_CARD_STEPS_KEY } from "@/lib/constants";
 import { cn } from "@/lib/utils";
 import { AnimatedProviderSteps } from "./animated-provider-steps";
 import { AnthropicOnboarding } from "./anthropic-onboarding";
@ -33,506 +34,507 @@ import { OpenAIOnboarding } from "./openai-onboarding";
 import { TabTrigger } from "./tab-trigger";

 interface OnboardingCardProps {
-  onComplete: () => void;
-  isCompleted?: boolean;
-  isEmbedding?: boolean;
-  setIsLoadingModels?: (isLoading: boolean) => void;
-  setLoadingStatus?: (status: string[]) => void;
+	onComplete: () => void;
+	isCompleted?: boolean;
+	isEmbedding?: boolean;
+	setIsLoadingModels?: (isLoading: boolean) => void;
+	setLoadingStatus?: (status: string[]) => void;
 }

 const STEP_LIST = [
-  "Setting up your model provider",
-  "Defining schema",
-  "Configuring Langflow",
+	"Setting up your model provider",
+	"Defining schema",
+	"Configuring Langflow",
 ];

 const EMBEDDING_STEP_LIST = [
-  "Setting up your model provider",
-  "Defining schema",
-  "Configuring Langflow",
-  "Ingesting sample data",
+	"Setting up your model provider",
+	"Defining schema",
+	"Configuring Langflow",
+	"Ingesting sample data",
 ];

 const OnboardingCard = ({
-  onComplete,
-  isEmbedding = false,
-  isCompleted = false,
+	onComplete,
+	isEmbedding = false,
+	isCompleted = false,
 }: OnboardingCardProps) => {
-  const { isHealthy: isDoclingHealthy } = useDoclingHealth();
+	const { isHealthy: isDoclingHealthy } = useDoclingHealth();

-  const [modelProvider, setModelProvider] = useState<string>(
-    isEmbedding ? "openai" : "anthropic",
-  );
+	const [modelProvider, setModelProvider] = useState<string>(
+		isEmbedding ? "openai" : "anthropic",
+	);

-  const [sampleDataset, setSampleDataset] = useState<boolean>(true);
+	const [sampleDataset, setSampleDataset] = useState<boolean>(true);

-  const [isLoadingModels, setIsLoadingModels] = useState<boolean>(false);
+	const [isLoadingModels, setIsLoadingModels] = useState<boolean>(false);

-  const queryClient = useQueryClient();
+	const queryClient = useQueryClient();

-  // Fetch current settings to check if providers are already configured
-  const { data: currentSettings } = useGetSettingsQuery();
+	// Fetch current settings to check if providers are already configured
+	const { data: currentSettings } = useGetSettingsQuery();

-  const handleSetModelProvider = (provider: string) => {
-    setIsLoadingModels(false);
-    setModelProvider(provider);
-    setSettings({
-      [isEmbedding ? "embedding_provider" : "llm_provider"]: provider,
-      embedding_model: "",
-      llm_model: "",
-    });
-    setError(null);
-  };
+	const handleSetModelProvider = (provider: string) => {
+		setIsLoadingModels(false);
+		setModelProvider(provider);
+		setSettings({
+			[isEmbedding ? "embedding_provider" : "llm_provider"]: provider,
+			embedding_model: "",
+			llm_model: "",
+		});
+		setError(null);
+	};

-  // Check if the selected provider is already configured
-  const isProviderAlreadyConfigured = (provider: string): boolean => {
-    if (!isEmbedding || !currentSettings?.providers) return false;
+	// Check if the selected provider is already configured
+	const isProviderAlreadyConfigured = (provider: string): boolean => {
+		if (!isEmbedding || !currentSettings?.providers) return false;

-    // Check if provider has been explicitly configured (not just from env vars)
-    if (provider === "openai") {
-      return currentSettings.providers.openai?.configured === true;
-    } else if (provider === "anthropic") {
-      return currentSettings.providers.anthropic?.configured === true;
-    } else if (provider === "watsonx") {
-      return currentSettings.providers.watsonx?.configured === true;
-    } else if (provider === "ollama") {
-      return currentSettings.providers.ollama?.configured === true;
-    }
-    return false;
-  };
+		// Check if provider has been explicitly configured (not just from env vars)
+		if (provider === "openai") {
+			return currentSettings.providers.openai?.configured === true;
+		} else if (provider === "anthropic") {
+			return currentSettings.providers.anthropic?.configured === true;
+		} else if (provider === "watsonx") {
+			return currentSettings.providers.watsonx?.configured === true;
+		} else if (provider === "ollama") {
+			return currentSettings.providers.ollama?.configured === true;
+		}
+		return false;
+	};

-  const showProviderConfiguredMessage =
-    isProviderAlreadyConfigured(modelProvider);
-  const providerAlreadyConfigured =
-    isEmbedding && showProviderConfiguredMessage;
+	const showProviderConfiguredMessage =
+		isProviderAlreadyConfigured(modelProvider);
+	const providerAlreadyConfigured =
+		isEmbedding && showProviderConfiguredMessage;

-  const totalSteps = isEmbedding
-    ? EMBEDDING_STEP_LIST.length
-    : STEP_LIST.length;
+	const totalSteps = isEmbedding
+		? EMBEDDING_STEP_LIST.length
+		: STEP_LIST.length;

-  const [settings, setSettings] = useState<OnboardingVariables>({
-    [isEmbedding ? "embedding_provider" : "llm_provider"]: modelProvider,
-    embedding_model: "",
-    llm_model: "",
-    // Provider-specific fields will be set by provider components
-    openai_api_key: "",
-    anthropic_api_key: "",
-    watsonx_api_key: "",
-    watsonx_endpoint: "",
-    watsonx_project_id: "",
-    ollama_endpoint: "",
-  });
+	const [settings, setSettings] = useState<OnboardingVariables>({
+		[isEmbedding ? "embedding_provider" : "llm_provider"]: modelProvider,
+		embedding_model: "",
+		llm_model: "",
+		// Provider-specific fields will be set by provider components
+		openai_api_key: "",
+		anthropic_api_key: "",
+		watsonx_api_key: "",
+		watsonx_endpoint: "",
+		watsonx_project_id: "",
+		ollama_endpoint: "",
+	});

-  const [currentStep, setCurrentStep] = useState<number | null>(
-    isCompleted ? totalSteps : null,
-  );
+	const [currentStep, setCurrentStep] = useState<number | null>(
+		isCompleted ? totalSteps : null,
+	);

-  const [processingStartTime, setProcessingStartTime] = useState<number | null>(
-    null,
-  );
+	const [processingStartTime, setProcessingStartTime] = useState<number | null>(
+		null,
+	);

-  const [error, setError] = useState<string | null>(null);
+	const [error, setError] = useState<string | 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
-  });
+	// 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 || !isEmbedding) {
-      return;
-    }
+	// Monitor tasks and call onComplete when all tasks are done
+	useEffect(() => {
+		if (currentStep === null || !tasks || !isEmbedding) {
+			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",
-    );
+		// 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 &&
-      !isCompleted
-    ) {
-      // Set to final step to show "Done"
-      setCurrentStep(totalSteps);
-      // Wait a bit before completing
-      setTimeout(() => {
-        onComplete();
-      }, 1000);
-    }
-  }, [tasks, currentStep, onComplete, isCompleted, isEmbedding, totalSteps]);
+		// If no active tasks and we've started onboarding, complete it
+		if (
+			(!activeTasks || (activeTasks.processed_files ?? 0) > 0) &&
+			tasks.length > 0 &&
+			!isCompleted
+		) {
+			// Set to final step to show "Done"
+			setCurrentStep(totalSteps);
+			// Wait a bit before completing
+			setTimeout(() => {
+				onComplete();
+			}, 1000);
+		}
+	}, [tasks, currentStep, onComplete, isCompleted, isEmbedding, totalSteps]);

-  // Mutations
-  const onboardingMutation = useOnboardingMutation({
-    onSuccess: (data) => {
-      console.log("Onboarding completed successfully", data);
-      // Update provider health cache to healthy since backend just validated
-      const provider =
-        (isEmbedding ? settings.embedding_provider : settings.llm_provider) ||
-        modelProvider;
-      const healthData: ProviderHealthResponse = {
-        status: "healthy",
-        message: "Provider is configured and working correctly",
-        provider: provider,
-      };
-      queryClient.setQueryData(["provider", "health"], healthData);
-      setError(null);
-      if (!isEmbedding) {
-        setCurrentStep(totalSteps);
-        setTimeout(() => {
-          onComplete();
-        }, 1000);
-      } else {
-        setCurrentStep(0);
-      }
-    },
-    onError: (error) => {
-      setError(error.message);
-      setCurrentStep(totalSteps);
-      // Reset to provider selection after 1 second
-      setTimeout(() => {
-        setCurrentStep(null);
-      }, 1000);
-    },
-  });
+	// Mutations
+	const onboardingMutation = useOnboardingMutation({
+		onSuccess: (data) => {
+			console.log("Onboarding completed successfully", data);
+			// Update provider health cache to healthy since backend just validated
+			const provider =
+				(isEmbedding ? settings.embedding_provider : settings.llm_provider) ||
+				modelProvider;
+			const healthData: ProviderHealthResponse = {
+				status: "healthy",
+				message: "Provider is configured and working correctly",
+				provider: provider,
+			};
+			queryClient.setQueryData(["provider", "health"], healthData);
+			setError(null);
+			if (!isEmbedding) {
+				setCurrentStep(totalSteps);
+				setTimeout(() => {
+					onComplete();
+				}, 1000);
+			} else {
+				setCurrentStep(0);
+			}
+		},
+		onError: (error) => {
+			setError(error.message);
+			setCurrentStep(totalSteps);
+			// Reset to provider selection after 1 second
+			setTimeout(() => {
+				setCurrentStep(null);
+			}, 1000);
+		},
+	});

-  const handleComplete = () => {
-    const currentProvider = isEmbedding
-      ? settings.embedding_provider
-      : settings.llm_provider;
+	const handleComplete = () => {
+		const currentProvider = isEmbedding
+			? settings.embedding_provider
+			: settings.llm_provider;

-    if (
-      !currentProvider ||
-      (isEmbedding &&
-        !settings.embedding_model &&
-        !showProviderConfiguredMessage) ||
-      (!isEmbedding && !settings.llm_model)
-    ) {
-      toast.error("Please complete all required fields");
-      return;
-    }
+		if (
+			!currentProvider ||
+			(isEmbedding &&
+				!settings.embedding_model &&
+				!showProviderConfiguredMessage) ||
+			(!isEmbedding && !settings.llm_model)
+		) {
+			toast.error("Please complete all required fields");
+			return;
+		}

-    // Clear any previous error
-    setError(null);
+		// Clear any previous error
+		setError(null);

-    // Prepare onboarding data with provider-specific fields
-    const onboardingData: OnboardingVariables = {
-      sample_data: sampleDataset,
-    };
+		// Prepare onboarding data with provider-specific fields
+		const onboardingData: OnboardingVariables = {
+			sample_data: sampleDataset,
+		};

-    // Set the provider field
-    if (isEmbedding) {
-      onboardingData.embedding_provider = currentProvider;
-      // If provider is already configured, use the existing embedding model from settings
-      // Otherwise, use the embedding model from the form
-      if (
-        showProviderConfiguredMessage &&
-        currentSettings?.knowledge?.embedding_model
-      ) {
-        onboardingData.embedding_model =
-          currentSettings.knowledge.embedding_model;
-      } else {
-        onboardingData.embedding_model = settings.embedding_model;
-      }
-    } else {
-      onboardingData.llm_provider = currentProvider;
-      onboardingData.llm_model = settings.llm_model;
-    }
+		// Set the provider field
+		if (isEmbedding) {
+			onboardingData.embedding_provider = currentProvider;
+			// If provider is already configured, use the existing embedding model from settings
+			// Otherwise, use the embedding model from the form
+			if (
+				showProviderConfiguredMessage &&
+				currentSettings?.knowledge?.embedding_model
+			) {
+				onboardingData.embedding_model =
+					currentSettings.knowledge.embedding_model;
+			} else {
+				onboardingData.embedding_model = settings.embedding_model;
+			}
+		} else {
+			onboardingData.llm_provider = currentProvider;
+			onboardingData.llm_model = settings.llm_model;
+		}

-    // Add provider-specific credentials based on the selected provider
-    if (currentProvider === "openai" && settings.openai_api_key) {
-      onboardingData.openai_api_key = settings.openai_api_key;
-    } else if (currentProvider === "anthropic" && settings.anthropic_api_key) {
-      onboardingData.anthropic_api_key = settings.anthropic_api_key;
-    } else if (currentProvider === "watsonx") {
-      if (settings.watsonx_api_key) {
-        onboardingData.watsonx_api_key = settings.watsonx_api_key;
-      }
-      if (settings.watsonx_endpoint) {
-        onboardingData.watsonx_endpoint = settings.watsonx_endpoint;
-      }
-      if (settings.watsonx_project_id) {
-        onboardingData.watsonx_project_id = settings.watsonx_project_id;
-      }
-    } else if (currentProvider === "ollama" && settings.ollama_endpoint) {
-      onboardingData.ollama_endpoint = settings.ollama_endpoint;
-    }
+		// Add provider-specific credentials based on the selected provider
+		if (currentProvider === "openai" && settings.openai_api_key) {
+			onboardingData.openai_api_key = settings.openai_api_key;
+		} else if (currentProvider === "anthropic" && settings.anthropic_api_key) {
+			onboardingData.anthropic_api_key = settings.anthropic_api_key;
+		} else if (currentProvider === "watsonx") {
+			if (settings.watsonx_api_key) {
+				onboardingData.watsonx_api_key = settings.watsonx_api_key;
+			}
+			if (settings.watsonx_endpoint) {
+				onboardingData.watsonx_endpoint = settings.watsonx_endpoint;
+			}
+			if (settings.watsonx_project_id) {
+				onboardingData.watsonx_project_id = settings.watsonx_project_id;
+			}
+		} else if (currentProvider === "ollama" && settings.ollama_endpoint) {
+			onboardingData.ollama_endpoint = settings.ollama_endpoint;
+		}

-    // Record the start time when user clicks Complete
-    setProcessingStartTime(Date.now());
-    onboardingMutation.mutate(onboardingData);
-    setCurrentStep(0);
-  };
+		// Record the start time when user clicks Complete
+		setProcessingStartTime(Date.now());
+		onboardingMutation.mutate(onboardingData);
+		setCurrentStep(0);
+	};

-  const isComplete =
-    (isEmbedding &&
-      (!!settings.embedding_model || showProviderConfiguredMessage)) ||
-    (!isEmbedding && !!settings.llm_model && isDoclingHealthy);
+	const isComplete =
+		(isEmbedding &&
+			(!!settings.embedding_model || showProviderConfiguredMessage)) ||
+		(!isEmbedding && !!settings.llm_model && isDoclingHealthy);

-  return (
-    <AnimatePresence mode="wait">
-      {currentStep === null ? (
-        <motion.div
-          key="onboarding-form"
-          initial={{ opacity: 0, y: -24 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: 24 }}
-          transition={{ duration: 0.4, ease: "easeInOut" }}
-        >
-          <div className={`w-full max-w-[600px] flex flex-col`}>
-            <AnimatePresence mode="wait">
-              {error && (
-                <motion.div
-                  key="error"
-                  initial={{ opacity: 1, y: 0, height: "auto" }}
-                  exit={{ opacity: 0, y: -10, height: 0 }}
-                >
-                  <div className="pb-6 flex items-center gap-4">
-                    <X className="w-4 h-4 text-destructive shrink-0" />
-                    <span className="text-mmd text-muted-foreground">
-                      {error}
-                    </span>
-                  </div>
-                </motion.div>
-              )}
-            </AnimatePresence>
-            <div className={`w-full flex flex-col gap-6`}>
-              <Tabs
-                defaultValue={modelProvider}
-                onValueChange={handleSetModelProvider}
-              >
-                <TabsList className="mb-4">
-                  {!isEmbedding && (
-                    <TabsTrigger
-                      value="anthropic"
-                      className={cn(
-                        error &&
-                          modelProvider === "anthropic" &&
-                          "data-[state=active]:border-destructive",
-                      )}
-                    >
-                      <TabTrigger
-                        selected={modelProvider === "anthropic"}
-                        isLoading={isLoadingModels}
-                      >
-                        <div
-                          className={cn(
-                            "flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
-                            modelProvider === "anthropic"
-                              ? "bg-[#D97757]"
-                              : "bg-muted",
-                          )}
-                        >
-                          <AnthropicLogo
-                            className={cn(
-                              "w-4 h-4 shrink-0",
-                              modelProvider === "anthropic"
-                                ? "text-black"
-                                : "text-muted-foreground",
-                            )}
-                          />
-                        </div>
-                        Anthropic
-                      </TabTrigger>
-                    </TabsTrigger>
-                  )}
-                  <TabsTrigger
-                    value="openai"
-                    className={cn(
-                      error &&
-                        modelProvider === "openai" &&
-                        "data-[state=active]:border-destructive",
-                    )}
-                  >
-                    <TabTrigger
-                      selected={modelProvider === "openai"}
-                      isLoading={isLoadingModels}
-                    >
-                      <div
-                        className={cn(
-                          "flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
-                          modelProvider === "openai" ? "bg-white" : "bg-muted",
-                        )}
-                      >
-                        <OpenAILogo
-                          className={cn(
-                            "w-4 h-4 shrink-0",
-                            modelProvider === "openai"
-                              ? "text-black"
-                              : "text-muted-foreground",
-                          )}
-                        />
-                      </div>
-                      OpenAI
-                    </TabTrigger>
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="watsonx"
-                    className={cn(
-                      error &&
-                        modelProvider === "watsonx" &&
-                        "data-[state=active]:border-destructive",
-                    )}
-                  >
-                    <TabTrigger
-                      selected={modelProvider === "watsonx"}
-                      isLoading={isLoadingModels}
-                    >
-                      <div
-                        className={cn(
-                          "flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
-                          modelProvider === "watsonx"
-                            ? "bg-[#1063FE]"
-                            : "bg-muted",
-                        )}
-                      >
-                        <IBMLogo
-                          className={cn(
-                            "w-4 h-4 shrink-0",
-                            modelProvider === "watsonx"
-                              ? "text-white"
-                              : "text-muted-foreground",
-                          )}
-                        />
-                      </div>
-                      IBM watsonx.ai
-                    </TabTrigger>
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="ollama"
-                    className={cn(
-                      error &&
-                        modelProvider === "ollama" &&
-                        "data-[state=active]:border-destructive",
-                    )}
-                  >
-                    <TabTrigger
-                      selected={modelProvider === "ollama"}
-                      isLoading={isLoadingModels}
-                    >
-                      <div
-                        className={cn(
-                          "flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
-                          modelProvider === "ollama" ? "bg-white" : "bg-muted",
-                        )}
-                      >
-                        <OllamaLogo
-                          className={cn(
-                            "w-4 h-4 shrink-0",
-                            modelProvider === "ollama"
-                              ? "text-black"
-                              : "text-muted-foreground",
-                          )}
-                        />
-                      </div>
-                      Ollama
-                    </TabTrigger>
-                  </TabsTrigger>
-                </TabsList>
-                {!isEmbedding && (
-                  <TabsContent value="anthropic">
-                    <AnthropicOnboarding
-                      setSettings={setSettings}
-                      sampleDataset={sampleDataset}
-                      setSampleDataset={setSampleDataset}
-                      setIsLoadingModels={setIsLoadingModels}
-                      isEmbedding={isEmbedding}
-                      hasEnvApiKey={
-                        currentSettings?.providers?.anthropic?.has_api_key ===
-                        true
-                      }
-                    />
-                  </TabsContent>
-                )}
-                <TabsContent value="openai">
-                  <OpenAIOnboarding
-                    setSettings={setSettings}
-                    sampleDataset={sampleDataset}
-                    setSampleDataset={setSampleDataset}
-                    setIsLoadingModels={setIsLoadingModels}
-                    isEmbedding={isEmbedding}
-                    hasEnvApiKey={
-                      currentSettings?.providers?.openai?.has_api_key === true
-                    }
-                    alreadyConfigured={providerAlreadyConfigured}
-                  />
-                </TabsContent>
-                <TabsContent value="watsonx">
-                  <IBMOnboarding
-                    setSettings={setSettings}
-                    sampleDataset={sampleDataset}
-                    setSampleDataset={setSampleDataset}
-                    setIsLoadingModels={setIsLoadingModels}
-                    isEmbedding={isEmbedding}
-                    alreadyConfigured={providerAlreadyConfigured}
-                  />
-                </TabsContent>
-                <TabsContent value="ollama">
-                  <OllamaOnboarding
-                    setSettings={setSettings}
-                    sampleDataset={sampleDataset}
-                    setSampleDataset={setSampleDataset}
-                    setIsLoadingModels={setIsLoadingModels}
-                    isEmbedding={isEmbedding}
-                    alreadyConfigured={providerAlreadyConfigured}
-                  />
-                </TabsContent>
-              </Tabs>
+	return (
+		<AnimatePresence mode="wait">
+			{currentStep === null ? (
+				<motion.div
+					key="onboarding-form"
+					initial={{ opacity: 0, y: -24 }}
+					animate={{ opacity: 1, y: 0 }}
+					exit={{ opacity: 0, y: 24 }}
+					transition={{ duration: 0.4, ease: "easeInOut" }}
+				>
+					<div className={`w-full max-w-[600px] flex flex-col`}>
+						<AnimatePresence mode="wait">
+							{error && (
+								<motion.div
+									key="error"
+									initial={{ opacity: 1, y: 0, height: "auto" }}
+									exit={{ opacity: 0, y: -10, height: 0 }}
+								>
+									<div className="pb-6 flex items-center gap-4">
+										<X className="w-4 h-4 text-destructive shrink-0" />
+										<span className="text-mmd text-muted-foreground">
+											{error}
+										</span>
+									</div>
+								</motion.div>
+							)}
+						</AnimatePresence>
+						<div className={`w-full flex flex-col gap-6`}>
+							<Tabs
+								defaultValue={modelProvider}
+								onValueChange={handleSetModelProvider}
+							>
+								<TabsList className="mb-4">
+									{!isEmbedding && (
+										<TabsTrigger
+											value="anthropic"
+											className={cn(
+												error &&
+													modelProvider === "anthropic" &&
+													"data-[state=active]:border-destructive",
+											)}
+										>
+											<TabTrigger
+												selected={modelProvider === "anthropic"}
+												isLoading={isLoadingModels}
+											>
+												<div
+													className={cn(
+														"flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
+														modelProvider === "anthropic"
+															? "bg-[#D97757]"
+															: "bg-muted",
+													)}
+												>
+													<AnthropicLogo
+														className={cn(
+															"w-4 h-4 shrink-0",
+															modelProvider === "anthropic"
+																? "text-black"
+																: "text-muted-foreground",
+														)}
+													/>
+												</div>
+												Anthropic
+											</TabTrigger>
+										</TabsTrigger>
+									)}
+									<TabsTrigger
+										value="openai"
+										className={cn(
+											error &&
+												modelProvider === "openai" &&
+												"data-[state=active]:border-destructive",
+										)}
+									>
+										<TabTrigger
+											selected={modelProvider === "openai"}
+											isLoading={isLoadingModels}
+										>
+											<div
+												className={cn(
+													"flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
+													modelProvider === "openai" ? "bg-white" : "bg-muted",
+												)}
+											>
+												<OpenAILogo
+													className={cn(
+														"w-4 h-4 shrink-0",
+														modelProvider === "openai"
+															? "text-black"
+															: "text-muted-foreground",
+													)}
+												/>
+											</div>
+											OpenAI
+										</TabTrigger>
+									</TabsTrigger>
+									<TabsTrigger
+										value="watsonx"
+										className={cn(
+											error &&
+												modelProvider === "watsonx" &&
+												"data-[state=active]:border-destructive",
+										)}
+									>
+										<TabTrigger
+											selected={modelProvider === "watsonx"}
+											isLoading={isLoadingModels}
+										>
+											<div
+												className={cn(
+													"flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
+													modelProvider === "watsonx"
+														? "bg-[#1063FE]"
+														: "bg-muted",
+												)}
+											>
+												<IBMLogo
+													className={cn(
+														"w-4 h-4 shrink-0",
+														modelProvider === "watsonx"
+															? "text-white"
+															: "text-muted-foreground",
+													)}
+												/>
+											</div>
+											IBM watsonx.ai
+										</TabTrigger>
+									</TabsTrigger>
+									<TabsTrigger
+										value="ollama"
+										className={cn(
+											error &&
+												modelProvider === "ollama" &&
+												"data-[state=active]:border-destructive",
+										)}
+									>
+										<TabTrigger
+											selected={modelProvider === "ollama"}
+											isLoading={isLoadingModels}
+										>
+											<div
+												className={cn(
+													"flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
+													modelProvider === "ollama" ? "bg-white" : "bg-muted",
+												)}
+											>
+												<OllamaLogo
+													className={cn(
+														"w-4 h-4 shrink-0",
+														modelProvider === "ollama"
+															? "text-black"
+															: "text-muted-foreground",
+													)}
+												/>
+											</div>
+											Ollama
+										</TabTrigger>
+									</TabsTrigger>
+								</TabsList>
+								{!isEmbedding && (
+									<TabsContent value="anthropic">
+										<AnthropicOnboarding
+											setSettings={setSettings}
+											sampleDataset={sampleDataset}
+											setSampleDataset={setSampleDataset}
+											setIsLoadingModels={setIsLoadingModels}
+											isEmbedding={isEmbedding}
+											hasEnvApiKey={
+												currentSettings?.providers?.anthropic?.has_api_key ===
+												true
+											}
+										/>
+									</TabsContent>
+								)}
+								<TabsContent value="openai">
+									<OpenAIOnboarding
+										setSettings={setSettings}
+										sampleDataset={sampleDataset}
+										setSampleDataset={setSampleDataset}
+										setIsLoadingModels={setIsLoadingModels}
+										isEmbedding={isEmbedding}
+										hasEnvApiKey={
+											currentSettings?.providers?.openai?.has_api_key === true
+										}
+										alreadyConfigured={providerAlreadyConfigured}
+									/>
+								</TabsContent>
+								<TabsContent value="watsonx">
+									<IBMOnboarding
+										setSettings={setSettings}
+										sampleDataset={sampleDataset}
+										setSampleDataset={setSampleDataset}
+										setIsLoadingModels={setIsLoadingModels}
+										isEmbedding={isEmbedding}
+										alreadyConfigured={providerAlreadyConfigured}
+									/>
+								</TabsContent>
+								<TabsContent value="ollama">
+									<OllamaOnboarding
+										setSettings={setSettings}
+										sampleDataset={sampleDataset}
+										setSampleDataset={setSampleDataset}
+										setIsLoadingModels={setIsLoadingModels}
+										isEmbedding={isEmbedding}
+										alreadyConfigured={providerAlreadyConfigured}
+									/>
+								</TabsContent>
+							</Tabs>

-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div>
-                    <Button
-                      size="sm"
-                      onClick={handleComplete}
-                      disabled={!isComplete || isLoadingModels}
-                      loading={onboardingMutation.isPending}
-                    >
-                      <span className="select-none">Complete</span>
-                    </Button>
-                  </div>
-                </TooltipTrigger>
-                {!isComplete && (
-                  <TooltipContent>
-                    {isLoadingModels
-                      ? "Loading models..."
-                      : !!settings.llm_model &&
-                          !!settings.embedding_model &&
-                          !isDoclingHealthy
-                        ? "docling-serve must be running to continue"
-                        : "Please fill in all required fields"}
-                  </TooltipContent>
-                )}
-              </Tooltip>
-            </div>
-          </div>
-        </motion.div>
-      ) : (
-        <motion.div
-          key="provider-steps"
-          initial={{ opacity: 0, y: 24 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: 24 }}
-          transition={{ duration: 0.4, ease: "easeInOut" }}
-        >
-          <AnimatedProviderSteps
-            currentStep={currentStep}
-            isCompleted={isCompleted}
-            setCurrentStep={setCurrentStep}
-            steps={isEmbedding ? EMBEDDING_STEP_LIST : STEP_LIST}
-            processingStartTime={processingStartTime}
-            hasError={!!error}
-          />
-        </motion.div>
-      )}
-    </AnimatePresence>
-  );
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<div>
+										<Button
+											size="sm"
+											onClick={handleComplete}
+											disabled={!isComplete || isLoadingModels}
+											loading={onboardingMutation.isPending}
+										>
+											<span className="select-none">Complete</span>
+										</Button>
+									</div>
+								</TooltipTrigger>
+								{!isComplete && (
+									<TooltipContent>
+										{isLoadingModels
+											? "Loading models..."
+											: !!settings.llm_model &&
+													!!settings.embedding_model &&
+													!isDoclingHealthy
+												? "docling-serve must be running to continue"
+												: "Please fill in all required fields"}
+									</TooltipContent>
+								)}
+							</Tooltip>
+						</div>
+					</div>
+				</motion.div>
+			) : (
+				<motion.div
+					key="provider-steps"
+					initial={{ opacity: 0, y: 24 }}
+					animate={{ opacity: 1, y: 0 }}
+					exit={{ opacity: 0, y: 24 }}
+					transition={{ duration: 0.4, ease: "easeInOut" }}
+				>
+					<AnimatedProviderSteps
+						currentStep={currentStep}
+						isCompleted={isCompleted}
+						setCurrentStep={setCurrentStep}
+						steps={isEmbedding ? EMBEDDING_STEP_LIST : STEP_LIST}
+						processingStartTime={processingStartTime}
+						storageKey={ONBOARDING_CARD_STEPS_KEY}
+						hasError={!!error}
+					/>
+				</motion.div>
+			)}
+		</AnimatePresence>
+	);
 };

 export default OnboardingCard;
--- a/frontend/app/onboarding/_components/onboarding-content.tsx
+++ b/frontend/app/onboarding/_components/onboarding-content.tsx
@ -1,6 +1,6 @@
 "use client";

-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { StickToBottom } from "use-stick-to-bottom";
 import { AssistantMessage } from "@/app/chat/_components/assistant-message";
 import Nudges from "@/app/chat/_components/nudges";
@ -8,26 +8,79 @@ import { UserMessage } from "@/app/chat/_components/user-message";
 import type { Message } from "@/app/chat/_types/types";
 import OnboardingCard from "@/app/onboarding/_components/onboarding-card";
 import { useChatStreaming } from "@/hooks/useChatStreaming";
+import {
+  ONBOARDING_ASSISTANT_MESSAGE_KEY,
+  ONBOARDING_SELECTED_NUDGE_KEY,
+} from "@/lib/constants";

 import { OnboardingStep } from "./onboarding-step";
 import OnboardingUpload from "./onboarding-upload";

 export function OnboardingContent({
  handleStepComplete,
+  handleStepBack,
  currentStep,
 }: {
  handleStepComplete: () => void;
+  handleStepBack: () => void;
  currentStep: number;
 }) {
+  const parseFailedRef = useRef(false);
  const [responseId, setResponseId] = useState<string | null>(null);
-  const [selectedNudge, setSelectedNudge] = useState<string>("");
+  const [selectedNudge, setSelectedNudge] = useState<string>(() => {
+    // Retrieve selected nudge from localStorage on mount
+    if (typeof window === "undefined") return "";
+    return localStorage.getItem(ONBOARDING_SELECTED_NUDGE_KEY) || "";
+  });
  const [assistantMessage, setAssistantMessage] = useState<Message | null>(
-    null,
+    () => {
+      // Retrieve assistant message from localStorage on mount
+      if (typeof window === "undefined") return null;
+      const savedMessage = localStorage.getItem(ONBOARDING_ASSISTANT_MESSAGE_KEY);
+      if (savedMessage) {
+        try {
+          const parsed = JSON.parse(savedMessage);
+          // Convert timestamp string back to Date object
+          return {
+            ...parsed,
+            timestamp: new Date(parsed.timestamp),
+          };
+        } catch (error) {
+          console.error("Failed to parse saved assistant message:", error);
+          parseFailedRef.current = true;
+          // Clear corrupted data - will go back a step in useEffect
+          if (typeof window !== "undefined") {
+            localStorage.removeItem(ONBOARDING_ASSISTANT_MESSAGE_KEY);
+            localStorage.removeItem(ONBOARDING_SELECTED_NUDGE_KEY);
+          }
+          return null;
+        }
+      }
+      return null;
+    },
  );

+  // Handle parse errors by going back a step
+  useEffect(() => {
+    if (parseFailedRef.current && currentStep >= 2) {
+      handleStepBack();
+    }
+  }, [handleStepBack, currentStep]);
+
  const { streamingMessage, isLoading, sendMessage } = useChatStreaming({
    onComplete: (message, newResponseId) => {
      setAssistantMessage(message);
+      // Save assistant message to localStorage when complete
+      if (typeof window !== "undefined") {
+        try {
+          localStorage.setItem(
+            ONBOARDING_ASSISTANT_MESSAGE_KEY,
+            JSON.stringify(message),
+          );
+        } catch (error) {
+          console.error("Failed to save assistant message to localStorage:", error);
+        }
+      }
      if (newResponseId) {
        setResponseId(newResponseId);
      }
@ -47,7 +100,15 @@ export function OnboardingContent({

  const handleNudgeClick = async (nudge: string) => {
    setSelectedNudge(nudge);
+    // Save selected nudge to localStorage
+    if (typeof window !== "undefined") {
+      localStorage.setItem(ONBOARDING_SELECTED_NUDGE_KEY, nudge);
+    }
    setAssistantMessage(null);
+    // Clear saved assistant message when starting a new conversation
+    if (typeof window !== "undefined") {
+      localStorage.removeItem(ONBOARDING_ASSISTANT_MESSAGE_KEY);
+    }
    setTimeout(async () => {
      await sendMessage({
        prompt: nudge,
--- a/frontend/app/onboarding/_components/onboarding-upload.tsx
+++ b/frontend/app/onboarding/_components/onboarding-upload.tsx
@ -4,154 +4,156 @@ import { useGetNudgesQuery } from "@/app/api/queries/useGetNudgesQuery";
 import { useGetTasksQuery } from "@/app/api/queries/useGetTasksQuery";
 import { AnimatedProviderSteps } from "@/app/onboarding/_components/animated-provider-steps";
 import { Button } from "@/components/ui/button";
+import { ONBOARDING_UPLOAD_STEPS_KEY } from "@/lib/constants";
 import { uploadFile } from "@/lib/upload-utils";

 interface OnboardingUploadProps {
-  onComplete: () => void;
+	onComplete: () => void;
 }

 const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [isUploading, setIsUploading] = useState(false);
-  const [currentStep, setCurrentStep] = useState<number | null>(null);
+	const fileInputRef = useRef<HTMLInputElement>(null);
+	const [isUploading, setIsUploading] = useState(false);
+	const [currentStep, setCurrentStep] = useState<number | null>(null);

-  const STEP_LIST = [
-    "Uploading your document",
-    "Generating embeddings",
-    "Ingesting document",
-    "Processing your document",
-  ];
+	const STEP_LIST = [
+		"Uploading your document",
+		"Generating embeddings",
+		"Ingesting document",
+		"Processing your document",
+	];

-  // Query tasks to track completion
-  const { data: tasks } = useGetTasksQuery({
-    enabled: currentStep !== null, // Only poll when upload has started
-    refetchInterval: currentStep !== null ? 1000 : false, // Poll every 1 second during upload
-  });
+	// Query tasks to track completion
+	const { data: tasks } = useGetTasksQuery({
+		enabled: currentStep !== null, // Only poll when upload has started
+		refetchInterval: currentStep !== null ? 1000 : false, // Poll every 1 second during upload
+	});

-  const { refetch: refetchNudges } = useGetNudgesQuery(null);
+	const { refetch: refetchNudges } = useGetNudgesQuery(null);

-  // Monitor tasks and call onComplete when file processing is done
-  useEffect(() => {
-    if (currentStep === null || !tasks) {
-      return;
-    }
+	// Monitor tasks and call onComplete when file processing is 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",
-    );
+		// 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 have more than 1 task (initial + new upload), complete it
-    if (
-      (!activeTasks || (activeTasks.processed_files ?? 0) > 0) &&
-      tasks.length > 1
-    ) {
-      // Set to final step to show "Done"
-      setCurrentStep(STEP_LIST.length);
+		// If no active tasks and we have more than 1 task (initial + new upload), complete it
+		if (
+			(!activeTasks || (activeTasks.processed_files ?? 0) > 0) &&
+			tasks.length > 1
+		) {
+			// Set to final step to show "Done"
+			setCurrentStep(STEP_LIST.length);

-      // Refetch nudges to get new ones
-      refetchNudges();
+			// Refetch nudges to get new ones
+			refetchNudges();

-      // Wait a bit before completing
-      setTimeout(() => {
-        onComplete();
-      }, 1000);
-    }
-  }, [tasks, currentStep, onComplete, refetchNudges]);
+			// Wait a bit before completing
+			setTimeout(() => {
+				onComplete();
+			}, 1000);
+		}
+	}, [tasks, currentStep, onComplete, refetchNudges]);

-  const resetFileInput = () => {
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
-  };
+	const resetFileInput = () => {
+		if (fileInputRef.current) {
+			fileInputRef.current.value = "";
+		}
+	};

-  const handleUploadClick = () => {
-    fileInputRef.current?.click();
-  };
+	const handleUploadClick = () => {
+		fileInputRef.current?.click();
+	};

-  const performUpload = async (file: File) => {
-    setIsUploading(true);
-    try {
-      setCurrentStep(0);
-      await uploadFile(file, true);
-      console.log("Document upload task started successfully");
-      // Move to processing step - task monitoring will handle completion
-      setTimeout(() => {
-        setCurrentStep(1);
-      }, 1500);
-    } catch (error) {
-      console.error("Upload failed", (error as Error).message);
-      // Reset on error
-      setCurrentStep(null);
-    } finally {
-      setIsUploading(false);
-    }
-  };
+	const performUpload = async (file: File) => {
+		setIsUploading(true);
+		try {
+			setCurrentStep(0);
+			await uploadFile(file, true);
+			console.log("Document upload task started successfully");
+			// Move to processing step - task monitoring will handle completion
+			setTimeout(() => {
+				setCurrentStep(1);
+			}, 1500);
+		} catch (error) {
+			console.error("Upload failed", (error as Error).message);
+			// Reset on error
+			setCurrentStep(null);
+		} finally {
+			setIsUploading(false);
+		}
+	};

-  const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
-    const selectedFile = event.target.files?.[0];
-    if (!selectedFile) {
-      resetFileInput();
-      return;
-    }
+	const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
+		const selectedFile = event.target.files?.[0];
+		if (!selectedFile) {
+			resetFileInput();
+			return;
+		}

-    try {
-      await performUpload(selectedFile);
-    } catch (error) {
-      console.error(
-        "Unable to prepare file for upload",
-        (error as Error).message,
-      );
-    } finally {
-      resetFileInput();
-    }
-  };
+		try {
+			await performUpload(selectedFile);
+		} catch (error) {
+			console.error(
+				"Unable to prepare file for upload",
+				(error as Error).message,
+			);
+		} finally {
+			resetFileInput();
+		}
+	};

-  return (
-    <AnimatePresence mode="wait">
-      {currentStep === null ? (
-        <motion.div
-          key="user-ingest"
-          initial={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -24 }}
-          transition={{ duration: 0.4, ease: "easeInOut" }}
-        >
-          <Button
-            size="sm"
-            variant="outline"
-            onClick={handleUploadClick}
-            disabled={isUploading}
-          >
-            <div>{isUploading ? "Uploading..." : "Add a document"}</div>
-          </Button>
-          <input
-            ref={fileInputRef}
-            type="file"
-            onChange={handleFileChange}
-            className="hidden"
-            accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
-          />
-        </motion.div>
-      ) : (
-        <motion.div
-          key="ingest-steps"
-          initial={{ opacity: 0, y: 24 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.4, ease: "easeInOut" }}
-        >
-          <AnimatedProviderSteps
-            currentStep={currentStep}
-            setCurrentStep={setCurrentStep}
-            isCompleted={false}
-            steps={STEP_LIST}
-          />
-        </motion.div>
-      )}
-    </AnimatePresence>
-  );
+	return (
+		<AnimatePresence mode="wait">
+			{currentStep === null ? (
+				<motion.div
+					key="user-ingest"
+					initial={{ opacity: 1, y: 0 }}
+					exit={{ opacity: 0, y: -24 }}
+					transition={{ duration: 0.4, ease: "easeInOut" }}
+				>
+					<Button
+						size="sm"
+						variant="outline"
+						onClick={handleUploadClick}
+						disabled={isUploading}
+					>
+						<div>{isUploading ? "Uploading..." : "Add a document"}</div>
+					</Button>
+					<input
+						ref={fileInputRef}
+						type="file"
+						onChange={handleFileChange}
+						className="hidden"
+						accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
+					/>
+				</motion.div>
+			) : (
+				<motion.div
+					key="ingest-steps"
+					initial={{ opacity: 0, y: 24 }}
+					animate={{ opacity: 1, y: 0 }}
+					transition={{ duration: 0.4, ease: "easeInOut" }}
+				>
+					<AnimatedProviderSteps
+						currentStep={currentStep}
+						setCurrentStep={setCurrentStep}
+						isCompleted={false}
+						steps={STEP_LIST}
+						storageKey={ONBOARDING_UPLOAD_STEPS_KEY}
+					/>
+				</motion.div>
+			)}
+		</AnimatePresence>
+	);
 };

 export default OnboardingUpload;
--- a/frontend/app/onboarding/_components/progress-bar.tsx
+++ b/frontend/app/onboarding/_components/progress-bar.tsx
@ -32,7 +32,7 @@ export function ProgressBar({
        </span>
      </div>
      <div className="flex-1 flex justify-end">
-        {currentStep > 0 && onSkip && (
+        {currentStep > 1 && onSkip && (
          <Button
            variant="link"
            size="sm"
--- a/frontend/components/chat-renderer.tsx
+++ b/frontend/components/chat-renderer.tsx
@ -4,8 +4,8 @@ import { motion } from "framer-motion";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import {
-  type ChatConversation,
-  useGetConversationsQuery,
+	type ChatConversation,
+	useGetConversationsQuery,
 } from "@/app/api/queries/useGetConversationsQuery";
 import type { Settings } from "@/app/api/queries/useGetSettingsQuery";
 import { OnboardingContent } from "@/app/onboarding/_components/onboarding-content";
@ -16,200 +16,223 @@ import { Navigation } from "@/components/navigation";
 import { useAuth } from "@/contexts/auth-context";
 import { useChat } from "@/contexts/chat-context";
 import {
-  ANIMATION_DURATION,
-  HEADER_HEIGHT,
-  ONBOARDING_STEP_KEY,
-  SIDEBAR_WIDTH,
-  TOTAL_ONBOARDING_STEPS,
+	ANIMATION_DURATION,
+	HEADER_HEIGHT,
+	ONBOARDING_ASSISTANT_MESSAGE_KEY,
+	ONBOARDING_CARD_STEPS_KEY,
+	ONBOARDING_SELECTED_NUDGE_KEY,
+	ONBOARDING_STEP_KEY,
+	ONBOARDING_UPLOAD_STEPS_KEY,
+	SIDEBAR_WIDTH,
+	TOTAL_ONBOARDING_STEPS,
 } from "@/lib/constants";
 import { cn } from "@/lib/utils";

 export function ChatRenderer({
-  settings,
-  children,
+	settings,
+	children,
 }: {
-  settings: Settings | undefined;
-  children: React.ReactNode;
+	settings: Settings | undefined;
+	children: React.ReactNode;
 }) {
-  const pathname = usePathname();
-  const { isAuthenticated, isNoAuthMode } = useAuth();
-  const {
-    endpoint,
-    refreshTrigger,
-    refreshConversations,
-    startNewConversation,
-  } = useChat();
+	const pathname = usePathname();
+	const { isAuthenticated, isNoAuthMode } = useAuth();
+	const {
+		endpoint,
+		refreshTrigger,
+		refreshConversations,
+		startNewConversation,
+	} = useChat();

-  // 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;
-  });
+	// 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
-    const isEdited = settings?.edited ?? true;
-    return isEdited ? savedStep === null : false;
-  });
+	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
+		const isEdited = settings?.edited ?? true;
+		return isEdited ? savedStep === null : false;
+	});

-  // Only fetch conversations on chat page
-  const isOnChatPage = pathname === "/" || pathname === "/chat";
-  const { data: conversations = [], isLoading: isConversationsLoading } =
-    useGetConversationsQuery(endpoint, refreshTrigger, {
-      enabled: isOnChatPage && (isAuthenticated || isNoAuthMode),
-    }) as { data: ChatConversation[]; isLoading: boolean };
+	// Only fetch conversations on chat page
+	const isOnChatPage = pathname === "/" || pathname === "/chat";
+	const { data: conversations = [], isLoading: isConversationsLoading } =
+		useGetConversationsQuery(endpoint, refreshTrigger, {
+			enabled: isOnChatPage && (isAuthenticated || isNoAuthMode),
+		}) as { data: ChatConversation[]; isLoading: boolean };

-  const handleNewConversation = () => {
-    refreshConversations();
-    startNewConversation();
-  };
+	const handleNewConversation = () => {
+		refreshConversations();
+		startNewConversation();
+	};

-  // Save current step to local storage whenever it changes
-  useEffect(() => {
-    if (typeof window !== "undefined" && !showLayout) {
-      localStorage.setItem(ONBOARDING_STEP_KEY, currentStep.toString());
-    }
-  }, [currentStep, showLayout]);
+	// 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);
-    }
-  };
+	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);
+				localStorage.removeItem(ONBOARDING_ASSISTANT_MESSAGE_KEY);
+				localStorage.removeItem(ONBOARDING_SELECTED_NUDGE_KEY);
+				localStorage.removeItem(ONBOARDING_CARD_STEPS_KEY);
+				localStorage.removeItem(ONBOARDING_UPLOAD_STEPS_KEY);
+			}
+			setShowLayout(true);
+		}
+	};

-  const handleSkipOnboarding = () => {
-    // Skip onboarding by marking it as complete
-    if (typeof window !== "undefined") {
-      localStorage.removeItem(ONBOARDING_STEP_KEY);
-    }
-    setShowLayout(true);
-  };
+	const handleStepBack = () => {
+		if (currentStep > 0) {
+			setCurrentStep(currentStep - 1);
+		}
+	};

-  // List of paths with smaller max-width
-  const smallWidthPaths = ["/settings", "/upload"];
-  const isSmallWidthPath = smallWidthPaths.some((path) =>
-    pathname.startsWith(path),
-  );
+	const handleSkipOnboarding = () => {
+		// Skip onboarding by marking it as complete
+		if (typeof window !== "undefined") {
+			localStorage.removeItem(ONBOARDING_STEP_KEY);
+			localStorage.removeItem(ONBOARDING_ASSISTANT_MESSAGE_KEY);
+			localStorage.removeItem(ONBOARDING_SELECTED_NUDGE_KEY);
+			localStorage.removeItem(ONBOARDING_CARD_STEPS_KEY);
+			localStorage.removeItem(ONBOARDING_UPLOAD_STEPS_KEY);
+		}
+		setShowLayout(true);
+	};

-  const x = showLayout ? "0px" : `calc(-${SIDEBAR_WIDTH / 2}px + 50vw)`;
-  const y = showLayout ? "0px" : `calc(-${HEADER_HEIGHT / 2}px + 50vh)`;
-  const translateY = showLayout ? "0px" : `-50vh`;
-  const translateX = showLayout ? "0px" : `-50vw`;
+	// List of paths with smaller max-width
+	const smallWidthPaths = ["/settings", "/upload"];
+	const isSmallWidthPath = smallWidthPaths.some((path) =>
+		pathname.startsWith(path),
+	);

-  // For all other pages, render with Langflow-styled navigation and task menu
-  return (
-    <>
-      <AnimatedConditional
-        className="[grid-area:header] bg-background border-b"
-        vertical
-        slide
-        isOpen={showLayout}
-        delay={ANIMATION_DURATION / 2}
-      >
-        <Header />
-      </AnimatedConditional>
+	const x = showLayout ? "0px" : `calc(-${SIDEBAR_WIDTH / 2}px + 50vw)`;
+	const y = showLayout ? "0px" : `calc(-${HEADER_HEIGHT / 2}px + 50vh)`;
+	const translateY = showLayout ? "0px" : `-50vh`;
+	const translateX = showLayout ? "0px" : `-50vw`;

-      {/* Sidebar Navigation */}
-      <AnimatedConditional
-        isOpen={showLayout}
-        slide
-        className={`border-r bg-background overflow-hidden [grid-area:nav] w-[${SIDEBAR_WIDTH}px]`}
-      >
-        <Navigation
-          conversations={conversations}
-          isConversationsLoading={isConversationsLoading}
-          onNewConversation={handleNewConversation}
-        />
-      </AnimatedConditional>
+	// For all other pages, render with Langflow-styled navigation and task menu
+	return (
+		<>
+			<AnimatedConditional
+				className="[grid-area:header] bg-background border-b"
+				vertical
+				slide
+				isOpen={showLayout}
+				delay={ANIMATION_DURATION / 2}
+			>
+				<Header />
+			</AnimatedConditional>

-      {/* Main Content */}
-      <main className="overflow-hidden w-full flex items-center justify-center [grid-area:main]">
-        <motion.div
-          initial={{
-            width: showLayout ? "100%" : "100vw",
-            height: showLayout ? "100%" : "100vh",
-            x: x,
-            y: y,
-            translateX: translateX,
-            translateY: translateY,
-          }}
-          animate={{
-            width: showLayout ? "100%" : "850px",
-            borderRadius: showLayout ? "0" : "16px",
-            border: showLayout ? "0" : "1px solid hsl(var(--border))",
-            height: showLayout ? "100%" : "800px",
-            x: x,
-            y: y,
-            translateX: translateX,
-            translateY: translateY,
-          }}
-          transition={{
-            duration: ANIMATION_DURATION,
-            ease: "easeOut",
-          }}
-          className={cn(
-            "flex h-full w-full max-w-full max-h-full items-center justify-center overflow-y-auto",
-            !showLayout &&
-              "absolute max-h-[calc(100vh-190px)] shadow-[0px_2px_4px_-2px_#0000001A,0px_4px_6px_-1px_#0000001A]",
-            showLayout && !isOnChatPage && "bg-background",
-          )}
-        >
-          <div
-            className={cn(
-              "h-full bg-background w-full",
-              showLayout && !isOnChatPage && "p-6 container",
-              showLayout && isSmallWidthPath && "max-w-[850px] ml-0",
-              !showLayout && "p-0 py-2",
-            )}
-          >
-            <motion.div
-              initial={{
-                opacity: showLayout ? 1 : 0,
-              }}
-              animate={{
-                opacity: "100%",
-              }}
-              transition={{
-                duration: ANIMATION_DURATION,
-                ease: "easeOut",
-                delay: ANIMATION_DURATION,
-              }}
-              className={cn("w-full h-full")}
-            >
-              <div className={cn("w-full h-full", !showLayout && "hidden")}>
-                {children}
-              </div>
-              {!showLayout && (
-                <OnboardingContent
-                  handleStepComplete={handleStepComplete}
-                  currentStep={currentStep}
-                />
-              )}
-            </motion.div>
-          </div>
-        </motion.div>
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: showLayout ? 0 : 1, y: showLayout ? 20 : 0 }}
-          transition={{ duration: ANIMATION_DURATION, ease: "easeOut" }}
-          className={cn("absolute bottom-6 left-0 right-0")}
-        >
-          <ProgressBar
-            currentStep={currentStep}
-            totalSteps={TOTAL_ONBOARDING_STEPS}
-            onSkip={handleSkipOnboarding}
-          />
-        </motion.div>
-      </main>
-    </>
-  );
+			{/* Sidebar Navigation */}
+			<AnimatedConditional
+				isOpen={showLayout}
+				slide
+				className={`border-r bg-background overflow-hidden [grid-area:nav] w-[${SIDEBAR_WIDTH}px]`}
+			>
+				{showLayout && (
+					<Navigation
+						conversations={conversations}
+						isConversationsLoading={isConversationsLoading}
+						onNewConversation={handleNewConversation}
+					/>
+				)}
+			</AnimatedConditional>
+
+			{/* Main Content */}
+			<main className="overflow-hidden w-full flex items-center justify-center [grid-area:main]">
+				<motion.div
+					initial={{
+						width: showLayout ? "100%" : "100vw",
+						height: showLayout ? "100%" : "100vh",
+						x: x,
+						y: y,
+						translateX: translateX,
+						translateY: translateY,
+					}}
+					animate={{
+						width: showLayout ? "100%" : "850px",
+						borderRadius: showLayout ? "0" : "16px",
+						border: showLayout ? "0" : "1px solid hsl(var(--border))",
+						height: showLayout ? "100%" : "800px",
+						x: x,
+						y: y,
+						translateX: translateX,
+						translateY: translateY,
+					}}
+					transition={{
+						duration: ANIMATION_DURATION,
+						ease: "easeOut",
+					}}
+					className={cn(
+						"flex h-full w-full max-w-full max-h-full items-center justify-center overflow-y-auto",
+						!showLayout &&
+							"absolute max-h-[calc(100vh-190px)] shadow-[0px_2px_4px_-2px_#0000001A,0px_4px_6px_-1px_#0000001A]",
+						showLayout && !isOnChatPage && "bg-background",
+					)}
+				>
+					<div
+						className={cn(
+							"h-full bg-background w-full",
+							showLayout && !isOnChatPage && "p-6 container",
+							showLayout && isSmallWidthPath && "max-w-[850px] ml-0",
+							!showLayout && "p-0 py-2",
+						)}
+					>
+						<motion.div
+							initial={{
+								opacity: showLayout ? 1 : 0,
+							}}
+							animate={{
+								opacity: "100%",
+							}}
+							transition={{
+								duration: ANIMATION_DURATION,
+								ease: "easeOut",
+								delay: ANIMATION_DURATION,
+							}}
+							className={cn("w-full h-full")}
+						>
+							{showLayout && (
+								<div className={cn("w-full h-full", !showLayout && "hidden")}>
+									{children}
+								</div>
+							)}
+							{!showLayout && (
+								<OnboardingContent
+									handleStepComplete={handleStepComplete}
+									handleStepBack={handleStepBack}
+									currentStep={currentStep}
+								/>
+							)}
+						</motion.div>
+					</div>
+				</motion.div>
+				<motion.div
+					initial={{ opacity: 0, y: 20 }}
+					animate={{ opacity: showLayout ? 0 : 1, y: showLayout ? 20 : 0 }}
+					transition={{ duration: ANIMATION_DURATION, ease: "easeOut" }}
+					className={cn("absolute bottom-6 left-0 right-0")}
+				>
+					<ProgressBar
+						currentStep={currentStep}
+						totalSteps={TOTAL_ONBOARDING_STEPS}
+						onSkip={handleSkipOnboarding}
+					/>
+				</motion.div>
+			</main>
+		</>
+	);
 }
--- a/frontend/components/navigation.tsx
+++ b/frontend/components/navigation.tsx
@ -83,7 +83,6 @@ export function Navigation({
    startNewConversation,
    conversationDocs,
    conversationData,
-    addConversationDoc,
    refreshConversations,
    placeholderConversation,
    setPlaceholderConversation,
@ -92,12 +91,12 @@ export function Navigation({

  const { loading } = useLoadingStore();

-  const [loadingNewConversation, setLoadingNewConversation] = useState(false);
  const [previousConversationCount, setPreviousConversationCount] = useState(0);
  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
  const [conversationToDelete, setConversationToDelete] =
    useState<ChatConversation | null>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
+  const hasCompletedInitialLoad = useRef(false);
+  const mountTimeRef = useRef<number | null>(null);

  const { selectedFilter, setSelectedFilter } = useKnowledgeFilter();

@ -140,8 +139,6 @@ export function Navigation({
  });

  const handleNewConversation = () => {
-    setLoadingNewConversation(true);
-
    // Use the prop callback if provided, otherwise use the context method
    if (onNewConversation) {
      onNewConversation();
@ -153,96 +150,8 @@ export function Navigation({
    if (typeof window !== "undefined") {
      window.dispatchEvent(new CustomEvent("newConversation"));
    }
-    // Clear loading state after a short delay to show the new conversation is created
-    setTimeout(() => {
-      setLoadingNewConversation(false);
-    }, 300);
  };

-  const handleFileUpload = async (file: File) => {
-    console.log("Navigation file upload:", file.name);
-
-    // Trigger loading start event for chat page
-    window.dispatchEvent(
-      new CustomEvent("fileUploadStart", {
-        detail: { filename: file.name },
-      }),
-    );
-
-    try {
-      const formData = new FormData();
-      formData.append("file", file);
-      formData.append("endpoint", endpoint);
-
-      const response = await fetch("/api/upload_context", {
-        method: "POST",
-        body: formData,
-      });
-
-      if (!response.ok) {
-        const errorText = await response.text();
-        console.error("Upload failed:", errorText);
-
-        // Trigger error event for chat page to handle
-        window.dispatchEvent(
-          new CustomEvent("fileUploadError", {
-            detail: {
-              filename: file.name,
-              error: "Failed to process document",
-            },
-          }),
-        );
-
-        // Trigger loading end event
-        window.dispatchEvent(new CustomEvent("fileUploadComplete"));
-        return;
-      }
-
-      const result = await response.json();
-      console.log("Upload result:", result);
-
-      // Add the file to conversation docs
-      if (result.filename) {
-        addConversationDoc(result.filename);
-      }
-
-      // Trigger file upload event for chat page to handle
-      window.dispatchEvent(
-        new CustomEvent("fileUploaded", {
-          detail: { file, result },
-        }),
-      );
-
-      // Trigger loading end event
-      window.dispatchEvent(new CustomEvent("fileUploadComplete"));
-    } catch (error) {
-      console.error("Upload failed:", error);
-      // Trigger loading end event even on error
-      window.dispatchEvent(new CustomEvent("fileUploadComplete"));
-
-      // Trigger error event for chat page to handle
-      window.dispatchEvent(
-        new CustomEvent("fileUploadError", {
-          detail: { filename: file.name, error: "Failed to process document" },
-        }),
-      );
-    }
-  };
-
-  const handleFilePickerClick = () => {
-    fileInputRef.current?.click();
-  };
-
-  const handleFilePickerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files;
-    if (files && files.length > 0) {
-      handleFileUpload(files[0]);
-    }
-    // Reset the input so the same file can be selected again
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
-  };

  const handleDeleteConversation = (
    conversation: ChatConversation,
@ -303,15 +212,43 @@ export function Navigation({
  const isOnChatPage = pathname === "/" || pathname === "/chat";
  const isOnKnowledgePage = pathname.startsWith("/knowledge");

+  // Track mount time to prevent auto-selection right after component mounts (e.g., after onboarding)
+  useEffect(() => {
+    if (mountTimeRef.current === null) {
+      mountTimeRef.current = Date.now();
+    }
+  }, []);
+
+  // Track when initial load completes
+  useEffect(() => {
+    if (!isConversationsLoading && !hasCompletedInitialLoad.current) {
+      hasCompletedInitialLoad.current = true;
+      // Set initial count after first load completes
+      setPreviousConversationCount(conversations.length);
+    }
+  }, [isConversationsLoading, conversations.length]);
+
  // Clear placeholder when conversation count increases (new conversation was created)
  useEffect(() => {
    const currentCount = conversations.length;
+    const timeSinceMount = mountTimeRef.current
+      ? Date.now() - mountTimeRef.current
+      : Infinity;
+    const MIN_TIME_AFTER_MOUNT = 2000; // 2 seconds - prevents selection right after onboarding

-    // If we had a placeholder and the conversation count increased, clear the placeholder and highlight the new conversation
+    // Only select if:
+    // 1. We have a placeholder (new conversation was created)
+    // 2. Initial load has completed (prevents selection on browser refresh)
+    // 3. Count increased (new conversation appeared)
+    // 4. Not currently loading
+    // 5. Enough time has passed since mount (prevents selection after onboarding completes)
    if (
      placeholderConversation &&
+      hasCompletedInitialLoad.current &&
      currentCount > previousConversationCount &&
-      conversations.length > 0
+      conversations.length > 0 &&
+      !isConversationsLoading &&
+      timeSinceMount >= MIN_TIME_AFTER_MOUNT
    ) {
      setPlaceholderConversation(null);
      // Highlight the most recent conversation (first in sorted array) without loading its messages
@ -321,8 +258,10 @@ export function Navigation({
      }
    }

-    // Update the previous count
-    setPreviousConversationCount(currentCount);
+    // Update the previous count only after initial load
+    if (hasCompletedInitialLoad.current) {
+      setPreviousConversationCount(currentCount);
+    }
  }, [
    conversations.length,
    placeholderConversation,
@ -330,6 +269,7 @@ export function Navigation({
    previousConversationCount,
    conversations,
    setCurrentConversationId,
+    isConversationsLoading,
  ]);

  useEffect(() => {
@ -341,10 +281,10 @@ export function Navigation({
      );
    }

-    if (isOnChatPage) {
+    if (isOnChatPage && !isConversationsLoading) {
      if (conversations.length === 0 && !placeholderConversation) {
        handleNewConversation();
-      } else if (activeConvo && !conversationLoaded) {
+      } else if (activeConvo) {
        loadConversation(activeConvo);
        refreshConversations();
      } else if (
@ -431,35 +371,22 @@ export function Navigation({

          <div className="flex-1 min-h-0 overflow-y-auto scrollbar-hide">
            <div className="space-y-1 flex flex-col">
-              {loadingNewConversation || isConversationsLoading ? (
-                <div className="text-[13px] text-muted-foreground p-2">
-                  Loading...
-                </div>
+              {/* Show skeleton loaders when loading and no conversations exist */}
+              {isConversationsLoading && conversations.length === 0 ? (
+
+                  [0,1].map((skeletonIndex) => (
+                    <div
+                      key={`conversation-skeleton-${skeletonIndex}`}
+                      className={cn("w-full px-3 h-11 rounded-lg animate-pulse", skeletonIndex === 0 ? "bg-accent/50" : "")}
+                    >
+                      <div className="h-3 bg-muted-foreground/20 rounded w-3/4 mt-3.5" />
+                    </div>
+                  ))
              ) : (
                <>
-                  {/* Show placeholder conversation if it exists */}
-                  {placeholderConversation && (
-                    <button
-                      type="button"
-                      className="w-full px-3 rounded-lg bg-accent border border-dashed border-accent cursor-pointer group text-left h-[44px]"
-                      onClick={() => {
-                        // Don't load placeholder as a real conversation, just focus the input
-                        if (typeof window !== "undefined") {
-                          window.dispatchEvent(new CustomEvent("focusInput"));
-                        }
-                      }}
-                    >
-                      <div className="text-[13px] font-medium text-foreground truncate">
-                        {placeholderConversation.title}
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        Start typing to begin...
-                      </div>
-                    </button>
-                  )}

                  {/* Show regular conversations */}
-                  {conversations.length === 0 && !placeholderConversation ? (
+                  {conversations.length === 0 && !isConversationsLoading ? (
                    <div className="text-[13px] text-muted-foreground py-2 pl-3">
                      No conversations yet
                    </div>
@ -469,7 +396,7 @@ export function Navigation({
                        key={conversation.response_id}
                        type="button"
                        className={`w-full px-3 h-11 rounded-lg group relative text-left ${
-                          loading
+                          loading || isConversationsLoading
                            ? "opacity-50 cursor-not-allowed"
                            : "hover:bg-accent cursor-pointer"
                        } ${
@ -478,11 +405,11 @@ export function Navigation({
                            : ""
                        }`}
                        onClick={() => {
-                          if (loading) return;
+                          if (loading || isConversationsLoading) return;
                          loadConversation(conversation);
                          refreshConversations();
                        }}
-                        disabled={loading}
+                        disabled={loading || isConversationsLoading}
                      >
                        <div className="flex items-center justify-between">
                          <div className="flex-1 min-w-0">
@ -493,7 +420,7 @@ export function Navigation({
                          <DropdownMenu>
                            <DropdownMenuTrigger
                              disabled={
-                                loading || deleteSessionMutation.isPending
+                                loading || isConversationsLoading || deleteSessionMutation.isPending
                              }
                              asChild
                            >
@ -543,51 +470,6 @@ export function Navigation({
                </>
              )}
            </div>
-
-            {/* Conversation Knowledge Section - appears right after last conversation
-            <div className="flex-shrink-0 mt-4">
-              <div className="flex items-center justify-between mb-3 mx-3">
-                <h3 className="text-xs font-medium text-muted-foreground">
-                  Conversation knowledge
-                </h3>
-                <button
-                  type="button"
-                  onClick={handleFilePickerClick}
-                  className="p-1 hover:bg-accent rounded"
-                  disabled={loading}
-                >
-                  <Plus className="h-4 w-4 text-muted-foreground" />
-                </button>
-              </div>
-              <input
-                ref={fileInputRef}
-                type="file"
-                onChange={handleFilePickerChange}
-                className="hidden"
-                accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
-              />
-              <div className="overflow-y-auto scrollbar-hide space-y-1">
-                {conversationDocs.length === 0 ? (
-                  <div className="text-[13px] text-muted-foreground py-2 px-3">
-                    No documents yet
-                  </div>
-                ) : (
-                  conversationDocs.map(doc => (
-                    <div
-                      key={`${doc.filename}-${doc.uploadTime.getTime()}`}
-                      className="w-full px-3 h-11 rounded-lg hover:bg-accent cursor-pointer group flex items-center"
-                    >
-                      <FileText className="h-4 w-4 mr-2 text-muted-foreground flex-shrink-0" />
-                      <div className="flex-1 min-w-0">
-                        <div className="text-sm text-foreground truncate">
-                          {doc.filename}
-                        </div>
-                      </div>
-                    </div>
-                  ))
-                )}
-              </div>
-            </div> */}
            <div className="flex-shrink-0 mt-4">
              <div className="flex items-center justify-between mb-3 mx-3">
                <h3 className="text-xs font-medium text-muted-foreground">
@ -595,7 +477,7 @@ export function Navigation({
                </h3>
              </div>
              <div className="overflow-y-auto scrollbar-hide space-y-1">
-                {newConversationFiles?.length === 0 ? (
+                {(newConversationFiles?.length ?? 0) === 0 ? (
                  <div className="text-[13px] text-muted-foreground py-2 px-3">
                    No documents yet
                  </div>
--- a/frontend/lib/constants.ts
+++ b/frontend/lib/constants.ts
@ -28,12 +28,16 @@ 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 = 5;

 /**
 * Local Storage Keys
 */
 export const ONBOARDING_STEP_KEY = "onboarding_current_step";
+export const ONBOARDING_ASSISTANT_MESSAGE_KEY = "onboarding_assistant_message";
+export const ONBOARDING_SELECTED_NUDGE_KEY = "onboarding_selected_nudge";
+export const ONBOARDING_CARD_STEPS_KEY = "onboarding_card_steps";
+export const ONBOARDING_UPLOAD_STEPS_KEY = "onboarding_upload_steps";

 export const FILES_REGEX =
  /(?<=I'm uploading a document called ['"])[^'"]+\.[^.]+(?=['"]\. Here is its content:)/;
Author	SHA1	Message	Date
Lucas Oliveira	7dbb307f98	fixed conversation be selected when exiting onboarding	2025-11-18 18:22:26 -03:00
Lucas Oliveira	bac4ba7ee3	set the messages as just the user message when messages.length is 1	2025-11-18 17:56:02 -03:00
Lucas Oliveira	726b19c8bb	fixed conversation be selected even though its a new conversation	2025-11-18 17:49:34 -03:00
Lucas Oliveira	2c812657d6	fixed chat losing past message when navigating out of the chat	2025-11-18 17:38:21 -03:00
Lucas Oliveira	8a7cef695e	fixed navigation style to not placeholder for new conversation, not show loading state, and to show correct files	2025-11-18 17:28:38 -03:00
Lucas Oliveira	68db630a27	only show navigation when onboarding is complete	2025-11-18 17:15:33 -03:00
Lucas Oliveira	5d83a40f76	clean all items from local storage on finish onboarding	2025-11-18 17:12:38 -03:00
Lucas Oliveira	b7e364a240	made assistant message be saved on local storage to save progress on onboarding	2025-11-18 17:08:11 -03:00
Lucas Oliveira	2b9a21d8bb	increased total onboarding steps	2025-11-18 17:04:17 -03:00
Lucas Oliveira	c00dc3e0f1	just show children when show layout	2025-11-18 17:03:02 -03:00
Lucas Oliveira	c1c48c8614	show skip overview just when finishing embedding	2025-11-18 17:02:54 -03:00
Lucas Oliveira	9c3ba58dff	added refetch when nudges are not fetched	2025-11-18 14:05:24 -03:00
Lucas Oliveira	fcd0bed85f	fixed docker to old way	2025-11-18 13:54:45 -03:00