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

Rendered onboarding with use-stick-to-bottom

Browse source
This commit is contained in:
Lucas Oliveira 2025-10-21 17:09:59 -03:00 • committed by Mike Fortman
parent f50172a480
commit 63630f40f7
4 changed files with 106 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/package-lock.json generated
View file

@ -52,6 +52,7 @@
"sonner": "^2.0.6", "sonner": "^2.0.6",
"tailwind-merge": "^3.3.1", "tailwind-merge": "^3.3.1",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"use-stick-to-bottom": "^1.1.1",
"zustand": "^5.0.8" "zustand": "^5.0.8"
}, },
"devDependencies": { "devDependencies": {
@ -10224,6 +10225,15 @@
} }
} }
}, },
"node_modules/use-stick-to-bottom": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/use-stick-to-bottom/-/use-stick-to-bottom-1.1.1.tgz",
"integrity": "sha512-JkDp0b0tSmv7HQOOpL1hT7t7QaoUBXkq045WWWOFDTlLGRzgIIyW7vyzOIJzY7L2XVIG7j1yUxeDj2LHm9Vwng==",
"license": "MIT",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/use-sync-external-store": { "node_modules/use-sync-external-store": {
"version": "1.5.0", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",

1
frontend/package.json
View file

@ -53,6 +53,7 @@
"sonner": "^2.0.6", "sonner": "^2.0.6",
"tailwind-merge": "^3.3.1", "tailwind-merge": "^3.3.1",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"use-stick-to-bottom": "^1.1.1",
"zustand": "^5.0.8" "zustand": "^5.0.8"
}, },
"devDependencies": { "devDependencies": {

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

@ -1,6 +1,7 @@
"use client"; "use client";
import { useState } from "react"; import { useState } from "react";
import { StickToBottom } from "use-stick-to-bottom";
import { AssistantMessage } from "@/app/chat/components/assistant-message"; import { AssistantMessage } from "@/app/chat/components/assistant-message";
import { UserMessage } from "@/app/chat/components/user-message"; import { UserMessage } from "@/app/chat/components/user-message";
import Nudges from "@/app/chat/nudges"; import Nudges from "@/app/chat/nudges";
@ -46,7 +47,7 @@ export function OnboardingContent({
setSelectedNudge(nudge); setSelectedNudge(nudge);
setAssistantMessage(null); setAssistantMessage(null);
setTimeout(async () => { setTimeout(async () => {
await sendMessage({ await sendMessage({
prompt: nudge, prompt: nudge,
previousResponseId: responseId || undefined, previousResponseId: responseId || undefined,
}); });
@ -57,48 +58,81 @@ export function OnboardingContent({
const displayMessage = streamingMessage || assistantMessage; const displayMessage = streamingMessage || assistantMessage;
return ( return (
<div className="space-y-6"> <StickToBottom
<OnboardingStep className="flex h-full flex-1 flex-col"
isVisible={currentStep >= 0} resize="smooth"
isCompleted={currentStep > 0} initial="instant"
text="Let's get started by setting up your model provider." mass={1}
> >
<OnboardingCard onComplete={handleStepComplete} /> <StickToBottom.Content className="flex flex-col min-h-full overflow-x-hidden px-8 py-6">
</OnboardingStep> <div className="flex flex-col place-self-center w-full space-y-6">
<OnboardingStep
isVisible={currentStep >= 0}
isCompleted={currentStep > 0}
text="Let's get started by setting up your model provider."
>
<OnboardingCard onComplete={handleStepComplete} />
</OnboardingStep>
<OnboardingStep <OnboardingStep
isVisible={currentStep >= 1} isVisible={currentStep >= 1}
isCompleted={currentStep > 1 || !!selectedNudge} 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"> <div className="py-2">
<Nudges <Nudges
onboarding onboarding
nudges={NUDGES} nudges={NUDGES}
handleSuggestionClick={handleNudgeClick} handleSuggestionClick={handleNudgeClick}
/> />
</div> </div>
</OnboardingStep> </OnboardingStep>
{/* User message - show when nudge is selected */} {/* User message - show when nudge is selected */}
{currentStep >= 1 && !!selectedNudge && ( {currentStep >= 1 && !!selectedNudge && (
<UserMessage content={selectedNudge} isCompleted={currentStep > 1} /> <UserMessage
)} content={selectedNudge}
isCompleted={currentStep > 1}
/>
)}
{/* Assistant message - show streaming or final message */} {/* Assistant message - show streaming or final message */}
{currentStep >= 1 && !!selectedNudge && (displayMessage || isLoading) && ( {currentStep >= 1 &&
<> !!selectedNudge &&
<AssistantMessage (displayMessage || isLoading) && (
content={displayMessage?.content || ""} <>
functionCalls={displayMessage?.functionCalls} <AssistantMessage
messageIndex={0} content={displayMessage?.content || ""}
expandedFunctionCalls={new Set()} functionCalls={displayMessage?.functionCalls}
onToggle={() => {}} messageIndex={0}
isStreaming={!!streamingMessage} expandedFunctionCalls={new Set()}
isCompleted={currentStep > 1} onToggle={() => {}}
/> isStreaming={!!streamingMessage}
{!isLoading && displayMessage && currentStep === 1 && ( isCompleted={currentStep > 1}
<div className="mt-4"> />
{!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>
)}
</>
)}
<OnboardingStep
isVisible={currentStep >= 2}
isCompleted={currentStep > 2}
text="Step 2: Connect your model"
>
<div className="space-y-4">
<p className="text-muted-foreground">
Choose and connect your preferred AI model provider.
</p>
<button <button
type="button" type="button"
onClick={handleStepComplete} onClick={handleStepComplete}
@ -107,46 +141,28 @@ export function OnboardingContent({
Continue Continue
</button> </button>
</div> </div>
)} </OnboardingStep>
</>)}
<OnboardingStep <OnboardingStep
isVisible={currentStep >= 2} isVisible={currentStep >= 3}
isCompleted={currentStep > 2} isCompleted={currentStep > 3}
text="Step 2: Connect your model" text="Step 3: You're all set!"
>
<div className="space-y-4">
<p className="text-muted-foreground">
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"
> >
Continue <div className="space-y-4">
</button> <p className="text-muted-foreground">
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"
>
Go to Chat
</button>
</div>
</OnboardingStep>
</div> </div>
</OnboardingStep> </StickToBottom.Content>
</StickToBottom>
<OnboardingStep
isVisible={currentStep >= 3}
isCompleted={currentStep > 3}
text="Step 3: You're all set!"
>
<div className="space-y-4">
<p className="text-muted-foreground">
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"
>
Go to Chat
</button>
</div>
</OnboardingStep>
</div>
); );
} }

2
frontend/src/components/chat-renderer.tsx
View file

@ -156,7 +156,7 @@ export function ChatRenderer({
showLayout && "p-6 container", showLayout && "p-6 container",
showLayout && isSmallWidthPath && "max-w-[850px] ml-0", showLayout && isSmallWidthPath && "max-w-[850px] ml-0",
!showLayout && !showLayout &&
"w-full bg-card rounded-lg shadow-2xl p-8 overflow-y-auto", "w-full bg-card rounded-lg shadow-2xl p-0 py-2 overflow-y-auto",
)} )}
> >
<motion.div <motion.div