supersnager
commented
3 years ago @roxana-ahmadi Adding buttons (and other components) directly do MessageInput is on my roadmap, but it's not possible yet. However there is a simple workaroud. You can wrap MessageInput into div, mark this div as MessageInput (because ChatContainer need to know where to place MessageInput) and add whatever you want into your wrapper. This approach need some css tweaking, but it's simple thing. You can also remove sendButton from MessageInput by setting sendButton={false} and add your own button.
const [msg, setMsg] = useState("");
const handleSend = () => {
// send message to recipient
send(msg);
}
<ChatContainer>
<MessageList></MessageList>
<div as="MessageInput">
<MessageInput sentButton={false} onChange={msg => setMsg(msg)} value={msg}/>
<button onClick={handleSend}>Send</button><button>Record</button>
</div>
</ChatContainer>Please ensure you are using the latest version of the library https://github.com/chatscope/chat-ui-kit-react/releases/tag/v1.2.2 as there is a fix for aliasing other elements as library components.
Also please check this recipe in storybook: https://chatscope.io/storybook/react/?path=/docs/documentation-recipes--page#changing-component-type-to-allow-place-it-in-container-slot
And onsure you are using "as" prop instead of "is" (recipe is not updated yet).
roxana-ahmadi
ranwang0417
hi, how can i add a custom button like voice recording in MessageInput component? tnx.