Elgato_dark/void
1
0
Fork 0
mirror of https://github.com/voideditor/void synced 2026-05-24 09:58:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

scroll to top on thread switch

Browse source
This commit is contained in:
Andrew Pareles 2025-01-12 18:06:52 -08:00
parent b9b645522a
commit 29e1f312c3
1 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
View file

@ -202,9 +202,10 @@ export const ButtonStop = ({ className, ...props }: ButtonHTMLAttributes<HTMLBut
}
const ScrollToBottomContainer = ({ children, className, style }: { children: React.ReactNode, className?: string, style?: React.CSSProperties }) => {
const ScrollToBottomContainer = ({ children, className, style, scrollContainerRef }: { children: React.ReactNode, className?: string, style?: React.CSSProperties, scrollContainerRef: React.MutableRefObject<HTMLDivElement | null> }) => {
const [isAtBottom, setIsAtBottom] = useState(true); // Start at bottom
const divRef = useRef<HTMLDivElement>(null);
const divRef = scrollContainerRef
const scrollToBottom = () => {
if (divRef.current) {
@ -597,6 +598,13 @@ export const SidebarChat = () => {
const keybindingString = accessor.get('IKeybindingService').lookupKeybinding(VOID_CTRL_L_ACTION_ID)?.getLabel()
// scroll to top on thread switch
const scrollContainerRef = useRef<HTMLDivElement | null>(null)
useEffect(() => {
if (isHistoryOpen)
scrollContainerRef.current?.scrollTo({ top: 0, left: 0 })
}, [isHistoryOpen, currentThread?.id])
return <div
ref={sidebarRef}
className={`w-full h-full`}
@ -610,6 +618,7 @@ export const SidebarChat = () => {
{/* previous messages + current stream */}
<ScrollToBottomContainer
scrollContainerRef={scrollContainerRef}
className={`
w-full h-auto
flex flex-col gap-0
@ -619,7 +628,9 @@ export const SidebarChat = () => {
style={{ maxHeight: sidebarDimensions.height - historyDimensions.height - formDimensions.height - 30 }} // the height of the previousMessages is determined by all other heights
>
{/* previous messages */}
{previousMessages.map((message, i) => <ChatBubble key={i} chatMessage={message} />)}
{previousMessages.map((message, i) =>
<ChatBubble key={i} chatMessage={message} />
)}
{/* message stream */}
<ChatBubble chatMessage={{ role: 'assistant', content: messageStream, displayContent: messageStream || null }} isLoading={isLoading} />