From the course: Create Your Own Code Assistant with Llama 2, Node.js, and React.js
Join today to access over 24,900 courses taught by industry experts.
Building the UI: Main chat
From the course: Create Your Own Code Assistant with Llama 2, Node.js, and React.js
Building the UI: Main chat
- Okay, back in our code editor in our code space we're going to now add our user interface for our large chat window. First thing we're going to do is open up our explorer, open the web view. You should still be in your extension folder. Go into source, then we're going to add a new folder. We're going to call it components. Inside of components, we're going to add some files. The first file we're going to add is the chat message dot tsx. Inside of here we're going to create an avatar from our grommet import. We'll use box and text as well. On line 3 we'll create an interface for our message props that'll contain a user, the text, and if it's sent by me or not. Then, on line 9, we will get into our component. First thing we'll do is align ourselves if the component is sent by us or not. Then we'll create a box in the row direction with a small gap and we'll align it whether it's sent by us or the chat bot. If it is sent by us we'll have some avatar there and then we'll display the…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
