whyuzeim 1.1.99 → 1.1.100

package/cjs/AddMember/index.js

@@ -16,9 +16,12 @@ var index$1 = require('../TypeItem/index.js');
 var context = require('../IM/context.js');
 var antd = require('antd');
 var useDebounce = require('use-debounce');
+var LocaleContext = require('../contexts/LocaleContext.js');
 require('./style/index.scss');
 
 var AddMember = function AddMember() {
+  var _useTranslation = LocaleContext.useTranslation(),
+    t = _useTranslation.t;
   var _useContext = React.useContext(context.Context),
     setRightComponent = _useContext.setRightComponent;
   var _useState = React.useState(""),
@@ -123,11 +126,11 @@ var AddMember = function AddMember() {
     type: "primary",
     onClick: handleDebouncdAddMember,
     loading: loading
-  }, "Confirm")), /*#__PURE__*/React.createElement("div", {
+  }, t('common.confirm'))), /*#__PURE__*/React.createElement("div", {
     className: "yuze-addMember-member p-4"
   }, /*#__PURE__*/React.createElement("span", {
     className: "block text-center"
-  }, "Member"), /*#__PURE__*/React.createElement(index, {
+  }, t('common.member')), /*#__PURE__*/React.createElement(index, {
     className: "yuze-searchBox-list-content p-4",
     keyword: keyword,
     groupId: "",

package/cjs/ChatBox/index.js

@@ -26,10 +26,13 @@ var index$1 = require('../AddMember/index.js');
 var tools = require('../tools.js');
 var avatar_default = require('../Icon/avatar_default.svg.js');
 var index = require('../HighlyCustomChat/index.js');
+var LocaleContext = require('../contexts/LocaleContext.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 _useTranslation = LocaleContext.useTranslation(),
+    t = _useTranslation.t;
   var client = agoraChatUikit.useClient();
   var _useContext = React.useContext(context.Context),
     http = _useContext.http,
@@ -274,7 +277,7 @@ var Chatbox = function Chatbox(props) {
                 onClick: function onClick() {
                   antd.Modal.destroyAll();
                 }
-              }, "Close"), /*#__PURE__*/React.createElement(antd.Button, {
+              }, t('common.close')), /*#__PURE__*/React.createElement(antd.Button, {
                 type: "primary",
                 className: "flex-1",
                 size: "large",
@@ -282,7 +285,7 @@ var Chatbox = function Chatbox(props) {
                   setIsTopMenuOpen(false);
                   leaveGroup(agoraChatUikit.rootStore.conversationStore.currentCvs.conversationId);
                 }
-              }, "Confirm"))
+              }, t('common.confirm')))
             });
           case 2:
           case "end":
@@ -347,7 +350,7 @@ var Chatbox = function Chatbox(props) {
         setRightComponent && setRightComponent(/*#__PURE__*/React.createElement(index$1, null));
         setIsTopMenuOpen(false);
       }
-    }, "Add Members"), /*#__PURE__*/React.createElement("li", {
+    }, t('group.addMember')), /*#__PURE__*/React.createElement("li", {
       className: "".concat(theme === "light" ? "im-light yuze-li" : "im-dark yuze-li"),
       onClick: function onClick() {
         var cvs = agoraChatUikit.rootStore.conversationStore.currentCvs;
@@ -359,7 +362,7 @@ var Chatbox = function Chatbox(props) {
         });
         setIsTopMenuOpen(false);
       }
-    }, "Clear Messages"), /*#__PURE__*/React.createElement("li", {
+    }, t('conversation.clearMessages')), /*#__PURE__*/React.createElement("li", {
       className: "".concat(theme === "light" ? "im-light yuze-li" : "im-dark yuze-li"),
       onClick: function onClick() {
         setIsTopMenuOpen(false);
@@ -372,13 +375,13 @@ var Chatbox = function Chatbox(props) {
         });
         setMidComponent && setMidComponent(undefined);
       }
-    }, "Delete Chat"), agoraChatUikit.rootStore.conversationStore.currentCvs.chatType === "groupChat" && /*#__PURE__*/React.createElement("li", {
+    }, t('conversation.deleteChat')), agoraChatUikit.rootStore.conversationStore.currentCvs.chatType === "groupChat" && /*#__PURE__*/React.createElement("li", {
       className: "".concat(theme === "light" ? "im-light yuze-li" : "im-dark yuze-li"),
       onClick: function onClick() {
         setIsTopMenuOpen(false);
         handleConfirmRemove();
       }
-    }, "Leave Group"));
+    }, t('group.leaveGroup')));
     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", {
@@ -410,7 +413,9 @@ var Chatbox = function Chatbox(props) {
         color: "var(--im-third-fontColor)"
       },
       className: "text-sm"
