Auto-scroll behavior can interfere with user's scrolling

[kahkeng]

In MessageList.tsx, we have this snippet, which tries to get the newly appearing bot messages to appear on the screen (by automatically scrolling the page down to it).

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

However, if the user happens to scroll away while the bot is thinking, we will fight with the user to keep scrolling to the bottom.

I think we can make this apply only if the user is close to the bottom of the screen, and not otherwise.

[kahkeng]

Here's a snippet that worked for me elsewhere (you might recognize some elements of this :) ):

export const Chats = () => {
  const { messages } = useChatContext();
  const outerRef = React.useRef<HTMLDivElement>(null);
  const innerRef = React.useRef<HTMLDivElement>(null);
  React.useEffect(() => {
    const div = outerRef.current;
    if (!div) return;

    // check if user is at the bottom
    const isAtBottom = div.scrollHeight - div.scrollTop <= div.clientHeight + 200;
    if (isAtBottom) {
      const timer = setTimeout(() => {
        innerRef.current?.scrollIntoView({ behavior: 'smooth' });
      }, 0);
      return () => clearTimeout(timer);
    }
  }, [messages]);

  return (
    <div ref={outerRef} className="w-full">
      <Wrapper>
        {
          messages.map((m, i) => (
            <div key={i} className="flex w-full">
              { m.actor === 'user' &&
                <User content={m.payload} type={m.type} />
              }
              { m.actor === 'bot' &&
                <Markdown content={m.payload} />
              }
            </div>
          ))
        }
        <div ref={innerRef}></div>
      </Wrapper>
    </div>
  );
};

[aniemerg]

Is this fixed @kahkeng?