whyuzeim 1.0.0

package/cjs/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var index = require('./IM/index.js');
+var context = require('./IM/context.js');
+var index$1 = require('./IM/DefaultIMLayout/index.js');
+var index$2 = require('./Sidebar/CreateGroup/index.js');
+var index$3 = require('./UserProfile/index.js');
+var index$4 = require('./Sharebox/index.js');
+var index$5 = require('./GroupDetail/index.js');
+var index$6 = require('./ChatBox/index.js');
+var index$7 = require('./CustomChatView/index.js');
+
+
+
+exports.IM = index;
+exports.Context = context.Context;
+exports.DefaultIMLayout = index$1;
+exports.CreateGroup = index$2;
+exports.UserProfile = index$3;
+exports.Sharebox = index$4;
+exports.GroupDetail = index$5;
+exports.ChatBox = index$6;
+exports.CustomChatView = index$7;

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

package/cjs/type.js

@@ -0,0 +1,61 @@
+'use strict';
+
+// config messageInput
+var commonMessageInputConfig = {
+  enabledTyping: true,
+  enabledMention: true,
+  actions: [{
+    name: 'TEXTAREA',
+    visible: true
+  }, {
+    name: 'EMOJI',
+    visible: true
+  }, {
+    name: 'MORE',
+    visible: true
+  }],
+  customActions: [{
+    content: 'IMAGE'
+  }, {
+    content: 'VIDEO'
+  }, {
+    content: 'FILE'
+  }]
+};
+// config message
+var commonMessageProps = {
+  customAction: {
+    visible: true,
+    icon: null,
+    actions: [{
+      content: 'REPLY',
+      onClick: function onClick() {}
+    }, {
+      content: 'UNSEND',
+      onClick: function onClick() {}
+    }, {
+      content: 'Modify',
+      onClick: function onClick() {}
+    },
+    // {
+    //   content: 'PIN',
+    //   onClick: () => {},
+    // },
+    {
+      content: 'TRANSLATE',
+      onClick: function onClick() {}
+    }, {
+      content: 'DELETE',
+      onClick: function onClick() {}
+    }]
+  },
+  reaction: false,
+  select: false,
+  thread: false,
+  renderUserProfile: function renderUserProfile() {
+    return null;
+  } // 修正后的箭头函数语法
+};
+
+exports.commonMessageInputConfig = commonMessageInputConfig;
+exports.commonMessageProps = commonMessageProps;

package/es/AddMember/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/AddMember/index.d.ts

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

package/es/AddMember/index.js

@@ -0,0 +1,105 @@
+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 _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 classNames from 'classnames';
+import React, { useContext, useState, useCallback } from 'react';
+import img from './image/ic_close.svg.js';
+import { rootStore, Input, Checkbox } from 'agora-chat-uikit';
+import ContactList from '../ContactList/index.js';
+import TypeItem from '../TypeItem/index.js';
+import { Context } from '../IM/context.js';
+import { Button } from 'antd';
+import { useDebounceCallback } from 'usehooks-ts';
+import './style/index.scss';
+
+var AddMember = function AddMember() {
+  var _useContext = useContext(Context),
+    setRightComponent = _useContext.setRightComponent;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    keyword = _useState2[0],
+    setKeyword = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    memberids = _useState4[0],
+    setMemberids = _useState4[1];
+  var _useContext2 = useContext(Context),
+    http = _useContext2.http;
+  var handleAddMember = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var result;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          result = http.post("/capi/account/imchannel/inviteruser", {
+            sendbirdid: rootStore.conversationStore.currentCvs.conversationId,
+            memberids: memberids
+          });
+          console.log(result);
+          setRightComponent && setRightComponent(undefined);
+          setMemberids([]);
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [http, memberids, setRightComponent]);
+  var handleDebouncdAddMember = useDebounceCallback(handleAddMember, 100);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-addMember w-full h-full")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-addMember-header flex flex-row items-center justify-between gap-4")
+  }, /*#__PURE__*/React.createElement("img", {
+    src: img,
+    className: "cursor-pointer",
+    onClick: function onClick() {
+      setRightComponent && setRightComponent(undefined);
+    }
+  }), /*#__PURE__*/React.createElement(Input, {
+    className: "flex-1",
+    onChange: function onChange(event) {
+      setKeyword(event.target.value);
+    },
+    onClear: function onClear() {
+      setKeyword("");
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
+    className: "yuze-addMember-confirm",
+    type: "primary",
+    onClick: handleDebouncdAddMember
+  }, "Confirm")), /*#__PURE__*/React.createElement("div", {
+    className: "yuze-addMember-member p-4"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "block text-center"
+  }, "Member"), /*#__PURE__*/React.createElement(ContactList, {
+    className: "yuze-searchBox-list-content p-4",
+    keyword: keyword,
+    groupId: "",
+    memberids: memberids,
+    renderItem: function renderItem(item) {
+      return /*#__PURE__*/React.createElement(TypeItem, {
+        name: item.name,
+        key: item.id,
+        avatar: item.headimgurl,
+        rightNode: /*#__PURE__*/React.createElement(Checkbox, {
+          className: "yuze-addMember-checkbox",
+          onChange: function onChange(event) {
+            if (event.target.checked) {
+              var _context2;
+              setMemberids(_concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray(memberids), [item.userid]));
+            } else {
+              var filterMember = _filterInstanceProperty(memberids).call(memberids, function (child) {
+                return child !== item.id;
+              });
+              setMemberids(filterMember);
+            }
+          }
+        })
+      });
+    }
+  })));
+};
+
+export { AddMember as default };