-    }, headerInfo.memberCount, " members"))), mobile && /*#__PURE__*/React.createElement("div", {
+    }, t('group.memberCount', {
+      count: headerInfo.memberCount
+    })))), 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({
@@ -607,7 +612,7 @@ var Chatbox = function Chatbox(props) {
               cuiScrollList = document.querySelector(".cui-messageList .cui-scrollList div");
               cuiScrollListWrap = document.querySelector(".cui-messageList .cui-scrollList");
               if (cuiScrollList) {
-                htmlString = "<div id=\"agent-generating-loader\" class=\"cui-messageList-msgItem\"><div><div class=\"thread-container\"><div id=\"1393207307050949578\" class=\"cui-message-base cui-message-base-left cui-message-base-hasAvatar cui-message-base-secondly cui-message-base-square cui-message-base-dark\"><img src=\"/icon/im/avatar_default.svg\" class=\"w-[48px] h-[48px] rounded-full overflow-hidden object-fit\"><div class=\"cui-message-base-box\"><div class=\"cui-message-base-info\"></div><div class=\"cui-message-base-body\"><div class=\"cui-message-base-content\" style=\"background: var(--im-msg-bubble-color-left); border-radius: 9px; padding: 10px 12px; color: var(--im-msg-bubble-font-color);\"><div style=\"display:flex;align-items:center\"><div class=\"generating-loader-wrap\"><div class=\"generating-loader\"></div></div><span class=\"cui-message-text\">Generating</span></div></div><div class=\"cui-message-base-time-and-status-box\"><span class=\"cui-message-status cui-message-status-icon\"></span><span class=\"cui-message-base-time\"></span></div></div></div></div></div></div><div class=\"cui-modal-root\"><div tabindex=\"-1\" class=\"cui-modal-wrap modify-message-modal\" style=\"display: none;\"></div></div></div>";
+                htmlString = "<div id=\"agent-generating-loader\" class=\"cui-messageList-msgItem\"><div><div class=\"thread-container\"><div id=\"1393207307050949578\" class=\"cui-message-base cui-message-base-left cui-message-base-hasAvatar cui-message-base-secondly cui-message-base-square cui-message-base-dark\"><img src=\"/icon/im/avatar_default.svg\" class=\"w-[48px] h-[48px] rounded-full overflow-hidden object-fit\"><div class=\"cui-message-base-box\"><div class=\"cui-message-base-info\"></div><div class=\"cui-message-base-body\"><div class=\"cui-message-base-content\" style=\"background: var(--im-msg-bubble-color-left); border-radius: 9px; padding: 10px 12px; color: var(--im-msg-bubble-font-color);\"><div style=\"display:flex;align-items:center\"><div class=\"generating-loader-wrap\"><div class=\"generating-loader\"></div></div><span class=\"cui-message-text\">".concat(t('common.generating'), "</span></div></div><div class=\"cui-message-base-time-and-status-box\"><span class=\"cui-message-status cui-message-status-icon\"></span><span class=\"cui-message-base-time\"></span></div></div></div></div></div></div><div class=\"cui-modal-root\"><div tabindex=\"-1\" class=\"cui-modal-wrap modify-message-modal\" style=\"display: none;\"></div></div></div>");
                 template = document.createElement('template');
                 template.innerHTML = _trimInstanceProperty(htmlString).call(htmlString);
                 node = template.content.firstChild;

package/cjs/GroupDetail/GroupDetailEditView/index.js

@@ -18,11 +18,14 @@ var context = require('../../IM/context.js');
 var antd = require('antd');
 require('../../IM/style/index.scss');
 var agoraChatUikit = require('agora-chat-uikit');
+var LocaleContext = require('../../contexts/LocaleContext.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 GroupDetailEditView = function GroupDetailEditView(props) {
   var _props$groupInfo$head, _props$groupInfo, _props$groupInfo$name, _props$groupInfo2, _props$groupInfo3, _context4;
+  var _useTranslation = LocaleContext.useTranslation(),
+    t = _useTranslation.t;
   var _useState = React.useState({
       imageUrl: (_props$groupInfo$head = (_props$groupInfo = props.groupInfo) === null || _props$groupInfo === void 0 ? void 0 : _props$groupInfo.headimgurl) !== null && _props$groupInfo$head !== void 0 ? _props$groupInfo$head : '',
       // 群组头像 URL
@@ -205,7 +208,7 @@ var GroupDetailEditView = function GroupDetailEditView(props) {
     d: "M6 18L18 6M6 6l12 12"
   }))), /*#__PURE__*/React.createElement("span", {
     className: "ml-2 text-[var(--im-main-fontColor)]"
-  }, "Edit")), /*#__PURE__*/React.createElement("div", {
+  }, t('common.edit'))), /*#__PURE__*/React.createElement("div", {
     className: "my-10"
   }, /*#__PURE__*/React.createElement("div", {
     className: "flex justify-center"
@@ -235,11 +238,11 @@ var GroupDetailEditView = function GroupDetailEditView(props) {
     className: "w-20 h-20 rounded-lg bg-black-60 flex items-center justify-center"
   }, /*#__PURE__*/React.createElement("span", {
     className: "text-[var(--im-main-fontColor)]"
-  }, "Upload Avatar")))))), /*#__PURE__*/React.createElement("div", {
+  }, t('group.uploadAvatar'))))))), /*#__PURE__*/React.createElement("div", {
     className: "gap-2 flex flex-col mt-4 gap-2 mx-4"
   }, /*#__PURE__*/React.createElement("span", {
     className: "text-[var(--im-seven-fontColor)] text-sm font-normal"
-  }, "Group Name"), /*#__PURE__*/React.createElement("div", {
+  }, t('group.groupName')), /*#__PURE__*/React.createElement("div", {
     className: "w-full min-h-12 px-4 py-3 rounded-sm bg-[var(--im-main-bg-ten)]"
   }, /*#__PURE__*/React.createElement("div", {
     ref: nameInputRef,
@@ -250,7 +253,7 @@ var GroupDetailEditView = function GroupDetailEditView(props) {
     className: "gap-2 flex flex-col mt-4 mx-4"
   }, /*#__PURE__*/React.createElement("span", {
     className: "text-[var(--im-seven-fontColor)] text-sm font-normal"
-  }, "Description"), /*#__PURE__*/React.createElement("div", {
+  }, t('common.description')), /*#__PURE__*/React.createElement("div", {
     className: "w-full min-h-12 px-4 py-3 rounded-sm bg-[var(--im-main-bg-ten)]"
   }, /*#__PURE__*/React.createElement("div", {
     ref: descriptionInputRef,
@@ -260,7 +263,7 @@ var GroupDetailEditView = function GroupDetailEditView(props) {
   }))), /*#__PURE__*/React.createElement("div", {
     className: "mt-4 mx-4  p-4 h-12 text-center text-base leading-normal font-semibold rounded-md cursor-pointer text-[var(--im-six-fontColor)] bg-[var(--im-green)] ".concat(_trimInstanceProperty(_context4 = groupForm.name).call(_context4) === '' ? 'opacity-50' : ''),
     onClick: saveGroupInfo
-  }, "Save"));
+  }, t('common.save')));
 };
 
 module.exports = GroupDetailEditView;

