Is there a way to use renderChatItem with the default ui and just add custom class?

Sendbird Chat UIKit React
,
1

Hi,
I use “sendbird-uikit”: “1.1.3” and I am trying to add custom CSS to a message with a specific type (using a custom type), i cant find a way to use renderChatItem in the Channel component without self implement all the whole thing…

any suggestions?

2

Hey @Dror_Elgabsi,

I want to make sure that I properly understand what you’re talking about. You want to add additional CSS to the ChatItem component within the Channel component?

Thanks,
Tyler

1 Like
3

I do… I want to add style for some messages that have CUSTOM_TYPE = ‘some_type’ and all the other functionality should be the same…
P.S there is no class that represents the CUSTOM_TYPE attribute
I use the sendUserMessage from the SDK and I can see the CUSTOM_TYPE in the onMessageReceived event
the chat item is one use case but yah…

4

Hello @Dror_Elgabsi,

Right now we dont support adding custom css class

But, the closest that I can recommend is, renderCustomMessage (our docs site is a little behind, so let me share a codesandbox in a bit)

Note - this feature is included in v1.3.1 or higher

5

And, actually, if you could tell us more about your use specific case, it would be more helpful for us to support more use cases :slight_smile:

2 Likes
6

first of all, it works :partying_face: so thanks for the help!
my use case is creating 1 on 1 session both with chat and video (the sendbird-calls api) in one app
the reason i need the custom message is for video events like call ended and statuses like that…
i know you have this feature

image
image2066×526 51.2 KB

but it didnt work for me plus i want to be able to control it
so for now only thing to figure out is y sendUserMessage doesn’t add message to the user that sends it :slightly_smiling_face:

7

@Dror_Elgabsi Could you expand on what you mean by the sendUserMessage doesn’t add message to the user that sends it? Are you saying that when a user sends a message, you don’t see it show on that users feed? I assume if you refresh, it does show up?

8

you are correct, refresh will show the message on the feed of the user that send it, but only after refresh,
other user can see it without refresh

9

How are you rendering the components? When the message is sent, are you calling a method that updates the message list of the channel?

How are components being updated for the receiving user(s)?

10

i use the Channel component from the UI kit… i dont manage the messages outside of that component

11

BTW i have onMessageReceived event handle and it wont fire when i call sendUserMessage (for the user that sends the message)

12

The onMessageReceived would not fire for the user who sent the message, as they are not receiving a message. They’re sending one.

Can you show me the code surrounding your channel component?

13 
import React, { useState } from "react";
import { Channel, ChannelSettings } from "sendbird-uikit";

import "./Chat.css";
import "sendbird-uikit/dist/index.css";

const Chat = ({ channelUrl }) => {
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);

  const focusInput = (text) => {
    //TODO: fix iphone scroll
    document
      .getElementsByName("sendbird-message-input")[0]
      .focus({ preventScroll: false });
    return text;
  };

  const renderCustomMessage = (message) => {
    if (message.customType === "call-status") {
      return () => <div className="call-status">{message.message}</div>;
    }
  };

  return (
    <>
      <Channel
        channelUrl={channelUrl}
        onChatHeaderActionClick={() => setIsSettingsOpen(!isSettingsOpen)}
        onBeforeSendUserMessage={focusInput}
        renderCustomMessage={renderCustomMessage}
      />
      {isSettingsOpen && (
        <ChannelSettings
          channelUrl={channelUrl}
          onCloseClick={() => setIsSettingsOpen(false)}
        />
      )}
    </>
  );
};

export default Chat;
14

What version of the UIKit are you using? I implemented your code as outlined here and I did not have any issues getting the sending user’s chat to update.

15

this is the version “sendbird-uikit”: “1.3.2” as recommended in this thread.
the issue is when i use
channelInfo.sendUserMessage(message, extraData, type, callback);
to add the call messages not when i use the ui to send messages, when i use the ui it works
here is a short video


when i hangup the call the sendUserMessage is called in the onEnd event

16

Okay, I understand now. I must have overlooked that you are using a mixture of the UIKit and the Core SDK. Let me see if I can reproduce now that I have a better understand. I’ll let you know what I find.

Thanks!

17

@Dror_Elgabsi,

Could you show me your code for the onEnd event? I’m still not able to recreate this and I want to make sure I’m matching up our behavior as closely as possible.

Thanks!

18

what version you use?
call.onEnded = (call) => {
if (call.isCaller) {
channelInfo.sendUserMessage(‘test’, ‘extra_data’, ‘call-status’, console.log)
}

to get channelInfo i use
sdk.GroupChannel.getChannel(channelUrl,(info)=>setInfo(info))

19

I am testing on 1.3.2 so I can ensure we’re testing on the same version. I was able to reproduce the behavior utilizing the SDK method to send message.

One thing I should note, is that you’re using a deprecated call method, you should be utilizing the new params style when calling sendUserMessage() https://sendbird.com/docs/chat/v3/javascript/guides/group-channel#2-send-a-message

As for why the message does not update, nothing is calling for the view to update. When we send a message via the input, it updates the state which causes the view to update. When the SDK sends the message, nothing updates the state, and thus the view is not updated.

You could utilize the Platform API to send the call status, which would does cause the state to update for all parties in the chatroom.

20

Thanks, Tyler for your help. i manage to fix it using this:
const sendMessage = sendBirdSelectors.getSendUserMessage(state);
instead of
channelInfo.sendUserMessage(message, extraData, type, callback);

1 Like