package/es/AddMember/style/index.scss

@@ -0,0 +1,47 @@
+.yuze-addMember {
+  background-color: var(--im-main-backgroundColor);
+  .yuze-addMember-header {
+    height: 64px;
+    box-sizing: border-box;
+    padding: 0 10px;
+    & > span {
+      color: var(--im-main-fontColor);
+    }
+  }
+  .yuze-addMember-member {
+    height: calc(100% - 64px);
+    & > span {
+      height: 34px;
+      color: var(--im-main-fontColor);
+      border-bottom: solid 1px #fff;
+    }
+  }
+  &-confirm {
+    background-color: var(--im-main-buttonColor) !important;
+    color: var(--im-five-fontColor) !important;
+    width: 100px;
+  }
+  &-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;
+        width: 5px;
+        height: 10px;
+      }
+    }
+    input:checked ~ .cui-checkbox--mark {
+      background-color: var(--im-checkbox-backgroundColor);
+      border: none;
+    }
+  }
+}

package/es/ChatBox/JoinGroupDialog/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './style/index.scss';
+interface GroupJoinDialogProps {
+    visible: boolean;
+    onClose: () => void;
+    shareGroupInfo?: any;
+    userId: string;
+}
+declare const JoinGroupDialog: React.FC<GroupJoinDialogProps>;
+export default JoinGroupDialog;

package/es/ChatBox/JoinGroupDialog/index.js

