I updated the conversation component - it is supposed to look like this:
Please hook the rest up
Now I understand. I need to replace the custom conversation component with the proper one that uses use-stick-to-bottom. Let me update the files:
I've updated the conversation component to use the use-stick-to-bottom library as you provided. The key changes are:
StickToBottom with initial="instant" so messages scroll to bottom immediately on loaduseStickToBottomContext() hook to access scroll functionality, which automatically sticks to the bottom as new messages arriveUpon initial load it should be at the bottom instantly
The issue is that the initial="instant" prop on the Conversation component should handle instant scroll, but the messages are being set in a useEffect which happens after initial render. I need to ensure the scroll happens after the messages are actually rendered. Let me fix this:
I changed the approach to use initialMessages directly in useChat instead of setting messages in a useEffect, and added a requestAnimationFrame wrapper to ensure the DOM has updated before scrolling. The scrollToBottom("instant") call with the "instant" argument should now immediately jump to the bottom without any animation on initial load.
now nothing is loading in this UI, its empty. Keep the initiial=instant but go back to the way you were doing it before