Streamed response auto scroll

[theronypony]

Describe the bug
In the latest version, streamed responses auto scroll and force the browser to the bottom of the page. The first paragraph of the response is inaccessible until streamed response is complete, and scrolling up is not possible.

To Reproduce
Steps to reproduce the behavior:
Generate a response that is long enough to initiate auto scroll, and attempt to scroll back up during the streamed response.

Expected behavior
It should be possible to scroll up and read the top of the response while the streaming is still happening.

[ItzCrazyKns]

If you want to read, please scroll up while it is streaming. It automatically detects if user is trying to scroll up and if it does, it'll stop the auto scroll.

[theronypony]

@ItzCrazyKns thanks for the response - it does not auto detect. That’s the bug I’m describing. I try to scroll up but the streamed response pulls the page back down. Only when the streaming is complete can I scroll up to read the top. This is true on Chrome, Brave & Safari on Mac OS and Brave/safari on iOS.

[tomzdotorg]

@ItzCrazyKns thajks for the response - it does not auto detect. That’s the bug I’m describing. I try to scroll up but the streamed response pulls the page back down. Only when the streaming is complete can I scroll up to read the top. This is true on Chrome, Brave & Safari on Mac OS and Brave/safari on iOS.

Same on Linux + Firefox and Linux + Chrome ... scrolling does not prevent perplexica from pulling the focus to the bottom of the response and you can't scroll until the response is finished.

[theronypony]

Wondering if only a subset of users are experiencing this? It makes this tool almost unusable.

[nomonkeynodeal]

I just discovered that if you scroll up very aggressively it will stop fighting you at some point and allow you to scroll up.

[theronypony]

Yes, but not the desired functionality by any means

[theronypony]

Ok I think I have improved this by adjusting /src/components/Chat.tsx. I've attached the updated file here in the hopes someone can test this and see if they see the same improvement that I have. (You'll have to build from source)

Chat.tsx

[theronypony]

Still a bit sticky, but much improved. Still working on a complete fix.

[theronypony]

Ok this is working for me without any scrolling resistance.

Chat.tsx

file updated: /Perplexica/src/components/Chat.tsx

'use client';

import { Fragment, useEffect, useRef, useState } from 'react';
import MessageInput from './MessageInput';
import MessageBox from './MessageBox';
import MessageBoxLoading from './MessageBoxLoading';
import { useChat } from '@/lib/hooks/useChat';

const Chat = () => {
  const { sections, chatTurns, loading, messageAppeared } = useChat();

  const [dividerWidth, setDividerWidth] = useState(0);
  const dividerRef = useRef<HTMLDivElement | null>(null);
  const messageEnd = useRef<HTMLDivElement | null>(null);
  const inputWrapperRef = useRef<HTMLDivElement | null>(null);

  const [isAtBottom, setIsAtBottom] = useState(true);
  const [footerHeight, setFooterHeight] = useState(0);
  const lastUserScrollRef = useRef(0);

  useEffect(() => {
    const updateDividerWidth = () => {
      if (dividerRef.current) {
        setDividerWidth(dividerRef.current.offsetWidth);
      }
    };
    updateDividerWidth();
    window.addEventListener('resize', updateDividerWidth);
    return () => {
      window.removeEventListener('resize', updateDividerWidth);
    };
  }, []);

  useEffect(() => {
    const measure = () => {
      const h = inputWrapperRef.current?.offsetHeight ?? 0;
      setFooterHeight(h);
    };
    measure();
    window.addEventListener('resize', measure);
    return () => window.removeEventListener('resize', measure);
  }, []);

  useEffect(() => {
    const markScroll = () => {
      lastUserScrollRef.current = performance.now();
    };
    window.addEventListener('wheel', markScroll, { passive: true });
    window.addEventListener('touchmove', markScroll, { passive: true });
    return () => {
      window.removeEventListener('wheel', markScroll);
      window.removeEventListener('touchmove', markScroll);
    };
  }, []);

  useEffect(() => {
    const sentinel = messageEnd.current;
    if (!sentinel) return;
    const bottomOffset = -(footerHeight + 24);
    const observer = new IntersectionObserver(
      ([entry]) => setIsAtBottom(entry.isIntersecting),
      {
        root: null,
        threshold: 0,
        rootMargin: `0px 0px ${bottomOffset}px 0px`,
      },
    );
    observer.observe(sentinel);
    return () => observer.disconnect();
  }, [footerHeight]);

  const scrollToEnd = () => {
    const scroller = document.scrollingElement || document.documentElement;
    scroller.scrollTo({ top: scroller.scrollHeight, behavior: 'auto' });
  };

  useEffect(() => {
    if (chatTurns.length === 1) {
      document.title = `${chatTurns[0].content.substring(0, 30)} - Perplexica`;
    }
    const last = chatTurns[chatTurns.length - 1];
    const lastIsUser = last?.role === 'user';
    const userRecentlyScrolled =
      performance.now() - lastUserScrollRef.current < 500;
    if (lastIsUser || (isAtBottom && !userRecentlyScrolled)) {
      requestAnimationFrame(scrollToEnd);
    }
  }, [chatTurns, isAtBottom]);

  return (
    <div className="flex flex-col space-y-6 pt-8 pb-44 lg:pb-32 sm:mx-4 md:mx-8">
      {sections.map((section, i) => {
        const isLast = i === sections.length - 1;
        return (
          <Fragment key={section.userMessage.messageId}>
            <MessageBox
              section={section}
              sectionIndex={i}
              dividerRef={isLast ? dividerRef : undefined}
              isLast={isLast}
            />
            {!isLast && (
              <div className="h-px w-full bg-light-secondary dark:bg-dark-secondary" />
            )}
          </Fragment>
        );
      })}

      {loading && !messageAppeared && <MessageBoxLoading />}
      <div ref={messageEnd} className="h-0" />
      {dividerWidth > 0 && (
        <div
          ref={inputWrapperRef}
          className="bottom-24 lg:bottom-10 fixed z-40"
          style={{ width: dividerWidth }}
        >
          <MessageInput />
        </div>
      )}
    </div>
  );
};

export default Chat;