whyuzeim 1.0.0

package/es/IM/encryption.js

@@ -0,0 +1,34 @@
+import '@babel/runtime-corejs3/helpers/esm/typeof';
+import '@babel/runtime-corejs3/core-js-stable/json/stringify';
+import CryptoJS from 'crypto-js';
+import JSEncrypt from 'jsencrypt';
+
+new JSEncrypt();
+// 生成 AESKEY
+var aesKey = createAesKey();
+function createAesKey() {
+  var expect = 16;
+  var str = Math.random().toString(36).substr(2);
+  while (str.length < expect) {
+    str += Math.random().toString(36).substr(2);
+  }
+  str = str.substr(0, 16);
+  return str;
+}
+/**
+ * AES 解密
+ * @param word 待解密数据
+ * @param keyStr 解密 key
+ * @returns {string} 返回解密字符串
+ */
+function aesDecrypt(word, keyStr) {
+  keyStr = keyStr || aesKey;
+  var key = CryptoJS.enc.Utf8.parse(keyStr);
+  var decrypt = CryptoJS.AES.decrypt(word, key, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7
+  });
+  return decrypt.toString(CryptoJS.enc.Utf8);
+}
+
+export { aesDecrypt, aesKey, createAesKey };

package/es/IM/hooks/useGetAgoraToken.d.ts

@@ -0,0 +1,2 @@
+import { AxiosInstance } from "axios";
+export declare const useGetAgoraToken: (http: AxiosInstance, uid?: string) => string;

package/es/IM/hooks/useGetAgoraToken.js

@@ -0,0 +1,59 @@
+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 { useState, useCallback, useEffect } from 'react';
+import jsrsasign from 'jsrsasign';
+import { aesDecrypt, aesKey } from '../encryption.js';
+
+var useGetAgoraToken = function useGetAgoraToken(http, uid) {
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    agoraToken = _useState2[0],
+    setAgoraToken = _useState2[1];
+  var handleGetToken = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var result1, publickey, publicPemKey, pub, enc, result2, token;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (uid) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return");
+        case 2:
+          _context.next = 4;
+          return http.get("/capi/account/imuser/getkeypair", {
+            params: {
+              type: 2
+            }
+          });
+        case 4:
+          result1 = _context.sent;
+          publickey = result1.data.data.publickey; // const rsaStr = encryption.rsaEncrypt(this.aesKey, publickey)
+          publicPemKey = "-----BEGIN PUBLIC KEY-----\n" + publickey + "\n-----END PUBLIC KEY-----";
+          pub = jsrsasign.KEYUTIL.getKey(publicPemKey);
+          enc = jsrsasign.KJUR.crypto.Cipher.encrypt(aesKey, pub, "RSAOAEP");
+          _context.next = 11;
+          return http.get("/capi/account/imuser/getutoken", {
+            params: {
+              type: 2,
+              token: jsrsasign.hextob64(enc)
+            }
+          });
+        case 11:
+          result2 = _context.sent;
+          token = aesDecrypt(result2.data.data.utoken, aesKey);
+          setAgoraToken(token);
+        case 14:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [http, uid]);
+  useEffect(function () {
+    handleGetToken();
+  }, [handleGetToken]);
+  return agoraToken;
+};
+
+export { useGetAgoraToken };

package/es/IM/index.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { AxiosInstance } from "axios";
+import { IUserInfo } from "./context";
+import "agora-chat-uikit/style.css";
+import "./style/index.scss";
+export type IIMProps = {
+    children?: React.ReactNode;
+    theme?: "dark" | "light" | "custom";
+    http: AxiosInstance;
+    appKey: string;
+    conversationId?: string;
+    sidebarExpand?: boolean;
+    userInfo: IUserInfo;
+    className?: string;
+    style?: React.CSSProperties;
+    mobile?: boolean;
+    onChatIconClick?: () => void;
+};
+declare const IM: React.FC<IIMProps>;
+export default IM;

package/es/IM/index.js

