chatscope / chat-ui-kit-react

Build your own chat UI with React components in few minutes. Chat UI Kit from chatscope is an open source UI toolkit for developing web chat applications.
https://chatscope.io
MIT License
1.25k stars 104 forks source link

Custom container along with <MessageList> for custom user forms #125

Open sclea opened 1 year ago

sclea commented 1 year ago

Hey!

I'm making website chat widget and trying to place a fixed div with input field for user name in the between and , like this:

...
<div className='my-custom-form-container'>
    <input type='text' placeholder="Your name..." />
</div>

<MessageList>
    ...
<MessageList>

The idea is that input will be visible until user submit his name. Would you suggest how this can achieved?

Probably it would be nice to have a possibility to add custom container inside along with and whatever. Now React complains on "... is not a valid child...".

supersnager commented 1 year ago

@sclea Can you place the input inside the <MessageList />? Here is an example: https://chatscope.io/storybook/react/?path=/docs/components-messagelist--custom-content

sclea commented 1 year ago

Thank you, I meant slightly different: fixed custom content AND messageList simultaneously, like this:

image

(It's just a mock made with DevTools.)