Rendered onboarding with use-stick-to-bottom
This commit is contained in:
Lucas Oliveira
Mike Fortman
parent
f50172a480
commit
63630f40f7
4 changed files with 106 additions and 79 deletions
10
frontend/package-lock.json
generated
10
frontend/package-lock.json
generated
|
|
@ -52,6 +52,7 @@
|
|||
"sonner": "^2.0.6",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"use-stick-to-bottom": "^1.1.1",
|
||||
"zustand": "^5.0.8"
|
||||
},
|
||||
"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": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@
|
|||
"sonner": "^2.0.6",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"use-stick-to-bottom": "^1.1.1",
|
||||
"zustand": "^5.0.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { StickToBottom } from "use-stick-to-bottom";
|
||||
import { AssistantMessage } from "@/app/chat/components/assistant-message";
|
||||
import { UserMessage } from "@/app/chat/components/user-message";
|
||||
import Nudges from "@/app/chat/nudges";
|
||||
|
|
@ -46,7 +47,7 @@ export function OnboardingContent({
|
|||
setSelectedNudge(nudge);
|
||||
setAssistantMessage(null);
|
||||
setTimeout(async () => {
|
||||
await sendMessage({
|
||||
await sendMessage({
|
||||
prompt: nudge,
|
||||
previousResponseId: responseId || undefined,
|
||||
});
|
||||
|
|
@ -57,48 +58,81 @@ export function OnboardingContent({
|
|||
const displayMessage = streamingMessage || assistantMessage;
|
||||
|
||||
return (
|
||||
<div className="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>
|
||||
<StickToBottom
|
||||
className="flex h-full flex-1 flex-col"
|
||||
resize="smooth"
|
||||
initial="instant"
|
||||
mass={1}
|
||||
>
|
||||
<StickToBottom.Content className="flex flex-col min-h-full overflow-x-hidden px-8 py-6">
|
||||
<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
|
||||
isVisible={currentStep >= 1}
|
||||
isCompleted={currentStep > 1 || !!selectedNudge}
|
||||
text="Excellent, let's move on to learning the basics."
|
||||
>
|
||||
<div className="py-2">
|
||||
<Nudges
|
||||
onboarding
|
||||
nudges={NUDGES}
|
||||
handleSuggestionClick={handleNudgeClick}
|
||||
/>
|
||||
</div>
|
||||
</OnboardingStep>
|
||||
<OnboardingStep
|
||||
isVisible={currentStep >= 1}
|
||||
isCompleted={currentStep > 1 || !!selectedNudge}
|
||||
text="Excellent, let's move on to learning the basics."
|
||||
>
|
||||
<div className="py-2">
|
||||
<Nudges
|
||||
onboarding
|
||||
nudges={NUDGES}
|
||||
handleSuggestionClick={handleNudgeClick}
|
||||
/>
|
||||
</div>
|
||||
</OnboardingStep>
|
||||
|
||||
{/* User message - show when nudge is selected */}
|
||||
{currentStep >= 1 && !!selectedNudge && (
|
||||
<UserMessage content={selectedNudge} isCompleted={currentStep > 1} />
|
||||
)}
|
||||
{/* User message - show when nudge is selected */}
|
||||
{currentStep >= 1 && !!selectedNudge && (
|
||||
<UserMessage
|
||||
content={selectedNudge}
|
||||
isCompleted={currentStep > 1}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Assistant message - show streaming or final message */}
|
||||
{currentStep >= 1 && !!selectedNudge && (displayMessage || isLoading) && (
|
||||
<>
|
||||
<AssistantMessage
|
||||
content={displayMessage?.content || ""}
|
||||
functionCalls={displayMessage?.functionCalls}
|
||||
messageIndex={0}
|
||||
expandedFunctionCalls={new Set()}
|
||||
onToggle={() => {}}
|
||||
isStreaming={!!streamingMessage}
|
||||
isCompleted={currentStep > 1}
|
||||
/>
|
||||
{!isLoading && displayMessage && currentStep === 1 && (
|
||||
<div className="mt-4">
|
||||
{/* Assistant message - show streaming or final message */}
|
||||
{currentStep >= 1 &&
|
||||
!!selectedNudge &&
|
||||
(displayMessage || isLoading) && (
|
||||
<>
|
||||
<AssistantMessage
|
||||
content={displayMessage?.content || ""}
|
||||
functionCalls={displayMessage?.functionCalls}
|
||||
messageIndex={0}
|
||||
expandedFunctionCalls={new Set()}
|
||||
onToggle={() => {}}
|
||||
isStreaming={!!streamingMessage}
|
||||
isCompleted={currentStep > 1}
|
||||
/>
|
||||
{!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
|
||||
type="button"
|
||||
onClick={handleStepComplete}
|
||||
|
|
@ -107,46 +141,28 @@ export function OnboardingContent({
|
|||
Continue
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>)}
|
||||
</OnboardingStep>
|
||||
|
||||
<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
|
||||
type="button"
|
||||
onClick={handleStepComplete}
|
||||
className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90"
|
||||
<OnboardingStep
|
||||
isVisible={currentStep >= 3}
|
||||
isCompleted={currentStep > 3}
|
||||
text="Step 3: You're all set!"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
<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>
|
||||
</OnboardingStep>
|
||||
|
||||
<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>
|
||||
</StickToBottom.Content>
|
||||
</StickToBottom>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@ export function ChatRenderer({
|
|||
showLayout && "p-6 container",
|
||||
showLayout && isSmallWidthPath && "max-w-[850px] ml-0",
|
||||
!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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue