whyuzeim 1.0.0

package/cjs/Sidebar/Searchbox/index.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import "./style/index.scss";
+export interface ISearchbox {
+    name?: string;
+    style?: React.CSSProperties;
+}
+export interface IUserData {
+    walletaddress: string;
+    headimgurl: string;
+    nickname: string;
+    name: string;
+    id: string;
+    type: number;
+    userid: string;
+    username: string;
+    certification: number;
+    status: number;
+}
+export interface IGroupData {
+    ownername: string;
+    members: number;
+    headimgurl: string;
+    name: string;
+    sendbirdid: string;
+    id: string;
+    type: 1;
+    userid: string;
+    groupcode: number;
+}
+declare const Searchbox: React.FC<ISearchbox>;
+export default Searchbox;

package/cjs/Sidebar/Searchbox/index.js

@@ -0,0 +1,152 @@
+'use strict';
+
+var _asyncToGenerator = require('@babel/runtime-corejs3/helpers/esm/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/esm/slicedToArray');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
+var React = require('react');
+var agoraChatUikit = require('agora-chat-uikit');
+var usehooksTs = require('usehooks-ts');
+var classNames = require('classnames');
+var index = require('../../ContactList/index.js');
+var index$1 = require('../../TypeItem/index.js');
+var context = require('../../IM/context.js');
+var ic_messages = require('./image/ic_messages.svg.js');
+require('./style/index.scss');
+var index$2 = require('../../NoData/index.js');
+
+var Searchbox = function Searchbox(props) {
+  var style = props.style;
+  var _useContext = React.useContext(context.Context),
+    http = _useContext.http,
+    renderMidComponent = _useContext.renderMidComponent;
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    current = _useState2[0],
+    setCurrent = _useState2[1];
+  var _useState3 = React.useState("21%"),
+    _useState4 = _slicedToArray(_useState3, 2),
+    left = _useState4[0],
+    setLeft = _useState4[1];
+  var _useState5 = React.useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    groups = _useState6[0],
+    setGroups = _useState6[1];
+  var _useConversationConte = agoraChatUikit.useConversationContext(),
+    setCurrentConversation = _useConversationConte.setCurrentConversation;
+  var _useState7 = React.useState(""),
+    _useState8 = _slicedToArray(_useState7, 2),
+    keyword = _useState8[0],
+    setKeyword = _useState8[1];
+  var handleGetGroupList = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    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: 1,
+            userid: agoraChatUikit.rootStore.initConfig.userId,
+            size: 10,
+            page: 1
+          });
+        case 2:
+          result = _context.sent;
+          list = result.data.data.list;
+          setGroups(list);
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [keyword]);
+  var handleDebounceGetGroupList = usehooksTs.useDebounceCallback(handleGetGroupList, 500);
+  React.useEffect(function () {
+    handleDebounceGetGroupList();
+  }, [handleGetGroupList]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-searchBox h-full w-full"),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-searchBox-header p-4")
+  }, /*#__PURE__*/React.createElement(agoraChatUikit.Input, {
+    onChange: function onChange(e) {
+      setKeyword(e.target.value);
+    },
+    onClear: function onClear() {
+      setKeyword("");
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-searchBox-list flex flex-col items-center")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-searchBox-list-tabs flex relative")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "yuze-searchBox-list-tabs-indictor absolute bottom-0",
+    style: {
+      left: left
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-searchBox-list-tabs-item flex-1 h-full flex items-center justify-center cursor-pointer", {
+      active: current === 0 ? true : false
+    }),
+    onClick: function onClick() {
+      setCurrent(0);
+      setLeft("21%");
+      setKeyword("");
+    }
+  }, /*#__PURE__*/React.createElement("span", null, "Friend")), /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-searchBox-list-tabs-item flex-1 h-full flex items-center justify-center cursor-pointer", {
+      active: current === 1 ? true : false
+    }),
+    onClick: function onClick() {
+      setCurrent(1);
+      setLeft("72%");
+      setKeyword("");
+    }
+  }, /*#__PURE__*/React.createElement("span", null, "Group"))), current === 0 && /*#__PURE__*/React.createElement(index, {
+    className: "yuze-searchBox-list-content p-4",
+    keyword: keyword,
+    renderItem: function renderItem(item) {
+      return /*#__PURE__*/React.createElement(index$1, {
+        name: item.name,
+        key: item.id,
+        avatar: item.headimgurl,
+        onClick: function onClick() {
+          renderMidComponent && renderMidComponent();
+          setCurrentConversation({
+            conversationId: item.id,
+            chatType: "singleChat",
+            name: item.name
+          });
+        },
+        rightNode: /*#__PURE__*/React.createElement("img", {
+          src: ic_messages
+        })
+      });
+    }
+  }), current === 1 && /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-searchBox-list-content p-4 w-full overflow-auto")
+  }, groups === null || groups === void 0 ? void 0 : _mapInstanceProperty(groups).call(groups, function (item) {
+    return /*#__PURE__*/React.createElement(index$1, {
+      name: item.name,
+      key: item.id,
+      type: "2",
+      avatar: item.headimgurl,
+      description: "".concat(item.members, " members"),
+      onClick: function onClick() {
+        renderMidComponent && renderMidComponent();
+        setCurrentConversation({
+          conversationId: item.sendbirdid,
+          chatType: "groupChat",
+          name: item.name
+        });
+      },
+      rightNode: /*#__PURE__*/React.createElement("img", {
+        src: ic_messages
+      })
+    });
+  }), (groups === null || groups === void 0 ? void 0 : groups.length) === 0 && /*#__PURE__*/React.createElement(index$2, null))));
+};
+
+module.exports = Searchbox;

