whyuzeim 1.0.0

package/es/ChatBox/index.js

@@ -0,0 +1,555 @@
+import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
+import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
+import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _asyncToGenerator from '@babel/runtime-corejs3/helpers/esm/asyncToGenerator';
+import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
+import _Date$now from '@babel/runtime-corejs3/core-js-stable/date/now';
+import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
+import _JSON$stringify from '@babel/runtime-corejs3/core-js-stable/json/stringify';
+import _regeneratorRuntime from '@babel/runtime-corejs3/regenerator';
+import React, { useContext, useState, useEffect } from 'react';
+import { rootStore, Chat, MessageList, Tooltip, ImageMessage, FileMessage, VideoMessage, AudioMessage, BaseMessage, TextMessage } from 'agora-chat-uikit';
+import './style/index.scss';
+import img$1 from './image/ic_more.svg.js';
+import img from './image/ic_chat_back.svg.js';
+import { Context } from '../IM/context.js';
+import { Modal, Button, message } from 'antd';
+import JoinGroupDialog from './JoinGroupDialog/index.js';
+import AddMember from '../AddMember/index.js';
+import { commonMessageProps, commonMessageInputConfig } from '../type.js';
+
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(t), true)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Chatbox = function Chatbox(props) {
+  var _userInfo$uid3;
+  var _useContext = useContext(Context),
+    http = _useContext.http,
+    setRightComponent = _useContext.setRightComponent,
+    userInfo = _useContext.userInfo,
+    mobile = _useContext.mobile,
+    setMidComponent = _useContext.setMidComponent;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isTopMenuOpen = _useState2[0],
+    setIsTopMenuOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showJoinGroupDialog = _useState4[0],
+    setShowJoinGroupDialog = _useState4[1];
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    joinGroupInfo = _useState6[0],
+    setJoinGroupInfo = _useState6[1];
+  var _Modal$useModal = Modal.useModal(),
+    _Modal$useModal2 = _slicedToArray(_Modal$useModal, 2),
+    modal = _Modal$useModal2[0],
+    contextHolder = _Modal$useModal2[1];
+  var _useState7 = useState({
+      headerImageURL: '',
+      conversationName: '',
+      memberCount: 0,
+      chatType: 'singleChat'
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    headerInfo = _useState8[0],
+    setHeaderInfo = _useState8[1];
+  var renderTxtMsg = function renderTxtMsg(msg) {
+    var _userInfo$uid, _ref;
+    var isMySelf = (msg === null || msg === void 0 ? void 0 : msg.bySelf) === true || (msg === null || msg === void 0 ? void 0 : msg.from.toLowerCase()) === ((_userInfo$uid = userInfo.uid) === null || _userInfo$uid === void 0 ? void 0 : _userInfo$uid.toLowerCase());
+    return /*#__PURE__*/React.createElement(TextMessage, {
+      bubbleStyle: {
+        background: isMySelf ? "var(--im-msg-bubble-color-right)" : "var(--im-msg-bubble-color-left)",
+        borderRadius: "9px",
+        padding: "10px 12px",
+        color: "var(--im-msg-bubble-font-color)"
+      },
+      shape: "square",
+      arrow: false,
+      status: msg.status,
+      textMessage: msg,
+      reaction: false,
+      select: false,
+      thread: false,
+      customAction: (_ref = commonMessageProps && (commonMessageProps === null || commonMessageProps === void 0 ? void 0 : commonMessageProps.customAction)) !== null && _ref !== void 0 ? _ref : undefined
+    });
+  };
+  var renderShareCardMsg = function renderShareCardMsg(msg) {
+    var _msg$customExts, _msg$customExts2;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "text-[var(--im-main-fontColor)]",
+      onClick: function onClick() {
+        return clickCustomGroupCardMsg(msg);
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "text-sm font-normal leading-snug"
+    }, msg.customEvent === "im_group_share" ? "\"".concat((_msg$customExts = msg.customExts) === null || _msg$customExts === void 0 ? void 0 : _msg$customExts.shareUserName, "\" invites you to join group chat click to enter.") : "\"".concat((_msg$customExts2 = msg.customExts) === null || _msg$customExts2 === void 0 ? void 0 : _msg$customExts2.shareUserName, "\" recommends friends to you")), /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center bg-[var(--im-main-bg-ten)] p-4 rounded-lg mt-2"
+    }, /*#__PURE__*/React.createElement("img", {
+      className: "w-12 h-12 object-cover ".concat(msg.customEvent === "im_group_share" ? "rounded-md" : "rounded-full"),
+      src: msg.customExts.imgUrl,
+      alt: ""
+    }), /*#__PURE__*/React.createElement("p", {
+      className: "ml-2 text-base font-semibold leading-normal ellipsis"
+    }, msg.customExts.title)));
+  };
+  var renderMessage = function renderMessage(msg) {
+    if (msg.type === "txt") {
+      return renderTxtMsg(msg);
+    } else if (msg.type === 'img') {
+      var _ref2;
+      return /*#__PURE__*/React.createElement(ImageMessage, {
+        reaction: false,
+        select: false,
+        thread: false,
+        customAction: (_ref2 = commonMessageProps && (commonMessageProps === null || commonMessageProps === void 0 ? void 0 : commonMessageProps.customAction)) !== null && _ref2 !== void 0 ? _ref2 : undefined,
+        imageMessage: msg
+      });
+    } else if (msg.type === 'file') {
+      var _ref3;
+      return /*#__PURE__*/React.createElement(FileMessage, {
+        reaction: false,
+        select: false,
+        thread: false,
+        bubbleStyle: {
+          background: msg.bySelf ? "var(--im-msg-bubble-color-right)" : "var(--im-msg-bubble-color-left)",
+          borderRadius: "9px",
+          padding: "10px 12px",
+          color: "var(--im-msg-bubble-font-color)"
+        },
+        customAction: (_ref3 = commonMessageProps && (commonMessageProps === null || commonMessageProps === void 0 ? void 0 : commonMessageProps.customAction)) !== null && _ref3 !== void 0 ? _ref3 : undefined,
+        fileMessage: msg
+      });
+    } else if (msg.type === 'video') {
+      var _ref4;
+      return /*#__PURE__*/React.createElement(VideoMessage, {
+        reaction: false,
+        select: false,
+        thread: false,
+        customAction: (_ref4 = commonMessageProps && (commonMessageProps === null || commonMessageProps === void 0 ? void 0 : commonMessageProps.customAction)) !== null && _ref4 !== void 0 ? _ref4 : undefined,
+        videoMessage: msg
+      });
+    } else if (msg.type === 'audio') {
+      var _ref5;
+      return /*#__PURE__*/React.createElement(AudioMessage, {
+        reaction: false,
+        select: false,
+        thread: false,
+        customAction: (_ref5 = commonMessageProps && (commonMessageProps === null || commonMessageProps === void 0 ? void 0 : commonMessageProps.customAction)) !== null && _ref5 !== void 0 ? _ref5 : undefined,
+        audioMessage: msg
+      });
+    } else if (msg.type === 'custom' && ((msg === null || msg === void 0 ? void 0 : msg.customEvent) === 'im_group_share' || (msg === null || msg === void 0 ? void 0 : msg.customEvent) === 'personcenter_share')) {
+      var _userInfo$uid2, _ref6;
+      var isMySelf = (msg === null || msg === void 0 ? void 0 : msg.bySelf) === true || (msg === null || msg === void 0 ? void 0 : msg.from.toLowerCase()) === (userInfo === null || userInfo === void 0 || (_userInfo$uid2 = userInfo.uid) === null || _userInfo$uid2 === void 0 ? void 0 : _userInfo$uid2.toLowerCase());
+      return /*#__PURE__*/React.createElement(BaseMessage, {
+        bubbleStyle: {
+          background: isMySelf ? "var(--im-msg-bubble-color-right)" : "var(--im-msg-bubble-color-left)",
+          borderRadius: "9px",
+          padding: "10px 12px",
+          color: "var(--im-msg-bubble-font-color)"
+        },
+        reaction: false,
+        select: false,
+        thread: false,
+        direction: isMySelf ? 'rtl' : 'ltr',
+        customAction: (_ref6 = commonMessageProps && (commonMessageProps === null || commonMessageProps === void 0 ? void 0 : commonMessageProps.customAction)) !== null && _ref6 !== void 0 ? _ref6 : undefined,
+        children: renderShareCardMsg(msg)
+      });
+    } else {
+      return undefined;
+    }
+  };
+  var handleConfirmRemove = /*#__PURE__*/function () {
+    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return modal.confirm({
+              content: /*#__PURE__*/React.createElement("span", {
+                className: "text-sm "
+              }, "Are you sure you want to delete and leave the group ", headerInfo.conversationName, " ?"),
+              footer: /*#__PURE__*/React.createElement("div", {
+                className: "yuze-confirm-footer flex justify-center gap-5 mt-4"
+              }, /*#__PURE__*/React.createElement(Button, {
+                type: "default",
+                className: "flex-1 bg-transparent",
+                size: "large",
+                onClick: function onClick() {
+                  Modal.destroyAll();
+                }
+              }, "Close"), /*#__PURE__*/React.createElement(Button, {
+                type: "primary",
+                className: "flex-1",
+                size: "large",
+                onClick: function onClick() {
+                  setIsTopMenuOpen(false);
+                  leaveGroup(rootStore.conversationStore.currentCvs.conversationId);
+                }
+              }, "Confirm"))
+            });
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleConfirmRemove() {
+      return _ref7.apply(this, arguments);
+    };
+  }();
+  var leaveGroup = /*#__PURE__*/function () {
+    var _ref8 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(groupid) {
+      var params, response, _response$data, code, msg, CVS;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.prev = 0;
+            params = {
+              sendbirdid: groupid
+            };
+            _context2.next = 4;
+            return http.post('/capi/account/imchannel/exitchannel', params);
+          case 4:
+            response = _context2.sent;
+            _response$data = response.data, code = _response$data.code, msg = _response$data.msg;
+            if (code === 200) {
+              setIsTopMenuOpen(false);
+              CVS = rootStore.conversationStore.currentCvs;
+              rootStore.conversationStore.deleteConversation(rootStore.conversationStore.currentCvs);
+              rootStore.client.deleteConversation({
+                channel: CVS.conversationId,
+                chatType: CVS.chatType,
+                deleteRoam: true
+              });
+              setMidComponent && setMidComponent(undefined);
+            } else {
+              message.error(msg);
+            }
+            _context2.next = 11;
+            break;
+          case 9:
+            _context2.prev = 9;
+            _context2.t0 = _context2["catch"](0);
+          case 11:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[0, 9]]);
+    }));
+    return function leaveGroup(_x) {
+      return _ref8.apply(this, arguments);
+    };
+  }();
+  var customHeader = function customHeader() {
+    var menuNode = /*#__PURE__*/React.createElement("ul", {
+      className: "cui-header-more"
+    }, rootStore.conversationStore.currentCvs.chatType === 'groupChat' && /*#__PURE__*/React.createElement("li", {
+      className: "cui-li-dark",
+      onClick: function onClick() {
+        setRightComponent && setRightComponent(/*#__PURE__*/React.createElement(AddMember, null));
+        setIsTopMenuOpen(false);
+      }
+    }, "Add Members"), /*#__PURE__*/React.createElement("li", {
+      className: "cui-li-dark",
+      onClick: function onClick() {
+        var cvs = rootStore.conversationStore.currentCvs;
+        rootStore.messageStore.clearMessage(rootStore.conversationStore.currentCvs);
+        rootStore.client.removeHistoryMessages({
+          targetId: cvs.conversationId,
+          chatType: cvs.chatType,
+          beforeTimeStamp: _Date$now()
+        });
+        setIsTopMenuOpen(false);
+      }
+    }, "Clear Messages"), /*#__PURE__*/React.createElement("li", {
+      className: "cui-li-dark",
+      onClick: function onClick() {
+        setIsTopMenuOpen(false);
+        var CVS = rootStore.conversationStore.currentCvs;
+        rootStore.conversationStore.deleteConversation(rootStore.conversationStore.currentCvs);
+        rootStore.client.deleteConversation({
+          channel: CVS.conversationId,
+          chatType: CVS.chatType,
+          deleteRoam: true
+        });
+        setMidComponent && setMidComponent(undefined);
+      }
+    }, "Delete Chat"), rootStore.conversationStore.currentCvs.chatType === 'groupChat' && /*#__PURE__*/React.createElement("li", {
+      className: "cui-li-dark",
+      onClick: function onClick() {
+        setIsTopMenuOpen(false);
+        handleConfirmRemove();
+      }
+    }, "Leave Group"));
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex h-[64px] items-center bg-[var(--im-main-backgroundColor)] pl-4 pr-4 justify-between"
+    }, /*#__PURE__*/React.createElement("div", {
+      onClick: function onClick() {
+        return props.onClickHeaderBack({
+          conversationId: rootStore.conversationStore.currentCvs.conversationId,
+          chatType: rootStore.conversationStore.currentCvs.chatType === 'groupChat' ? 'groupChat' : 'singleChat'
+        });
+      },
+      className: "flex items-center gap-2"
+    }, mobile && /*#__PURE__*/React.createElement("img", {
+      src: img,
+      className: "cursor-pointer",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        setMidComponent && setMidComponent(undefined);
+      }
+    }), !mobile && /*#__PURE__*/React.createElement("img", {
+      src: headerInfo.headerImageURL,
+      className: "w-12 h-12 ".concat(headerInfo.chatType === 'groupChat' ? 'rounded-md' : 'rounded-full', " bg-blue")
+    }), !mobile && /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-col overflow-hidden mx-5 flex-1"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "text-[var(--im-main-fontColor)] text-base font-normal line-clamp-1 mr-[100px]"
+    }, headerInfo.conversationName), headerInfo.chatType === 'groupChat' && /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: 'var(--im-third-fontColor)'
+      },
+      className: "text-sm"
+    }, headerInfo.memberCount, " members"))), mobile && /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-col ellipsis text-[var(--im-main-fontColor)] text-base font-semibold",
+      onClick: function onClick() {
+        return props.onClickHeaderBack({
+          conversationId: rootStore.conversationStore.currentCvs.conversationId,
+          chatType: rootStore.conversationStore.currentCvs.chatType === 'groupChat' ? 'groupChat' : 'singleChat'
+        });
+      }
+    }, /*#__PURE__*/React.createElement("span", null, headerInfo.conversationName, headerInfo.chatType === 'groupChat' ? "(".concat(headerInfo.memberCount, ")") : '')), /*#__PURE__*/React.createElement(Tooltip, {
+      title: menuNode,
+      trigger: "click",
+      placement: "bottom",
+      destroyTooltipOnHide: true,
+      open: isTopMenuOpen,
+      onOpenChange: function onOpenChange(c) {
+        setIsTopMenuOpen(c);
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      src: img$1
+    }), contextHolder));
+  };
+  var getHeaderInfo = function getHeaderInfo() {
+    var cvs = rootStore.conversationStore.currentCvs;
+    if (!cvs || !cvs.conversationId) {
+      return;
+    }
+    var isGroup = cvs.chatType === "groupChat";
+    setHeaderInfo(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        chatType: cvs.chatType
+      });
+    });
+    if (isGroup) {
+      var groupData = rootStore.addressStore.groups;
+      _forEachInstanceProperty(groupData).call(groupData, function (group) {
+        var _group$info;
+        // @ts-ignore
+        if (cvs.conversationId == (group === null || group === void 0 ? void 0 : group.groupid) && group !== null && group !== void 0 && (_group$info = group.info) !== null && _group$info !== void 0 && _group$info.custom) {
+          var _group$info2, _customObj$headimgurl, _group$info$affiliati, _group$info3, _ref9, _ref10, _group$name, _group$info4;
+          var customObj = JSON.parse(group === null || group === void 0 || (_group$info2 = group.info) === null || _group$info2 === void 0 ? void 0 : _group$info2.custom);
+          var imageurl = (_customObj$headimgurl = customObj === null || customObj === void 0 ? void 0 : customObj.headimgurl) !== null && _customObj$headimgurl !== void 0 ? _customObj$headimgurl : '';
+          var member = (_group$info$affiliati = group === null || group === void 0 || (_group$info3 = group.info) === null || _group$info3 === void 0 ? void 0 : _group$info3.affiliations_count) !== null && _group$info$affiliati !== void 0 ? _group$info$affiliati : 0;
+          var name = (_ref9 = (_ref10 = (_group$name = group === null || group === void 0 ? void 0 : group.name) !== null && _group$name !== void 0 ? _group$name : group === null || group === void 0 || (_group$info4 = group.info) === null || _group$info4 === void 0 ? void 0 : _group$info4.name) !== null && _ref10 !== void 0 ? _ref10 : cvs.name) !== null && _ref9 !== void 0 ? _ref9 : '';
+          setHeaderInfo(function (prevState) {
+            return _objectSpread(_objectSpread({}, prevState), {}, {
+              headerImageURL: imageurl,
+              memberCount: member,
+              conversationName: name
+            });
+          });
+          if (!(group !== null && group !== void 0 && group.info)) {
+            rootStore.addressStore.getGroupInfo(cvs.conversationId);
+          }
+        }
+      });
+    } else {
+      var appUsersInfo = rootStore.addressStore.appUsersInfo[cvs.conversationId];
+      if (!appUsersInfo) {
+        rootStore.addressStore.getUserInfo(cvs.conversationId);
+        rootStore.addressStore.getUserInfo(cvs.conversationId).then(function (value) {
+          if (value) {
+            var _value$avatarurl, _value$name;
+            var imageurl = (_value$avatarurl = value === null || value === void 0 ? void 0 : value.avatarurl) !== null && _value$avatarurl !== void 0 ? _value$avatarurl : '';
+            var name = (_value$name = value === null || value === void 0 ? void 0 : value.name) !== null && _value$name !== void 0 ? _value$name : cvs.name;
+            setHeaderInfo(function (prevState) {
+              return _objectSpread(_objectSpread({}, prevState), {}, {
+                headerImageURL: imageurl,
+                conversationName: name
+              });
+            });
+          }
+        });
+      } else {
+        var _appUsersInfo$avataru, _ref11, _appUsersInfo$name;
+        var imageurl = (_appUsersInfo$avataru = appUsersInfo === null || appUsersInfo === void 0 ? void 0 : appUsersInfo.avatarurl) !== null && _appUsersInfo$avataru !== void 0 ? _appUsersInfo$avataru : '';
+        var name = (_ref11 = (_appUsersInfo$name = appUsersInfo === null || appUsersInfo === void 0 ? void 0 : appUsersInfo.name) !== null && _appUsersInfo$name !== void 0 ? _appUsersInfo$name : cvs.name) !== null && _ref11 !== void 0 ? _ref11 : '';
+        setHeaderInfo(function (prevState) {
+          return _objectSpread(_objectSpread({}, prevState), {}, {
+            headerImageURL: imageurl,
+            conversationName: name
+          });
+        });
+      }
+      console.log("the appUsersInfo is ".concat(_JSON$stringify(appUsersInfo)));
+    }
+  };
+  function getShareGroupInfo(_x2, _x3) {
+    return _getShareGroupInfo.apply(this, arguments);
+  }
+  function _getShareGroupInfo() {
+    _getShareGroupInfo = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(shareInfo, isJoined) {
+      var params, response, data, groupInfo, waitJoinGroupinfo, conversation, _response$data3;
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            params = {
+              sendbirdid: shareInfo === null || shareInfo === void 0 ? void 0 : shareInfo.objectId
+            };
+            _context4.next = 3;
+            return http.post("/capi/account/imchannel/getdetails", params);
+          case 3:
+            response = _context4.sent;
+            data = response.data;
+            if (data && data.code === 200 && data.data) {
+              groupInfo = data.data;
+              if (!isJoined) {
+                waitJoinGroupinfo = {
+                  headimgurl: groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.headimgurl,
+                  name: groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.name,
+                  description: groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.description,
+                  members: groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.members,
+                  ownername: groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.groupownername,
+                  sendbirdid: groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.sendbirdid
+                };
+                setJoinGroupInfo(waitJoinGroupinfo);
+                setShowJoinGroupDialog(true);
+              } else {
+                //显示指定的群
+                console.log('enter specific conversation', groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.sendbirdid);
+                conversation = {
+                  chatType: 'groupChat',
+                  conversationId: groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.sendbirdid,
+                  lastMessage: {},
+                  unreadCount: 0,
+                  name: groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.name,
+                  avatarUrl: groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.headimgurl
+                };
+                rootStore.conversationStore.addConversation(conversation);
+                rootStore.conversationStore.setCurrentCvs({
+                  conversationId: groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.sendbirdid,
+                  chatType: 'groupChat'
+                });
+              }
+            } else {
+              message.error((_response$data3 = response.data) === null || _response$data3 === void 0 ? void 0 : _response$data3.msg);
+            }
+          case 6:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4);
+    }));
+    return _getShareGroupInfo.apply(this, arguments);
+  }
+  var clickCustomGroupCardMsg = /*#__PURE__*/function () {
+    var _ref12 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(msg) {
+      var params, _response$data2, response, _msg$customExts3, _msg$customExts4, _msg$customExts5, _msg$customExts6, conversation;
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (!(msg.customExts.objectId == userInfo.uid)) {
+              _context3.next = 2;
+              break;
+            }
+            return _context3.abrupt("return");
+          case 2:
+            if (!(msg.customEvent == 'im_group_share')) {
+              _context3.next = 15;
+              break;
+            }
+            params = {
+              id: msg.customExts.objectId
+            };
+            _context3.prev = 4;
+            _context3.next = 7;
+            return http.get("/capi/account/imchannel/checkuserisexist", {
+              params: params
+            });
+          case 7:
+            response = _context3.sent;
+            if (response.data.code === 200 && ((_response$data2 = response.data) === null || _response$data2 === void 0 || (_response$data2 = _response$data2.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.isjoin) === 1) {
+              getShareGroupInfo(msg === null || msg === void 0 ? void 0 : msg.customExts, true);
+            } else {
+              getShareGroupInfo(msg === null || msg === void 0 ? void 0 : msg.customExts, false);
+            }
+            _context3.next = 13;
+            break;
+          case 11:
+            _context3.prev = 11;
+            _context3.t0 = _context3["catch"](4);
+          case 13:
+            _context3.next = 18;
+            break;
+          case 15:
+            conversation = {
+              chatType: 'singleChat',
+              conversationId: (_msg$customExts3 = msg.customExts) === null || _msg$customExts3 === void 0 ? void 0 : _msg$customExts3.objectId,
+              lastMessage: {},
+              unreadCount: 0,
+              name: (_msg$customExts4 = msg.customExts) === null || _msg$customExts4 === void 0 ? void 0 : _msg$customExts4.title,
+              avatarUrl: (_msg$customExts5 = msg.customExts) === null || _msg$customExts5 === void 0 ? void 0 : _msg$customExts5.imgUrl
+            };
+            rootStore.conversationStore.addConversation(conversation);
+            rootStore.conversationStore.setCurrentCvs({
+              conversationId: msg === null || msg === void 0 || (_msg$customExts6 = msg.customExts) === null || _msg$customExts6 === void 0 ? void 0 : _msg$customExts6.objectId,
+              chatType: 'singleChat'
+            });
+          case 18:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3, null, [[4, 11]]);
+    }));
+    return function clickCustomGroupCardMsg(_x4) {
+      return _ref12.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    getHeaderInfo();
+  }, []);
+  useEffect(function () {
+    getHeaderInfo();
+  }, [rootStore.conversationStore.currentCvs]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "yuze_chat_container w-full h-full overflow-hidden flex flex-col"
+  }, rootStore.conversationStore.currentCvs.conversationId && customHeader(), /*#__PURE__*/React.createElement(Chat, {
+    className: "flex-1",
+    messageInputProps: _objectSpread({}, commonMessageInputConfig),
+    renderHeader: function renderHeader() {
+      return undefined;
+    },
+    renderMessageList: function renderMessageList() {
+      return /*#__PURE__*/React.createElement(MessageList, {
+        messageProps: _objectSpread({}, commonMessageProps),
+        renderMessage: renderMessage
+      });
+    }
+  }), /*#__PURE__*/React.createElement(JoinGroupDialog, {
+    onClose: function onClose() {
+      return setShowJoinGroupDialog(false);
+    },
+    userId: (_userInfo$uid3 = userInfo.uid) !== null && _userInfo$uid3 !== void 0 ? _userInfo$uid3 : '',
+    visible: showJoinGroupDialog,
+    shareGroupInfo: joinGroupInfo
+  }));
+};
+
+export { Chatbox as default };

