whyuzeim 1.0.0

package/cjs/TypeItem/OperateBtn/image/more.svg.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var img = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 3C11.175 3 10.5 3.675 10.5 4.5C10.5 5.325 11.175 6 12 6C12.825 6 13.5 5.325 13.5 4.5C13.5 3.675 12.825 3 12 3ZM12 18C11.175 18 10.5 18.675 10.5 19.5C10.5 20.325 11.175 21 12 21C12.825 21 13.5 20.325 13.5 19.5C13.5 18.675 12.825 18 12 18ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z' fill='white'/%3e%3c/svg%3e";
+
+module.exports = img;

package/cjs/TypeItem/OperateBtn/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface IOperateBtn {
+    userId: string;
+    roletype?: number;
+    sendbirdid: string;
+    isprohibition?: number;
+    onRoletype?: (value: number) => void;
+    onDelete?: (memberid: string) => void;
+    onBlock?: (memberid: string) => void;
+    onBan?: (value: number) => void;
+}
+declare const OperateBtn: React.FC<IOperateBtn>;
+export default OperateBtn;

package/cjs/TypeItem/OperateBtn/index.js

@@ -0,0 +1,198 @@
+'use strict';
+
+var _asyncToGenerator = require('@babel/runtime-corejs3/helpers/esm/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/esm/slicedToArray');
+var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
+var React = require('react');
+var antd = require('antd');
+var more = require('./image/more.svg.js');
+var admin = require('./image/admin.svg.js');
+var logout = require('./image/logout.svg.js');
+var block = require('./image/block.svg.js');
+var ban = require('./image/ban.svg.js');
+var context = require('../../IM/context.js');
+var usehooksTs = require('usehooks-ts');
+
+var OperateBtn = function OperateBtn(props) {
+  var userId = props.userId,
+    roletype = props.roletype,
+    sendbirdid = props.sendbirdid,
+    onRoletype = props.onRoletype,
+    onDelete = props.onDelete,
+    onBlock = props.onBlock,
+    isprohibition = props.isprohibition,
+    onBan = props.onBan;
+  var _useContext = React.useContext(context.Context),
+    http = _useContext.http;
+  var _Modal$useModal = antd.Modal.useModal(),
+    _Modal$useModal2 = _slicedToArray(_Modal$useModal, 2),
+    modal = _Modal$useModal2[0],
+    contextHolder = _Modal$useModal2[1];
+  var handleUpdateAdmin = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var iroletype;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          iroletype = roletype === 0 ? 1 : 0;
+          http.post("/capi/account/imchannel/updatechanneluserrole", {
+            sendbirdid: sendbirdid,
+            memberid: userId,
+            roletype: iroletype
+          });
+          onRoletype && onRoletype(iroletype);
+        case 3:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [http, userId, sendbirdid, onRoletype, roletype]);
+  var handleDebounceUpdateAdmin = usehooksTs.useDebounceCallback(handleUpdateAdmin, 100);
+  var handleConfirmRemove = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return modal.confirm({
+              content: /*#__PURE__*/React.createElement("span", {
+                className: "text-sm "
+              }, "Are you sure you want to delete ?"),
+              footer: /*#__PURE__*/React.createElement("div", {
+                className: "yuze-confirm-footer flex justify-center gap-5 mt-4"
+              }, /*#__PURE__*/React.createElement(antd.Button, {
+                type: "default",
+                className: "flex-1 bg-transparent",
+                size: "large",
+                onClick: function onClick() {
+                  antd.Modal.destroyAll();
+                }
+              }, "Close"), /*#__PURE__*/React.createElement(antd.Button, {
+                type: "primary",
+                className: "flex-1",
+                size: "large",
+                onClick: handleDebounceRemoveMember
+              }, "Confirm"))
+            });
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function handleConfirmRemove() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var handleRemoveMember = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          http.post("/capi/account/imchannel/removeuser", {
+            sendbirdid: sendbirdid,
+            memberids: [userId]
+          });
+          onDelete && onDelete(userId);
+        case 2:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })), [http, sendbirdid, userId, onDelete]);
+  var handleDebounceRemoveMember = usehooksTs.useDebounceCallback(handleRemoveMember, 100);
+  // /capi/account/imchannelblocks/save
+  var handleBlockMember = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          http.post("/capi/account/imchannelblocks/save", {
+            sendbirdid: sendbirdid,
+            userid: userId,
+            memo: "xixi"
+          });
+          onBlock && onBlock(userId);
+        case 2:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })), [http, sendbirdid, userId, onBlock]);
+  var handleDebounceBlockMember = usehooksTs.useDebounceCallback(handleBlockMember, 100);
+  var handleBanMember = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var iisprohibition;
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          iisprohibition = isprohibition === 0 ? 1 : 0;
+          http.post("/capi/account/imchannel/updateprohibition", {
+            sendbirdid: sendbirdid,
+            memberid: userId,
+            isprohibition: iisprohibition
+          });
+          onBan && onBan(iisprohibition);
+        case 3:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })), [isprohibition, http, sendbirdid, userId, onBan]);
+  var handleDebounceBanMember = usehooksTs.useDebounceCallback(handleBanMember, 100);
+  return /*#__PURE__*/React.createElement(antd.Tooltip, {
+    placement: "bottomLeft",
+    title: /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-col"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "yuze-conversationList-header-right-tooltip-item flex flex-row items-center gap-3 cursor-pointer",
+      onClick: handleDebounceUpdateAdmin
+    }, /*#__PURE__*/React.createElement("img", {
+      src: admin,
+      alt: "",
+      style: {
+        width: "14px",
+        height: "14px"
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "text-sm"
+    }, roletype === 1 ? "Remove Admin" : "Set Admin")), /*#__PURE__*/React.createElement("div", {
+      className: "yuze-conversationList-header-right-tooltip-item flex flex-row items-center gap-3 cursor-pointer",
+      onClick: handleConfirmRemove
+    }, /*#__PURE__*/React.createElement("img", {
+      src: logout,
+      alt: "",
+      style: {
+        width: "14px",
+        height: "14px"
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "text-sm"
+    }, "Remove")), /*#__PURE__*/React.createElement("div", {
+      className: "yuze-conversationList-header-right-tooltip-item flex flex-row items-center gap-3 cursor-pointer",
+      onClick: handleDebounceBlockMember
+    }, /*#__PURE__*/React.createElement("img", {
+      src: block,
+      alt: "",
+      style: {
+        width: "14px",
+        height: "14px"
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "text-sm"
+    }, "Block")), /*#__PURE__*/React.createElement("div", {
+      className: "yuze-conversationList-header-right-tooltip-item flex flex-row items-center gap-3 cursor-pointer",
+      onClick: handleDebounceBanMember
+    }, /*#__PURE__*/React.createElement("img", {
+      src: ban,
+      alt: "",
+      style: {
+        width: "14px",
+        height: "14px"
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "text-sm"
+    }, isprohibition == 1 ? "unBan" : "Ban")))
+  }, contextHolder, /*#__PURE__*/React.createElement("img", {
+    src: more,
+    className: "cursor-pointer ml-2"
+  }));
+};
+
+module.exports = OperateBtn;