package/cjs/GroupDetail/GroupShareView/index.js

@@ -8,8 +8,11 @@ var React = require('react');
 var context = require('../../IM/context.js');
 require('../../IM/style/index.scss');
 var agoraChatUikit = require('agora-chat-uikit');
+var LocaleContext = require('../../contexts/LocaleContext.js');
 
 var GroupShareView = function GroupShareView(props) {
+  var _useTranslation = LocaleContext.useTranslation(),
+    t = _useTranslation.t;
   var _useContext = React.useContext(context.Context),
     http = _useContext.http,
     userInfo = _useContext.userInfo;
@@ -117,9 +120,9 @@ var GroupShareView = function GroupShareView(props) {
     d: "M6 18L18 6M6 6l12 12"
   }))), /*#__PURE__*/React.createElement("span", {
     className: "ml-2 text-[var(--im-main-fontColor)]"
-  }, "Share")), /*#__PURE__*/React.createElement("p", {
+  }, t('group.share'))), /*#__PURE__*/React.createElement("p", {
     className: "text-[var(--im-main-fontColor)] text-base font-semibold text-center pt-6 px-4 pb-2.5 border-b border-[var(--im-main-bg-ten)]"
-  }, "Groups"), /*#__PURE__*/React.createElement("div", {
+  }, t('group.groups')), /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col mt-3 mx-4 gap-4 overflow-y-auto flex-1 min-h-0 pb-5 no-scrollbar"
   }, _mapInstanceProperty(groupList).call(groupList, function (groupinfo, index) {
     var _groupinfo$name, _groupinfo$members;
@@ -140,11 +143,13 @@ var GroupShareView = function GroupShareView(props) {
       className: "text-[var(--im-main-fontColor)] text-base font-semibold font-['Inter'] leading-normal"
     }, (_groupinfo$name = groupinfo === null || groupinfo === void 0 ? void 0 : groupinfo.name) !== null && _groupinfo$name !== void 0 ? _groupinfo$name : '-'), /*#__PURE__*/React.createElement("span", {
       className: "text-[var(--im-third-fontColor)] text-sm font-normal font-['Inter'] leading-snug"
-    }, (_groupinfo$members = groupinfo === null || groupinfo === void 0 ? void 0 : groupinfo.members) !== null && _groupinfo$members !== void 0 ? _groupinfo$members : 0, " members"))), /*#__PURE__*/React.createElement("div", {
+    }, t('group.memberCount', {
+      count: (_groupinfo$members = groupinfo === null || groupinfo === void 0 ? void 0 : groupinfo.members) !== null && _groupinfo$members !== void 0 ? _groupinfo$members : 0
+    })))), /*#__PURE__*/React.createElement("div", {
       className: "flex flex-shrink-0 items-center justify-center w-14 h-6 text-center bg-gradient-to-r from-[#9cff1e] via-[#9cff1e] to-[#9cff1e] rounded"
     }, /*#__PURE__*/React.createElement("span", {
       className: " text-[var(--im-six-fontColor)] text-xs font-medium leading-normal"
-    }, "Share")));
+    }, t('group.share'))));
   })));
 };
 