package/cjs/Sidebar/Searchbox/style/index.scss

@@ -0,0 +1,29 @@
+.yuze-searchBox {
+  background-color: var(--im-main-backgroundColor);
+  &-list {
+    height: calc(100% - 68px);
+    &-tabs {
+      height: 50px;
+      width: 60%;
+      &-indictor {
+        width: 10%;
+        height: 2px;
+        background-color: #fff;
+        border-radius: 2px;
+      }
+      &-item {
+        span {
+          color: var(--im-second-fontColor);
+        }
+        &.active {
+          span {
+            color: var(--im-main-fontColor);
+          }
+        }
+      }
+    }
+    &-content {
+      height: calc(100% - 50px);
+    }
+  }
+}

package/cjs/Sidebar/image/create.svg.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var img = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.6663 2H1.33301V12H4.33301V13.6667L7.66634 12H14.6663V2Z' stroke='white' stroke-width='1.4' stroke-linecap='square'/%3e%3cpath d='M6 7H10' stroke='white' stroke-width='1.4' stroke-linecap='square'/%3e%3cpath d='M8 5L8 9' stroke='white' stroke-width='1.4' stroke-linecap='square'/%3e%3c/svg%3e";
+
+module.exports = img;

package/cjs/Sidebar/image/group.svg.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var img = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_2254_13527)'%3e%3cpath d='M8.00033 6.66667C9.28899 6.66667 10.3337 5.622 10.3337 4.33333C10.3337 3.04467 9.28899 2 8.00033 2C6.71166 2 5.66699 3.04467 5.66699 4.33333C5.66699 5.622 6.71166 6.66667 8.00033 6.66667Z' stroke='white' stroke-width='1.4' stroke-linecap='square' stroke-linejoin='round'/%3e%3cpath d='M4 2.41846C3.3955 2.84011 3 3.54063 3 4.33356C3 5.18233 3.4532 5.92526 4.1308 6.33356' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M12 2.41846C12.6045 2.84011 13 3.54063 13 4.33356C13 5.12646 12.6045 5.82703 12 6.24866' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M4 13.3335V14.0002H12V13.3335C12 12.091 12 11.4697 11.797 10.9797C11.5264 10.3263 11.0072 9.80713 10.3538 9.5365C9.86377 9.3335 9.2425 9.3335 8 9.3335C6.7575 9.3335 6.13623 9.3335 5.64617 9.5365C4.99277 9.80713 4.47363 10.3263 4.203 10.9797C4 11.4697 4 12.091 4 13.3335Z' stroke='white' stroke-width='1.4' stroke-linecap='square'/%3e%3cpath d='M14.667 14V13.6C14.667 12.1066 14.667 11.3598 14.3763 10.7894C14.1207 10.2876 13.7127 9.87969 13.2109 9.62402' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M1.33301 14V13.6C1.33301 12.1066 1.33301 11.3598 1.62366 10.7894C1.87932 10.2876 2.28727 9.87969 2.78903 9.62402' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_2254_13527'%3e%3crect width='16' height='16' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+
+module.exports = img;

