Merge branch 'main' into docs-perf-test

frontend/components/navigation.tsx

@@ -594,8 +594,8 @@ export function Navigation({
 										No documents yet
 									</div>
 								) : (
-									newConversationFiles?.map((file) => (
+									newConversationFiles?.map((file, index) => (
-											<div key={`${file}`} className="flex-1 min-w-0 px-3">
+											<div key={`${file}-${index}`} className="flex-1 min-w-0 px-3">
 												<div className="text-mmd font-medium text-foreground truncate">
 													{file}
 												</div>

frontend/components/ui/accordion.tsx

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

frontend/src/app/chat/components/user-message.tsx

@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils";
 import { Message } from "./message";
 
 interface UserMessageProps {
-	content: string;
+	content: string | undefined;
 	isCompleted?: boolean;
 	animate?: boolean;
 	files?: string;

frontend/src/app/chat/page.tsx

@@ -9,7 +9,7 @@ import { type EndpointType, useChat } from "@/contexts/chat-context";
 import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
 import { useTask } from "@/contexts/task-context";
 import { useChatStreaming } from "@/hooks/useChatStreaming";
-import { FILES_REGEX } from "@/lib/constants";
+import { FILE_CONFIRMATION, FILES_REGEX } from "@/lib/constants";
 import { useLoadingStore } from "@/stores/loadingStore";
 import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
 import { AssistantMessage } from "./components/assistant-message";
@@ -911,9 +911,9 @@ function ChatPage() {
     }
 
     // Only send message if there's input text
-    if (input.trim()) {
+    if (input.trim() || uploadedFile) {
       // Pass the responseId from upload (if any) to handleSendMessage
-      handleSendMessage(input, uploadedResponseId || undefined);
+      handleSendMessage(!input.trim() ? FILE_CONFIRMATION : input, uploadedResponseId || undefined);
     }
   };
 
@@ -1154,6 +1154,8 @@ function ChatPage() {
     }
   };
 
+  console.log(messages)
+
   return (
     <>
       {/* Debug header - only show in debug mode */}
@@ -1236,7 +1238,10 @@ function ChatPage() {
                               ? message.source !== "langflow"
                               : false
                           }
-                          content={message.content}
+                          content={index >= 2
+							&& (messages[index - 2]?.content.match(
+								FILES_REGEX,
+							  )?.[0] ?? undefined) && message.content === FILE_CONFIRMATION ? undefined : message.content}
                           files={
                             index >= 2
                               ? messages[index - 2]?.content.match(

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

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

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

@@ -2,7 +2,6 @@ import { AnimatePresence, motion } from "motion/react";
 import { type ReactNode, useEffect, useState } from "react";
 import { Message } from "@/app/chat/components/message";
 import DogIcon from "@/components/logo/dog-icon";
-import AnimatedProcessingIcon from "@/components/ui/animated-processing-icon";
 import { MarkdownRenderer } from "@/components/markdown-renderer";
 import { cn } from "@/lib/utils";
 
@@ -11,12 +10,10 @@ interface OnboardingStepProps {
 	children?: ReactNode;
 	isVisible: boolean;
 	isCompleted?: boolean;
+	showCompleted?: boolean;
 	icon?: ReactNode;
 	isMarkdown?: boolean;
 	hideIcon?: boolean;
-  isLoadingModels?: boolean;
-  loadingStatus?: string[];
-  reserveSpaceForThinking?: boolean;
 }
 
 export function OnboardingStep({
@@ -24,38 +21,13 @@ export function OnboardingStep({
 	children,
 	isVisible,
 	isCompleted = false,
+	showCompleted = false,
 	icon,
 	isMarkdown = false,
 	hideIcon = false,
-  isLoadingModels = false,
-  loadingStatus = [],
-  reserveSpaceForThinking = false,
 }: OnboardingStepProps) {
 	const [displayedText, setDisplayedText] = useState("");
 	const [showChildren, setShowChildren] = useState(false);
-  const [currentStatusIndex, setCurrentStatusIndex] = useState<number>(0);
-
-  // Cycle through loading status messages once
-  useEffect(() => {
-    if (!isLoadingModels || loadingStatus.length === 0) {
-      setCurrentStatusIndex(0);
-      return;
-    }
-
-    const interval = setInterval(() => {
-      setCurrentStatusIndex((prev) => {
-        const nextIndex = prev + 1;
-        // Stop at the last message
-        if (nextIndex >= loadingStatus.length - 1) {
-          clearInterval(interval);
-          return loadingStatus.length - 1;
-        }
-        return nextIndex;
-      });
-    }, 1500); // Change status every 1.5 seconds
-
-    return () => clearInterval(interval);
-  }, [isLoadingModels, loadingStatus]);
 
 	useEffect(() => {
 		if (!isVisible) {
@@ -113,48 +85,15 @@ export function OnboardingStep({
 				}
 			>
 				<div>
-          {isLoadingModels && loadingStatus.length > 0 ? (
+					{isMarkdown ? (
-            <div className="flex flex-col gap-2 py-1.5">
-              <div className="flex items-center gap-2">
-                <div className="relative w-1.5 h-2.5">
-                  <AnimatedProcessingIcon className="text-current shrink-0 absolute inset-0" />
-                </div>
-                <span className="text-mmd font-medium text-muted-foreground">
-                  Thinking
-                </span>
-              </div>
-              <div className="overflow-hidden">
-                <div className="flex items-center gap-5 overflow-y-hidden relative h-6">
-                  <div className="w-px h-6 bg-border" />
-                  <div className="relative h-5 w-full">
-                    <AnimatePresence mode="sync" initial={false}>
-                      <motion.span
-                        key={currentStatusIndex}
-                        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"
-                      >
-                        {loadingStatus[currentStatusIndex]}
-                      </motion.span>
-                    </AnimatePresence>
-                  </div>
-                </div>
-              </div>
-            </div>
-          ) : isMarkdown ? (
 						<MarkdownRenderer
 							className={cn(
-                  isCompleted
+								isCompleted ? "text-placeholder-foreground" : "text-foreground",
-                    ? "text-placeholder-foreground"
-                    : "text-foreground",
 								"text-sm py-1.5 transition-colors duration-300",
 							)}
 							chatMessage={text}
 						/>
 					) : (
-            <>
 						<p
 							className={`text-foreground text-sm py-1.5 transition-colors duration-300 ${
 								isCompleted ? "text-placeholder-foreground" : ""
@@ -165,22 +104,18 @@ export function OnboardingStep({
 								<span className="inline-block w-1 h-3.5 bg-primary ml-1 animate-pulse" />
 							)}
 						</p>
-              {reserveSpaceForThinking && (
-                <div className="h-8" />
-              )}
-            </>
 					)}
 					{children && (
 						<AnimatePresence>
-              {((showChildren && !isCompleted) || isMarkdown) && (
+							{((showChildren && (!isCompleted || showCompleted)) ||
+								isMarkdown) && (
 								<motion.div
 									initial={{ opacity: 0, y: -10 }}
 									animate={{ opacity: 1, y: 0 }}
 									exit={{ opacity: 0, height: 0 }}
 									transition={{ duration: 0.3, delay: 0.3, ease: "easeOut" }}
 								>
-                  <div className="pt-2">
+									<div className="pt-4">{children}</div>
-                  {children}</div>
 								</motion.div>
 							)}
 						</AnimatePresence>

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

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

frontend/src/app/new-onboarding/components/progress-bar.tsx

@@ -1,15 +1,20 @@
+import { ArrowRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
 interface ProgressBarProps {
   currentStep: number;
   totalSteps: number;
+  onSkip?: () => void;
 }
 
-export function ProgressBar({ currentStep, totalSteps }: ProgressBarProps) {
+export function ProgressBar({ currentStep, totalSteps, onSkip }: ProgressBarProps) {
   const progressPercentage = ((currentStep + 1) / totalSteps) * 100;
 
   return (
-    <div className="w-full">
+    <div className="w-full flex items-center px-6 gap-4">
-      <div className="flex items-center max-w-48 mx-auto gap-3">
+      <div className="flex-1" />
-        <div className="flex-1 h-1 bg-background rounded-full overflow-hidden">
+      <div className="flex items-center gap-3">
+        <div className="w-48 h-1 bg-background rounded-full overflow-hidden">
           <div
             className="h-full transition-all duration-300 ease-in-out"
             style={{
@@ -22,6 +27,19 @@ export function ProgressBar({ currentStep, totalSteps }: ProgressBarProps) {
           {currentStep + 1}/{totalSteps}
         </span>
       </div>
+      <div className="flex-1 flex justify-end">
+        {currentStep > 0 && onSkip && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onSkip}
+            className="flex items-center gap-2 text-xs text-muted-foreground"
+          >
+            Skip onboarding
+            <ArrowRight className="w-4 h-4" />
+          </Button>
+        )}
+      </div>
     </div>
   );
 }

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

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

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

@@ -15,13 +15,11 @@ export function IBMOnboarding({
   sampleDataset,
   setSampleDataset,
   setIsLoadingModels,
-  setLoadingStatus,
 }: {
   setSettings: (settings: OnboardingVariables) => void;
   sampleDataset: boolean;
   setSampleDataset: (dataset: boolean) => void;
   setIsLoadingModels?: (isLoading: boolean) => void;
-  setLoadingStatus?: (status: string[]) => void;
 }) {
   const [endpoint, setEndpoint] = useState("https://us-south.ml.cloud.ibm.com");
   const [apiKey, setApiKey] = useState("");
@@ -91,6 +89,10 @@ export function IBMOnboarding({
     setSampleDataset(dataset);
   };
 
+  useEffect(() => {
+		setIsLoadingModels?.(isLoadingModels);
+	}, [isLoadingModels, setIsLoadingModels]);
+
   // Update settings when values change
   useUpdateSettings(
     "watsonx",
@@ -104,18 +106,6 @@ export function IBMOnboarding({
     setSettings,
   );
 
-  // Notify parent about loading state
-  useEffect(() => {
-    setIsLoadingModels?.(isLoadingModels);
-
-    // Set detailed loading status
-    if (isLoadingModels) {
-      const status = ["Connecting to IBM watsonx.ai", "Fetching language models", "Fetching embedding models"];
-      setLoadingStatus?.(status);
-    } else {
-      setLoadingStatus?.([]);
-    }
-  }, [isLoadingModels, setIsLoadingModels, setLoadingStatus]);
   return (
     <>
       <div className="space-y-4">

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

@@ -14,13 +14,11 @@ export function OllamaOnboarding({
 	sampleDataset,
 	setSampleDataset,
 	setIsLoadingModels,
-	setLoadingStatus,
 }: {
 	setSettings: (settings: OnboardingVariables) => void;
 	sampleDataset: boolean;
 	setSampleDataset: (dataset: boolean) => void;
 	setIsLoadingModels?: (isLoading: boolean) => void;
-	setLoadingStatus?: (status: string[]) => void;
 }) {
 	const [endpoint, setEndpoint] = useState(`http://localhost:11434`);
 	const [showConnecting, setShowConnecting] = useState(false);
@@ -75,19 +73,6 @@ export function OllamaOnboarding({
 		setSettings,
 	);
 	
-	// Notify parent about loading state
-	useEffect(() => {
-		setIsLoadingModels?.(isLoadingModels);
-
-		// Set detailed loading status
-		if (isLoadingModels) {
-			const status = ["Connecting to Ollama", "Fetching language models", "Fetching embedding models"];
-			setLoadingStatus?.(status);
-		} else {
-			setLoadingStatus?.([]);
-		}
-	}, [isLoadingModels, setIsLoadingModels, setLoadingStatus]);
-
 	// Check validation state based on models query
 	const hasConnectionError = debouncedEndpoint && modelsError;
 	const hasNoModels =

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

@@ -27,11 +27,11 @@ import { OpenAIOnboarding } from "./openai-onboarding";
 
 interface OnboardingCardProps {
 	onComplete: () => void;
+	isCompleted?: boolean;
 	setIsLoadingModels?: (isLoading: boolean) => void;
 	setLoadingStatus?: (status: string[]) => void;
 }
 
-
 const STEP_LIST = [
 	"Setting up your model provider",
 	"Defining schema",
@@ -43,8 +43,7 @@ const TOTAL_PROVIDER_STEPS = STEP_LIST.length;
 
 const OnboardingCard = ({
 	onComplete,
-	setIsLoadingModels: setIsLoadingModelsParent,
+	isCompleted = false,
-	setLoadingStatus: setLoadingStatusParent,
 }: OnboardingCardProps) => {
 	const { isHealthy: isDoclingHealthy } = useDoclingHealth();
 
@@ -54,40 +53,14 @@ const OnboardingCard = ({
 
 	const [isLoadingModels, setIsLoadingModels] = useState<boolean>(false);
 
-	const [loadingStatus, setLoadingStatus] = useState<string[]>([]);
+	const [loadingStep, setLoadingStep] = useState<number>(0);
 
-	const [currentStatusIndex, setCurrentStatusIndex] = useState<number>(0);
+	// Reset loading step when models start loading
-
-	// Pass loading state to parent
 	useEffect(() => {
-		setIsLoadingModelsParent?.(isLoadingModels);
+		if (isLoadingModels) {
-	}, [isLoadingModels, setIsLoadingModelsParent]);
+			setLoadingStep(0);
-
-	useEffect(() => {
-		setLoadingStatusParent?.(loadingStatus);
-	}, [loadingStatus, setLoadingStatusParent]);
-
-	// Cycle through loading status messages once
-	useEffect(() => {
-		if (!isLoadingModels || loadingStatus.length === 0) {
-			setCurrentStatusIndex(0);
-			return;
 		}
-
+	}, [isLoadingModels]);
-		const interval = setInterval(() => {
-			setCurrentStatusIndex((prev) => {
-				const nextIndex = prev + 1;
-				// Stop at the last message
-				if (nextIndex >= loadingStatus.length - 1) {
-					clearInterval(interval);
-					return loadingStatus.length - 1;
-				}
-				return nextIndex;
-			});
-		}, 1500); // Change status every 1.5 seconds
-
-		return () => clearInterval(interval);
-	}, [isLoadingModels, loadingStatus]);
 
 	const handleSetModelProvider = (provider: string) => {
 		setModelProvider(provider);
@@ -104,7 +77,13 @@ const OnboardingCard = ({
 		llm_model: "",
 	});
 
-	const [currentStep, setCurrentStep] = useState<number | null>(null);
+	const [currentStep, setCurrentStep] = useState<number | null>(
+		isCompleted ? TOTAL_PROVIDER_STEPS : null,
+	);
+
+	const [processingStartTime, setProcessingStartTime] = useState<number | null>(
+		null,
+	);
 
 	// Query tasks to track completion
 	const { data: tasks } = useGetTasksQuery({
@@ -129,7 +108,8 @@ const OnboardingCard = ({
 		// If no active tasks and we've started onboarding, complete it
 		if (
 			(!activeTasks || (activeTasks.processed_files ?? 0) > 0) &&
-			tasks.length > 0
+			tasks.length > 0 &&
+			!isCompleted
 		) {
 			// Set to final step to show "Done"
 			setCurrentStep(TOTAL_PROVIDER_STEPS);
@@ -138,7 +118,7 @@ const OnboardingCard = ({
 				onComplete();
 			}, 1000);
 		}
-	}, [tasks, currentStep, onComplete]);
+	}, [tasks, currentStep, onComplete, isCompleted]);
 
 	// Mutations
 	const onboardingMutation = useOnboardingMutation({
@@ -186,6 +166,8 @@ const OnboardingCard = ({
 			onboardingData.project_id = settings.project_id;
 		}
 
+		// Record the start time when user clicks Complete
+		setProcessingStartTime(Date.now());
 		onboardingMutation.mutate(onboardingData);
 		setCurrentStep(0);
 	};
@@ -208,43 +190,91 @@ const OnboardingCard = ({
 							onValueChange={handleSetModelProvider}
 						>
 							<TabsList className="mb-4">
-								<TabsTrigger
+								<TabsTrigger value="openai">
-									value="openai"
+									<div
+										className={cn(
+											"flex items-center justify-center gap-2 w-8 h-8 rounded-md",
+											modelProvider === "openai" ? "bg-white" : "bg-muted",
+										)}
 									>
-									<div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "openai" ? "bg-white" : "bg-muted")}>
+										<OpenAILogo
-										<OpenAILogo className={cn("w-4 h-4 shrink-0", modelProvider === "openai" ? "text-black" : "text-muted-foreground")} />
+											className={cn(
+												"w-4 h-4 shrink-0",
+												modelProvider === "openai"
+													? "text-black"
+													: "text-muted-foreground",
+											)}
+										/>
 									</div>
 									OpenAI
 								</TabsTrigger>
-								<TabsTrigger
+								<TabsTrigger value="watsonx">
-									value="watsonx"
+									<div
+										className={cn(
+											"flex items-center justify-center gap-2 w-8 h-8 rounded-md",
+											modelProvider === "watsonx" ? "bg-[#1063FE]" : "bg-muted",
+										)}
 									>
-									<div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "watsonx" ? "bg-[#1063FE]" : "bg-muted")}>
+										<IBMLogo
-										<IBMLogo className={cn("w-4 h-4 shrink-0", modelProvider === "watsonx" ? "text-white" : "text-muted-foreground")} />
+											className={cn(
+												"w-4 h-4 shrink-0",
+												modelProvider === "watsonx"
+													? "text-white"
+													: "text-muted-foreground",
+											)}
+										/>
 									</div>
 									IBM watsonx.ai
 								</TabsTrigger>
-								<TabsTrigger
+								<TabsTrigger value="ollama">
-									value="ollama"
+									<div
+										className={cn(
+											"flex items-center justify-center gap-2 w-8 h-8 rounded-md",
+											modelProvider === "ollama" ? "bg-white" : "bg-muted",
+										)}
 									>
-									<div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "ollama" ? "bg-white" : "bg-muted")}>
 										<OllamaLogo
 											className={cn(
 												"w-4 h-4 shrink-0",
-												modelProvider === "ollama" ? "text-black" : "text-muted-foreground",
+												modelProvider === "ollama"
+													? "text-black"
+													: "text-muted-foreground",
 											)}
 										/>
 									</div>
 									Ollama
 								</TabsTrigger>
 							</TabsList>
+							<AnimatePresence>
+							{isLoadingModels && (
+								<motion.div
+									initial={{ opacity: 0, height: 0 }}
+									animate={{ opacity: 1, height: "auto" }}
+									exit={{ opacity: 0, height: 0 }}
+									transition={{ duration: 0.1, ease: "easeInOut" }}
+									className="overflow-hidden"
+								>
+									<div className="py-3">
+									<AnimatedProviderSteps
+										currentStep={loadingStep}
+										isCompleted={false}
+										setCurrentStep={setLoadingStep}
+										steps={[
+											"Connecting to the provider",
+											"Fetching language models",
+											"Fetching embedding models",
+										]}
+										storageKey="model-loading-steps"
+									/></div>
+								</motion.div>
+							)}
+						</AnimatePresence>
 							<TabsContent value="openai">
 								<OpenAIOnboarding
 									setSettings={setSettings}
 									sampleDataset={sampleDataset}
 									setSampleDataset={setSampleDataset}
 									setIsLoadingModels={setIsLoadingModels}
-									setLoadingStatus={setLoadingStatus}
 								/>
 							</TabsContent>
 							<TabsContent value="watsonx">
@@ -253,7 +283,6 @@ const OnboardingCard = ({
 									sampleDataset={sampleDataset}
 									setSampleDataset={setSampleDataset}
 									setIsLoadingModels={setIsLoadingModels}
-									setLoadingStatus={setLoadingStatus}
 								/>
 							</TabsContent>
 							<TabsContent value="ollama">
@@ -262,19 +291,19 @@ const OnboardingCard = ({
 									sampleDataset={sampleDataset}
 									setSampleDataset={setSampleDataset}
 									setIsLoadingModels={setIsLoadingModels}
-									setLoadingStatus={setLoadingStatus}
 								/>
 							</TabsContent>
 						</Tabs>
 
-						{!isLoadingModels && (
+						
+
 						<Tooltip>
 							<TooltipTrigger asChild>
 								<div>
 									<Button
 										size="sm"
 										onClick={handleComplete}
-											disabled={!isComplete}
+										disabled={!isComplete || isLoadingModels}
 										loading={onboardingMutation.isPending}
 									>
 										<span className="select-none">Complete</span>
@@ -283,7 +312,9 @@ const OnboardingCard = ({
 							</TooltipTrigger>
 							{!isComplete && (
 								<TooltipContent>
-										{!!settings.llm_model &&
+									{isLoadingModels
+										? "Loading models..."
+										: !!settings.llm_model &&
 												!!settings.embedding_model &&
 												!isDoclingHealthy
 											? "docling-serve must be running to continue"
@@ -291,7 +322,6 @@ const OnboardingCard = ({
 								</TooltipContent>
 							)}
 						</Tooltip>
-						)}
 					</div>
 				</motion.div>
 			) : (
@@ -303,8 +333,10 @@ const OnboardingCard = ({
 				>
 					<AnimatedProviderSteps
 						currentStep={currentStep}
+						isCompleted={isCompleted}
 						setCurrentStep={setCurrentStep}
 						steps={STEP_LIST}
+						processingStartTime={processingStartTime}
 					/>
 				</motion.div>
 			)}

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

@@ -15,13 +15,11 @@ export function OpenAIOnboarding({
 	sampleDataset,
 	setSampleDataset,
 	setIsLoadingModels,
-	setLoadingStatus,
 }: {
 	setSettings: (settings: OnboardingVariables) => void;
 	sampleDataset: boolean;
 	setSampleDataset: (dataset: boolean) => void;
 	setIsLoadingModels?: (isLoading: boolean) => void;
-	setLoadingStatus?: (status: string[]) => void;
 }) {
 	const [apiKey, setApiKey] = useState("");
 	const [getFromEnv, setGetFromEnv] = useState(true);
@@ -62,6 +60,10 @@ export function OpenAIOnboarding({
 		setEmbeddingModel("");
 	};
 
+	useEffect(() => {
+		setIsLoadingModels?.(isLoadingModels);
+	}, [isLoadingModels, setIsLoadingModels]);
+
 	// Update settings when values change
 	useUpdateSettings(
 		"openai",
@@ -73,18 +75,6 @@ export function OpenAIOnboarding({
 		setSettings,
 	);
 	
-	// Notify parent about loading state
-	useEffect(() => {
-		setIsLoadingModels?.(isLoadingModels);
-
-		// Set detailed loading status
-		if (isLoadingModels) {
-			const status = ["Connecting to OpenAI", "Fetching language models", "Fetching embedding models"];
-			setLoadingStatus?.(status);
-		} else {
-			setLoadingStatus?.([]);
-		}
-	}, [isLoadingModels, setIsLoadingModels, setLoadingStatus]);
 	return (
 		<>
 			<div className="space-y-5">

frontend/src/components/chat-renderer.tsx

@@ -86,6 +86,14 @@ export function ChatRenderer({
 		}
 	};
 
+	const handleSkipOnboarding = () => {
+		// Skip onboarding by marking it as complete
+		if (typeof window !== "undefined") {
+			localStorage.removeItem(ONBOARDING_STEP_KEY);
+		}
+		setShowLayout(true);
+	};
+
 	// List of paths with smaller max-width
 	const smallWidthPaths = ["/settings/connector/new"];
 	const isSmallWidthPath = smallWidthPaths.includes(pathname);
@@ -149,6 +157,7 @@ export function ChatRenderer({
 					className={cn(
 						"flex h-full w-full max-w-full max-h-full items-center justify-center overflow-hidden",
 						!showLayout && "absolute",
+						showLayout && !isOnChatPage && "bg-background",
 					)}
 				>
 					<div
@@ -172,7 +181,7 @@ export function ChatRenderer({
 								ease: "easeOut",
 								delay: ANIMATION_DURATION,
 							}}
-							className={cn("w-full h-full 0v")}
+							className={cn("w-full h-full")}
 						>
 							<div className={cn("w-full h-full", !showLayout && "hidden")}>
 								{children}
@@ -195,6 +204,7 @@ export function ChatRenderer({
 					<ProgressBar
 						currentStep={currentStep}
 						totalSteps={TOTAL_ONBOARDING_STEPS}
+						onSkip={handleSkipOnboarding}
 					/>
 				</motion.div>
 			</main>

frontend/src/contexts/task-context.tsx

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

frontend/src/lib/constants.ts

@@ -36,3 +36,5 @@ export const ONBOARDING_STEP_KEY = "onboarding_current_step";
 
 export const FILES_REGEX =
 		/(?<=I'm uploading a document called ['"])[^'"]+\.[^.]+(?=['"]\. Here is its content:)/;
+
+export const FILE_CONFIRMATION = "Confirm that you received this file.";

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "openrag"
-version = "0.1.24"
+version = "0.1.25"
 description = "Add your description here"
 readme = "README.md"
 requires-python = ">=3.13"

src/tui/_assets/documents/2506.08231v1.pdf

@@ -1 +0,0 @@
-../../../../documents/2506.08231v1.pdf

src/tui/_assets/documents/ai-human-resources.pdf

@@ -1 +0,0 @@
-../../../../documents/ai-human-resources.pdf

src/tui/_assets/documents/docling.pdf

@@ -0,0 +1 @@
+../../../../documents/docling.pdf

src/tui/_assets/documents/ibm_anthropic.pdf

@@ -0,0 +1 @@
+../../../../documents/ibm_anthropic.pdf

src/tui/_assets/documents/openrag-documentation.pdf

@@ -0,0 +1 @@
+../../../../documents/openrag-documentation.pdf

src/tui/_assets/flows/openrag_ingest_docling.json

@@ -1 +0,0 @@
-../../../../flows/openrag_ingest_docling.json

uv.lock

@@ -1,5 +1,5 @@
 version = 1
-revision = 2
+revision = 3
 requires-python = ">=3.13"
 resolution-markers = [
     "platform_machine == 'x86_64' and sys_platform == 'linux'",
@@ -2352,7 +2352,7 @@ wheels = [
 
 [[package]]
 name = "openrag"
-version = "0.1.24"
+version = "0.1.25"
 source = { editable = "." }
 dependencies = [
     { name = "agentd" },