UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-04-28 01:42:05 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix: auto scroll fix, scroll allow user to scroll up during ai response (#1299)
Some checks failed
Docker Publish / docker-build-publish (push) Has been cancelled
Details
Update Stable Branch / prepare-release (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Anirban Kar 2025-02-12 01:11:14 +05:30 committed by GitHub
parent 2fe1f1d443
commit a0ea69fd74
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 262 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/components/chat/BaseChat.tsx
View File

@ -303,7 +303,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
data-chat-visible={showChat}
>
<ClientOnly>{() => <Menu />}</ClientOnly>
<div ref={scrollRef} className="flex flex-col lg:flex-row overflow-y-auto w-full h-full">
<div className="flex flex-col lg:flex-row overflow-y-auto w-full h-full">
<div className={classNames(styles.Chat, 'flex flex-col flex-grow lg:min-w-[var(--chat-min-width)] h-full')}>
{!chatStarted && (
<div id="intro" className="mt-[16vh] max-w-chat mx-auto text-center px-4 lg:px-0">
@ -317,28 +317,30 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
)}
<div
className={classNames('pt-6 px-2 sm:px-6', {
'h-full flex flex-col': chatStarted,
'h-full flex flex-col pb-4 overflow-y-auto': chatStarted,
})}
ref={scrollRef}
>
<ClientOnly>
{() => {
return chatStarted ? (
<div className="flex-1 w-full max-w-chat pb-6 mx-auto z-1">
<Messages
ref={messageRef}
className="flex flex-col w-full flex-1 max-w-chat pb-6 mx-auto z-1"
className="flex flex-col "
messages={messages}
isStreaming={isStreaming}
/>
</div>
) : null;
}}
</ClientOnly>
<div
className={classNames('flex flex-col gap-4 w-full max-w-chat mx-auto z-prompt mb-6', {
className={classNames('flex flex-col gap-4 w-full max-w-chat mx-auto z-prompt', {
'sticky bottom-2': chatStarted,
'position-absolute': chatStarted,
})}
>
<div className="bg-bolt-elements-background-depth-2">
{actionAlert && (
<ChatAlert
alert={actionAlert}
@ -349,7 +351,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
}}
/>
)}
</div>
{progressAnnotations && <ProgressCompilation data={progressAnnotations} />}
<div
className={classNames(
@ -583,17 +584,16 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
</div>
</div>
</div>
<div className="flex flex-col justify-center gap-5">
{!chatStarted && (
<div className="flex flex-col justify-center mt-6 gap-5">
<div className="flex justify-center gap-2">
<div className="flex items-center gap-2">
{ImportButtons(importChat)}
<GitCloneButton importChat={importChat} className="min-w-[120px]" />
</div>
</div>
)}
{!chatStarted &&
ExamplePrompts((event, messageInput) => {
{ExamplePrompts((event, messageInput) => {
if (isStreaming) {
handleStop?.();
return;
@ -601,8 +601,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
handleSendMessage?.(event, messageInput);
})}
{!chatStarted && <StarterTemplates />}
<StarterTemplates />
</div>
)}
</div>
<ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
</div>

114
app/components/chat/Messages.client.tsx
View File

@ -1,5 +1,5 @@
import type { Message } from 'ai';
import React, { Fragment, useEffect, useRef, useState } from 'react';
import { Fragment } from 'react';
import { classNames } from '~/utils/classNames';
import { AssistantMessage } from './AssistantMessage';
import { UserMessage } from './UserMessage';
@ -10,6 +10,8 @@ import { toast } from 'react-toastify';
import WithTooltip from '~/components/ui/Tooltip';
import { useStore } from '@nanostores/react';
import { profileStore } from '~/lib/stores/profile';
import { forwardRef } from 'react';
import type { ForwardedRef } from 'react';
interface MessagesProps {
id?: string;
@ -18,99 +20,12 @@ interface MessagesProps {
messages?: Message[];
}
export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props: MessagesProps, ref) => {
export const Messages = forwardRef<HTMLDivElement, MessagesProps>(
(props: MessagesProps, ref: ForwardedRef<HTMLDivElement> | undefined) => {
const { id, isStreaming = false, messages = [] } = props;
const location = useLocation();
const messagesEndRef = useRef<HTMLDivElement>(null);
const containerRef = useRef<HTMLDivElement>(null);
const [isUserInteracting, setIsUserInteracting] = useState(false);
const [lastScrollTop, setLastScrollTop] = useState(0);
const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
const profile = useStore(profileStore);
// Check if we should auto-scroll based on scroll position
const checkShouldAutoScroll = () => {
if (!containerRef.current) {
return true;
}
const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
return distanceFromBottom < 100;
};
const scrollToBottom = (behavior: ScrollBehavior = 'smooth') => {
if (!shouldAutoScroll || isUserInteracting) {
return;
}
messagesEndRef.current?.scrollIntoView({ behavior });
};
// Handle user interaction and scroll position
useEffect(() => {
const container = containerRef.current;
if (!container) {
return undefined;
}
const handleInteractionStart = () => {
setIsUserInteracting(true);
};
const handleInteractionEnd = () => {
if (checkShouldAutoScroll()) {
setTimeout(() => setIsUserInteracting(false), 100);
}
};
const handleScroll = () => {
const { scrollTop } = container;
const shouldScroll = checkShouldAutoScroll();
// Update auto-scroll state based on scroll position
setShouldAutoScroll(shouldScroll);
// If scrolling up, disable auto-scroll
if (scrollTop < lastScrollTop) {
setIsUserInteracting(true);
}
setLastScrollTop(scrollTop);
};
container.addEventListener('mousedown', handleInteractionStart);
container.addEventListener('mouseup', handleInteractionEnd);
container.addEventListener('touchstart', handleInteractionStart);
container.addEventListener('touchend', handleInteractionEnd);
container.addEventListener('scroll', handleScroll, { passive: true });
return () => {
container.removeEventListener('mousedown', handleInteractionStart);
container.removeEventListener('mouseup', handleInteractionEnd);
container.removeEventListener('touchstart', handleInteractionStart);
container.removeEventListener('touchend', handleInteractionEnd);
container.removeEventListener('scroll', handleScroll);
};
}, [lastScrollTop]);
// Scroll to bottom when new messages are added or during streaming
useEffect(() => {
if (messages.length > 0 && (isStreaming || shouldAutoScroll)) {
scrollToBottom('smooth');
}
}, [messages, isStreaming, shouldAutoScroll]);
// Initial scroll on component mount
useEffect(() => {
if (messages.length > 0) {
scrollToBottom('instant');
setShouldAutoScroll(true);
}
}, []);
const handleRewind = (messageId: string) => {
const searchParams = new URLSearchParams(location.search);
searchParams.set('rewindTo', messageId);
@ -132,20 +47,7 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
};
return (
<div
id={id}
ref={(el) => {
// Combine refs
if (typeof ref === 'function') {
ref(el);
}
(containerRef as any).current = el;
return undefined;
}}
className={props.className}
>
<div id={id} className={props.className} ref={ref}>
{messages.length > 0
? messages.map((message, index) => {
const { role, content, id: messageId, annotations } = message;
@ -221,10 +123,10 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
);
})
: null}
<div ref={messagesEndRef} /> {/* Add an empty div as scroll anchor */}
{isStreaming && (
<div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
)}
</div>
);
});
},
);

135
app/lib/hooks/useSnapScroll.ts
View File

@ -1,52 +1,155 @@
import { useRef, useCallback } from 'react';
export function useSnapScroll() {
interface ScrollOptions {
duration?: number;
easing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'cubic-bezier';
cubicBezier?: [number, number, number, number];
bottomThreshold?: number;
}
export function useSnapScroll(options: ScrollOptions = {}) {
const {
duration = 800,
easing = 'ease-in-out',
cubicBezier = [0.42, 0, 0.58, 1],
bottomThreshold = 50, // pixels from bottom to consider "scrolled to bottom"
} = options;
const autoScrollRef = useRef(true);
const scrollNodeRef = useRef<HTMLDivElement>();
const onScrollRef = useRef<() => void>();
const observerRef = useRef<ResizeObserver>();
const animationFrameRef = useRef<number>();
const lastScrollTopRef = useRef<number>(0);
const messageRef = useCallback((node: HTMLDivElement | null) => {
const smoothScroll = useCallback(
(element: HTMLDivElement, targetPosition: number, duration: number, easingFunction: string) => {
const startPosition = element.scrollTop;
const distance = targetPosition - startPosition;
const startTime = performance.now();
const bezierPoints = easingFunction === 'cubic-bezier' ? cubicBezier : [0.42, 0, 0.58, 1];
const cubicBezierFunction = (t: number): number => {
const [, y1, , y2] = bezierPoints;
/*
* const cx = 3 * x1;
* const bx = 3 * (x2 - x1) - cx;
* const ax = 1 - cx - bx;
*/
const cy = 3 * y1;
const by = 3 * (y2 - y1) - cy;
const ay = 1 - cy - by;
// const sampleCurveX = (t: number) => ((ax * t + bx) * t + cx) * t;
const sampleCurveY = (t: number) => ((ay * t + by) * t + cy) * t;
return sampleCurveY(t);
};
const animation = (currentTime: number) => {
const elapsedTime = currentTime - startTime;
const progress = Math.min(elapsedTime / duration, 1);
const easedProgress = cubicBezierFunction(progress);
const newPosition = startPosition + distance * easedProgress;
// Only scroll if auto-scroll is still enabled
if (autoScrollRef.current) {
element.scrollTop = newPosition;
}
if (progress < 1 && autoScrollRef.current) {
animationFrameRef.current = requestAnimationFrame(animation);
}
};
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current);
}
animationFrameRef.current = requestAnimationFrame(animation);
},
[cubicBezier],
);
const isScrolledToBottom = useCallback(
(element: HTMLDivElement): boolean => {
const { scrollTop, scrollHeight, clientHeight } = element;
return scrollHeight - scrollTop - clientHeight <= bottomThreshold;
},
[bottomThreshold],
);
const messageRef = useCallback(
(node: HTMLDivElement | null) => {
if (node) {
const observer = new ResizeObserver(() => {
if (autoScrollRef.current && scrollNodeRef.current) {
const { scrollHeight, clientHeight } = scrollNodeRef.current;
const scrollTarget = scrollHeight - clientHeight;
scrollNodeRef.current.scrollTo({
top: scrollTarget,
});
smoothScroll(scrollNodeRef.current, scrollTarget, duration, easing);
}
});
observer.observe(node);
observerRef.current = observer;
} else {
observerRef.current?.disconnect();
observerRef.current = undefined;
}
}, []);
const scrollRef = useCallback((node: HTMLDivElement | null) => {
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current);
animationFrameRef.current = undefined;
}
}
},
[duration, easing, smoothScroll],
);
const scrollRef = useCallback(
(node: HTMLDivElement | null) => {
if (node) {
onScrollRef.current = () => {
const { scrollTop, scrollHeight, clientHeight } = node;
const scrollTarget = scrollHeight - clientHeight;
const { scrollTop } = node;
autoScrollRef.current = Math.abs(scrollTop - scrollTarget) <= 10;
// Detect scroll direction
const isScrollingUp = scrollTop < lastScrollTopRef.current;
// Update auto-scroll based on scroll direction and position
if (isScrollingUp) {
// Disable auto-scroll when scrolling up
autoScrollRef.current = false;
} else if (isScrolledToBottom(node)) {
// Re-enable auto-scroll when manually scrolled to bottom
autoScrollRef.current = true;
}
// Store current scroll position for next comparison
lastScrollTopRef.current = scrollTop;
};
node.addEventListener('scroll', onScrollRef.current);
scrollNodeRef.current = node;
} else {
if (onScrollRef.current) {
scrollNodeRef.current?.removeEventListener('scroll', onScrollRef.current);
if (onScrollRef.current && scrollNodeRef.current) {
scrollNodeRef.current.removeEventListener('scroll', onScrollRef.current);
}
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current);
animationFrameRef.current = undefined;
}
scrollNodeRef.current = undefined;
onScrollRef.current = undefined;
}
}, []);
},
[isScrolledToBottom],
);
return [messageRef, scrollRef];
return [messageRef, scrollRef] as const;
}