@@ -0,0 +1,100 @@
+import _asyncToGenerator from '@babel/runtime-corejs3/helpers/esm/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime-corejs3/regenerator';
+import React, { useContext } from 'react';
+import { Modal, message } from 'antd';
+import { Context } from '../../IM/context.js';
+import { rootStore } from 'agora-chat-uikit';
+import './style/index.scss';
+
+var JoinGroupDialog = function JoinGroupDialog(props) {
+  var _props$shareGroupInfo6;
+  var _useContext = useContext(Context),
+    http = _useContext.http;
+  var joinGroup = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _props$shareGroupInfo;
+      var params, _yield$http$post, data, _props$shareGroupInfo2, _props$shareGroupInfo3, _props$shareGroupInfo4, _props$shareGroupInfo5, conversation;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            params = {
+              channelurl: (_props$shareGroupInfo = props.shareGroupInfo) === null || _props$shareGroupInfo === void 0 ? void 0 : _props$shareGroupInfo.sendbirdid,
+              inviteruid: props.userId
+            };
+            _context.next = 3;
+            return http.post('/capi/account/imchannel/apply/join', params);
+          case 3:
+            _yield$http$post = _context.sent;
+            data = _yield$http$post.data;
+            if ((data === null || data === void 0 ? void 0 : data.code) === 1512112) {
+              message.info('Application successful, waiting for admin review');
+            } else if ((data === null || data === void 0 ? void 0 : data.code) === 200) {
+              //加入成功.
+              props.onClose();
+              conversation = {
+                chatType: 'groupChat',
+                conversationId: (_props$shareGroupInfo2 = props.shareGroupInfo) === null || _props$shareGroupInfo2 === void 0 ? void 0 : _props$shareGroupInfo2.sendbirdid,
+                lastMessage: {},
+                unreadCount: 0,
+                name: props === null || props === void 0 || (_props$shareGroupInfo3 = props.shareGroupInfo) === null || _props$shareGroupInfo3 === void 0 ? void 0 : _props$shareGroupInfo3.name,
+                avatarUrl: props === null || props === void 0 || (_props$shareGroupInfo4 = props.shareGroupInfo) === null || _props$shareGroupInfo4 === void 0 ? void 0 : _props$shareGroupInfo4.headimgurl
+              };
+              rootStore.conversationStore.addConversation(conversation);
+              rootStore.conversationStore.setCurrentCvs({
+                conversationId: (_props$shareGroupInfo5 = props.shareGroupInfo) === null || _props$shareGroupInfo5 === void 0 ? void 0 : _props$shareGroupInfo5.sendbirdid,
+                chatType: 'groupChat'
+              });
+            } else {
+              message.error(data === null || data === void 0 ? void 0 : data.msg);
+            }
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function joinGroup() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/React.createElement(Modal, {
+    open: props.visible,
+    onCancel: props.onClose,
+    destroyOnClose: true,
+    centered: true,
+    getContainer: false,
+    width: window.innerWidth <= 768 ? '90%' : '420px' // 动态设置宽度
+    ,
+    footer: null,
+    mask: true,
+    className: "customModal" // 使用自定义样式
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-3 cursor-pointer"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "w-14 h-14 rounded-md",
+    src: props.shareGroupInfo.headimgurl,
+    alt: "Group"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex-1 overflow-hidden"
+  }, /*#__PURE__*/React.createElement("h6", {
+    className: "text-[var(--im-main-fontColor)] text-lg font-medium truncate"
+  }, (_props$shareGroupInfo6 = props.shareGroupInfo.name) !== null && _props$shareGroupInfo6 !== void 0 ? _props$shareGroupInfo6 : "-"), /*#__PURE__*/React.createElement("p", {
+    className: "text-[var(--im-second-fontColor)] text-sm truncate"
+  }, props.shareGroupInfo.members, " members"))), /*#__PURE__*/React.createElement("div", {
+    className: "text-[var(--im-main-fontColor)] text-xs font-normal mt-6"
+  }, "Owner: ", /*#__PURE__*/React.createElement("span", {
+    className: "text-[var(--im-green)]"
+  }, props.shareGroupInfo.ownername)), /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-between mt-6 gap-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-center cursor-pointer w-40 h-12 text-[var(--im-main-fontColor)] text-base font-semibold rounded-md rounded-md outline-1 outline-offset-[-1px] outline-[var(--im-group-join-cancel-line)]",
+    onClick: function onClick() {
+      return props.onClose();
+    }
+  }, "Cancel"), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-center cursor-pointer w-40 h-12 text-lg text-[var(--im-six-fontColor)] font-normal rounded-md bg-[var(--im-green)] hover:opacity-80",
+    onClick: joinGroup
+  }, "Join")));
+};
+
+export { JoinGroupDialog as default };

package/es/ChatBox/JoinGroupDialog/style/index.scss

@@ -0,0 +1,4 @@
+.customModal .ant-modal-content {
+  background-color: var(--im-main-backgroundColor) !important;
+  padding: 32px !important;
+}

package/es/ChatBox/image/ic_chat_back.svg.js

@@ -0,0 +1,3 @@
+var img = "data:image/svg+xml,%3csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='40' height='40' rx='20' fill='white' fill-opacity='0.05'/%3e%3cpath d='M22.3748 11.5C22.6341 11.5 22.8945 11.5901 23.1065 11.7742C23.5789 12.1837 23.6339 12.9029 23.2285 13.3807L17.1068 20.0004L23.2285 26.6201C23.6339 27.0979 23.5789 27.8171 23.1065 28.2265C22.6352 28.6343 21.9244 28.5803 21.5212 28.1031L14.7711 20.7419C14.4096 20.3152 14.4096 19.6855 14.7711 19.2589L21.5212 11.8977C21.7431 11.6352 22.0584 11.5 22.3748 11.5Z' fill='white'/%3e%3c/svg%3e";
+
+export { img as default };

package/es/ChatBox/image/ic_more.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 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";
+
+export { img as default };

package/es/ChatBox/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "./style/index.scss";
+export interface IChatbox {
+    onClickHeaderBack: (cvs: {
+        conversationId: string;
+        chatType: 'singleChat' | 'groupChat';
+    }) => void;
+}
+declare const Chatbox: React.FC<IChatbox>;
+export default Chatbox;