package/cjs/GroupDetail/image/icon_translation.svg.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var img = "data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.02273 10C2.02273 5.59427 5.59427 2.02273 10 2.02273C12.7648 2.02273 15.2025 3.42934 16.6342 5.56818H15.3182V7.34091H19.75V2.90909H17.9773V4.39303C16.2134 1.88804 13.2987 0.25 10 0.25C4.61522 0.25 0.25 4.61522 0.25 10H2.02273Z' fill='white' fill-opacity='0.4'/%3e%3cpath d='M9.99995 19.75C15.3847 19.75 19.75 15.3848 19.75 10H17.9772C17.9772 14.4057 14.4057 17.9773 9.99995 17.9773C7.23516 17.9773 4.79749 16.5707 3.36579 14.4318H4.68182V12.6591H0.25V17.0909H2.02273V15.607C3.7866 18.112 6.70132 19.75 9.99995 19.75Z' fill='white' fill-opacity='0.4'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.30758 5.23249L6.40385 13.4225C6.37904 13.5052 6.40799 13.5466 6.49072 13.5466H8.11631C8.19904 13.5466 8.25281 13.5052 8.27763 13.4225L8.74917 11.9458H11.7025L12.1865 13.4225C12.2113 13.5052 12.2651 13.5466 12.3478 13.5466H13.961C14.0437 13.5466 14.0727 13.5052 14.0479 13.4225L11.1938 5.23249C11.1689 5.14976 11.1152 5.1084 11.0324 5.1084H9.4689C9.38617 5.1084 9.3324 5.14976 9.30758 5.23249ZM11.2062 10.3947H9.25795L10.2134 7.44131H10.2507L11.2062 10.3947Z' fill='white' fill-opacity='0.4'/%3e%3c/svg%3e";
+
+module.exports = img;

package/cjs/GroupDetail/index.js

@@ -14,12 +14,15 @@ var ic_group_edit = require('./image/ic_group_edit.svg.js');
 var ic_messages = require('./image/ic_messages.svg.js');
 var index$2 = require('../TypeItem/index.js');
 var context = require('../IM/context.js');