package/cjs/Sidebar/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/Sidebar/image/ic_menu.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='M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z' fill='white'/%3e%3c/svg%3e";
+
+module.exports = img;

package/cjs/Sidebar/image/ic_search.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='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z' fill='white'/%3e%3c/svg%3e";
+
+module.exports = img;

package/cjs/Sidebar/image/message.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='M6.45455 18L3.66813 20.5021C3.02435 21.0802 2 20.6233 2 19.758V3C2 2.44772 2.44772 2 3 2H21C21.5523 2 22 2.44772 22 3V17C22 17.5523 21.5523 18 21 18H6.45455ZM9 10C9 9.44772 8.55228 9 8 9C7.44772 9 7 9.44772 7 10C7 10.5523 7.44772 11 8 11C8.55228 11 9 10.5523 9 10ZM13 10C13 9.44772 12.5523 9 12 9C11.4477 9 11 9.44772 11 10C11 10.5523 11.4477 11 12 11C12.5523 11 13 10.5523 13 10ZM15 10C15 9.44772 15.4477 9 16 9C16.5523 9 17 9.44772 17 10C17 10.5523 16.5523 11 16 11C15.4477 11 15 10.5523 15 10Z' fill='white'/%3e%3c/svg%3e";
+
+module.exports = img;

package/cjs/Sidebar/image/mobile_create.svg.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var img = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.8571 6.85714H9.14286V1.14286C9.14286 0.514286 8.62857 0 8 0C7.37143 0 6.85714 0.514286 6.85714 1.14286V6.85714H1.14286C0.514286 6.85714 0 7.37143 0 8C0 8.62857 0.514286 9.14286 1.14286 9.14286H6.85714V14.8571C6.85714 15.4857 7.37143 16 8 16C8.62857 16 9.14286 15.4857 9.14286 14.8571V9.14286H14.8571C15.4857 9.14286 16 8.62857 16 8C16 7.37143 15.4857 6.85714 14.8571 6.85714Z' fill='white'/%3e%3c/svg%3e";
+
+module.exports = img;

package/cjs/Sidebar/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { Conversation } from "agora-chat-uikit";
+import "./style/index.scss";
+export interface ISideBar {
+    name?: string;
+    onConversationItemClick?: (conversation: Conversation) => void;
+}
+declare const Sidebar: React.FC<ISideBar>;
+export default Sidebar;

package/cjs/Sidebar/index.js

