Card view for JavaScript

The card view feature is a UI component designed to enhance chat interfaces by organizing messages into cards. In UI design, a 'card' is a rectangular box that contains and displays a piece of related information cohesively, like a single chat message or a group of messages. This layout not only makes information presentation cleaner and more structured but also allows for greater user engagement and improved aesthetics. The cards are customizable, supporting integration of images, text, and interactive elements, and can be easily adapted to match your brand's style. This page guides you to render custom message views such as a card view, in React applications using Sendbird UIKit for Chat.

The minimum requirements for Javascript are:

• Sendbird Chat SDK 4.10.1
• Sendbird Chat UIKit for React 3.71

You can pass the renderMessage prop to the following components from @sendbird/uikit-react` for rendering custom message views.

To implement a custom message view, such as a card view, you need to define a custom channel component first. Then, define a CardViewMessage component to specify the layout and style of your custom card view message.

// The implementation is the same for Channel, MessageList, and Message.
import ChannelUI from '@sendbird/uikit-react/Channel/components/ChannelUI';

interface ChannelProps {
  // Define your props here.
}
function ChannelComponent(props: ChannelProps) {
  return(
    <ChannelUI
      renderMessage={({ message }) => {
        if (isCardViewMessage(message)){
          return (
            <CardViewMessage messageData={getCardViewMessage(message)} />
          )
        }
      }}
    />
  )
}

interface CardViewMessageProps {
 messageData: CardMessageData;
}
function CardViewMessage(props: CardViewMessageProps) {
  return (
    // your custom card view component
  )
}

You can determine if a message is of the card view type by creating a utility function as shown below.

import { ClientUserMessage } from 'SendbirdUIKitGlobal';

function getCardViewMessage(message: ClientUserMessage) {
  return message?.extendedMessagePayload != null 
    && 'custom_view' in message.extendedMessagePayload
    && message.extendedMessagePayload.custom_view != null
      ? message.extendedMessagePayload.custom_view
      : null;
  );
}

function isCardViewMessage(message: ClientUserMessage) {
  return getCardViewMessage(message) != null;
}