package/cjs/TypeItem/index.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import "./style/index.scss";
+export interface ITypeItem {
+    name?: string;
+    rightNode?: React.ReactElement;
+    avatar?: string;
+    description?: string;
+    type?: "1" | "2";
+    roletype?: number;
+    groupId?: string;
+    onClick?: () => void;
+    isSelectable?: boolean;
+    onSelected?: () => void;
+    onCancel?: () => void;
+    isChecked?: boolean;
+    userId?: string;
+    sendbirdid?: string;
+    showMore?: boolean;
+    onDelete?: (memberid: string) => void;
+    onBlock?: (memberid: string) => void;
+    isprohibition?: number;
+}
+declare const TypeItem: React.FC<ITypeItem>;
+export default TypeItem;

package/cjs/TypeItem/index.js

@@ -0,0 +1,84 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/esm/slicedToArray');
+var React = require('react');
+var agoraChatUikit = require('agora-chat-uikit');
+var classNames = require('classnames');
+var index = require('./OperateBtn/index.js');
+require('./style/index.scss');
+
+var TypeItem = function TypeItem(props) {
+  var rightNode = props.rightNode,
+    avatar = props.avatar,
+    name = props.name,
+    description = props.description,
+    onClick = props.onClick,
+    _props$isSelectable = props.isSelectable,
+    isSelectable = _props$isSelectable === void 0 ? false : _props$isSelectable,
+    onSelected = props.onSelected,
+    onCancel = props.onCancel,
+    isChecked = props.isChecked,
+    roletype = props.roletype,
+    userId = props.userId,
+    sendbirdid = props.sendbirdid,
+    _props$showMore = props.showMore,
+    showMore = _props$showMore === void 0 ? false : _props$showMore,
+    onDelete = props.onDelete,
+    isprohibition = props.isprohibition,
+    onBlock = props.onBlock;
+  var _useState = React.useState(roletype),
+    _useState2 = _slicedToArray(_useState, 2),
+    iroletype = _useState2[0],
+    setIRoletype = _useState2[1];
+  var _useState3 = React.useState(isprohibition),
+    _useState4 = _slicedToArray(_useState3, 2),
+    iisprohibition = _useState4[0],
+    setIisprohibition = _useState4[1];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "yuze-typeItem w-full flex flex-row justify-between items-center px-2 cursor-pointer",
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "yuze-typeItem-left flex flex-row items-center gap-3 flex-1 w-[100px]"
+  }, isSelectable && /*#__PURE__*/React.createElement(agoraChatUikit.Checkbox, {
+    className: "yuze-typeItem-left-checkbox",
+    onChange: function onChange(event) {
+      if (event.target.checked) {
+        onSelected && onSelected();
+      } else {
+        onCancel && onCancel();
+      }
+    },
+    checked: isChecked
+  }), /*#__PURE__*/React.createElement(agoraChatUikit.Avatar, {
+    className: "yuze-typeItem-left-avatar",
+    src: avatar
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "yuze-typeItem-left-information flex flex-col justify-center gap-1 flex-1 min-w-0"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-base ellipsis"
+  }, name), description && /*#__PURE__*/React.createElement("span", {
+    className: "text-sm ellipsis"
+  }, description)), iroletype !== undefined && iroletype !== 0 && /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-typeItem-left-remark flex items-center justify-center mr-4", {
+      owner: iroletype === 2,
+      admin: iroletype === 1
+    })
+  }, /*#__PURE__*/React.createElement("span", null, iroletype === 2 ? "Owner" : "Admin"))), /*#__PURE__*/React.createElement("div", {
+    className: "yuze-TypeItem-right shrink-0 flex items-center justify-center"
+  }, rightNode, roletype !== 2 && userId && sendbirdid && showMore && /*#__PURE__*/React.createElement(index, {
+    userId: userId,
+    roletype: iroletype,
+    sendbirdid: sendbirdid,
+    isprohibition: iisprohibition,
+    onRoletype: function onRoletype(value) {
+      setIRoletype(value);
+    },
+    onBlock: onBlock,
+    onDelete: onDelete,
+    onBan: function onBan(value) {
+      setIisprohibition(value);
+    }
+  })));
+};
+
+module.exports = TypeItem;