@@ -0,0 +1,128 @@
+import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { UIKitProvider } from 'agora-chat-uikit';
+import { Context } from './context.js';
+import { useGetAgoraToken } from './hooks/useGetAgoraToken.js';
+import Exit from '../Exit/index.js';
+import 'agora-chat-uikit/style.css';
+import './style/index.scss';
+import Chatbox from '../ChatBox/index.js';
+import GroupDetail from '../GroupDetail/index.js';
+import UserProfile from '../UserProfile/index.js';
+
+var IM = function IM(props) {
+  var _props$theme = props.theme,
+    theme = _props$theme === void 0 ? "light" : _props$theme,
+    appKey = props.appKey,
+    userInfo = props.userInfo,
+    http = props.http,
+    _props$sidebarExpand = props.sidebarExpand,
+    sidebarExpand = _props$sidebarExpand === void 0 ? false : _props$sidebarExpand,
+    children = props.children,
+    className = props.className,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$mobile = props.mobile,
+    mobile = _props$mobile === void 0 ? false : _props$mobile,
+    onChatIconClick = props.onChatIconClick;
+  var agoraToken = useGetAgoraToken(http, userInfo.uid);
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    rightComponent = _useState2[0],
+    setRightComponent = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    midComponent = _useState4[0],
+    setMidComponent = _useState4[1];
+  var _useState5 = useState(sidebarExpand),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isidebarExpand = _useState6[0],
+    setIsidebarExpand = _useState6[1];
+  // if (!(userInfo.uid && appKey && agoraToken)) {
+  //   return <></>;
+  // }
+  var renderMidComponent = function renderMidComponent() {
+    setMidComponent(/*#__PURE__*/React.createElement(Chatbox, {
+      onClickHeaderBack: function onClickHeaderBack(cvs) {
+        if (cvs.chatType === "groupChat") {
+          setRightComponent(/*#__PURE__*/React.createElement(GroupDetail, {
+            onClickClose: function onClickClose() {
+              return setRightComponent(undefined);
+            },
+            userId: userInfo.uid
+          }));
+        } else {
+          setRightComponent(/*#__PURE__*/React.createElement(UserProfile, {
+            onClickClose: function onClickClose() {
+              return setRightComponent && setRightComponent(undefined);
+            },
+            userId: userInfo.uid
+          }));
+        }
+      }
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("im-".concat(theme), className),
+    style: style
+  }, /*#__PURE__*/React.createElement(Context.Provider, {
+    value: {
+      rightComponent: rightComponent,
+      setRightComponent: setRightComponent,
+      midComponent: midComponent,
+      renderMidComponent: renderMidComponent,
+      setMidComponent: setMidComponent,
+      http: http,
+      userInfo: userInfo,
+      sidebarExpand: isidebarExpand,
+      setSidebarExpand: setIsidebarExpand,
+      mobile: mobile,
+      onChatIconClick: onChatIconClick
+    }
+  }, /*#__PURE__*/React.createElement(UIKitProvider, {
+    initConfig: {
+      userId: userInfo.uid.toString(),
+      appKey: appKey,
+      token: agoraToken
+    },
+    theme: {
+      mode: theme === "dark" ? "dark" : "light"
+    },
+    features: {
+      conversationList: {
+        item: {
+          moreAction: true,
+          deleteConversation: true,
+          presence: true,
+          pinConversation: true
+        }
+      },
+      chat: {
+        message: {
+          thread: false,
+          reaction: false,
+          moreAction: false,
+          reply: true,
+          "delete": true,
+          recall: true,
+          translate: true,
+          edit: true,
+          select: false,
+          forward: false,
+          report: false,
+          pin: false
+        },
+        messageInput: {
+          typing: true,
+          contactCard: false,
+          moreAction: true,
+          record: false,
+          file: true
+        }
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Exit, null), children)));
+};
+
+export { IM as default };

package/es/IM/style/index.scss

@@ -0,0 +1,119 @@
+.im-light {
+  --im-test-color: green;
+
+  --im-main-fontColor: #000;
+  --im-second-fontColor: rgba(0, 0, 0, 0.55);
+  --im-third-fontColor: rgba(0, 0, 0, 0.4);
+  --im-six-fontColor: rgba(255, 255, 255, 0.9);
+  --im-seven-fontColor: rgba(0, 0, 0, 0.6);
+
+  --im-group-edit-input-bg: rgba(255, 255, 255, 0.1);
+  --im-group-edit-placeholder: rgba(255, 255, 255, 0.4);
+  --im-green: #9cff1e;
+  --im-main-bg-five: rgba(0, 0, 0, 0.05);
+  --im-main-bg-ten: rgba(0, 0, 0, 0.1);
+  --im-group-join-cancel-line: rgba(0, 0, 0 0.9);
+
+  //override
+  --im-msg-bubble-color-left: rgba(255, 255, 255, 1);
+  --im-msg-bubble-color-right: rgba(156, 255, 30.1);
+  --im-msg-bubble-font-color: rgba(0, 0, 0, 0.7);
+}
+.im-dark {
+  --im-main-backgroundColor: #1e2329;
+  --im-message-backgroundColor: #00540a;
+  --im-notice-backgorund: #f5222d;
+  --im-modal-backgroundColor: #1e2329;
+  --im-checkbox-backgroundColor: #e1342c;
+
+  --im-delete-fontColor:rgba(233, 67, 89, 1);
+  --im-conversationItem-noticeColor:rgba(245, 34, 45, 1);
+
+  --im-mainContent-left-borderColor: #2c2b2b;
+
+  --im-conversation-active: rgba(255, 255, 255, 0.1);
+
+  --im-main-fontColor: #fff;
+  --im-second-fontColor: rgba(255, 255, 255, 0.55);
+  --im-third-fontColor: rgba(255, 255, 255, 0.4);
+  --im-four-fontColor: rgba(255, 255, 255, 0.22);
+  --im-five-fontColor: rgba(255, 255, 255, 0.9);
+  --im-six-fontColor: rgba(0, 0, 0, 0.9);
+  --im-seven-fontColor: rgba(255, 255, 255, 0.6);
+
+  --im-tab-active-fontColor: green;
+  --im-member-remark-fontColor: rgba(0, 0, 0, 0.9);
+  --im-member-remark-owner-backgroundColor: #9cff1e;
+  --im-member-remark-admin-backgroundColor: #f67c24;
+
+  --im-group-edit-input-bg: rgba(0, 0, 0 0.1);
+  --im-group-edit-placeholder: rgba(255, 255, 255, 0.4);
+  --im-green: #9cff1e;
+  --im-main-bg-five: rgba(255, 255, 255, 0.05);
+  --im-main-bg-ten: rgba(255, 255, 255, 0.1);
+  --im-group-join-cancel-line: #595959;
+
+  //override
+  --im-msg-bubble-color-left: rgba(255, 255, 255, 0.05);
+  --im-msg-bubble-color-right: #00540a;
+  --im-msg-bubble-font-color: rgba(255, 255, 255, 1);
+
+  .cui-chat-dark {
+    background-color: var(--im-main-backgroundColor);
+  }
+
+  --im-main-buttonColor: rgba(156, 255, 30, 1);
+  --im-main-switchColor: rgba(0, 200, 5, 1);
+}
+
+.cui-message-base-right {
+  .cui-avatar {
+    display: none;
+  }
+}
+
+.cui-message-base-nickname {
+  color: var(--im-third-fontColor);
+}
+
+.ellipsis {
+  overflow: hidden; //超出的文本隐藏
+  text-overflow: ellipsis; //溢出用省略号显示
+  white-space: nowrap; //溢出不换行
+}
+
+.ant-modal-confirm {
+  .ant-modal-content {
+    background-color: #1e2329;
+    border: solid 1px rgba(255, 255, 255, 0.1);
+    .anticon-exclamation-circle {
+      font-size: 50px;
+      margin-bottom: 20px;
+    }
+    .ant-modal-confirm-body {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .ant-modal-confirm-title {
+        display: none;
+      }
+      .ant-modal-confirm-content {
+        span {
+          color: rgba(255, 255, 255, 0.55) !important;
+        }
+      }
+    }
+    .yuze-confirm-footer {
+      button {
+        &:nth-child(1) {
+          background-color: transparent !important;
+          color: #fff !important;
+        }
+        &:nth-child(2) {
+          background-color: rgba(156, 255, 30, 1) !important;
+          color: rgba(255, 255, 255, 0.9) !important;
+        }
+      }
+    }
+  }
+}

package/es/NoData/image/no-data.svg.js

@@ -0,0 +1,3 @@
+var img = "data:image/svg+xml,%3csvg width='71' height='57' viewBox='0 0 71 57' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M58.4199 33.9273L58.1051 33.9034L57.8058 33.8354L57.5184 33.7234L57.2513 33.5683L57.0116 33.3775L56.7957 33.1462L54.3595 30.0934L54.1782 29.8287L54.0387 29.5401H37.1186L36.4962 29.5091L35.8808 29.4173L35.2786 29.2635L34.6919 29.05L34.147 28.7877L33.6366 28.4776L33.1584 28.1211L32.71 27.7144L32.3034 27.2661L31.9468 26.7879L31.6368 26.2775L31.3744 25.7325L31.161 25.1458L31.0072 24.5436L30.9153 23.9283L30.8843 23.3046V6.23429L30.9153 5.61181L31.0072 4.99649L31.161 4.39429L31.3744 3.80759L31.6368 3.26262L31.9456 2.75224L32.3034 2.27406L32.71 1.82569L33.1584 1.41905L33.6366 1.0625L34.147 0.752455L34.6919 0.490108L35.2786 0.276656L35.8808 0.122825L36.4962 0.029812L37.1186 0H64.4324L65.0549 0.029812L65.6702 0.122825L66.2724 0.276656L66.8591 0.490108L67.4041 0.752455L67.9144 1.06131L68.3926 1.41905L68.841 1.82569L69.2476 2.27406L69.6054 2.75224L69.9142 3.26262L70.1766 3.80759L70.3912 4.3931L70.5438 4.99649L70.6369 5.61062L70.6667 6.23429V23.3046L70.6369 23.9283L70.5438 24.5424L70.3912 25.1458L70.1766 25.7313L69.9142 26.2763L69.6054 26.7867L69.2476 27.2649L68.841 27.7132L68.3926 28.1199L67.9144 28.4776L67.4041 28.7865L66.8591 29.0488L66.2724 29.2623L65.6702 29.4161L65.0549 29.5079L64.4324 29.5389H62.8011L62.6616 29.8275L62.4803 30.0934L60.0441 33.145L59.8294 33.3763L59.5897 33.5683L59.3226 33.7222L59.0352 33.8354L58.7359 33.9034L58.4199 33.9273Z' fill='%2368B308'/%3e%3crect x='37.1311' y='5.84473' width='27.7096' height='4.22688' rx='2.11344' fill='%23355F00'/%3e%3crect x='52.6296' y='12.8896' width='12.211' height='4.22688' rx='2.11344' fill='%23355F00'/%3e%3cpath d='M33.1593 55.021L30.0422 51.1157L29.8096 50.777L29.632 50.4061H7.97889L7.27413 50.3751L6.58488 50.2833L5.90874 50.133L5.24691 49.9244L4.61013 49.6596L3.99481 49.34L3.4093 48.968L2.85718 48.5458L2.33726 48.07L1.86146 47.5489L1.43813 46.998L1.06608 46.4125L0.746494 45.7972L0.482957 45.1604L0.274273 44.4986L0.122825 43.8224L0.0321993 43.1332L0 42.4284V20.5822L0.0321993 19.8786L0.122825 19.1894L0.273079 18.512L0.482957 17.8502L0.746494 17.2134L1.06608 16.5981L1.43813 16.0126L1.86146 15.4617L2.33726 14.9406L2.85718 14.4648L3.4093 14.0414L3.99481 13.6706L4.61013 13.3498L5.24691 13.0863L5.90874 12.8776L6.58488 12.7273L7.27413 12.6355L7.97889 12.6045H42.9317L43.6353 12.6355L44.3245 12.7273L45.0018 12.8776L45.6637 13.0863L46.3004 13.351L46.9158 13.6706L47.5013 14.0426L48.0522 14.4648L48.5733 14.9406L49.0491 15.4617L49.4712 16.0138L49.8433 16.5981L50.1641 17.2134L50.4276 17.8514L50.6363 18.512L50.7877 19.1894L50.8784 19.8786L50.9094 20.5822V42.4284L50.882 43.0914L50.8044 43.7306L50.678 44.3495L50.5027 44.9505L50.2797 45.5372L50.0174 46.0977L49.7145 46.6307L49.3699 47.1399L48.9871 47.6217L48.5721 48.07L48.1249 48.4838L47.6432 48.8666L47.134 49.2113L46.5998 49.5141L46.0405 49.7765L45.4526 49.9995L44.8528 50.1736L44.2339 50.3L43.5935 50.3775L42.9317 50.4061H40.8448L40.666 50.7758L40.4334 51.1157L37.3163 55.021L37.0408 55.3168L36.7332 55.5612L36.3909 55.758L36.0236 55.9023L35.6409 55.9905L35.2378 56.0215L34.8347 55.9905L34.452 55.9023L34.0847 55.758L33.7424 55.5612L33.4348 55.3168L33.1593 55.021Z' fill='url(%23paint0_linear_348_28783)'/%3e%3cpath d='M15.4892 31.932L15.4523 32.4651L15.3497 32.9671L15.1839 33.4429L14.9574 33.8937L14.6807 34.3039L14.3516 34.6771L13.9783 35.0051L13.5681 35.2817L13.1174 35.5083L12.6416 35.6752L12.1395 35.7766L11.6065 35.8136L11.0735 35.7766L10.5714 35.6752L10.0956 35.5083L9.64487 35.2817L9.23466 35.0051L8.86141 34.6771L8.53348 34.3039L8.25682 33.8937L8.03025 33.4429L7.8633 32.9671L7.76194 32.4651L7.72498 31.932L7.76194 31.399L7.8633 30.897L8.03025 30.4212L8.25682 29.9704L8.53348 29.5602L8.86141 29.1869L9.23466 28.8578L9.64487 28.5812L10.0956 28.3546L10.5714 28.1888L11.0735 28.0863L11.6065 28.0493L12.1395 28.0863L12.6416 28.1888L13.1174 28.3546L13.5681 28.5812L13.9783 28.8578L14.3516 29.1869L14.6807 29.5602L14.9574 29.9704L15.1839 30.4212L15.3497 30.897L15.4523 31.399L15.4892 31.932Z' fill='%2324262B'/%3e%3cpath d='M29.4136 31.932L29.3755 32.4651L29.2717 32.9671L29.1024 33.4429L28.871 33.8925L28.5884 34.3027L28.2533 34.6771L27.8729 35.0051L27.4544 35.2817L26.9941 35.5083L26.5087 35.6752L25.996 35.7766L25.4522 35.8136L24.9072 35.7766L24.3957 35.6752L23.9103 35.5083L23.45 35.2817L23.0315 35.0051L22.6511 34.6771L22.3148 34.3027L22.0322 33.8925L21.802 33.4429L21.6327 32.9671L21.5278 32.4651L21.4908 31.932L21.5278 31.399L21.6327 30.897L21.802 30.4212L22.0322 29.9704L22.3148 29.5602L22.6511 29.1869L23.0315 28.8578L23.45 28.5812L23.9103 28.3546L24.3957 28.1888L24.9072 28.0863L25.4522 28.0493L25.996 28.0863L26.5087 28.1888L26.9941 28.3546L27.4544 28.5812L27.8729 28.8578L28.2533 29.1869L28.5884 29.5602L28.871 29.9704L29.1024 30.4212L29.2717 30.897L29.3755 31.399L29.4136 31.932Z' fill='%2324262B'/%3e%3cpath d='M43.1859 31.932L43.1489 32.4651L43.0475 32.9671L42.8806 33.4429L42.654 33.8937L42.3774 34.3039L42.0494 34.6771L41.6762 35.0051L41.266 35.2817L40.8152 35.5083L40.3394 35.6752L39.8374 35.7766L39.3043 35.8136L38.7701 35.7766L38.2681 35.6752L37.7923 35.5083L37.3427 35.2817L36.9325 35.0051L36.5593 34.6771L36.2301 34.3039L35.9535 33.8937L35.7269 33.4429L35.5611 32.9671L35.4586 32.4651L35.4216 31.932L35.4586 31.399L35.5611 30.897L35.7269 30.4212L35.9535 29.9704L36.2301 29.5602L36.5593 29.1869L36.9325 28.8578L37.3427 28.5812L37.7923 28.3546L38.2681 28.1888L38.7701 28.0863L39.3043 28.0493L39.8374 28.0863L40.3394 28.1888L40.8152 28.3546L41.266 28.5812L41.6762 28.8578L42.0494 29.1869L42.3774 29.5602L42.654 29.9704L42.8806 30.4212L43.0475 30.897L43.1489 31.399L43.1859 31.932Z' fill='%2324262B'/%3e%3cdefs%3e%3clinearGradient id='paint0_linear_348_28783' x1='0' y1='34.313' x2='50.9094' y2='34.313' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%239CFF1E'/%3e%3cstop offset='0.5' stop-color='%239CFF1E'/%3e%3cstop offset='1' stop-color='%239CFF1E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e";
+
+export { img as default };

package/es/NoData/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import "./style/index.scss";
+interface INoData {
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const NoData: React.FC<INoData>;
+export default NoData;

package/es/NoData/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import img from './image/no-data.svg.js';
+import './style/index.scss';
+import classNames from 'classnames';
+
+/* eslint-disable jsx-a11y/alt-text */
+/* eslint-disable @next/next/no-img-element */
+var NoData = function NoData(props) {
+  var className = props.className,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-im-noData flex justify-center items-center h-full", className),
+    style: style
+  }, /*#__PURE__*/React.createElement("img", {
+    src: img
+  }));
+};
+
+export { NoData as default };

package/es/NoData/style/index.scss

@@ -0,0 +1,3 @@
+.yuze-im-noData{
+    
+}

package/es/Panelbar/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import "./style/index.scss";
+export interface IPanelBar {
+    name?: string;
+}
+declare const Panelbar: React.FC<IPanelBar>;
+export default Panelbar;

package/es/Panelbar/style/index.scss

@@ -0,0 +1,3 @@
+div {
+  color: var(--im-test-color);
+}

package/es/Sharebox/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import "./style/index.scss";
+export interface ISharebox {
+    name?: string;
+}
+declare const Sharebox: React.FC<ISharebox>;
+export default Sharebox;

package/es/Sharebox/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import classNames from 'classnames';
+import './style/index.scss';
+
+var Sharebox = function Sharebox(props) {
+  var name = props.name;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-shareBox")
+  }, name);
+};
+
+export { Sharebox as default };

package/es/Sidebar/CreateGroup/index.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import "./style/index.scss";
+export interface ICreateGroup {
+    name?: string;
+    onClose?: () => void;
+    open?: boolean;
+}
+export interface IUserData {
+    walletaddress: string;
+    headimgurl: string;
+    nickname: string;
+    name: string;
+    id: string;
+    type: number;
+    userid: string;
+    username: string;
+    certification: number;
+    status: number;
+}
+declare const CreateGroup: React.FC<ICreateGroup>;
+export default CreateGroup;

package/es/Sidebar/CreateGroup/index.js

@@ -0,0 +1,186 @@
+import _toConsumableArray from '@babel/runtime-corejs3/helpers/esm/toConsumableArray';
+import _asyncToGenerator from '@babel/runtime-corejs3/helpers/esm/asyncToGenerator';
+import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
+import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
+import _findInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/find';
+import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _regeneratorRuntime from '@babel/runtime-corejs3/regenerator';
+import React, { useContext, useState, useEffect } from 'react';
+import { Modal, Input, Avatar } from 'agora-chat-uikit';
+import { Button } from 'antd';
+import TypeItem from '../../TypeItem/index.js';
+import { Context } from '../../IM/context.js';
+import { useDebounceCallback } from 'usehooks-ts';
+import img from '../image/ic_close.svg.js';
+import './style/index.scss';
+
+var CreateGroup = function CreateGroup(props) {
+  var onClose = props.onClose,
+    _props$open = props.open,
+    open = _props$open === void 0 ? false : _props$open;
+  var _useContext = useContext(Context),
+    http = _useContext.http;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    list = _useState2[0],
+    setList = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    member = _useState4[0],
+    setMember = _useState4[1];
+  var handleGetFrindList = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(keyword) {
+      var result, list;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return http.post("/capi/account/imsearch/findpage", {
+              keyword: keyword,
+              type: 2,
+              userid: "fpn467kwz4rgzynyytb7enhqnjanggswe1hy5q8cja8",
+              size: 10,
+              page: 1
+            });
+          case 2:
+            result = _context.sent;
+            list = result.data.data.list;
+            setList(list);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleGetFrindList(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var handleDebounceGetFrindList = useDebounceCallback(handleGetFrindList, 100);
+  var handleCreateGroup = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _result2$data;
+      var result1, data, result2;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return http.get("/capi/account/imchannel/imchannelconfig");
+          case 2:
+            result1 = _context2.sent;
+            data = {
+              name: _mapInstanceProperty(member).call(member, function (item) {
+                return item.name;
+              }).join(","),
+              customtype: "chat_group",
+              headimgurl: result1.data.data.headimgurl,
+              memberids: _mapInstanceProperty(member).call(member, function (item) {
+                return item.userid;
+              })
+            };
+            _context2.next = 6;
+            return http.post("/capi/account/imchannel/save", data);
+          case 6:
+            result2 = _context2.sent;
+            if ((_result2$data = result2.data) !== null && _result2$data !== void 0 && (_result2$data = _result2$data.data) !== null && _result2$data !== void 0 && _result2$data.sendbirdid) {
+              onClose && onClose();
+            }
+          case 8:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function handleCreateGroup() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var handleDebounceCreateGroup = useDebounceCallback(handleCreateGroup, 100);
+  useEffect(function () {
+    handleGetFrindList();
+  }, []);
+  return /*#__PURE__*/React.createElement(Modal, {
+    open: open,
+    footer: /*#__PURE__*/React.createElement(React.Fragment, null),
+    className: "yuze-createGroup",
+    width: 820
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "yuze-createGroup-left flex-1 flex flex-col items-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "yuze-createGroup-left-title"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-lg"
+  }, "New Group")), /*#__PURE__*/React.createElement(Input, {
+    className: "my-3",
+    onChange: function onChange(e) {
+      handleDebounceGetFrindList(e.target.value);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "yuze-createGroup-left-list w-full overflow-auto"
+  }, _mapInstanceProperty(list).call(list, function (item) {
+    return /*#__PURE__*/React.createElement(TypeItem, {
+      isSelectable: true,
+      name: item.name,
+      isChecked: !!_findInstanceProperty(member).call(member, function (child) {
+        return child.id === item.id;
+      }),
+      key: item.id,
+      avatar: item.headimgurl,
+      onSelected: function onSelected() {
+        var _context3;
+        setMember(_concatInstanceProperty(_context3 = []).call(_context3, _toConsumableArray(member), [item]));
+      },
+      onCancel: function onCancel() {
+        var filterMember = _filterInstanceProperty(member).call(member, function (child) {
+          return child.id !== item.id;
+        });
+        setMember(filterMember);
+      }
+    });
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "yuze-createGroup-right flex-1 ml-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "yuze-createGroup-right-title"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-sm"
+  }, "Group Member(2/2000)")), /*#__PURE__*/React.createElement("div", {
+    className: "yuze-createGroup-right-list flex flex-row gap-5 py-4 flex-wrap overflow-auto"
+  }, _mapInstanceProperty(member).call(member, function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "yuze-createGroup-right-list-member relative",
+      key: item.id,
+      onClick: function onClick() {
+        var filterMember = _filterInstanceProperty(member).call(member, function (child) {
+          return child.id !== item.id;
+        });
+        setMember(filterMember);
+      }
+    }, /*#__PURE__*/React.createElement(Avatar, {
+      src: item.headimgurl
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "yuze-createGroup-right-list-member-close absolute"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: img
+    })));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "yuze-createGroup-right-button flex justify-center gap-5 px-5"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "default",
+    className: "flex-1 bg-transparent",
+    size: "large",
+    onClick: function onClick() {
+      setMember([]);
+      onClose && onClose();
+    }
+  }, "Close"), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    className: "flex-1",
+    size: "large",
+    onClick: function onClick() {
+      handleDebounceCreateGroup();
+    }
+  }, "Create"))));
+};
+
+export { CreateGroup as default };