gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

changed onboarding content to use default messages instead of onboarding steps, and to use the new hook to send messages

Browse source
This commit is contained in:
Lucas Oliveira 2025-10-20 18:33:44 -03:00 • committed by Mike Fortman
parent d336baba32
commit 1aac17aa3e
1 changed files with 71 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

150
frontend/src/app/new-onboarding/components/onboarding-content.tsx
View file

@ -1,9 +1,12 @@
"use client";
import { Loader2, User } from "lucide-react";
import { useState } from "react";
import { AssistantMessage } from "@/app/chat/components/assistant-message";
import { UserMessage } from "@/app/chat/components/user-message";
import Nudges from "@/app/chat/nudges";
import type { Message } from "@/app/chat/types";
import OnboardingCard from "@/app/onboarding/components/onboarding-card";
import { useChatStreaming } from "@/hooks/useChatStreaming";
import { OnboardingStep } from "./onboarding-step";
export function OnboardingContent({
@ -15,59 +18,42 @@ export function OnboardingContent({
}) {
const [responseId, setResponseId] = useState<string | null>(null);
const [selectedNudge, setSelectedNudge] = useState<string>("");
const [assistantResponse, setAssistantResponse] = useState<string>("");
const [isLoadingResponse, setIsLoadingResponse] = useState<boolean>(false);
const [assistantMessage, setAssistantMessage] = useState<Message | null>(
null,
);
const { streamingMessage, isLoading, sendMessage } = useChatStreaming({
onComplete: (message, newResponseId) => {
setAssistantMessage(message);
if (newResponseId) {
setResponseId(newResponseId);
}
},
onError: (error) => {
console.error("Chat error:", error);
setAssistantMessage({
role: "assistant",
content:
"Sorry, I couldn't connect to the chat service. Please try again.",
timestamp: new Date(),
});
},
});
const NUDGES = ["What is OpenRAG?"];
const handleNudgeClick = async (nudge: string) => {
setSelectedNudge(nudge);
setIsLoadingResponse(true);
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);
}
setAssistantMessage(null);
await sendMessage({
prompt: nudge,
previousResponseId: responseId || undefined,
});
};
// Determine which message to show (streaming takes precedence)
const displayMessage = streamingMessage || assistantMessage;
return (
<div className="space-y-6">
<OnboardingStep
@ -81,44 +67,48 @@ export function OnboardingContent({
<OnboardingStep
isVisible={currentStep >= 1}
isCompleted={currentStep > 1 || !!selectedNudge}
text="Excellent, let’s move on to learning the basics."
text="Excellent, let's move on to learning the basics."
>
<div className="py-2">
<Nudges onboarding nudges={NUDGES} handleSuggestionClick={handleNudgeClick} />
<Nudges
onboarding
nudges={NUDGES}
handleSuggestionClick={handleNudgeClick}
/>
</div>
</OnboardingStep>
<OnboardingStep
isVisible={currentStep >= 1 && !!selectedNudge}
isCompleted={currentStep > 1}
text={selectedNudge}
icon={
<div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0 select-none">
<User className="h-4 w-4 text-primary" />
</div>
}
>
</OnboardingStep>
{/* User message - show when nudge is selected */}
{currentStep >= 1 && !!selectedNudge && (
<div className={currentStep > 1 ? "opacity-50" : ""}>
<UserMessage content={selectedNudge} />
</div>
)}
<OnboardingStep
isVisible={currentStep >= 1 && !!selectedNudge}
isCompleted={currentStep > 1}
text={isLoadingResponse ? "Thinking..." : assistantResponse}
isMarkdown={!isLoadingResponse && !!assistantResponse}
>
{isLoadingResponse ? (
<div className="flex items-center gap-2">
<Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
</div>
) : (
<button
onClick={handleStepComplete}
className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90"
>
Continue
</button>
)}
</OnboardingStep>
{/* Assistant message - show streaming or final message */}
{currentStep >= 1 && !!selectedNudge && (displayMessage || isLoading) && (
<div className={currentStep > 1 ? "opacity-50" : ""}>
<AssistantMessage
content={displayMessage?.content || ""}
functionCalls={displayMessage?.functionCalls}
messageIndex={0}
expandedFunctionCalls={new Set()}
onToggle={() => {}}
isStreaming={!!streamingMessage}
/>
{!isLoading && displayMessage && currentStep === 1 && (
<div className="mt-4">
<button
type="button"
onClick={handleStepComplete}
className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90"
>
Continue
</button>
</div>
)}
</div>
)}
<OnboardingStep
isVisible={currentStep >= 2}
@ -130,6 +120,7 @@ export function OnboardingContent({
Choose and connect your preferred AI model provider.
</p>
<button
type="button"
onClick={handleStepComplete}
className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90"
>
@ -148,6 +139,7 @@ export function OnboardingContent({
Your account is ready to use. Let's start chatting!
</p>
<button
type="button"
onClick={handleStepComplete}
className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90"
>