package/cjs/TypeItem/style/index.scss

@@ -0,0 +1,67 @@
+.yuze-typeItem {
+  height: 72px;
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+  &-right {
+    width: 32px;
+    height: 32px;
+    img {
+      width: 24px;
+      height: 24px;
+    }
+  }
+  &-left {
+    &-checkbox {
+      .cui-checkbox--mark {
+        width: 20px;
+        height: 20px;
+        border-radius: 10px;
+        background-color: transparent;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: none !important;
+        &::after {
+          position: relative;
+          left: 0;
+          right: 0;
+        }
+      }
+      input:checked ~ .cui-checkbox--mark {
+        background-color: var(--im-checkbox-backgroundColor);
+        border: none;
+      }
+    }
+    &-information {
+      span {
+        display: block;
+        width: 100%;
+        &:nth-child(1) {
+          color: var(--im-main-fontColor);
+        }
+        &:nth-child(2) {
+          color: var(--im-third-fontColor);
+        }
+      }
+    }
+    &-avatar {
+      width: 48px;
+      height: 48px;
+    }
+    &-remark {
+      border-radius: 5px;
+      width: 60px;
+      height: 24px;
+      text-align: center;
+      font-size: 12px;
+      color: var(--im-member-remark-fontColor);
+      &.owner {
+        background-color: var(--im-member-remark-owner-backgroundColor);
+      }
+      &.admin {
+        background-color: var(--im-member-remark-admin-backgroundColor);
+      }
+    }
+  }
+}

package/cjs/UserProfile/image/ic_close.svg.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var img = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.0007 10.5865L16.9504 5.63672L18.3646 7.05093L13.4149 12.0007L18.3646 16.9504L16.9504 18.3646L12.0007 13.4149L7.05093 18.3646L5.63672 16.9504L10.5865 12.0007L5.63672 7.05093L7.05093 5.63672L12.0007 10.5865Z' fill='white' fill-opacity='0.4'/%3e%3c/svg%3e";
+
+module.exports = img;