+var LocaleContext = require('../contexts/LocaleContext.js');
 require('./style/index.scss');
 var index = require('./GroupDetailEditView/index.js');
 var index$1 = require('./GroupShareView/index.js');
 
 var GroupDetail = function GroupDetail(props) {
   var _groupInfo$sendbirdid;
+  var _useTranslation = LocaleContext.useTranslation(),
+    t = _useTranslation.t;
   var _useContext = React.useContext(context.Context),
     http = _useContext.http,
     mobile = _useContext.mobile,
@@ -180,7 +183,7 @@ var GroupDetail = function GroupDetail(props) {
     }
   })), /*#__PURE__*/React.createElement("span", {
     className: "text-base"
-  }, "Profile")), /*#__PURE__*/React.createElement("div", {
+  }, t('common.profile'))), /*#__PURE__*/React.createElement("div", {
     className: classNames("yuze-groupDetail-header-right")
   }, ((groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.roletype) === 1 || (groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.roletype) === 2) && /*#__PURE__*/React.createElement("img", {
     onClick: function onClick() {
@@ -211,11 +214,13 @@ var GroupDetail = function GroupDetail(props) {
     className: "text-base mt-1"
   }, groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.name), /*#__PURE__*/React.createElement("span", {
     className: "text-base text-[var(--im-third-fontColor)] font-normal mt-2"
-  }, groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.members, " members"))), /*#__PURE__*/React.createElement("div", {
+  }, t('group.memberCount', {
+    count: groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.members
+  })))), /*#__PURE__*/React.createElement("div", {
     className: "yuze-groupDetail-member p-4"
   }, /*#__PURE__*/React.createElement("span", {
     className: "block text-center"
-  }, "Member"), /*#__PURE__*/React.createElement("div", {
+  }, t('common.member')), /*#__PURE__*/React.createElement("div", {
     className: "yuze-groupDetail-member-list pt-4"
   }, _mapInstanceProperty(memberList).call(memberList, function (item) {
     return /*#__PURE__*/React.createElement(index$2, {

package/cjs/HighlyCustomChat/index.js

@@ -34,11 +34,14 @@ var index = require('./AIReportMsg/index.js');
 var index$3 = require('./ ShareMsg/index.js');
 var classNames = require('classnames');
 require('highlight.js/styles/night-owl.css');
+var LocaleContext = require('../contexts/LocaleContext.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 _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(t), true)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var HighlyCustomChat = function HighlyCustomChat(props) {
   var _props$className;
+  var _useTranslation = LocaleContext.useTranslation(),
+    t = _useTranslation.t;
   // 设置默认值
   var client = agoraChatUikit.useClient();
   var _props$showHeader = props.showHeader,
@@ -349,7 +352,9 @@ var HighlyCustomChat = function HighlyCustomChat(props) {
         color: "var(--im-third-fontColor)"
       },
       className: "text-sm"
-    }, headerInfo.memberCount, " members"))));
+    }, t('group.memberCount', {
+      count: headerInfo.memberCount
+    })))));
   };
   // First define initConversation with useCallback
   var initConversation = React.useCallback(function () {
@@ -464,7 +469,7 @@ var HighlyCustomChat = function HighlyCustomChat(props) {
               cuiScrollList = document.querySelector(".cui-messageList .cui-scrollList div");
               cuiScrollListWrap = document.querySelector(".cui-scrollList");
               if (cuiScrollList) {
-                htmlString = "<div id=\"agent-generating-loader\" class=\"cui-messageList-msgItem\"><div><div class=\"thread-container\"><div id=\"1393207307050949578\" class=\"cui-message-base cui-message-base-left cui-message-base-hasAvatar cui-message-base-secondly cui-message-base-square cui-message-base-dark\"><img src=\"/icon/im/avatar_default.svg\" class=\"w-[48px] h-[48px] rounded-full overflow-hidden object-fit\"><div class=\"cui-message-base-box\"><div class=\"cui-message-base-info\"></div><div class=\"cui-message-base-body\"><div class=\"cui-message-base-content\" style=\"background: var(--im-msg-bubble-color-left); border-radius: 9px; padding: 10px 12px; color: var(--im-msg-bubble-font-color);\"><div style=\"display:flex;align-items:center\"><div class=\"generating-loader-wrap\"><div class=\"generating-loader\"></div></div><span class=\"cui-message-text\">Generating</span></div></div><div class=\"cui-message-base-time-and-status-box\"><span class=\"cui-message-status cui-message-status-icon\"></span><span class=\"cui-message-base-time\"></span></div></div></div></div></div></div><div class=\"cui-modal-root\"><div tabindex=\"-1\" class=\"cui-modal-wrap modify-message-modal\" style=\"display: none;\"></div></div></div>";
+                htmlString = "<div id=\"agent-generating-loader\" class=\"cui-messageList-msgItem\"><div><div class=\"thread-container\"><div id=\"1393207307050949578\" class=\"cui-message-base cui-message-base-left cui-message-base-hasAvatar cui-message-base-secondly cui-message-base-square cui-message-base-dark\"><img src=\"/icon/im/avatar_default.svg\" class=\"w-[48px] h-[48px] rounded-full overflow-hidden object-fit\"><div class=\"cui-message-base-box\"><div class=\"cui-message-base-info\"></div><div class=\"cui-message-base-body\"><div class=\"cui-message-base-content\" style=\"background: var(--im-msg-bubble-color-left); border-radius: 9px; padding: 10px 12px; color: var(--im-msg-bubble-font-color);\"><div style=\"display:flex;align-items:center\"><div class=\"generating-loader-wrap\"><div class=\"generating-loader\"></div></div><span class=\"cui-message-text\">".concat(t('common.generating'), "</span></div></div><div class=\"cui-message-base-time-and-status-box\"><span class=\"cui-message-status cui-message-status-icon\"></span><span class=\"cui-message-base-time\"></span></div></div></div></div></div></div><div class=\"cui-modal-root\"><div tabindex=\"-1\" class=\"cui-modal-wrap modify-message-modal\" style=\"display: none;\"></div></div></div>");
                 template = document.createElement('template');
                 template.innerHTML = _trimInstanceProperty(htmlString).call(htmlString);
                 node = template.content.firstChild;
@@ -523,7 +528,7 @@ var HighlyCustomChat = function HighlyCustomChat(props) {
     className: "bg-[var(--im-main-backgroundColor)] im-agent-mid ".concat((_props$className = props.className) !== null && _props$className !== void 0 ? _props$className : "", " w-full h-full overflow-hidden flex flex-col")
   }, loading ? /*#__PURE__*/React.createElement("div", {
     className: "flex-1 flex items-center justify-center text-gray-500"
-  }, "Loading...") // 显示加载状态
+  }, t('common.loading')) // 显示加载状态
   : /*#__PURE__*/React.createElement(React.Fragment, null, showHeader === true && customHeader(), showHeader === false && currentConversation && props.renderHeader && props.renderHeader(currentConversation), /*#__PURE__*/React.createElement(agoraChatUikit.MessageList, {
     className: "w-full flex-1",
     conversation: {
@@ -543,7 +548,7 @@ var HighlyCustomChat = function HighlyCustomChat(props) {
     if (!customInputView) {
       return /*#__PURE__*/React.createElement(agoraChatUikit.MessageInput, _extends({
         enabledTyping: true,
-        placeHolder: (currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.chatType) === 'groupChat' ? "Send a message to group" : "Type a message...",
+        placeHolder: (currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.chatType) === 'groupChat' ? t('conversation.sendMessageToGroup') : t('conversation.typeMessage'),
         conversation: {
           conversationId: props.conversationId,
           chatType: props.chatType

package/cjs/IM/index.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { AxiosInstance } from "axios";
 import { Conversation } from "agora-chat-uikit";
 import { IUserInfo } from "./context";
+import { Locale } from "../contexts/LocaleContext";
 import "agora-chat-uikit/style.css";
 import "./style/index.scss";
 export type IIMProps = {
@@ -17,6 +18,8 @@ export type IIMProps = {
     mobile?: boolean;
     onChatIconClick?: () => void;
     canSidebarExpand?: boolean;
+    locale?: Locale;
+    onLocaleChange?: (locale: Locale) => void;
     additionalConversations?: Conversation[];
     onAdditionalConversationClick?: (conversation: Conversation) => Promise<boolean>;
     onRenderConversationItem?: (cvs: Conversation, defaultConversationItemClick: (conversation: Conversation) => void) => React.ReactElement | undefined;

package/cjs/IM/index.js

@@ -6,6 +6,7 @@ var classNames = require('classnames');
 var agoraChatUikit = require('agora-chat-uikit');
 var context = require('./context.js');
 var useGetAgoraToken = require('./hooks/useGetAgoraToken.js');
+var LocaleContext = require('../contexts/LocaleContext.js');
 var index = require('../Exit/index.js');
 require('agora-chat-uikit/style.css');
 require('./style/index.scss');
@@ -31,7 +32,9 @@ var IM = function IM(props) {
     additionalConversations = props.additionalConversations,
     onAdditionalConversationClick = props.onAdditionalConversationClick,
     onRenderConversationItem = props.onRenderConversationItem,
-    canSidebarExpand = props.canSidebarExpand;
+    canSidebarExpand = props.canSidebarExpand,
+    locale = props.locale,
+    onLocaleChange = props.onLocaleChange;
   window.AGAIN_ENTER_IM_INIT = false;
   console.log("the useinfo is", userInfo);
   var agoraToken = useGetAgoraToken.useGetAgoraToken(http, userInfo.uid);
@@ -71,7 +74,10 @@ var IM = function IM(props) {
       }
     }));
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(LocaleContext.LocaleProvider, {
+    locale: locale,
+    onLocaleChange: onLocaleChange
+  }, /*#__PURE__*/React.createElement("div", {
     className: classNames("im-".concat(theme), className),
     style: style
   }, /*#__PURE__*/React.createElement(context.Context.Provider, {
@@ -135,7 +141,7 @@ var IM = function IM(props) {
         }
       }
     }
-  }, /*#__PURE__*/React.createElement(index, null), children)));
+  }, /*#__PURE__*/React.createElement(index, null), children))));
 };
 
 module.exports = IM;

package/cjs/NoData/index.js

@@ -4,6 +4,7 @@ var React = require('react');
 var noData = require('./image/no-data.svg.js');
 require('./style/index.scss');
 var classNames = require('classnames');
+var LocaleContext = require('../contexts/LocaleContext.js');
 
 /* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable @next/next/no-img-element */
@@ -11,12 +12,16 @@ var NoData = function NoData(props) {
   var className = props.className,
     _props$style = props.style,
     style = _props$style === void 0 ? {} : _props$style;
+  var _useTranslation = LocaleContext.useTranslation(),
+    t = _useTranslation.t;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("yuze-im-noData flex justify-center items-center h-full", className),
+    className: classNames("yuze-im-noData flex flex-col justify-center items-center h-full gap-2", className),
     style: style
   }, /*#__PURE__*/React.createElement("img", {
     src: noData
-  }));
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text-sm text-gray-500"
+  }, t('common.noData')));
 };
 
 module.exports = NoData;