package/es/ChatBox/style/index.scss

@@ -0,0 +1,26 @@
+.yuze_chat_container {
+  .cui-chat-dark {
+    background-color: var(--im-main-backgroundColor);
+  }
+
+  .cui-message-base {
+    align-items: flex-start;
+  }
+
+  .cui-avatar {
+    width: 48px !important;
+    height: 48px !important;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .cui-message-base-square .cui-message-base-body {
+    margin-left: 12px;;
+    margin-top: 4px;;
+  }
+}
+

package/es/ContactList/index.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import "./style/index.scss";
+export interface IContactList {
+    name?: string;
+    className?: string;
+    keyword?: string;
+    renderItem: (item: IUserData) => React.ReactElement;
+    groupId?: string;
+    memberids?: string[];
+}
+export interface IUserData {
+    walletaddress: string;
+    headimgurl: string;
+    nickname: string;
+    name: string;
+    id: string;
+    type: number;
+    userid: string;
+    username: string;
+    certification: number;
+    status: number;
+}
+declare const ContactList: React.FC<IContactList>;
+export default ContactList;

package/es/ContactList/index.js

@@ -0,0 +1,62 @@
+import _asyncToGenerator from '@babel/runtime-corejs3/helpers/esm/asyncToGenerator';
+import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
+import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
+import _regeneratorRuntime from '@babel/runtime-corejs3/regenerator';
+import React, { useState, useContext, useCallback, useEffect } from 'react';
+import './style/index.scss';
+import { Context } from '../IM/context.js';
+import { rootStore } from 'agora-chat-uikit';
+import { useDebounceCallback } from 'usehooks-ts';
+import classNames from 'classnames';
+import NoData from '../NoData/index.js';
+
+var ContactList = function ContactList(props) {
+  var className = props.className,
+    keyword = props.keyword,
+    renderItem = props.renderItem;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    list = _useState2[0],
+    setList = _useState2[1];
+  var _useContext = useContext(Context),
+    http = _useContext.http;
+  var handleGetFrindList = useCallback(/*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(keyword) {
+      var result, list;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return http.post("/capi/account/imsearch/findpage", {
+              keyword: keyword,
+              type: 2,
+              userid: rootStore.initConfig.userId,
+              size: 10,
+              page: 1
+            });
+          case 2:
+            result = _context.sent;
+            list = result.data.data.list;
+            setList(list);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [http]);
+  var handleDebounceFriendList = useDebounceCallback(handleGetFrindList, 500);
+  useEffect(function () {
+    handleDebounceFriendList(keyword);
+  }, [handleDebounceFriendList, keyword]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-contactList w-full overflow-auto", className)
+  }, list === null || list === void 0 ? void 0 : _mapInstanceProperty(list).call(list, function (item) {
+    return renderItem(item);
+  }), (list === null || list === void 0 ? void 0 : list.length) === 0 && /*#__PURE__*/React.createElement(NoData, null));
+};
+
+export { ContactList as default };

package/es/ContactList/style/index.scss

@@ -0,0 +1,5 @@
+.yuze-contactList {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}