@@ -0,0 +1,268 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/esm/slicedToArray');
+var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+var React = require('react');
+var agoraChatUikit = require('agora-chat-uikit');
+var antd = require('antd');
+var ic_search = require('./image/ic_search.svg.js');
+var ic_menu = require('./image/ic_menu.svg.js');
+var ic_close = require('./image/ic_close.svg.js');
+var group = require('./image/group.svg.js');
+var create = require('./image/create.svg.js');
+var message = require('./image/message.svg.js');
+var classNames = require('classnames');
+var index$3 = require('./Searchbox/index.js');
+var index$1 = require('./CreateGroup/index.js');
+var index$4 = require('./MobileCreateGroup/index.js');
+var index$5 = require('./GroupList/index.js');
+require('./style/index.scss');
+var context = require('../IM/context.js');
+var index$2 = require('./CustomConversationItem/index.js');
+var index = require('../IM/MobileHeader/index.js');
+
+var Sidebar = function Sidebar(props) {
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    openCreateGroup = _useState2[0],
+    setOpenCreateGroup = _useState2[1];
+  var _useState3 = React.useState("default"),
+    _useState4 = _slicedToArray(_useState3, 2),
+    componentType = _useState4[0],
+    setComponentType = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tooltipOpen = _useState6[0],
+    setTooltipOpen = _useState6[1];
+  var mobileCreateGroup = React.useRef(null);
+  var _useContext = React.useContext(context.Context),
+    setSidebarExpand = _useContext.setSidebarExpand,
+    midComponent = _useContext.midComponent,
+    setMidComponent = _useContext.setMidComponent,
+    setRightComponent = _useContext.setRightComponent,
+    onChatIconClick = _useContext.onChatIconClick,
+    userInfo = _useContext.userInfo,
+    mobile = _useContext.mobile;
+  var handleTooltip = React.useCallback(function (event) {
+    var _context;
+    if (!_includesInstanceProperty(_context = event.target.className).call(_context, "menu")) {
+      setTooltipOpen(false);
+    }
+  }, [setTooltipOpen]);
+  React.useEffect(function () {
+    window.addEventListener("click", handleTooltip);
+    return function () {
+      window.removeEventListener("click", handleTooltip);
+    };
+  }, [handleTooltip]);
+  var renderComponent = function renderComponent() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(agoraChatUikit.ConversationList, {
+      style: {
+        display: componentType !== "default" ? "none" : "block"
+      },
+      renderHeader: function renderHeader() {
+        return /*#__PURE__*/React.createElement(React.Fragment, null);
+      },
+      renderSearch: function renderSearch() {
+        return /*#__PURE__*/React.createElement(React.Fragment, null);
+      },
+      renderItem: function renderItem(cvs) {
+        return /*#__PURE__*/React.createElement(index$2, {
+          cvs: cvs,
+          onClick: function onClick() {
+            if (props.onConversationItemClick) {
+              props.onConversationItemClick(cvs);
+            }
+          }
+        });
+      }
+    }), /*#__PURE__*/React.createElement(index$3, {
+      style: {
+        display: componentType !== "search" ? "none" : "block"
+      }
+    }), /*#__PURE__*/React.createElement(index$4, {
+      ref: mobileCreateGroup,
+      style: {
+        display: componentType !== "createGroup" ? "none" : "block"
+      },
+      onClose: function onClose() {
+        var _mobileCreateGroup$cu, _mobileCreateGroup$cu2;
+        setComponentType("default");
+        ((_mobileCreateGroup$cu = mobileCreateGroup.current) === null || _mobileCreateGroup$cu === void 0 ? void 0 : _mobileCreateGroup$cu.clear) && ((_mobileCreateGroup$cu2 = mobileCreateGroup.current) === null || _mobileCreateGroup$cu2 === void 0 ? void 0 : _mobileCreateGroup$cu2.clear());
+      }
+    }), /*#__PURE__*/React.createElement(index$5, {
+      style: {
+        display: componentType !== "group" ? "none" : "block"
+      }
+    }));
+    // if (componentType === "search") {
+    //   return <Searchbox></Searchbox>;
+    // }
+    // if (componentType === "group") {
+    //   return <GroupList></GroupList>;
+    // }
+  };
+  var renderIcon = function renderIcon() {
+    return componentType !== "default" ? /*#__PURE__*/React.createElement("img", {
+      src: ic_close,
+      className: "cursor-pointer",
+      onClick: function onClick() {
+        setComponentType("default");
+      }
+    }) : /*#__PURE__*/React.createElement("img", {
+      src: ic_search,
+      className: "cursor-pointer",
+      onClick: function onClick() {
+        setComponentType("search");
+      }
+    });
+  };
+  var renderMobileIcon = function renderMobileIcon() {
+    return componentType !== "default" ? /*#__PURE__*/React.createElement("img", {
+      src: ic_close,
+      className: "cursor-pointer",
+      onClick: function onClick() {
+        var _mobileCreateGroup$cu3, _mobileCreateGroup$cu4;
+        setComponentType("default");
+        ((_mobileCreateGroup$cu3 = mobileCreateGroup.current) === null || _mobileCreateGroup$cu3 === void 0 ? void 0 : _mobileCreateGroup$cu3.clear) && ((_mobileCreateGroup$cu4 = mobileCreateGroup.current) === null || _mobileCreateGroup$cu4 === void 0 ? void 0 : _mobileCreateGroup$cu4.clear());
+      }
+    }) : /*#__PURE__*/React.createElement("img", {
+      src: ic_search,
+      className: "cursor-pointer",
+      onClick: function onClick() {
+        setComponentType("search");
+      }
+    });
+  };
+  var renderMobileRight = function renderMobileRight() {
+    if (componentType === "createGroup") {
+      return /*#__PURE__*/React.createElement(antd.Button, {
+        className: "mr-8",
+        onClick: function onClick() {
+          var _mobileCreateGroup$cu5, _mobileCreateGroup$cu6;
+          ((_mobileCreateGroup$cu5 = mobileCreateGroup.current) === null || _mobileCreateGroup$cu5 === void 0 ? void 0 : _mobileCreateGroup$cu5.handleDebounceCreateGroup) && ((_mobileCreateGroup$cu6 = mobileCreateGroup.current) === null || _mobileCreateGroup$cu6 === void 0 ? void 0 : _mobileCreateGroup$cu6.handleDebounceCreateGroup());
+        }
+      }, "Create");
+    }
+    return /*#__PURE__*/React.createElement(antd.Tooltip, {
+      placement: "bottomLeft",
+      open: tooltipOpen,
+      title: /*#__PURE__*/React.createElement("div", {
+        className: "yuze-conversationList-header-right-tooltip flex flex-col"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "yuze-conversationList-header-right-tooltip-item flex flex-row items-center gap-3 cursor-pointer",
+        onClick: function onClick() {
+          setComponentType("group");
+        }
+      }, /*#__PURE__*/React.createElement("img", {
+        src: group,
+        alt: ""
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "text-sm"
+      }, "Groups")), /*#__PURE__*/React.createElement("div", {
+        className: "yuze-conversationList-header-right-tooltip-item flex flex-row items-center gap-3 cursor-pointer",
+        onClick: function onClick() {
+          setComponentType("createGroup");
+        }
+      }, /*#__PURE__*/React.createElement("img", {
+        src: create,
+        alt: ""
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "text-sm"
+      }, "Create Group")))
+    }, /*#__PURE__*/React.createElement("img", {
+      src: ic_menu,
+      className: "cursor-pointer menu",
+      onClick: function onClick() {
+        setTooltipOpen(!tooltipOpen);
+      }
+    }));
+  };
+  var renderTitle = function renderTitle() {
+    if (componentType === "default") {
+      return "Message";
+    }
+    if (componentType === "group") {
+      return "Group";
+    }
+    if (componentType === "createGroup") {
+      return "New Group";
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "yuze-conversationList h-full",
+    onMouseLeave: function onMouseLeave() {
+      !mobile && componentType === "default" && userInfo.uid && setSidebarExpand && setSidebarExpand(false);
+    },
+    onMouseEnter: function onMouseEnter() {
+      !mobile && setSidebarExpand && userInfo.uid && setSidebarExpand(true);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-conversationList-header hidden flex-row items-center justify-between pr-6 pl-3 sm:flex")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-conversationList-header-left flex flex-row gap-5 items-center")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "yuze-conversationList-header-left-icon flex flex-row cursor-pointer justify-center items-center sm:none",
+    onClick: function onClick() {
+      if (!(userInfo !== null && userInfo !== void 0 && userInfo.uid)) {
+        onChatIconClick && onChatIconClick();
+        return;
+      }
+      if (midComponent) {
+        setMidComponent && setMidComponent(undefined);
+        setRightComponent && setRightComponent(undefined);
+      }
+    }
+  }, midComponent ? /*#__PURE__*/React.createElement("img", {
+    src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjgyOCAxMSA0LjY1Ny00LjY1Ny0xLjQxNS0xLjQxNEw3IDExLjk5OWw3LjA3IDcuMDcyIDEuNDE1LTEuNDE0TDEwLjgyOCAxM0gyMHYtMmgtOS4xNzJabS01LjgyOSA4VjVIM3YxNGgyWiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="
+  }) : /*#__PURE__*/React.createElement("img", {
+    src: message,
+    alt: ""
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "text-xl"
+  }, "Messages")), /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-conversationList-header-right flex justify-center items-center gap-6")
+  }, /*#__PURE__*/React.createElement(antd.Tooltip, {
+    placement: "bottomLeft",
+    title: /*#__PURE__*/React.createElement("div", {
+      className: "yuze-conversationList-header-right-tooltip flex flex-col"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "yuze-conversationList-header-right-tooltip-item flex flex-row items-center gap-3 cursor-pointer",
+      onClick: function onClick() {
+        setComponentType("group");
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      src: group,
+      alt: ""
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "text-sm"
+    }, "Groups")), /*#__PURE__*/React.createElement("div", {
+      className: "yuze-conversationList-header-right-tooltip-item flex flex-row items-center gap-3 cursor-pointer",
+      onClick: function onClick() {
+        setOpenCreateGroup(true);
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      src: create,
+      alt: ""
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "text-sm"
+    }, "Create Group")))
+  }, /*#__PURE__*/React.createElement("img", {
+    src: ic_menu,
+    className: "cursor-pointer"
+  })), renderIcon())), /*#__PURE__*/React.createElement(index, {
+    className: "sm:hidden",
+    leftIcon: renderMobileIcon(),
+    rightIcon: renderMobileRight(),
+    title: /*#__PURE__*/React.createElement("span", null, renderTitle())
+  }), (userInfo === null || userInfo === void 0 ? void 0 : userInfo.uid) && /*#__PURE__*/React.createElement("div", {
+    className: "yuze-conversationList-content"
+  }, renderComponent()), /*#__PURE__*/React.createElement(index$1, {
+    onClose: function onClose() {
+      setOpenCreateGroup(false);
+    },
+    open: openCreateGroup
+  }));
+};
+
+module.exports = Sidebar;

