聊天组件 Chat

功能介绍

Chat 组件为聊天界面，提供了以下功能:

• 发送和接收消息, 包括文本、表情、图片、语音、视频、文件、名片和合并类型的消息。
• 对消息进行表情回复、引用、撤回、删除、转发、固定、翻译和修改的操作。
• 展示消息状态(发送中、发送成功、已送达、已读、发送失败)。
• 清除本地消息。
• 删除会话。
• 从服务器拉取历史消息（消息漫游）。
• 展示正在输入状态。
• 跳转到最新消息。
• 音视频通话。

使用示例

import React from "react";
import { Chat } from "easemob-chat-uikit";
import "easemob-chat-uikit/style.css";

const ChatContainer = () => {
  return (
    <div style={{ width: "70%", height: "100%" }}>
      <Chat />
    </div>
  );
};

自定义

下面示例了怎样实现自定义 Chat 组件。

修改消息气泡样式

以文本消息为例，你可以按如下方式修改消息气泡样式：

• 使用 renderMessageList 方法自定义渲染消息列表。
• 使用 renderMessage 方法自定义渲染消息。
• 通过 TextMessage 的属性自定义文本消息。

import React from "react";
import { Chat, MessageList, TextMessage } from "easemob-chat-uikit";
import "easemob-chat-uikit/style.css";

const ChatContainer = () => {
  const renderTxtMsg = (msg) => {
    return (
      <TextMessage
        bubbleStyle={{ background: "hsl(135.79deg 88.79% 36.46%)" }}
        shape="ground"
        status={msg.status}
        avatar={<Avatar style={{ background: "pink" }}>A</Avatar>}
        textMessage={msg}
      ></TextMessage>
    );
  };

  const renderMessage = (msg) => {
    if (msg.type === "txt") {
      return renderTxtMsg(msg);
    }
  };

  return (
    <div style={{ width: "70%", height: "100%" }}>
      <Chat
        renderMessageList={() => <MessageList renderMessage={renderMessage} />}
      />
    </div>
  );
};

在消息编辑器中添加自定义图标

在消息编辑器添加一个自定义图标，实现指定的功能:

1. 使用 renderMessageInput 方法自定义渲染消息编辑器。
2. 使用 actions 自定义 MessageInput 组件。

import React from "react";
import { Chat, Icon, MessageInput } from "easemob-chat-uikit";
import "easemob-chat-uikit/style.css";

const ChatContainer = () => {
  // 在消息编辑器中添加图标
  const CustomIcon = {
    visible: true,
    name: "CUSTOM",
    icon: (
      <Icon
        type="DOC"
        onClick={() => {
          console.log("click custom icon");
        }}
      ></Icon>
    ),
  };

  const actions = [...MessageInput.defaultActions];
  // 在 textarea 后面插入自定义图标
  actions.splice(2, 0, CustomIcon);
  return (
    <div style={{ width: "70%", height: "100%" }}>
      <Chat renderMessageInput={() => <MessageInput actions={actions} />} />
    </div>
  );
};

实现发送自定义消息

1. 使用 messageStore 中提供的 sendMessage 方法发送自定义消息。
2. 使用 renderMessage 渲染自定义消息。

tip 为了保证消息在当前会话中展示，消息中的 to 字段必须是对方的用户 ID 或者群组的 ID。

import React from "react";
import {
  Chat,
  MessageList,
  TextMessage,
  rootStore,
  MessageInput,
  Icon,
} from "easemob-chat-uikit";
import "easemob-chat-uikit/style.css";

const ChatContainer = () => {
  // 展示自定义消息
  const renderCustomMsg = (msg) => {
    return (
      <div 
        style={{
          background: 'hsla(203, 100%,60%, 1)',
          margin: '100px',
          borderRadius: '30px',
          textAlign: 'center',
        }}
      >
        <h1>Business Card </h1>
        <div>{msg.customExts.id}</div>
      </div>
    );
  };
  const renderMessage = (msg) => {
    if (msg.type === "custom") {
      return renderCustomMsg(msg);
    }
  };

  // 在消息编辑器中添加图标
  const CustomIcon = {
    visible: true,
    name: "CUSTOM",
    icon: (
      <Icon
        type="DOC"
        onClick={() => {
          sendCustomMessage();
        }}
      ></Icon>
    ),
  };
  const actions = [...MessageInput.defaultActions];
  actions.splice(2, 0, CustomIcon);

  // 实现发送自定义消息
  const sendCustomMessage = () => {
    const customMsg = EasemobChat.message.create({
      type: "custom",
      to: "targetId", //消息接收方：单聊为对端用户 ID，群聊为群组 ID。
      chatType: "singleChat",
      customEvent: "CARD",
      customExts: {
        id: "userId3",
      },
    });
    rootStore.messageStore.sendMessage(customMsg).then(() => {
      console.log("send success");
    });
  };
  return (
    <div style={{ width: "70%", height: "100%" }}>
      <Chat
        renderMessageList={() => <MessageList renderMessage={renderMessage} />}
        renderMessageInput={() => <MessageInput actions={actions} />}
      />
    </div>
  );
};

Chat 组件属性总览

Chat 组件包含以下属性：

属性	类型	描述
className	String	组件的类名。
prefix	String	CSS 类名前缀。
headerProps	HeaderProps	Header 组件中的属性。
messageListProps	MsgListProps	MessageList 组件中的属性。
messageInputProps	MessageInputProps	MessageInput 组件中的属性。
renderHeader	(cvs: CurrentCvs) => React.ReactNode	自定义渲染 Header 组件的方法。
renderMessageList	() => ReactNode;	自定义渲染 MessageList 组件的方法。
renderMessageInput	() => ReactNode;	自定义渲染 MessageInput 组件的方法。
renderEmpty	() => ReactNode;	自定义渲染空内容组件的方法。