nlkitai / nlux

The π—£π—Όπ˜„π—²π—Ώπ—³π˜‚π—Ή Conversational AI JavaScript Library πŸ’¬ β€”Β UI for any LLM, supporting LangChain / HuggingFace / Vercel AI, and more 🧑 React, Next.js, and plain JavaScript ⭐️
https://docs.nlkit.com/nlux
Other
1.07k stars 63 forks source link

Chat UI Messages and Avatar re-render on every keystroke #122

Open lohit8846 opened 1 month ago

lohit8846 commented 1 month ago

We are seeing issues with the Chat UI component re-rendering every time a character is typed into the input box. This is causing both the Avatar and ResponseRenderer to to render and it's an unusable UI since the avatar image needs to reload and Response renders again

@salmenus This is similar the issue reported here https://github.com/nlkitai/nlux/issues/112 but the extend of the issue is greater than just avatar as even for any response rendering, this causes issues

I did a deeper dive using a react profiler and found the reason why memo of any kind is not working. I was able to confirm the issue using this basic react playground example to make sure it was not any code that is specific to me

https://docs.nlkit.com/nlux/examples/react-js-ai-assistant

The profiler shows that on every key press this hook is causing issues and the reason react.memo does not work is because by the time it gets to Avatar and Renderer. It says "This is the first time component rendered" So memo does not work. This indicates the library has an issue with handling the keystrokes

CleanShot 2024-07-28 at 10 37 08@2x

CleanShot 2024-07-28 at 10 36 44@2x

salmenus commented 1 month ago

Thanks for reporting this issue @lohit8846 and for detailed description. I'm investigating.