package/cjs/Sidebar/CreateGroup/index.js

@@ -20,9 +20,12 @@ require('./style/index.scss');
 var InfiniteScroll = require('react-infinite-scroll-component');
 var index$1 = require('../../NoData/index.js');
 var _ = require('lodash');
+var LocaleContext = require('../../contexts/LocaleContext.js');
 
 var CreateGroup = function CreateGroup(props) {
   var _$uniqBy;
+  var _useTranslation = LocaleContext.useTranslation(),
+    t = _useTranslation.t;
   var onClose = props.onClose,
     _props$open = props.open,
     open = _props$open === void 0 ? false : _props$open;
@@ -155,7 +158,7 @@ var CreateGroup = function CreateGroup(props) {
     className: "yuze-createGroup-left-title"
   }, /*#__PURE__*/React.createElement("span", {
     className: "text-lg"
-  }, "New Group")), /*#__PURE__*/React.createElement(agoraChatUikit.Input, {
+  }, t('group.newGroup'))), /*#__PURE__*/React.createElement(agoraChatUikit.Input, {
     className: "my-3",
     onChange: function onChange(e) {
       pageRef.current = 0;
@@ -211,7 +214,7 @@ var CreateGroup = function CreateGroup(props) {
     className: "yuze-createGroup-right-title"
   }, /*#__PURE__*/React.createElement("span", {
     className: "text-sm"
-  }, "Group Member(", member.length, "/2000)")), /*#__PURE__*/React.createElement("div", {
+  }, t('group.groupMembers'), "(", member.length, "/2000)")), /*#__PURE__*/React.createElement("div", {
     className: "yuze-createGroup-right-list overflow-auto"
   }, /*#__PURE__*/React.createElement("div", {
     className: "flex flex-row gap-5 py-4 flex-wrap"
@@ -242,7 +245,7 @@ var CreateGroup = function CreateGroup(props) {
       setMember([]);
       onClose && onClose();
     }
-  }, "Close"), /*#__PURE__*/React.createElement(antd.Button, {
+  }, t('common.close')), /*#__PURE__*/React.createElement(antd.Button, {
     type: "primary",
     className: "flex-1",
     size: "large",
@@ -250,7 +253,7 @@ var CreateGroup = function CreateGroup(props) {
     onClick: function onClick() {
       handleDebounceCreateGroup();
     }
-  }, "Create")))));
+  }, t('group.createGroup'))))));
 };
 
 module.exports = CreateGroup;