package/cjs/Sidebar/style/index.scss

@@ -0,0 +1,82 @@
+.yuze-conversationList {
+  background-color: var(--im-main-backgroundColor);
+  &-header {
+    height: 64px;
+    box-sizing: border-box;
+    border-bottom: solid 1px var(--im-mainContent-left-borderColor);
+    &-left {
+      span {
+        color: var(--im-main-fontColor);
+      }
+      &-icon {
+        height: 52px;
+        width: 52px;
+        background-color: #2c2b2b;
+        border-radius: 8px;
+        img {
+          width: 32px;
+          height: 32px;
+        }
+      }
+    }
+    &-item {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background-color: #292e23;
+    }
+    & > span {
+      color: var(--im-main-fontColor);
+    }
+    &-right {
+      &-tooltip {
+        &-item {
+          height: 40px;
+          img {
+            width: 20px;
+            height: 20px;
+          }
+        }
+      }
+    }
+  }
+  .cui-conversationList {
+    background-color: var(--im-main-backgroundColor);
+    .cui-conversationItem {
+      padding: 4px;
+      .cui-avatar {
+        border-radius: 8px;
+      }
+      &:hover {
+        background-color: var(--im-conversation-active);
+      }
+      &.cui-conversationItem-selected {
+        background-color: var(--im-conversation-active) !important;
+      }
+      .cui-conversationItem-info {
+        .cui-badge {
+          display: none;
+        }
+      }
+      .cui-conversationItem-content {
+        width: 280px;
+        max-width: unset;
+
+        .cui-conversationItem-nickname {
+          max-width: unset;
+          width: 90%;
+          color: var(--im-main-fontColor);
+        }
+        .cui-conversationItem-message {
+          color: var(--im-third-fontColor);
+        }
+      }
+      .cui-conversationItem-time {
+        color: var(--im-third-fontColor);
+      }
+    }
+  }
+  &-content {
+    height: calc(100% - 64px);
+  }
+}

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

