openai call thinking animation

2025-10-24 01:58:09 -04:00 · 2025-10-24 01:58:09 -04:00 · e4e3d46203
commit e4e3d46203
parent e023955810
7 changed files with 219 additions and 38 deletions
--- a/frontend/src/app/new-onboarding/components/onboarding-content.tsx
+++ b/frontend/src/app/new-onboarding/components/onboarding-content.tsx
@ -24,6 +24,8 @@ export function OnboardingContent({
 	const [assistantMessage, setAssistantMessage] = useState<Message | null>(
 		null,
 	);
+	const [isLoadingModels, setIsLoadingModels] = useState<boolean>(false);
+	const [loadingStatus, setLoadingStatus] = useState<string[]>([]);

 	const { streamingMessage, isLoading, sendMessage } = useChatStreaming({
 		onComplete: (message, newResponseId) => {
@ -79,8 +81,14 @@ export function OnboardingContent({
 						isVisible={currentStep >= 0}
 						isCompleted={currentStep > 0}
 						text="Let's get started by setting up your model provider."
+						isLoadingModels={isLoadingModels}
+						loadingStatus={loadingStatus}
 					>
-						<OnboardingCard onComplete={handleStepComplete} />
+						<OnboardingCard
+							onComplete={handleStepComplete}
+							setIsLoadingModels={setIsLoadingModels}
+							setLoadingStatus={setLoadingStatus}
+						/>
 					</OnboardingStep>

 					{/* Step 2 */}
--- a/frontend/src/app/new-onboarding/components/onboarding-step.tsx
+++ b/frontend/src/app/new-onboarding/components/onboarding-step.tsx
@ -2,6 +2,7 @@ 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";

@ -13,6 +14,8 @@ interface OnboardingStepProps {
  icon?: ReactNode;
  isMarkdown?: boolean;
  hideIcon?: boolean;
+  isLoadingModels?: boolean;
+  loadingStatus?: string[];
 }

 export function OnboardingStep({
@ -23,9 +26,34 @@ export function OnboardingStep({
  icon,
  isMarkdown = false,
  hideIcon = false,
+  isLoadingModels = false,
+  loadingStatus = [],
 }: 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) {
@ -83,7 +111,37 @@ export function OnboardingStep({
        }
      >
        <div>
-          {isMarkdown ? (
+          {isLoadingModels && loadingStatus.length > 0 ? (
+            <div className="flex flex-col gap-2 py-1.5">
+              <div className="flex items-center gap-2">
+                <div className="relative w-1.5 h-2.5">
+                  <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
@ -94,16 +152,19 @@ export function OnboardingStep({
                chatMessage={text}
              />
          ) : (
-            <p
-              className={`text-foreground text-sm py-1.5 transition-colors duration-300 ${
-                isCompleted ? "text-placeholder-foreground" : ""
-              }`}
-            >
-              {displayedText}
-              {!showChildren && !isCompleted && (
-                <span className="inline-block w-1 h-3.5 bg-primary ml-1 animate-pulse" />
-              )}
-            </p>
+            <div className="flex flex-col gap-2 py-1.5">
+              <p
+                className={`text-foreground text-sm transition-colors duration-300 ${
+                  isCompleted ? "text-placeholder-foreground" : ""
+                }`}
+              >
+                {displayedText}
+                {!showChildren && !isCompleted && (
+                  <span className="inline-block w-1 h-3.5 bg-primary ml-1 animate-pulse" />
+                )}
+              </p>
+              <div className="h-6" />
+            </div>
          )}
          {children && (
            <AnimatePresence>
--- a/frontend/src/app/onboarding/components/ibm-onboarding.tsx
+++ b/frontend/src/app/onboarding/components/ibm-onboarding.tsx
@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { LabelInput } from "@/components/label-input";
 import { LabelWrapper } from "@/components/label-wrapper";
 import IBMLogo from "@/components/logo/ibm-logo";
@ -14,10 +14,14 @@ export function IBMOnboarding({
  setSettings,
  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("");
@ -99,6 +103,19 @@ 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">
--- a/frontend/src/app/onboarding/components/ollama-onboarding.tsx
+++ b/frontend/src/app/onboarding/components/ollama-onboarding.tsx
@ -13,10 +13,14 @@ export function OllamaOnboarding({
 	setSettings,
 	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);
@ -71,6 +75,19 @@ 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 =
--- a/frontend/src/app/onboarding/components/onboarding-card.tsx
+++ b/frontend/src/app/onboarding/components/onboarding-card.tsx
@ -12,6 +12,7 @@ import { useDoclingHealth } from "@/components/docling-health-banner";
 import IBMLogo from "@/components/logo/ibm-logo";
 import OllamaLogo from "@/components/logo/ollama-logo";
 import OpenAILogo from "@/components/logo/openai-logo";
+import { AnimatedProcessingIcon } from "@/components/ui/animated-processing-icon";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@ -33,6 +34,8 @@ import { OpenAIOnboarding } from "./openai-onboarding";

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


@ -45,13 +48,54 @@ const STEP_LIST = [

 const TOTAL_PROVIDER_STEPS = STEP_LIST.length;

-const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
+const OnboardingCard = ({
+	onComplete,
+	setIsLoadingModels: setIsLoadingModelsParent,
+	setLoadingStatus: setLoadingStatusParent,
+}: OnboardingCardProps) => {
 	const { isHealthy: isDoclingHealthy } = useDoclingHealth();

 	const [modelProvider, setModelProvider] = useState<string>("openai");

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

+	const [isLoadingModels, setIsLoadingModels] = useState<boolean>(false);
+
+	const [loadingStatus, setLoadingStatus] = useState<string[]>([]);
+
+	const [currentStatusIndex, setCurrentStatusIndex] = useState<number>(0);
+
+	// Pass loading state to parent
+	useEffect(() => {
+		setIsLoadingModelsParent?.(isLoadingModels);
+	}, [isLoadingModels, setIsLoadingModelsParent]);
+
+	useEffect(() => {
+		setLoadingStatusParent?.(loadingStatus);
+	}, [loadingStatus, setLoadingStatusParent]);
+
+	// 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]);
+
 	const handleSetModelProvider = (provider: string) => {
 		setModelProvider(provider);
 		setSettings({
@ -206,6 +250,8 @@ const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
 									setSettings={setSettings}
 									sampleDataset={sampleDataset}
 									setSampleDataset={setSampleDataset}
+									setIsLoadingModels={setIsLoadingModels}
+									setLoadingStatus={setLoadingStatus}
 								/>
 							</TabsContent>
 							<TabsContent value="watsonx">
@ -213,6 +259,8 @@ const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
 									setSettings={setSettings}
 									sampleDataset={sampleDataset}
 									setSampleDataset={setSampleDataset}
+									setIsLoadingModels={setIsLoadingModels}
+									setLoadingStatus={setLoadingStatus}
 								/>
 							</TabsContent>
 							<TabsContent value="ollama">
@ -220,33 +268,37 @@ const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
 									setSettings={setSettings}
 									sampleDataset={sampleDataset}
 									setSampleDataset={setSampleDataset}
+									setIsLoadingModels={setIsLoadingModels}
+									setLoadingStatus={setLoadingStatus}
 								/>
 							</TabsContent>
 						</Tabs>

-						<Tooltip>
-							<TooltipTrigger asChild>
-								<div>
-									<Button
-										size="sm"
-										onClick={handleComplete}
-										disabled={!isComplete}
-										loading={onboardingMutation.isPending}
-									>
-										<span className="select-none">Complete</span>
-									</Button>
-								</div>
-							</TooltipTrigger>
-							{!isComplete && (
-								<TooltipContent>
-									{!!settings.llm_model &&
-									!!settings.embedding_model &&
-									!isDoclingHealthy
-										? "docling-serve must be running to continue"
-										: "Please fill in all required fields"}
-								</TooltipContent>
-							)}
-						</Tooltip>
+						{!isLoadingModels && (
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<div>
+										<Button
+											size="sm"
+											onClick={handleComplete}
+											disabled={!isComplete}
+											loading={onboardingMutation.isPending}
+										>
+											<span className="select-none">Complete</span>
+										</Button>
+									</div>
+								</TooltipTrigger>
+								{!isComplete && (
+									<TooltipContent>
+										{!!settings.llm_model &&
+										!!settings.embedding_model &&
+										!isDoclingHealthy
+											? "docling-serve must be running to continue"
+											: "Please fill in all required fields"}
+									</TooltipContent>
+								)}
+							</Tooltip>
+						)}
 					</div>
 				</motion.div>
 			) : (
--- a/frontend/src/app/onboarding/components/openai-onboarding.tsx
+++ b/frontend/src/app/onboarding/components/openai-onboarding.tsx
@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { LabelInput } from "@/components/label-input";
 import { LabelWrapper } from "@/components/label-wrapper";
 import OpenAILogo from "@/components/logo/openai-logo";
@ -14,10 +14,14 @@ export function OpenAIOnboarding({
 	setSettings,
 	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);
@ -68,6 +72,19 @@ 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">
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@ -72,6 +72,14 @@ const config = {
            height: "0",
          },
        },
+        shimmer: {
+          "0%": {
+            backgroundPosition: "200% 0",
+          },
+          "100%": {
+            backgroundPosition: "-200% 0",
+          },
+        },
      },
      animation: {
        overlayShow: "overlayShow 400ms cubic-bezier(0.16, 1, 0.3, 1)",
@ -79,6 +87,7 @@ const config = {
        wiggle: "wiggle 150ms ease-in-out 1",
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
+        shimmer: "shimmer 3s ease-in-out infinite",
      },
      colors: {
        border: "hsl(var(--border))",