add voice button about chat-ui-kit-react HOT 6 CLOSED

problem solved! tnx

from chat-ui-kit-react.

@ranwang0417 Components->Chat Container->Docs and scroll down to the Wrapped MessageInput
story :)

from chat-ui-kit-react.

@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).

from chat-ui-kit-react.

@roxana-ahmadi
I have updated recipe here:
https://chatscope.io/storybook/react/?path=/docs/documentation-recipes--page#changing-component-type-to-allow-place-it-in-container-slot
and added example story:
https://chatscope.io/storybook/react/?path=/docs/components-chatcontainer--wrapped-message-input#wrapped-messageinput

from chat-ui-kit-react.

Hi, sorry for the stupid question but how can I see the implementation of in https://chatscope.io/storybook/react/?path=/story/components-chatcontainer--wrapped-message-input? I am trying to add more buttons to the right of the send button but could not achieve the same style. Many thanks!

from chat-ui-kit-react.

@ranwang0417 Components->Chat Container->Docs and scroll down to the Wrapped MessageInput story :)

Thank you so so much!

from chat-ui-kit-react.