package/cjs/Sidebar/CustomConversationItem/OperateBtn/index.js

@@ -12,6 +12,7 @@ var agoraChatUikit = require('agora-chat-uikit');
 var muted = require('./image/muted.svg.js');
 var logout = require('./image/logout.svg.js');
 var _delete = require('./image/delete.svg.js');
+var LocaleContext = require('../../../contexts/LocaleContext.js');
 require('./style/index.scss');
 
 var OperateBtn = function OperateBtn(props) {
@@ -30,6 +31,8 @@ var OperateBtn = function OperateBtn(props) {
     _Modal$useModal2 = _slicedToArray(_Modal$useModal, 2),
     modal = _Modal$useModal2[0],
     contextHolder = _Modal$useModal2[1];
+  var _useTranslation = LocaleContext.useTranslation(),
+    t = _useTranslation.t;
   var handleMuted = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -63,7 +66,7 @@ var OperateBtn = function OperateBtn(props) {
             return modal.confirm({
               content: /*#__PURE__*/React.createElement("span", {
                 className: "text-sm "
-              }, "Are you sure you want to delete ?"),
+              }, t('conversation.confirmDelete')),
               footer: /*#__PURE__*/React.createElement("div", {
                 className: "yuze-confirm-footer flex justify-center gap-5 mt-4"
               }, /*#__PURE__*/React.createElement(antd.Button, {
@@ -73,12 +76,12 @@ var OperateBtn = function OperateBtn(props) {
                 onClick: function onClick() {
                   antd.Modal.destroyAll();
                 }
-              }, "Close"), /*#__PURE__*/React.createElement(antd.Button, {
+              }, t('common.close')), /*#__PURE__*/React.createElement(antd.Button, {
                 type: "primary",
                 className: "flex-1",
                 size: "large",
                 onClick: handleDebounceDelete
-              }, "Confirm"))
+              }, t('common.confirm')))
             });
           case 3:
           case "end":
