whyuzeim 1.1.19 → 1.1.20

package/cjs/HighlyCustomChat/index.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { Conversation } from "agora-chat-uikit";
 import { ChatSDK } from "agora-chat-uikit/types/module/SDK";
 import { ChatType } from "agora-chat-uikit/types/module/types/messageType";
+import "./style/index.scss";
 export interface IHighlyCustomChat {
     conversationId: string;
     chatType: ChatType;

package/cjs/HighlyCustomChat/index.js

@@ -24,6 +24,7 @@ var type = require('../type.js');
 var tools = require('../tools.js');
 var avatar_default = require('../Icon/avatar_default.svg.js');
 var encryption = require('../IM/encryption.js');
+require('./style/index.scss');
 
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(t), true)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -63,6 +64,7 @@ var HighlyCustomChat = function HighlyCustomChat(props) {
     _useState8 = _slicedToArray(_useState7, 2);
     _useState8[0];
     var setIsAgent = _useState8[1];
+  React.useRef(null);
   var renderTxtMsg = function renderTxtMsg(msg) {
     var _userInfo$uid;
     var isMySelf = (msg === null || msg === void 0 ? void 0 : msg.bySelf) === true || (msg === null || msg === void 0 ? void 0 : msg.from.toLowerCase()) === ((_userInfo$uid = userInfo.uid) === null || _userInfo$uid === void 0 ? void 0 : _userInfo$uid.toLowerCase());
@@ -374,7 +376,7 @@ var HighlyCustomChat = function HighlyCustomChat(props) {
   }, [getHeaderInfo, initConversation, props.conversationId]);
   var handleSendMessage = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(text) {
-      var txtMessage;
+      var txtMessage, cuiScrollList, cuiScrollListWrap, htmlString, template, node;
       return _regeneratorRuntime.wrap(function _callee$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -395,18 +397,35 @@ var HighlyCustomChat = function HighlyCustomChat(props) {
             _context2.next = 6;
             return agoraChatUikit.rootStore.messageStore.sendMessage(txtMessage);
           case 6:
+            cuiScrollList = document.querySelector(".cui-scrollList div");
+            cuiScrollListWrap = document.querySelector(".cui-scrollList");
+            if (cuiScrollList) {
+              htmlString = "<div class=\"cui-messageList-msgItem\"><div><div class=\"thread-container\"><div id=\"1393207307050949578\" class=\"cui-message-base cui-message-base-left cui-message-base-hasAvatar cui-message-base-secondly cui-message-base-square cui-message-base-dark\"><img src=\"https://static.moonpump.ai/avatars/1.png\" class=\"w-[48px] h-[48px] rounded-full overflow-hidden object-fit\"><div class=\"cui-message-base-box\"><div class=\"cui-message-base-info\"></div><div class=\"cui-message-base-body\"><div class=\"cui-message-base-content\" style=\"background: var(--im-msg-bubble-color-left); border-radius: 9px; padding: 10px 12px; color: var(--im-msg-bubble-font-color);\"><div style=\"display:flex;align-items:center\"><div class=\"generating-loader-wrap\"><div class=\"generating-loader\"></div></div><span class=\"cui-message-text\">Generating</span></div></div><div class=\"cui-message-base-time-and-status-box\"><span class=\"cui-message-status cui-message-status-icon\"></span><span class=\"cui-message-base-time\">Mar</span></div></div></div></div></div></div><div class=\"cui-modal-root\"><div tabindex=\"-1\" class=\"cui-modal-wrap modify-message-modal\" style=\"display: none;\"></div></div></div>";
+              template = document.createElement('template');
+              template.innerHTML = _trimInstanceProperty(htmlString).call(htmlString);
+              node = template.content.firstChild;
+              if (node) {
+                cuiScrollList.appendChild(node);
+                cuiScrollListWrap === null || cuiScrollListWrap === void 0 || cuiScrollListWrap.scrollTo({
+                  top: 1000000000
+                });
+              }
+              // cuiScrollList.appendChild(`
+              //   <div class="cui-messageList-msgItem"><div><div class="thread-container"><div id="1393207307050949578" class="cui-message-base cui-message-base-left cui-message-base-hasAvatar cui-message-base-secondly cui-message-base-square cui-message-base-dark"><img src="https://static.moonpump.ai/avatars/1.png" class="w-[48px] h-[48px] rounded-full overflow-hidden object-fit"><div class="cui-message-base-box"><div class="cui-message-base-info"></div><div class="cui-message-base-body"><div class="cui-message-base-content" style="background: var(--im-msg-bubble-color-left); border-radius: 9px; padding: 10px 12px; color: var(--im-msg-bubble-font-color);"><div class=""><span class="cui-message-text">32132654</span></div></div><div class="cui-message-base-time-and-status-box"><span class="cui-message-status cui-message-status-icon"></span><span class="cui-message-base-time">Mar</span></div></div></div></div></div></div><div class="cui-modal-root"><div tabindex="-1" class="cui-modal-wrap modify-message-modal" style="display: none;"></div></div></div>
+              //   `)
+            }
             afterSendMsg(txtMessage);
-            _context2.next = 12;
+            _context2.next = 15;
             break;
-          case 9:
-            _context2.prev = 9;
+          case 12:
+            _context2.prev = 12;
             _context2.t0 = _context2["catch"](2);
             console.log("send txt message failed", _context2.t0);
-          case 12:
+          case 15:
           case "end":
             return _context2.stop();
         }
-      }, _callee, null, [[2, 9]]);
+      }, _callee, null, [[2, 12]]);
     }));
     return function handleSendMessage(_x) {
       return _ref3.apply(this, arguments);

package/cjs/HighlyCustomChat/style/index.scss

@@ -0,0 +1,16 @@
+.generating-loader {
+    width: 4px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    animation: l5 1s infinite linear alternate;
+  }
+  
+  @keyframes l5 {
+    0%   { box-shadow: 8px 0 #000, -8px 0 #0002; background: #000; }
+    33%  { box-shadow: 8px 0 #000, -8px 0 #0002; background: #0002; }
+    88%  { box-shadow: 8px 0 #0002, -8px 0 #000; background: #0002; }
+    100% { box-shadow: 8px 0 #0002, -8px 0 #000; background: #000; }
+  }
+  .generating-loader-wrap{
+    margin: 0 12px 0 8px;
+  }

package/es/HighlyCustomChat/index.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { Conversation } from "agora-chat-uikit";
 import { ChatSDK } from "agora-chat-uikit/types/module/SDK";
 import { ChatType } from "agora-chat-uikit/types/module/types/messageType";
+import "./style/index.scss";
 export interface IHighlyCustomChat {
     conversationId: string;
     chatType: ChatType;

package/es/HighlyCustomChat/index.js

@@ -22,6 +22,7 @@ import { commonMessageInputConfig, commonMessageProps } from '../type.js';
 import { reportAgentInUse } from '../tools.js';
 import img from '../Icon/avatar_default.svg.js';
 import { aesKey, aesDecrypt } from '../IM/encryption.js';
+import './style/index.scss';
 
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(t), true)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -61,6 +62,7 @@ var HighlyCustomChat = function HighlyCustomChat(props) {
     _useState8 = _slicedToArray(_useState7, 2);
     _useState8[0];
     var setIsAgent = _useState8[1];
+  useRef(null);
   var renderTxtMsg = function renderTxtMsg(msg) {
     var _userInfo$uid;
     var isMySelf = (msg === null || msg === void 0 ? void 0 : msg.bySelf) === true || (msg === null || msg === void 0 ? void 0 : msg.from.toLowerCase()) === ((_userInfo$uid = userInfo.uid) === null || _userInfo$uid === void 0 ? void 0 : _userInfo$uid.toLowerCase());
@@ -372,7 +374,7 @@ var HighlyCustomChat = function HighlyCustomChat(props) {
   }, [getHeaderInfo, initConversation, props.conversationId]);
   var handleSendMessage = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(text) {
-      var txtMessage;
+      var txtMessage, cuiScrollList, cuiScrollListWrap, htmlString, template, node;
       return _regeneratorRuntime.wrap(function _callee$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -393,18 +395,35 @@ var HighlyCustomChat = function HighlyCustomChat(props) {
             _context2.next = 6;
             return rootStore.messageStore.sendMessage(txtMessage);
           case 6:
+            cuiScrollList = document.querySelector(".cui-scrollList div");
+            cuiScrollListWrap = document.querySelector(".cui-scrollList");
+            if (cuiScrollList) {
+              htmlString = "<div class=\"cui-messageList-msgItem\"><div><div class=\"thread-container\"><div id=\"1393207307050949578\" class=\"cui-message-base cui-message-base-left cui-message-base-hasAvatar cui-message-base-secondly cui-message-base-square cui-message-base-dark\"><img src=\"https://static.moonpump.ai/avatars/1.png\" class=\"w-[48px] h-[48px] rounded-full overflow-hidden object-fit\"><div class=\"cui-message-base-box\"><div class=\"cui-message-base-info\"></div><div class=\"cui-message-base-body\"><div class=\"cui-message-base-content\" style=\"background: var(--im-msg-bubble-color-left); border-radius: 9px; padding: 10px 12px; color: var(--im-msg-bubble-font-color);\"><div style=\"display:flex;align-items:center\"><div class=\"generating-loader-wrap\"><div class=\"generating-loader\"></div></div><span class=\"cui-message-text\">Generating</span></div></div><div class=\"cui-message-base-time-and-status-box\"><span class=\"cui-message-status cui-message-status-icon\"></span><span class=\"cui-message-base-time\">Mar</span></div></div></div></div></div></div><div class=\"cui-modal-root\"><div tabindex=\"-1\" class=\"cui-modal-wrap modify-message-modal\" style=\"display: none;\"></div></div></div>";
+              template = document.createElement('template');
+              template.innerHTML = _trimInstanceProperty(htmlString).call(htmlString);
+              node = template.content.firstChild;
+              if (node) {
+                cuiScrollList.appendChild(node);
+                cuiScrollListWrap === null || cuiScrollListWrap === void 0 || cuiScrollListWrap.scrollTo({
+                  top: 1000000000
+                });
+              }
+              // cuiScrollList.appendChild(`
+              //   <div class="cui-messageList-msgItem"><div><div class="thread-container"><div id="1393207307050949578" class="cui-message-base cui-message-base-left cui-message-base-hasAvatar cui-message-base-secondly cui-message-base-square cui-message-base-dark"><img src="https://static.moonpump.ai/avatars/1.png" class="w-[48px] h-[48px] rounded-full overflow-hidden object-fit"><div class="cui-message-base-box"><div class="cui-message-base-info"></div><div class="cui-message-base-body"><div class="cui-message-base-content" style="background: var(--im-msg-bubble-color-left); border-radius: 9px; padding: 10px 12px; color: var(--im-msg-bubble-font-color);"><div class=""><span class="cui-message-text">32132654</span></div></div><div class="cui-message-base-time-and-status-box"><span class="cui-message-status cui-message-status-icon"></span><span class="cui-message-base-time">Mar</span></div></div></div></div></div></div><div class="cui-modal-root"><div tabindex="-1" class="cui-modal-wrap modify-message-modal" style="display: none;"></div></div></div>
+              //   `)
+            }
             afterSendMsg(txtMessage);
-            _context2.next = 12;
+            _context2.next = 15;
             break;
-          case 9:
-            _context2.prev = 9;
+          case 12:
+            _context2.prev = 12;
             _context2.t0 = _context2["catch"](2);
             console.log("send txt message failed", _context2.t0);
-          case 12:
+          case 15:
           case "end":
             return _context2.stop();
         }
-      }, _callee, null, [[2, 9]]);
+      }, _callee, null, [[2, 12]]);
     }));
     return function handleSendMessage(_x) {
       return _ref3.apply(this, arguments);

package/es/HighlyCustomChat/style/index.scss

@@ -0,0 +1,16 @@
+.generating-loader {
+    width: 4px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    animation: l5 1s infinite linear alternate;
+  }
+  
+  @keyframes l5 {
+    0%   { box-shadow: 8px 0 #000, -8px 0 #0002; background: #000; }
+    33%  { box-shadow: 8px 0 #000, -8px 0 #0002; background: #0002; }
+    88%  { box-shadow: 8px 0 #0002, -8px 0 #000; background: #0002; }
+    100% { box-shadow: 8px 0 #0002, -8px 0 #000; background: #000; }
+  }
+  .generating-loader-wrap{
+    margin: 0 12px 0 8px;
+  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "whyuzeim",
-  "version": "1.1.19",
+  "version": "1.1.20",
   "description": "im componenets",
   "main": "cjs/index.js",
   "module": "es/index.js",