whyuzeim 1.0.13 → 1.0.15

package/cjs/ChatBox/index.d.ts

@@ -3,7 +3,7 @@ import "./style/index.scss";
 export interface IChatbox {
     onClickHeaderBack: (cvs: {
         conversationId: string;
-        chatType: 'singleChat' | 'groupChat';
+        chatType: "singleChat" | "groupChat";
     }) => void;
     onBack?: () => void;
 }

package/cjs/ChatBox/index.js

@@ -28,6 +28,7 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context7, _context8; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context7 = ownKeys(Object(t), true)).call(_context7, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context8 = ownKeys(Object(t))).call(_context8, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Chatbox = function Chatbox(props) {
   var _userInfo$uid3;
+  var client = agoraChatUikit.useClient();
   var _useContext = React.useContext(context.Context),
     http = _useContext.http,
     setRightComponent = _useContext.setRightComponent,
@@ -52,10 +53,10 @@ var Chatbox = function Chatbox(props) {
     modal = _Modal$useModal2[0],
     contextHolder = _Modal$useModal2[1];
   var _useState7 = React.useState({
-      headerImageURL: '',
-      conversationName: '',
+      headerImageURL: "",
+      conversationName: "",
       memberCount: 0,
-      chatType: 'singleChat'
+      chatType: "singleChat"
     }),
     _useState8 = _slicedToArray(_useState7, 2),
     headerInfo = _useState8[0],
@@ -106,7 +107,7 @@ var Chatbox = function Chatbox(props) {
   var renderMessage = function renderMessage(msg) {
     if (msg.type === "txt") {
       return renderTxtMsg(msg);
-    } else if (msg.type === 'img') {
+    } else if (msg.type === "img") {
       var _ref2;
       return /*#__PURE__*/React.createElement(agoraChatUikit.ImageMessage, {
         reaction: false,
@@ -118,7 +119,7 @@ var Chatbox = function Chatbox(props) {
         },
         imageMessage: msg
       });
-    } else if (msg.type === 'file') {
+    } else if (msg.type === "file") {
       var _ref3;
       return /*#__PURE__*/React.createElement(agoraChatUikit.FileMessage, {
         reaction: false,
@@ -136,7 +137,7 @@ var Chatbox = function Chatbox(props) {
         customAction: (_ref3 = type.commonMessageProps && (type.commonMessageProps === null || type.commonMessageProps === void 0 ? void 0 : type.commonMessageProps.customAction)) !== null && _ref3 !== void 0 ? _ref3 : undefined,
         fileMessage: msg
       });
-    } else if (msg.type === 'video') {
+    } else if (msg.type === "video") {
       var _ref4;
       return /*#__PURE__*/React.createElement(agoraChatUikit.VideoMessage, {
         reaction: false,
@@ -148,7 +149,7 @@ var Chatbox = function Chatbox(props) {
         customAction: (_ref4 = type.commonMessageProps && (type.commonMessageProps === null || type.commonMessageProps === void 0 ? void 0 : type.commonMessageProps.customAction)) !== null && _ref4 !== void 0 ? _ref4 : undefined,
         videoMessage: msg
       });
-    } else if (msg.type === 'audio') {
+    } else if (msg.type === "audio") {
       var _ref5;
       return /*#__PURE__*/React.createElement(agoraChatUikit.AudioMessage, {
         reaction: false,
@@ -157,7 +158,7 @@ var Chatbox = function Chatbox(props) {
         customAction: (_ref5 = type.commonMessageProps && (type.commonMessageProps === null || type.commonMessageProps === void 0 ? void 0 : type.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')) {
+    } 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(agoraChatUikit.BaseMessage, {
@@ -170,7 +171,7 @@ var Chatbox = function Chatbox(props) {
         reaction: false,
         select: false,
         thread: false,
-        direction: isMySelf ? 'rtl' : 'ltr',
+        direction: isMySelf ? "rtl" : "ltr",
         renderUserProfile: function renderUserProfile() {
           return null;
         },
@@ -190,7 +191,7 @@ var Chatbox = function Chatbox(props) {
             return modal.confirm({
               content: /*#__PURE__*/React.createElement("span", {
                 className: "text-sm "
-              }, "Are you sure you want to delete and leave the group ", headerInfo.conversationName, " ?"),
+              }, "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(antd.Button, {
@@ -231,7 +232,7 @@ var Chatbox = function Chatbox(props) {
               sendbirdid: groupid
             };
             _context2.next = 4;
-            return http.post('/capi/account/imchannel/exitchannel', params);
+            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;
@@ -266,7 +267,7 @@ var Chatbox = function Chatbox(props) {
   var customHeader = function customHeader() {
     var menuNode = /*#__PURE__*/React.createElement("ul", {
       className: "cui-header-more"
-    }, agoraChatUikit.rootStore.conversationStore.currentCvs.chatType === 'groupChat' && /*#__PURE__*/React.createElement("li", {
+    }, agoraChatUikit.rootStore.conversationStore.currentCvs.chatType === "groupChat" && /*#__PURE__*/React.createElement("li", {
       className: "cui-li-dark",
       onClick: function onClick() {
         setRightComponent && setRightComponent(/*#__PURE__*/React.createElement(index$1, null));
@@ -297,7 +298,7 @@ var Chatbox = function Chatbox(props) {
         });
         setMidComponent && setMidComponent(undefined);
       }
-    }, "Delete Chat"), agoraChatUikit.rootStore.conversationStore.currentCvs.chatType === 'groupChat' && /*#__PURE__*/React.createElement("li", {
+    }, "Delete Chat"), agoraChatUikit.rootStore.conversationStore.currentCvs.chatType === "groupChat" && /*#__PURE__*/React.createElement("li", {
       className: "cui-li-dark",
       onClick: function onClick() {
         setIsTopMenuOpen(false);
@@ -310,7 +311,7 @@ var Chatbox = function Chatbox(props) {
       onClick: function onClick() {
         return props.onClickHeaderBack({
           conversationId: agoraChatUikit.rootStore.conversationStore.currentCvs.conversationId,
-          chatType: agoraChatUikit.rootStore.conversationStore.currentCvs.chatType === 'groupChat' ? 'groupChat' : 'singleChat'
+          chatType: agoraChatUikit.rootStore.conversationStore.currentCvs.chatType === "groupChat" ? "groupChat" : "singleChat"
         });
       },
       className: "flex items-center gap-2"
@@ -325,14 +326,14 @@ var Chatbox = function Chatbox(props) {
       }
     }), !mobile && /*#__PURE__*/React.createElement("img", {
       src: headerInfo.headerImageURL,
-      className: "w-12 h-12 ".concat(headerInfo.chatType === 'groupChat' ? 'rounded-md' : 'rounded-full', " bg-blue")
+      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", {
+    }, headerInfo.conversationName), headerInfo.chatType === "groupChat" && /*#__PURE__*/React.createElement("p", {
       style: {
-        color: 'var(--im-third-fontColor)'
+        color: "var(--im-third-fontColor)"
       },
       className: "text-sm"
     }, headerInfo.memberCount, " members"))), mobile && /*#__PURE__*/React.createElement("div", {
@@ -340,10 +341,10 @@ var Chatbox = function Chatbox(props) {
       onClick: function onClick() {
         return props.onClickHeaderBack({
           conversationId: agoraChatUikit.rootStore.conversationStore.currentCvs.conversationId,
-          chatType: agoraChatUikit.rootStore.conversationStore.currentCvs.chatType === 'groupChat' ? 'groupChat' : 'singleChat'
+          chatType: agoraChatUikit.rootStore.conversationStore.currentCvs.chatType === "groupChat" ? "groupChat" : "singleChat"
         });
       }
-    }, /*#__PURE__*/React.createElement("span", null, headerInfo.conversationName, headerInfo.chatType === 'groupChat' ? "(".concat(headerInfo.memberCount, ")") : '')), /*#__PURE__*/React.createElement(agoraChatUikit.Tooltip, {
+    }, /*#__PURE__*/React.createElement("span", null, headerInfo.conversationName, headerInfo.chatType === "groupChat" ? "(".concat(headerInfo.memberCount, ")") : "")), /*#__PURE__*/React.createElement(agoraChatUikit.Tooltip, {
       title: menuNode,
       trigger: "click",
       placement: "bottom",
@@ -375,9 +376,9 @@ var Chatbox = function Chatbox(props) {
         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 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 : '';
+          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,
@@ -391,33 +392,14 @@ var Chatbox = function Chatbox(props) {
         }
       });
     } else {
-      var appUsersInfo = agoraChatUikit.rootStore.addressStore.appUsersInfo[cvs.conversationId];
-      if (!appUsersInfo) {
-        agoraChatUikit.rootStore.addressStore.getUserInfo(cvs.conversationId);
-        agoraChatUikit.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 : '';
+      client.fetchUserInfoById([cvs.conversationId], ["nickname", "avatarurl", "mail", "phone", "gender", "sign", "birth", "ext"]).then(function (res) {
         setHeaderInfo(function (prevState) {
           return _objectSpread(_objectSpread({}, prevState), {}, {
-            headerImageURL: imageurl,
-            conversationName: name
+            headerImageURL: res.data[cvs.conversationId].avatarurl,
+            conversationName: res.data[cvs.conversationId].nickname
           });
         });
-      }
+      });
     }
   };
   function getShareGroupInfo(_x2, _x3) {
@@ -453,7 +435,7 @@ var Chatbox = function Chatbox(props) {
               } else {
                 //显示指定的群
                 conversation = {
-                  chatType: 'groupChat',
+                  chatType: "groupChat",
                   conversationId: groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.sendbirdid,
                   lastMessage: {},
                   unreadCount: 0,
@@ -463,7 +445,7 @@ var Chatbox = function Chatbox(props) {
                 agoraChatUikit.rootStore.conversationStore.addConversation(conversation);
                 agoraChatUikit.rootStore.conversationStore.setCurrentCvs({
                   conversationId: groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.sendbirdid,
-                  chatType: 'groupChat'
+                  chatType: "groupChat"
                 });
               }
             } else {
@@ -478,7 +460,7 @@ var Chatbox = function Chatbox(props) {
     return _getShareGroupInfo.apply(this, arguments);
   }
   var clickCustomGroupCardMsg = /*#__PURE__*/function () {
-    var _ref12 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(msg) {
+    var _ref11 = _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) {
@@ -489,7 +471,7 @@ var Chatbox = function Chatbox(props) {
             }
             return _context3.abrupt("return");
           case 2:
-            if (!(msg.customEvent == 'im_group_share')) {
+            if (!(msg.customEvent == "im_group_share")) {
               _context3.next = 15;
               break;
             }
@@ -518,7 +500,7 @@ var Chatbox = function Chatbox(props) {
             break;
           case 15:
             conversation = {
-              chatType: 'singleChat',
+              chatType: "singleChat",
               conversationId: (_msg$customExts3 = msg.customExts) === null || _msg$customExts3 === void 0 ? void 0 : _msg$customExts3.objectId,
               lastMessage: {},
               unreadCount: 0,
@@ -528,7 +510,7 @@ var Chatbox = function Chatbox(props) {
             agoraChatUikit.rootStore.conversationStore.addConversation(conversation);
             agoraChatUikit.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'
+              chatType: "singleChat"
             });
           case 18:
           case "end":
@@ -537,12 +519,12 @@ var Chatbox = function Chatbox(props) {
       }, _callee3, null, [[4, 11]]);
     }));
     return function clickCustomGroupCardMsg(_x4) {
-      return _ref12.apply(this, arguments);
+      return _ref11.apply(this, arguments);
     };
   }();
   // 给agent 发送消息需要调用该接口
   var sendAgentMsg = /*#__PURE__*/function () {
-    var _ref13 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _ref12 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
       var userid,
         content,
         options,
@@ -550,15 +532,15 @@ var Chatbox = function Chatbox(props) {
       return _regeneratorRuntime.wrap(function _callee4$(_context4) {
         while (1) switch (_context4.prev = _context4.next) {
           case 0:
-            userid = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : '';
-            content = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : '';
+            userid = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : "";
+            content = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : "";
             _context4.prev = 2;
             options = {
               userid: userid,
               content: content
             };
             _context4.next = 6;
-            return http.post('/api/imchannel/sendagentmessage', options);
+            return http.post("/api/imchannel/sendagentmessage", options);
           case 6:
             _context4.next = 11;
             break;
@@ -573,15 +555,15 @@ var Chatbox = function Chatbox(props) {
       }, _callee4, null, [[2, 8]]);
     }));
     return function sendAgentMsg() {
-      return _ref13.apply(this, arguments);
+      return _ref12.apply(this, arguments);
     };
   }();
   var afterSendMsg = /*#__PURE__*/function () {
-    var _ref14 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(msgInfo) {
+    var _ref13 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(msgInfo) {
       return _regeneratorRuntime.wrap(function _callee5$(_context5) {
         while (1) switch (_context5.prev = _context5.next) {
           case 0:
-            if (agoraChatUikit.rootStore.conversationStore.currentCvs.chatType === 'singleChat') {
+            if (agoraChatUikit.rootStore.conversationStore.currentCvs.chatType === "singleChat") {
               sendAgentMsg(agoraChatUikit.rootStore.conversationStore.currentCvs.conversationId, msgInfo.msg);
             }
           case 1:
@@ -591,7 +573,7 @@ var Chatbox = function Chatbox(props) {
       }, _callee5);
     }));
     return function afterSendMsg(_x5) {
-      return _ref14.apply(this, arguments);
+      return _ref13.apply(this, arguments);
     };
   }();
   React.useEffect(function () {
@@ -627,7 +609,7 @@ var Chatbox = function Chatbox(props) {
     onClose: function onClose() {
       return setShowJoinGroupDialog(false);
     },
-    userId: (_userInfo$uid3 = userInfo.uid) !== null && _userInfo$uid3 !== void 0 ? _userInfo$uid3 : '',
+    userId: (_userInfo$uid3 = userInfo.uid) !== null && _userInfo$uid3 !== void 0 ? _userInfo$uid3 : "",
     visible: showJoinGroupDialog,
     shareGroupInfo: joinGroupInfo
   }));

package/cjs/CustomChatView/index.js

@@ -57,25 +57,44 @@ var CustomChatView = function CustomChatView(props) {
   var renderTxtMsg = function renderTxtMsg(msg) {
     var _userInfo$uid;
     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(agoraChatUikit.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,
+    // return (
+    //     <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}
+    //         showTranslation={false}
+    //         renderUserProfile={() => null}
+    //         customAction={
+    //             {
+    //                 visible: false,
+    //                 icon: null,
+    //                 actions: []
+    //             }
+    //         }
+    //     ></TextMessage>
+    // );
+    return /*#__PURE__*/React.createElement(agoraChatUikit.BaseMessage, {
+      bubbleType: 'none',
       reaction: false,
       select: false,
       thread: false,
-      showTranslation: false,
+      direction: isMySelf ? 'rtl' : 'ltr',
       renderUserProfile: function renderUserProfile() {
         return null;
       },
-      customAction: undefined
+      nickName: undefined,
+      showMessageInfo: false,
+      customAction: {
+        visible: false,
+        icon: null,
+        actions: []
+      },
+      children: renderLongTextMsg(msg)
     });
   };
   var renderShareCardMsg = function renderShareCardMsg(msg) {
@@ -97,6 +116,35 @@ var CustomChatView = function CustomChatView(props) {
       className: "ml-2 text-base font-semibold leading-normal ellipsis"
     }, msg.customExts.title)));
   };
+  var renderLongTextMsg = function renderLongTextMsg(msg) {
+    var _userInfo$uid2;
+    // 格式化消息时间
+    var formatMessageTime = function formatMessageTime(timestamp) {
+      if (!timestamp) return '';
+      var date = new Date(timestamp);
+      return date.toLocaleString('zh-CN', {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false
+      });
+    };
+    var isMySelf = (msg === null || msg === void 0 ? void 0 : msg.bySelf) === true || (msg === null || msg === void 0 ? void 0 : msg.from.toLowerCase()) === ((_userInfo$uid2 = userInfo.uid) === null || _userInfo$uid2 === void 0 ? void 0 : _userInfo$uid2.toLowerCase());
+    return /*#__PURE__*/React.createElement("div", {
+      className: "text-[var(--im-main-fontColor)] flex flex-col gap-1 ".concat(isMySelf ? 'items-end' : 'items-start')
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        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)"
+      },
+      className: "inline-block"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "cui-message-text"
+    }, msg.msg)), /*#__PURE__*/React.createElement("span", {
+      className: "cui-message-base-time"
+    }, formatMessageTime(msg.time)));
+  };
   var _renderMessage = function renderMessage(msg) {
     if (msg.type === "txt") {
       return renderTxtMsg(msg);
@@ -108,7 +156,11 @@ var CustomChatView = function CustomChatView(props) {
         renderUserProfile: function renderUserProfile() {
           return null;
         },
-        customAction: undefined,
+        customAction: {
+          visible: false,
+          icon: null,
+          actions: []
+        },
         imageMessage: msg
       });
     } else if (msg.type === 'file') {
@@ -125,7 +177,11 @@ var CustomChatView = function CustomChatView(props) {
         renderUserProfile: function renderUserProfile() {
           return null;
         },
-        customAction: undefined,
+        customAction: {
+          visible: false,
+          icon: null,
+          actions: []
+        },
         fileMessage: msg
       });
     } else if (msg.type === 'video') {
@@ -136,7 +192,11 @@ var CustomChatView = function CustomChatView(props) {
         renderUserProfile: function renderUserProfile() {
           return null;
         },
-        customAction: undefined,
+        customAction: {
+          visible: false,
+          icon: null,
+          actions: []
+        },
         videoMessage: msg
       });
     } else if (msg.type === 'audio') {
@@ -147,12 +207,16 @@ var CustomChatView = function CustomChatView(props) {
         renderUserProfile: function renderUserProfile() {
           return null;
         },
-        customAction: undefined,
+        customAction: {
+          visible: false,
+          icon: null,
+          actions: []
+        },
         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;
-      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());
+      var _userInfo$uid3;
+      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$uid3 = userInfo.uid) === null || _userInfo$uid3 === void 0 ? void 0 : _userInfo$uid3.toLowerCase());
       return /*#__PURE__*/React.createElement(agoraChatUikit.BaseMessage, {
         bubbleStyle: {
           background: isMySelf ? "var(--im-msg-bubble-color-right)" : "var(--im-msg-bubble-color-left)",
@@ -167,7 +231,11 @@ var CustomChatView = function CustomChatView(props) {
         renderUserProfile: function renderUserProfile() {
           return null;
         },
-        customAction: undefined,
+        customAction: {
+          visible: false,
+          icon: null,
+          actions: []
+        },
         children: renderShareCardMsg(msg)
       });
     } else {

package/cjs/IM/index.js

@@ -28,6 +28,7 @@ var IM = function IM(props) {
     _props$mobile = props.mobile,
     mobile = _props$mobile === void 0 ? false : _props$mobile,
     onChatIconClick = props.onChatIconClick;
+  console.log('the useinfo is', userInfo);
   var agoraToken = useGetAgoraToken.useGetAgoraToken(http, userInfo.uid);
   var _useState = React.useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -84,7 +85,7 @@ var IM = function IM(props) {
     }
   }, /*#__PURE__*/React.createElement(agoraChatUikit.UIKitProvider, {
     initConfig: {
-      userId: userInfo.uid.toString(),
+      userId: userInfo.uid,
       appKey: appKey,
       token: agoraToken
     },

package/cjs/Sidebar/CustomConversationItem/index.js

@@ -28,8 +28,13 @@ var CustomConversationItem = function CustomConversationItem(props) {
     _useState2 = _slicedToArray(_useState, 2),
     avatar = _useState2[0],
     setAvatar = _useState2[1];
+  var _useState3 = React.useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    name = _useState4[0],
+    setName = _useState4[1];
   var _useConversationConte = agoraChatUikit.useConversationContext(),
     setCurrentConversation = _useConversationConte.setCurrentConversation;
+  var client = agoraChatUikit.useClient();
   cvs.chatType === "groupChat" && agoraChatUikit.rootStore.addressStore.getGroupInfo(cvs.conversationId);
   React.useEffect(function () {
     if (cvs.chatType === "groupChat") {
@@ -50,25 +55,15 @@ var CustomConversationItem = function CustomConversationItem(props) {
         }
       }
     } else {
-      var imageUrl = "";
       if (!cvs || !cvs.conversationId) {
         return;
       }
-      var appUsersInfo = agoraChatUikit.rootStore.addressStore.appUsersInfo[cvs.conversationId];
-      if (!appUsersInfo) {
-        agoraChatUikit.rootStore.addressStore.getUserInfo(cvs.conversationId).then(function (value) {
-          if (value) {
-            var _value$avatarurl;
-            imageUrl = (_value$avatarurl = value === null || value === void 0 ? void 0 : value.avatarurl) !== null && _value$avatarurl !== void 0 ? _value$avatarurl : "";
-          }
-        });
-      } else {
-        var _appUsersInfo$avataru;
-        imageUrl = (_appUsersInfo$avataru = appUsersInfo === null || appUsersInfo === void 0 ? void 0 : appUsersInfo.avatarurl) !== null && _appUsersInfo$avataru !== void 0 ? _appUsersInfo$avataru : "";
-      }
-      setAvatar(imageUrl);
+      client.fetchUserInfoById([cvs.conversationId], ["nickname", "avatarurl", "mail", "phone", "gender", "sign", "birth", "ext"]).then(function (res) {
+        setAvatar(res.data[cvs.conversationId].avatarurl);
+        setName(res.data[cvs.conversationId].nickname);
+      });
     }
-  }, [cvs, cvs.chatType, cvs.conversationId, http]);
+  }, [client, cvs, cvs.chatType, cvs.conversationId, http]);
   return /*#__PURE__*/React.createElement(agoraChatUikit.ConversationItem, {
     className: "yuze-conversationItem",
     avatar: /*#__PURE__*/React.createElement("div", {
@@ -82,7 +77,9 @@ var CustomConversationItem = function CustomConversationItem(props) {
     }), cvs.unreadCount > 0 && /*#__PURE__*/React.createElement("div", {
       className: "text-sm absolute yuze-conversationItem-avatar-notice"
     }, cvs.unreadCount > 99 ? "99+" : cvs.unreadCount)),
-    data: _objectSpread({}, cvs),
+    data: _objectSpread(_objectSpread({}, cvs), {}, {
+      name: name
+    }),
     moreAction: {
       actions: [],
       visible: true,

package/cjs/Sidebar/index.js

@@ -74,6 +74,7 @@ var Sidebar = function Sidebar(props) {
       },
       renderItem: function renderItem(cvs) {
         return /*#__PURE__*/React.createElement(index$2, {
+          key: cvs.conversationId,
           cvs: cvs,
           onClick: function onClick() {
             if (props.onConversationItemClick) {