Gemini-like Chatbot Message Rendering

[chrisnankam24]

Hi @inokawa ! I can across Virtua when searching for virtualization libraries for messages of a chatbot I'm building. I've integrated it success and very happy with the simplicity. One thing I wish I could do was to simulate the Gemini like scrolling described in https://virtuoso.dev/virtuoso-message-list/examples/gemini/ and found in tools like Cursor. Is it possible to do this with Virtua and if so, could you help direct me?

[inokawa]

It might not be supported yet. I'll try to make an example soon.

[chrisnankam24]

Thank you very much @inokawa ! I'm looking into integrating the sample logic to my code and trying to understand this - what creates the space below the user message which the assistant message fills and how can that be controlled? For example, can I make the new user message the top most visible element? In the example, when the user message scrolls up, I can still see a one or more previous assistant messages.

[chrisnankam24]

@inokawa also noticed that when ai message isn't long enough to cover viewport, and a new user message is sent, you get spaces as seen in the attachement. How can I address the space?

[inokawa]

Thanks for the feedback. I've separated chatbot story from chat, and I'll try to improve it to emulate more precise behavior.

[inokawa]

@chrisnankam24
Could you try this latest code?
https://inokawa.github.io/virtua/?path=/story/advanced-chatbot--default
https://github.com/inokawa/virtua/blob/main/stories/react/advanced/Chatbot.stories.tsx

Its scroll-to-top strategy was inspired by this article.
https://vercel.com/blog/how-we-built-the-v0-ios-app#how-we-solved-it

[inokawa]

Updated again.

[chrisnankam24]

Works great @inokawa ! This is exactly what I needed.