[UK-965]Fix SENDING_MESSAGE_START payload mismatch (#18)

* Fix SENDING_MESSAGE_START payload mismatch

* Fix CSS issue with render custom message

Author: sravan-s

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "sendbird-uikit",
-  "version": "2.4.1",
+  "version": "2.4.2-0",
   "description": "React based UI kit for sendbird",
   "main": "release/index.js",
   "style": "release/dist/index.css",

package.json

@@ -202,7 +202,7 @@ export const OpenchannelConversation = (props: Props): JSX.Element => {
       if (channel && (channelUrl === channel.url)) {
         messagesDispatcher({
           type: messageActionTypes.SENDING_MESSAGE_START,
-          payload: message,
+          payload: { message, channel },
         });
       }
     }));
@@ -212,7 +212,7 @@ export const OpenchannelConversation = (props: Props): JSX.Element => {
       if (channel && (channelUrl === channel.url)) {
         messagesDispatcher({
           type: messageActionTypes.SENDING_MESSAGE_SUCCEEDED,
-          payload: message,
+          payload: { message, channel },
         });
       }
     }));
@@ -306,11 +306,15 @@ export const OpenchannelConversation = (props: Props): JSX.Element => {
       {
         renderMessageInput
           ? (
-            renderMessageInput({
-              channel: currentOpenChannel,
-              user: user,
-              disabled: disabled,
-            })
+            <div className="sendbird-openchannel-footer">
+              {
+                renderMessageInput({
+                  channel: currentOpenChannel,
+                  user: user,
+                  disabled: disabled,
+                })
+              }
+            </div>
           )
           : (
             <MessageInputWrapper

src/smart-components/OpenchannelConversation/index.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Sendbird from '../../../lib/Sendbird';
 import OpenchannelConversation from '../index';
 import { MenuRoot } from '../../../ui/ContextMenu';
+import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
+import sendbirdSelectors from '../../../lib/selectors';
 
 export default { title: 'OpenChannel' };
 
@@ -26,6 +28,34 @@ export const defaultConversation = () => {
   );
 };
 
+const CustomInput = (params) => {
+  const { channel } = params;
+  const [inputText, setInputText] = useState("");
+  const context = useSendbirdStateContext();
+  const sdk = sendbirdSelectors.getSdk(context);
+  const sendUserMessage = sendbirdSelectors.getOpenChannelSendUserMessage(context);
+
+  return (
+    <div>
+      <input value={inputText} onChange={(event) => {
+        setInputText(event.target.value);
+      }}/>
+      <button onClick={() => {
+        const params = new sdk.UserMessageParams();
+        params.message = inputText;
+        sendUserMessage(channel.url, params)
+          .then((message) => {
+            console.log(message);
+            setInputText("");
+          })
+          .catch((error) => {
+            console.log(error.message);
+          });
+      }}>send</button>
+    </div>
+  );
+}
+
 export const RenderCustomMessage = () => {
   return (
     <Sendbird
@@ -44,6 +74,9 @@ export const RenderCustomMessage = () => {
               )
             }
           }}
+          renderMessageInput={(props) => {
+            return (<CustomInput {...props} />);
+          }}
         />
       </div>
       <MenuRoot />