@@ -0,0 +1,5 @@
+'use strict';
+
+var img = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_2112_36497)'%3e%3cpath d='M6.33333 6.66667C7.622 6.66667 8.66667 5.622 8.66667 4.33333C8.66667 3.04467 7.622 2 6.33333 2C5.04467 2 4 3.04467 4 4.33333C4 5.622 5.04467 6.66667 6.33333 6.66667Z' stroke='white' stroke-width='1.4'/%3e%3cpath d='M13.9176 9.38145C14.2285 9.38145 14.4801 9.12988 14.4801 8.81895C14.4801 8.50801 14.2285 8.25645 13.9176 8.25645H12.7879V7.55176H13.9176C14.2285 7.55176 14.4801 7.3002 14.4801 6.98926C14.4801 6.67832 14.2285 6.42676 13.9176 6.42676H12.2254C11.9145 6.42676 11.6629 6.67832 11.6629 6.98926V10.5346C10.691 10.7846 9.9707 11.6689 9.9707 12.7189C9.9707 13.9627 10.9816 14.9736 12.2254 14.9736C13.4691 14.9736 14.4801 13.9627 14.4801 12.7189C14.4801 11.6689 13.7598 10.7861 12.7879 10.5346V9.38301H13.9176V9.38145ZM13.3551 12.7174C13.3551 13.3408 12.8488 13.8471 12.2254 13.8471C11.602 13.8471 11.0957 13.3408 11.0957 12.7174C11.0957 12.0939 11.602 11.5877 12.2254 11.5877C12.8488 11.5877 13.3551 12.0939 13.3551 12.7174Z' fill='white'/%3e%3cpath d='M9 9.3335H6.26667C4.7732 9.3335 4.02647 9.3335 3.45603 9.62413C2.95426 9.8798 2.54631 10.2878 2.29065 10.7895C2 11.36 2 12.1067 2 13.6002V14.0002H9' stroke='white' stroke-width='1.4' stroke-linecap='square'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_2112_36497'%3e%3crect width='16' height='16' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+
+module.exports = img;

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