package/cjs/UserProfile/image/ic_share.svg.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var img = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 16.1634C10.6309 16.0558 11.2963 15.9998 12 15.9998V19.5857C12 20.4766 13.0771 20.9228 13.7071 20.2928L21.2929 12.707C21.6834 12.3165 21.6834 11.6833 21.2929 11.2928L13.7071 3.70701C13.0771 3.07704 12 3.52321 12 4.41412V7.99984C5.92487 7.99984 2 12.9247 2 18.9998C2 19.1334 2.00238 19.2663 2.0071 19.3987C2.03783 20.261 3.10557 20.4916 3.67853 19.8464C5.37683 17.9341 7.39449 16.6078 10 16.1634ZM14 6.82833V8.99984C14 9.55213 13.5523 9.99984 13 9.99984H12C8.04219 9.99984 5.10357 12.6421 4.2521 16.5726C6.33295 14.969 8.85527 13.9998 12 13.9998H13C13.5523 13.9998 14 14.4476 14 14.9998V17.1715L19.1716 11.9999L14 6.82833Z' fill='white' fill-opacity='0.4'/%3e%3c/svg%3e";
+
+module.exports = img;

package/cjs/UserProfile/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/UserProfile/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import "./style/index.scss";
+export interface IUserProfile {
+    userId: string;
+    onClickClose?: () => void;
+}
+declare const UserProfile: React.FC<IUserProfile>;
+export default UserProfile;

package/cjs/UserProfile/index.js

@@ -0,0 +1,170 @@
+'use strict';
+
+var _asyncToGenerator = require('@babel/runtime-corejs3/helpers/esm/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/esm/slicedToArray');
+var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
+var React = require('react');
+var classNames = require('classnames');
+var agoraChatUikit = require('agora-chat-uikit');
+var ic_close = require('./image/ic_close.svg.js');
+var ic_share = require('./image/ic_share.svg.js');
+var icon_translation = require('./image/icon_translation.svg.js');
+require('./style/index.scss');
+var context = require('../IM/context.js');
+var index = require('../GroupDetail/GroupShareView/index.js');
+
+var UserProfile = function UserProfile(props) {
+  var _useState = React.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    avatar = _useState2[0],
+    setAvatar = _useState2[1];
+  var _useContext = React.useContext(context.Context),
+    http = _useContext.http,
+    setRightComponent = _useContext.setRightComponent;
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isautomatictranslate = _useState4[0],
+    setIsautomatictranslate = _useState4[1];
+  var getUserInfo = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var imageUrl, cvs, appUsersInfo, _appUsersInfo$avataru, result;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          imageUrl = "";
+          cvs = agoraChatUikit.rootStore.conversationStore.currentCvs;
+          if (!(!cvs || !cvs.conversationId)) {
+            _context.next = 4;
+            break;
+          }
+          return _context.abrupt("return");
+        case 4:
+          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 {
+            imageUrl = (_appUsersInfo$avataru = appUsersInfo === null || appUsersInfo === void 0 ? void 0 : appUsersInfo.avatarurl) !== null && _appUsersInfo$avataru !== void 0 ? _appUsersInfo$avataru : "";
+          }
+          _context.next = 8;
+          return http.post("/capi/account/imchannel/getautomatictranslate", {
+            sendbirdid: cvs.conversationId,
+            type: 1
+          });
+        case 8:
+          result = _context.sent;
+          setIsautomatictranslate(result.data.data.isautomatictranslate);
+          setAvatar(imageUrl);
+        case 11:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), []);
+  var handleTranslate = React.useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(checked) {
+      var groupid;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.prev = 0;
+            groupid = agoraChatUikit.rootStore.conversationStore.currentCvs.conversationId;
+            _context2.next = 4;
+            return http.post("/capi/account/imchannel/setautomatictranslate", {
+              sendbirdid: groupid,
+              type: 1,
+              isautomatictranslate: checked ? 1 : 0
+            });
+          case 4:
+            _context2.next = 9;
+            break;
+          case 6:
+            _context2.prev = 6;
+            _context2.t0 = _context2["catch"](0);
+            console.log(_context2.t0);
+          case 9:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[0, 6]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [http]);
+  React.useEffect(function () {
+    getUserInfo();
+  }, [getUserInfo]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-userProfile w-full h-full")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-userProfile-header flex flex-row items-center justify-between")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-userProfile-header-left flex flex-row gap-5")
+  }, /*#__PURE__*/React.createElement("img", {
+    src: ic_close,
+    className: "cursor-pointer",
+    onClick: function onClick() {
+      if (props.onClickClose) {
+        props.onClickClose();
+      }
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text-base"
+  }, "Profile")), /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-userProfile-header-right")
+  }, /*#__PURE__*/React.createElement("img", {
+    src: ic_share,
+    onClick: function onClick() {
+      if (setRightComponent) {
+        var _rootStore$conversati;
+        setRightComponent(/*#__PURE__*/React.createElement(index, {
+          shareObjId: agoraChatUikit.rootStore.conversationStore.currentCvs.conversationId,
+          shareObjImageurl: avatar,
+          shareObjName: (_rootStore$conversati = agoraChatUikit.rootStore.conversationStore.currentCvs.name) !== null && _rootStore$conversati !== void 0 ? _rootStore$conversati : '',
+          onClickClose: function onClickClose() {
+            return setRightComponent(undefined);
+          }
+        }));
+      }
+    },
+    className: "cursor-pointer"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-userProfile-content flex flex-col items-center justify-between p-4")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-userProfile-content-avatar flex flex-col items-center")
+  }, /*#__PURE__*/React.createElement("img", {
+    src: avatar,
+    alt: ""
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text-base mt-1"
+  }, agoraChatUikit.rootStore.conversationStore.currentCvs.name)), /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-userProfile-content-username flex gap-4 w-full mt-10")
+  }, /*#__PURE__*/React.createElement("img", {
+    src: icon_translation,
+    alt: "",
+    className: "relative top-1"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col"
+  }, /*#__PURE__*/React.createElement("span", null, agoraChatUikit.rootStore.conversationStore.currentCvs.name), /*#__PURE__*/React.createElement("span", {
+    className: "text-sm"
+  }, "Username"))), /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-userProfile-content-translation flex items-center justify-between w-full mt-4")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-4 items-center flex-row"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: icon_translation,
+    alt: ""
+  }), /*#__PURE__*/React.createElement("span", null, "Enable auto-translation")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(agoraChatUikit.Switch, {
+    checked: isautomatictranslate === 1,
+    onChange: function onChange(event) {
+      setIsautomatictranslate(event.target.checked ? 1 : 0);
+      handleTranslate(event.target.checked);
+    }
+  })))));
+};
+
+module.exports = UserProfile;

