Using renderMessageInput to render own message input prevents user's sent messages from being inserted in conversation

Sendbird Chat UIKit React
1

Hi.

We would like to use our own chat message input in the UIKIt to send our messages. However, doing so prevents messages sent from the user to be inserted in the conversation. There must be some code that has to be called to update the conversation view after successfully posting a message to the Sendbird API.

If I refresh the page after posting the message with the custom messageInput, the message is shown properly.

<Channel
  channelUrl={store.currentChannelUrl}
  showSearchIcon={false}
  useMessageGrouping={true}
  renderMessageInput={() => (
    <>
      <input id="chat-input" type="text" />
      <button onClick={(e) => {
        const chatInput = document.getElementById('chat-input')
        const message = chatInput.value
        const params = new sb.UserMessageParams();
        params.message = message;
        store.currentChannel.sendUserMessage(params, function (message, error) {
          if (error) {
            console.error(error)
            return
          }
          console.log('message sendUserMessage callback', message)

          // HOW TO UPDATE THE CONVERSATION COMPONENT WITH THIS SUCCESSFULLY POSTED MESSAGE?
          // HOW TO UPDATE THE CONVERSATION COMPONENT WITH THIS SUCCESSFULLY POSTED MESSAGE?
          // HOW TO UPDATE THE CONVERSATION COMPONENT WITH THIS SUCCESSFULLY POSTED MESSAGE?

          chatInput.value = ''
        });

    }}>Send message</button>
    </>
  )}
/>
2

Hi @vibonacci
If I understand correctly - your goal is to have custom input field.
I’ve found nice example prepared by Sravan S: (2-5) Customizing MessageInput (forked) - CodeSandbox

3

Ah. I was using groupChannel.sendUserMessage and that is not linked to the UIKit’s conversation window. The example you gave uses sendBirdSelectors.getSendUserMessage and that one is linked to the UIKIt’s conversation window.
Thanks a lot!