@@ -0,0 +1,5 @@
+'use strict';
+
+var img = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_2112_36529)'%3e%3cpath d='M8.49967 12.3335H6.99967L3.66634 14.0002V12.3335H1.33301V2.3335H14.6663V6.00016' stroke='white' stroke-width='1.4' stroke-linecap='square'/%3e%3cpath d='M4 5H5H6' stroke='white' stroke-width='1.4' stroke-linecap='square' stroke-linejoin='round'/%3e%3cpath d='M4 8H6H8' stroke='white' stroke-width='1.4' stroke-linecap='square' stroke-linejoin='round'/%3e%3cpath d='M10.667 8.3335L14.667 12.3335' stroke='white' stroke-width='1.4' stroke-linecap='square' stroke-linejoin='round'/%3e%3cpath d='M14.667 8.3335L10.667 12.3335' stroke='white' stroke-width='1.4' stroke-linecap='square' stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_2112_36529'%3e%3crect width='16' height='16' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+
+module.exports = img;

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

@@ -0,0 +1,5 @@
+'use strict';
+
+var img = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_2112_36519)'%3e%3cpath d='M6.33333 6.66667C7.622 6.66667 8.66667 5.622 8.66667 4.33333C8.66667 3.04467 7.622 2 6.33333 2C5.04467 2 4 3.04467 4 4.33333C4 5.622 5.04467 6.66667 6.33333 6.66667Z' stroke='white' stroke-width='1.4' stroke-linejoin='round'/%3e%3cpath d='M11 10.3335L13.6667 13.0002' stroke='white' stroke-width='1.4' stroke-linecap='square' stroke-linejoin='round'/%3e%3cpath d='M11 13.0002L13.6667 10.3335' stroke='white' stroke-width='1.4' stroke-linecap='square' stroke-linejoin='round'/%3e%3cpath d='M9 9.3335H6.26667C4.7732 9.3335 4.02647 9.3335 3.45603 9.62413C2.95426 9.8798 2.54631 10.2878 2.29065 10.7895C2 11.36 2 12.1067 2 13.6002V14.0002H9' stroke='white' stroke-width='1.4' stroke-linecap='square'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_2112_36519'%3e%3crect width='16' height='16' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+
+module.exports = img;

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

@@ -0,0 +1,5 @@
+'use strict';
+
+var img = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.99723 2H2V14H8' stroke='white' stroke-width='1.5' stroke-linecap='square'/%3e%3cpath d='M11 11L14 8L11 5' stroke='white' stroke-width='1.5' stroke-linecap='square'/%3e%3cpath d='M5.33301 7.99707H13.5' stroke='white' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='round'/%3e%3c/svg%3e";
+
+module.exports = img;