apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-05-13 17:22:37 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Prevent forced auto-scroll in playground chat

Browse source
This commit is contained in:
akhisud3195 2025-07-11 20:34:14 +05:30
parent 931e026cdc
commit 3c2bde91b0
3 changed files with 102 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

20
apps/rowboat/app/globals.css
View file

@ -127,3 +127,23 @@ body {
background: var(--background);
color: var(--foreground);
}
/* Playground chat custom scrollbar: hide track background and border */
.playground-scrollbar::-webkit-scrollbar {
width: 4px;
background: transparent !important;
}
.playground-scrollbar::-webkit-scrollbar-track {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.playground-scrollbar::-webkit-scrollbar-thumb {
background: #9ca3af;
border-radius: 4px;
}
.playground-scrollbar {
scrollbar-width: thin;
scrollbar-color: #9ca3af transparent;
}

56
apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx
View file

@ -12,6 +12,7 @@ import { WithStringId } from "@/app/lib/types/types";
import { ProfileContextBox } from "./profile-context-box";
import { USE_TESTING_FEATURE } from "@/app/lib/feature_flags";
import { BillingUpgradeModal } from "@/components/common/billing-upgrade-modal";
import { ChevronDownIcon } from "@heroicons/react/24/outline";
export function Chat({
chat,
@ -51,6 +52,32 @@ export function Chat({
const [optimisticMessages, setOptimisticMessages] = useState<z.infer<typeof Message>[]>(chat.messages);
const [isLastInteracted, setIsLastInteracted] = useState(false);
// --- Scroll/auto-scroll/unread bubble logic ---
const scrollContainerRef = useRef<HTMLDivElement>(null);
const [autoScroll, setAutoScroll] = useState(true);
const [showUnreadBubble, setShowUnreadBubble] = useState(false);
const handleScroll = useCallback(() => {
const container = scrollContainerRef.current;
if (!container) return;
const { scrollTop, scrollHeight, clientHeight } = container;
const atBottom = scrollHeight - scrollTop - clientHeight < 20;
setAutoScroll(atBottom);
if (atBottom) setShowUnreadBubble(false);
}, []);
useEffect(() => {
const container = scrollContainerRef.current;
if (!container) return;
if (autoScroll) {
container.scrollTop = container.scrollHeight;
setShowUnreadBubble(false);
} else {
setShowUnreadBubble(true);
}
}, [optimisticMessages, loadingAssistantResponse, autoScroll]);
// --- End scroll/auto-scroll logic ---
const getCopyContent = useCallback(() => {
return JSON.stringify({
messages: [{
@ -255,12 +282,12 @@ export function Chat({
)}
</div>
<div className="flex-1 overflow-auto pr-1
[&::-webkit-scrollbar]{width:4px}
[&::-webkit-scrollbar-track]{background:transparent}
[&::-webkit-scrollbar-thumb]{background-color:rgb(156 163 175)}
dark:[&::-webkit-scrollbar-thumb]{background-color:#2a2d31}">
<div className="pr-4">
<div
ref={scrollContainerRef}
onScroll={handleScroll}
className="flex-1 overflow-auto pr-4 relative playground-scrollbar"
style={{ scrollBehavior: 'smooth' }}
>
<Messages
projectId={projectId}
messages={optimisticMessages}
@ -273,7 +300,22 @@ export function Chat({
showSystemMessage={false}
showDebugMessages={showDebugMessages}
/>
</div>
{showUnreadBubble && (
<button
className="absolute bottom-4 right-4 z-20 bg-blue-100 text-blue-700 rounded-full w-8 h-8 flex items-center justify-center hover:bg-blue-200 transition-colors animate-pulse"
onClick={() => {
const container = scrollContainerRef.current;
if (container) {
container.scrollTop = container.scrollHeight;
}
setAutoScroll(true);
setShowUnreadBubble(false);
}}
aria-label="Scroll to latest message"
>
<ChevronDownIcon className="w-5 h-5" strokeWidth={2.2} />
</button>
)}
</div>
<div className="sticky bottom-0 bg-white dark:bg-zinc-900 pt-4 pb-2">

22
apps/rowboat/app/projects/[projectId]/playground/components/messages.tsx
View file

@ -1,6 +1,6 @@
'use client';
import { Spinner } from "@heroui/react";
import { useEffect, useMemo, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState, useCallback } from "react";
import z from "zod";
import { Workflow } from "@/app/lib/types/workflow_types";
import { WorkflowTool } from "@/app/lib/types/workflow_types";
@ -360,13 +360,11 @@ export function Messages({
showSystemMessage: boolean;
showDebugMessages?: boolean;
}) {
const messagesEndRef = useRef<HTMLDivElement>(null);
let lastUserMessageTimestamp = 0;
let userMessageSeen = false;
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages, loadingAssistantResponse]);
// Remove scroll/auto-scroll state and logic
// const scrollContainerRef = useRef<HTMLDivElement>(null);
// const [autoScroll, setAutoScroll] = useState(true);
// const [showUnreadBubble, setShowUnreadBubble] = useState(false);
// Remove handleScroll and useEffect for scroll
const renderMessage = (message: z.infer<typeof Message>, index: number) => {
if (message.role === 'assistant') {
@ -427,7 +425,7 @@ export function Messages({
if (message.role === 'user') {
// TODO: add latency support
// lastUserMessageTimestamp = new Date(message.createdAt).getTime();
userMessageSeen = true;
// userMessageSeen = true;
return <UserMessage content={message.content} />;
}
@ -452,9 +450,9 @@ export function Messages({
);
}
// Just render the messages, no scroll container or unread bubble
return (
<div className="max-w-[768px] mx-auto">
<div className="flex flex-col">
<div className="max-w-4xl mx-auto px-2 sm:px-6 relative">
{messages.map((message, index) => {
const renderedMessage = renderMessage(message, index);
if (renderedMessage) {
@ -468,7 +466,5 @@ export function Messages({
})}
{loadingAssistantResponse && <AssistantMessageLoading />}
</div>
<div ref={messagesEndRef} />
</div>
);
}