package/cjs/UserProfile/style/index.scss

@@ -0,0 +1,50 @@
+.yuze-userProfile {
+  background-color: var(--im-main-backgroundColor);
+  .yuze-userProfile-header {
+    height: 64px;
+    box-sizing: border-box;
+    padding: 0 10px;
+    .yuze-userProfile-header-left {
+      span {
+        color: var(--im-main-fontColor);
+      }
+    }
+  }
+  .yuze-userProfile-content {
+    .yuze-userProfile-content-avatar {
+      img {
+        width: 80px;
+        height: 80px;
+        object-fit: cover;
+      }
+      span {
+        color: var(--im-main-fontColor);
+      }
+    }
+    .yuze-userProfile-content-username {
+      img {
+        width: 20px;
+        height: 20px;
+      }
+      span {
+        color: var(--im-main-fontColor);
+
+        &:nth-child(2) {
+          color: #707579;
+        }
+      }
+    }
+    .yuze-userProfile-content-translation {
+      img {
+        width: 20px;
+        height: 20px;
+      }
+      span {
+        color: var(--im-main-fontColor);
+      }
+      .cui-switch .cui-switch-container-checked {
+        background-color: var(--im-main-switchColor);
+      }
+    }
+  }
+}

package/cjs/index.d.ts

@@ -0,0 +1,16 @@
+export { default as IM } from "./IM";
+export { Context } from './IM/context';
+export type { IIMProps } from "./IM";
+export { default as DefaultIMLayout } from "./IM/DefaultIMLayout";
+export { default as CreateGroup } from "./Sidebar/CreateGroup";
+export type { ICreateGroup } from "./Sidebar/CreateGroup";
+export { default as UserProfile } from "./UserProfile";
+export type { IUserProfile } from "./UserProfile";
+export { default as Sharebox } from "./Sharebox";
+export type { ISharebox } from "./Sharebox";
+export { default as GroupDetail } from "./GroupDetail";
+export type { IGroupDetail } from "./GroupDetail";
+export { default as ChatBox } from './ChatBox';
+export type { IChatbox } from './ChatBox';
+export { default as CustomChatView } from './CustomChatView';
+export type { ICustomChatbox } from './CustomChatView';