From 63630f40f70a5c7e69b49ea7d25b10b1630c3b51 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 21 Oct 2025 17:09:59 -0300
Subject: [PATCH] Rendered onboarding with use-stick-to-bottom

---
 frontend/package-lock.json                    |  10 +
 frontend/package.json                         |   1 +
 .../components/onboarding-content.tsx         | 172 ++++++++++--------
 frontend/src/components/chat-renderer.tsx     |   2 +-
 4 files changed, 106 insertions(+), 79 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0c1c2c73..c724fde9 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -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",
diff --git a/frontend/package.json b/frontend/package.json
index 5347aa8c..fd6fc0cb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -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": {
diff --git a/frontend/src/app/new-onboarding/components/onboarding-content.tsx b/frontend/src/app/new-onboarding/components/onboarding-content.tsx
index 23d7e043..46886f47 100644
--- a/frontend/src/app/new-onboarding/components/onboarding-content.tsx
+++ b/frontend/src/app/new-onboarding/components/onboarding-content.tsx
@@ -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>
 	);
 }
diff --git a/frontend/src/components/chat-renderer.tsx b/frontend/src/components/chat-renderer.tsx
index 8721aaa1..df39c52d 100644
--- a/frontend/src/components/chat-renderer.tsx
+++ b/frontend/src/components/chat-renderer.tsx
@@ -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