whyuzeim 1.0.0

package/es/TypeItem/OperateBtn/index.js

@@ -0,0 +1,196 @@
+import _asyncToGenerator from '@babel/runtime-corejs3/helpers/esm/asyncToGenerator';
+import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime-corejs3/regenerator';
+import React, { useContext, useCallback } from 'react';
+import { Modal, Tooltip, Button } from 'antd';
+import img$4 from './image/more.svg.js';
+import img from './image/admin.svg.js';
+import img$1 from './image/logout.svg.js';
+import img$2 from './image/block.svg.js';
+import img$3 from './image/ban.svg.js';
+import { Context } from '../../IM/context.js';
+import { useDebounceCallback } from '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 = useContext(Context),
+    http = _useContext.http;
+  var _Modal$useModal = Modal.useModal(),
+    _Modal$useModal2 = _slicedToArray(_Modal$useModal, 2),
+    modal = _Modal$useModal2[0],
+    contextHolder = _Modal$useModal2[1];
+  var handleUpdateAdmin = 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 = 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(Button, {
+                type: "default",
+                className: "flex-1 bg-transparent",
+                size: "large",
+                onClick: function onClick() {
+                  Modal.destroyAll();
+                }
+              }, "Close"), /*#__PURE__*/React.createElement(Button, {
+                type: "primary",
+                className: "flex-1",
+                size: "large",
+                onClick: handleDebounceRemoveMember
+              }, "Confirm"))
+            });
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function handleConfirmRemove() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var handleRemoveMember = 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 = useDebounceCallback(handleRemoveMember, 100);
+  // /capi/account/imchannelblocks/save
+  var handleBlockMember = 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 = useDebounceCallback(handleBlockMember, 100);
+  var handleBanMember = 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 = useDebounceCallback(handleBanMember, 100);
+  return /*#__PURE__*/React.createElement(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: img,
+      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: img$1,
+      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: img$2,
+      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: img$3,
+      alt: "",
+      style: {
+        width: "14px",
+        height: "14px"
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "text-sm"
+    }, isprohibition == 1 ? "unBan" : "Ban")))
+  }, contextHolder, /*#__PURE__*/React.createElement("img", {
+    src: img$4,
+    className: "cursor-pointer ml-2"
+  }));
+};
+
+export { OperateBtn as default };

package/es/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/es/TypeItem/index.js

@@ -0,0 +1,82 @@
+import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
+import React, { useState } from 'react';
+import { Checkbox, Avatar } from 'agora-chat-uikit';
+import classNames from 'classnames';
+import OperateBtn from './OperateBtn/index.js';
+import './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 = useState(roletype),
+    _useState2 = _slicedToArray(_useState, 2),
+    iroletype = _useState2[0],
+    setIRoletype = _useState2[1];
+  var _useState3 = 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(Checkbox, {
+    className: "yuze-typeItem-left-checkbox",
+    onChange: function onChange(event) {
+      if (event.target.checked) {
+        onSelected && onSelected();
+      } else {
+        onCancel && onCancel();
+      }
+    },
+    checked: isChecked
+  }), /*#__PURE__*/React.createElement(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(OperateBtn, {
+    userId: userId,
+    roletype: iroletype,
+    sendbirdid: sendbirdid,
+    isprohibition: iisprohibition,
+    onRoletype: function onRoletype(value) {
+      setIRoletype(value);
+    },
+    onBlock: onBlock,
+    onDelete: onDelete,
+    onBan: function onBan(value) {
+      setIisprohibition(value);
+    }
+  })));
+};
+
+export { TypeItem as default };

package/es/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/es/UserProfile/image/ic_close.svg.js

@@ -0,0 +1,3 @@
+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";
+
+export { img as default };

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

@@ -0,0 +1,3 @@
+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";
+
+export { img as default };

package/es/UserProfile/image/icon_translation.svg.js

@@ -0,0 +1,3 @@
+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";
+
+export { img as default };

package/es/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/es/UserProfile/index.js

@@ -0,0 +1,168 @@
+import _asyncToGenerator from '@babel/runtime-corejs3/helpers/esm/asyncToGenerator';
+import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime-corejs3/regenerator';
+import React, { useState, useContext, useCallback, useEffect } from 'react';
+import classNames from 'classnames';
+import { rootStore, Switch } from 'agora-chat-uikit';
+import img from './image/ic_close.svg.js';
+import img$1 from './image/ic_share.svg.js';
+import img$2 from './image/icon_translation.svg.js';
+import './style/index.scss';
+import { Context } from '../IM/context.js';
+import GroupShareView from '../GroupDetail/GroupShareView/index.js';
+
+var UserProfile = function UserProfile(props) {
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    avatar = _useState2[0],
+    setAvatar = _useState2[1];
+  var _useContext = useContext(Context),
+    http = _useContext.http,
+    setRightComponent = _useContext.setRightComponent;
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isautomatictranslate = _useState4[0],
+    setIsautomatictranslate = _useState4[1];
+  var getUserInfo = 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 = rootStore.conversationStore.currentCvs;
+          if (!(!cvs || !cvs.conversationId)) {
+            _context.next = 4;
+            break;
+          }
+          return _context.abrupt("return");
+        case 4:
+          appUsersInfo = rootStore.addressStore.appUsersInfo[cvs.conversationId];
+          if (!appUsersInfo) {
+            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 = 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 = 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]);
+  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: img,
+    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: img$1,
+    onClick: function onClick() {
+      if (setRightComponent) {
+        var _rootStore$conversati;
+        setRightComponent(/*#__PURE__*/React.createElement(GroupShareView, {
+          shareObjId: rootStore.conversationStore.currentCvs.conversationId,
+          shareObjImageurl: avatar,
+          shareObjName: (_rootStore$conversati = 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"
+  }, 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: img$2,
+    alt: "",
+    className: "relative top-1"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col"
+  }, /*#__PURE__*/React.createElement("span", null, 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: img$2,
+    alt: ""
+  }), /*#__PURE__*/React.createElement("span", null, "Enable auto-translation")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Switch, {
+    checked: isautomatictranslate === 1,
+    onChange: function onChange(event) {
+      setIsautomatictranslate(event.target.checked ? 1 : 0);
+      handleTranslate(event.target.checked);
+    }
+  })))));
+};
+
+export { UserProfile as default };

package/es/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/es/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';

package/es/index.js

@@ -0,0 +1,9 @@
+export { default as IM } from './IM/index.js';
+export { Context } from './IM/context.js';
+export { default as DefaultIMLayout } from './IM/DefaultIMLayout/index.js';
+export { default as CreateGroup } from './Sidebar/CreateGroup/index.js';
+export { default as UserProfile } from './UserProfile/index.js';
+export { default as Sharebox } from './Sharebox/index.js';
+export { default as GroupDetail } from './GroupDetail/index.js';
+export { default as ChatBox } from './ChatBox/index.js';
+export { default as CustomChatView } from './CustomChatView/index.js';

package/es/type.d.ts

@@ -0,0 +1,7 @@
+import { MessageInputProps, MsgListProps } from "agora-chat-uikit";
+export type ICommonComponentProps = {
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare const commonMessageInputConfig: MessageInputProps;
+export declare const commonMessageProps: MsgListProps['messageProps'];