diff --git a/frontend/src/app/new-onboarding/components/onboarding-content.tsx b/frontend/src/app/new-onboarding/components/onboarding-content.tsx
index 1e5e7c03..23508f0c 100644
--- a/frontend/src/app/new-onboarding/components/onboarding-content.tsx
+++ b/frontend/src/app/new-onboarding/components/onboarding-content.tsx
@@ -1,78 +1,160 @@
"use client";
+import { Loader2, User } from "lucide-react";
+import { useState } from "react";
+import Nudges from "@/app/chat/nudges";
import OnboardingCard from "@/app/onboarding/components/onboarding-card";
import { OnboardingStep } from "./onboarding-step";
export function OnboardingContent({
- handleStepComplete,
- currentStep,
+ handleStepComplete,
+ currentStep,
}: {
- handleStepComplete: () => void;
- currentStep: number;
+ handleStepComplete: () => void;
+ currentStep: number;
}) {
- return (
-
-
= 0}
- isCompleted={currentStep > 0}
- text="Let's get started by setting up your model provider."
- >
-
-
+ const [responseId, setResponseId] = useState
(null);
+ const [selectedNudge, setSelectedNudge] = useState("");
+ const [assistantResponse, setAssistantResponse] = useState("");
+ const [isLoadingResponse, setIsLoadingResponse] = useState(false);
- = 1}
- isCompleted={currentStep > 1}
- text="Step 1: Configure your settings"
- >
-
-
- Let's configure some basic settings for your account.
-
-
- Continue
-
-
-
+ const NUDGES = ["What is OpenRAG?"];
- = 2}
- isCompleted={currentStep > 2}
- text="Step 2: Connect your model"
- >
-
-
- Choose and connect your preferred AI model provider.
-
-
- Continue
-
-
-
+ const handleNudgeClick = async (nudge: string) => {
+ setSelectedNudge(nudge);
+ setIsLoadingResponse(true);
- = 3}
- isCompleted={currentStep > 3}
- text="Step 3: You're all set!"
- >
-
-
- Your account is ready to use. Let's start chatting!
-
-
- Go to Chat
-
-
-
-
- );
+ try {
+ const requestBody: {
+ prompt: string;
+ stream?: boolean;
+ previous_response_id?: string;
+ } = {
+ prompt: nudge,
+ stream: false,
+ };
+
+ if (responseId) {
+ requestBody.previous_response_id = responseId;
+ }
+
+ const response = await fetch("/api/chat", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(requestBody),
+ });
+
+ const result = await response.json();
+
+ if (response.ok) {
+ setAssistantResponse(result.response);
+ if (result.response_id) {
+ setResponseId(result.response_id);
+ }
+ } else {
+ setAssistantResponse(
+ "Sorry, I encountered an error. Please try again.",
+ );
+ }
+ } catch (error) {
+ console.error("Chat error:", error);
+ setAssistantResponse(
+ "Sorry, I couldn't connect to the chat service. Please try again.",
+ );
+ } finally {
+ setIsLoadingResponse(false);
+ }
+ };
+
+ return (
+
+
= 0}
+ isCompleted={currentStep > 0}
+ text="Let's get started by setting up your model provider."
+ >
+
+
+
+
= 1}
+ isCompleted={currentStep > 1 || !!selectedNudge}
+ text="Excellent, let’s move on to learning the basics."
+ >
+
+
+
+
+
+
= 1 && !!selectedNudge}
+ isCompleted={currentStep > 1}
+ text={selectedNudge}
+ icon={
+
+
+
+ }
+ >
+
+
+
= 1 && !!selectedNudge}
+ isCompleted={currentStep > 1}
+ text={isLoadingResponse ? "Thinking..." : assistantResponse}
+ isMarkdown={!isLoadingResponse && !!assistantResponse}
+ >
+ {isLoadingResponse ? (
+
+
+
+ ) : (
+
+ Continue
+
+ )}
+
+
+
= 2}
+ isCompleted={currentStep > 2}
+ text="Step 2: Connect your model"
+ >
+
+
+ Choose and connect your preferred AI model provider.
+
+
+ Continue
+
+
+
+
+
= 3}
+ isCompleted={currentStep > 3}
+ text="Step 3: You're all set!"
+ >
+
+
+ Your account is ready to use. Let's start chatting!
+
+
+ Go to Chat
+
+
+
+
+ );
}