@@ -100,7 +103,7 @@ var OperateBtn = function OperateBtn(props) {
             return modal.confirm({
               content: /*#__PURE__*/React.createElement("span", {
                 className: "text-sm "
-              }, "Are you sure you want to delete and leave the group ?"),
+              }, t('group.confirmLeaveAndDelete')),
               footer: /*#__PURE__*/React.createElement("div", {
                 className: "yuze-confirm-footer flex justify-center gap-5 mt-4"
               }, /*#__PURE__*/React.createElement(antd.Button, {
@@ -110,12 +113,12 @@ var OperateBtn = function OperateBtn(props) {
                 onClick: function onClick() {
                   antd.Modal.destroyAll();
                 }
-              }, "Close"), /*#__PURE__*/React.createElement(antd.Button, {
+              }, t('common.close')), /*#__PURE__*/React.createElement(antd.Button, {
                 type: "primary",
                 className: "flex-1",
                 size: "large",
                 onClick: handleDebounceLeave
-              }, "Confirm"))
+              }, t('common.confirm')))
             });
           case 3:
           case "end":
@@ -178,7 +181,7 @@ var OperateBtn = function OperateBtn(props) {
       className: "yuze-conversationItem-action-img"
     }), /*#__PURE__*/React.createElement("span", {
       className: "text-sm"
-    }, silent ? "Unmuted" : "Muted")), chatType === "groupChat" && /*#__PURE__*/React.createElement("div", {
+    }, silent ? t('actions.unmute') : t('actions.mute'))), chatType === "groupChat" && /*#__PURE__*/React.createElement("div", {
       className: "yuze-conversationList-header-right-tooltip-item flex flex-row items-center gap-3 cursor-pointer",
       onClick: handleConfirmLeave
     }, /*#__PURE__*/React.createElement("img", {
@@ -196,7 +199,7 @@ var OperateBtn = function OperateBtn(props) {
       className: "yuze-conversationItem-action-img"
     }), /*#__PURE__*/React.createElement("span", {
       className: "text-sm delete"
-    }, "Delete Chat")))
+    }, t('conversation.deleteChat'))))
   }, /*#__PURE__*/React.createElement("img", {
     src: more,
     className: "cursor-pointer ml-2 yuze-conversationItem-action-img",

package/cjs/Sidebar/GroupList/OperateBtn/index.js

@@ -13,6 +13,7 @@ var agoraChatUikit = require('agora-chat-uikit');
 var muted = require('./image/muted.svg.js');
 var logout = require('./image/logout.svg.js');
 var _delete = require('./image/delete.svg.js');
+var LocaleContext = require('../../../contexts/LocaleContext.js');
 require('./style/index.scss');
 
 var OperateBtn = function OperateBtn(props) {
@@ -32,6 +33,8 @@ var OperateBtn = function OperateBtn(props) {
     _Modal$useModal2 = _slicedToArray(_Modal$useModal, 2),
     modal = _Modal$useModal2[0],
     contextHolder = _Modal$useModal2[1];
+  var _useTranslation = LocaleContext.useTranslation(),
+    t = _useTranslation.t;
   var handleTooltip = React.useCallback(function (event) {
     try {
       var _context;
@@ -82,11 +85,12 @@ var OperateBtn = function OperateBtn(props) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
             event.stopPropagation();
-            _context3.next = 3;
+            setTooltipOpen(false);
+            _context3.next = 4;
             return modal.confirm({
               content: /*#__PURE__*/React.createElement("span", {
                 className: "text-sm "
-              }, "Are you sure you want to delete ?"),
+              }, t('conversation.confirmDelete')),
               footer: /*#__PURE__*/React.createElement("div", {
                 className: "yuze-confirm-footer flex justify-center gap-5 mt-4"
               }, /*#__PURE__*/React.createElement(antd.Button, {
@@ -96,14 +100,14 @@ var OperateBtn = function OperateBtn(props) {
                 onClick: function onClick() {
                   antd.Modal.destroyAll();
                 }
-              }, "Close"), /*#__PURE__*/React.createElement(antd.Button, {
+              }, t('common.close')), /*#__PURE__*/React.createElement(antd.Button, {
                 type: "primary",
                 className: "flex-1",
                 size: "large",
                 onClick: handleDebounceDelete
-              }, "Confirm"))
+              }, t('common.confirm')))
             });
-          case 3:
+          case 4:
           case "end":
             return _context3.stop();
         }
@@ -210,7 +214,7 @@ var OperateBtn = function OperateBtn(props) {
       className: "yuze-conversationItem-action-img"
     }), /*#__PURE__*/React.createElement("span", {
       className: "text-sm"
-    }, silent ? "Unmuted" : "Muted")), chatType === "groupChat" && /*#__PURE__*/React.createElement("div", {
+    }, silent ? t('actions.unmute') : t('actions.mute'))), chatType === "groupChat" && /*#__PURE__*/React.createElement("div", {
       className: "yuze-conversationList-header-right-tooltip-item flex flex-row items-center gap-3 cursor-pointer",
       onClick: handleConfirmLeave
     }, /*#__PURE__*/React.createElement("img", {