Building the User Interface

[00:00 - 01:53] Welcome back in this lesson. We will be the UI for our chart. So here we are in the demo app We can see the UI we can see the list of messages below an input where we use our code in putting your message and send the message Let's dive into the code It's a real component and we are already been the who concapsulate team the state for logic So we simply need to call our hook and we'll get restate and actions Farest head forward now. We just need to build The UI so it's HTML says says you are well retain wine and You get a UI as you will do for any use case now there are two good shares. I wanted to show you The first is that you need to under markdown because The completion of your model is in markdown. So for proper formatting you must support that format We've already done it in a previous module We can reuse this component stream text to make sure our model But put is completely under That's the first workshop versus call on stream Let me show you it's a feature you may want to implement on earth when the streaming is being done We automatically scroll so the user gets to see every update live now that's why the new churchy PT and You may do want to do it on your own chat if Model is a bit slow, but if it's fast you can just keep it How is it done? We simply created a ref Targeting a div at the bottom of the message list and then anytime the messages are updated We scroll to the bottom and that's all that's all for the UI and in next lesson I want to show you a very popular use the Rekleval Augmented Generation. See you soon!