I need some help with this chat box...
Hi, I need to do the following things: I want the first message on the left and the second one on the right. You know like a usual chat and then I would like to have my input where the users type expand to a certain max to then become scrollable. So far I tried to play around with grid stuff but I just can't make it and regarding the input I know I should use textarea but then im confused about the js to make it expand it. Codepen: https://codepen.io/Gabriele888/pen/OPNyWGx thanks for the help.
82 Replies
also the text input should be at the center
and just to know im using react
Does this work? https://codepen.io/stefanh-at/pen/LENpWOx
Explaination:
The text input shouldn't be in the same container as the messages. Create one container just for the messages and let the input live on its own. Makes it much easier
I used
justify-self: end on the green messages to align it to the right
I also removed the grid rows on the message container. The grid shouldn't declare the height of the messages! They should be intrinsically sized. If you want a message to take up more space, modify the height of that element, not the grid rows. For dynamically sized content like this you don't want to declare fixed sized rows and columnsI don't know anything about react, but i have made such chat before.
And like most chatboxes, this chat messages starts from the bottom
https://codepen.io/tok124/pen/PoxMzLZ
Whether they start from the top or bottom is a preference. Chat gpt starts from the top too
But yeah if you want it to start from the bottom in my example, just change the align-content to end
That's kinda why i said "like most chatboxes" rather than "Like all other chatboxes"
yeah
@StefanH can you explain me how the grids you used on chat wrapper and chat box work?
Ah yeah. That's to make the chat box grow vertically to take up as much free space as possible. Since we want the input on the bottom and the messages above
You already used
grid-template-rows: 1fr auto before on the messages so i assumed you're familiar with thatand why for chat box align content start ?
That makes the messages bunch up at the top
Change around its values and see what happens to the messages
how can i make these messages grow in div size when someone text more? should i use a min height?
Nah the elements use their intrinsic size
and also make them scrollable because they cant grow forever
If you add more text the message bubbles will grow naturally
Yeah scroll is easy too
if i just put the scroll property that gets applied in automatic? how can i decide a certain size?
(I just replaced the link. Accidentally created it on my work account)
i can still see it no worries
so how do you decide the size you want the element to be scrollable?
I updated it with scroll https://codepen.io/stefanh-at/pen/LENpWOx
If you want to add scrolling to the message itself (which i wouldn't recommend but whatever) then you can also add
overflow-y: auto to it. You'll just have to constraint its size with a max-heighti thought scroll goes into the message div itself
not the entire chat
in real life websites scroll is on the chat?
never noticed
I don't remember ever having to scroll inside a message bubble
Sometimes you have an expand button that you can press to reveal the rest of the message if it's very long
i trust you more than me because i dont really use socials
Because double scroll containers have very bad UX
and about the text input, i understood that it needs to become a text area. to grow in size when the user type. Like chat gpt yk
I'm sure it's also against web content accessibility guidelines
do i need extra js for that?
Oh perhaps? Not sure
Since you're already using react that's trivial to add though
You should be able to find resources on auto sizing text areas online
you mean component text areas?
You can just do nth-child and pick the even ones and style it so it's from the other side.
No need for grid or external js. Just like a couple lines of css.
I mean grid is a couple lines of css xd
But yk
Looking at your initial codepen, @Gabriele , and a few things stand out:
* Your chat box should be an
ul, not a div. Chat is literally a list of conversation items
* You shouldn't be using grid here, as the chat items should have some ability to re-size based on the content. A max-width is appropriate, but never set a height on a chat message!
* Your chat input should be outside of the chatbox
* You could use either flexbox or margin-inline-start` to push the green chatbox to the right of the containing elementMDN Web Docs
:nth-child() - CSS | MDN
The :nth-child() CSS pseudo-class matches elements based on the indexes of the elements in the child list of their parents. In other words, the :nth-child() selector selects child elements according to their position among all the sibling elements within a parent element.
I wouldn't do that
Why not? It's very clean and widely available.
That sounds great, but it could cause problems
I've had to stop AI chat mid-flow before and correct it, causing the chat log to have two of my messages in a row
Since the data comes from javascript you already know if it's a message from the user or the assistant. You probably already want to style the assistent differnetly and add more features like markdown highlighting and code blocks to the dom. So the markup for the assistant's message is much more complex and feature-rich. At that point you can just mark it with a class that it's from the assistant
Plus if you ever get the ability to have multiple messages in a row this just falls apart
Right if the same user msgs twice after each other it should be on the same side, but I think you can do a fix for that.
Classes is a better fit here, I think
I don't see any benefits to using nth-child here. Sure you can use it in this case, but as soon as you extend functionality it falls apart. Plus it isn't like the class approach is very complex either
Ye fair
this is exactly for an AI chatbot
could you make a codepen?
nth-child could be useful if you want to highlight chained messages differently like alternating table rows
modifying mine
Working on it 😉
thanks
and also for the text area otherwise ill look for a component if its possible to find it
I could very much see cases where a chatbot might send you multiple messages. Like a text message and then a generated image a bit later. Can also pack it into one but that's just a design decision
For the last item on your list some people in this server would use grid for that 🥱
I recommend doing it yourself. It's a good exercise!
this should probably work
in the way you styled the code i shouldn't have problems when the chat bot sends multiple messages right?
Isn't auto the default?
yeah that line seems like bs to me
Nope it's fully flexible
You could also put other stuff in like a horizontal separator line
i saw this kind of solution too with chat gpt but i didnt implement it because i dont trust AI anymore with css/ front end stuff
I implemented a similar thing with vue before. I don't actively write react atm but this seems like it could work
will try
thanks for the help
Just pass a classname with the user msg and a different one with the bots msgs and style those like mentioned.
No JS version:
https://codepen.io/13eck/pen/XJdmRdM
I have only questions about this
what is inline size exactly for in the main container?
why are you putting a max width on the li?
and then whats margin block start and margin inline start
i have never seen them
just like the other properties in the input container
inline and block are logical properties. For left-to-right languages inline is the same a width, and block is akin to height. But for top-to-bottom languages they switch.
And I put a max-width to keep them from becoming full-width items. It keeps the "chat bubble" look. But feel free to ignre that if you want.but the text inside the bubbles can grow as much as it needs to?
and then i wanted to ask you about the input. Can the size be the same as my original one and expand when the text grows? or does it need to be a bigger size already?
I added JS functionality so you can use the text box to send text and it'll appear on-screen.
Shift+Enter will add a new line, Enter or clicking on the ➡️ will send the messageAnd yes, the text boxes auto-grow as needed
Ok thanks about the input ill see how it works on my end and tweak it
Now with auto-scrolling features!
if i want to keep my original design which is a round div with a send icon and inside just the text that expand this div should i even use textarea?
this is the result with text area
textarea is the element used for multi-line input, so if you want multi-line you should use it
input type="text" is useful for short, one-line text input. Like name/address on a shipping form. But for longer-form text textara is betterand is there a way to fix my design problem?
Though I suppose you could add
contenteditable to a div and use that for your text inputi wil try otherwise ill go with that solution
I'd use contenteditable as a last resort kinda thing
how did chat gpt and other AIs website make theirs? even this one on discord
discord has some highlighting so not sure but i think chatgpt is just plain text? I'd just stick to a textarea as much as possible and only use contenteditable in very special circumstances
ok but in this case how do you make the entire round div a text area?
I wouldn't make the textarea a child of the round thing
I'd style the textarea itself to be rounded and have that bg
the round thing is a container needed to put together the button and text input
so in that way i dont think you could have the button inside the text area
Right. In that case remove the padding from the container and remove the border from the text area
i will try later and let u know
Here is an example for reference too
https://codepen.io/Ceecee-Hart/full/rNXWgoj
I think as a beginnger, looking at a finished site isn't too helpful since it's an overwhelming jumble and you don't learn why a certain feature was used over something else. The questions they were asking were actually extremely good. Trying to truly understand why and not just out to get the final layout