whyuzeim 1.0.1 → 1.0.2

package/cjs/CustomChatView/index.d.ts

@@ -5,6 +5,8 @@ export interface ICustomChatbox {
     conversationId: string;
     chatType: ChatType;
     className?: string;
+    tokenId?: string;
+    tokenName?: string;
 }
 declare const CustomChatView: React.FC<ICustomChatbox>;
 export default CustomChatView;

package/cjs/CustomChatView/index.js

@@ -25,7 +25,7 @@ var set = require('./image/set.svg.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 _context7, _context8; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context7 = ownKeys(Object(t), true)).call(_context7, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context8 = ownKeys(Object(t))).call(_context8, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context10, _context11; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context10 = ownKeys(Object(t), true)).call(_context10, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context11 = ownKeys(Object(t))).call(_context11, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var CustomChatView = function CustomChatView(props) {
   var _props$className;
   var _useContext = React.useContext(context.Context),
@@ -53,6 +53,8 @@ var CustomChatView = function CustomChatView(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     headerInfo = _useState6[0],
     setHeaderInfo = _useState6[1];
+  var _useSDK = agoraChatUikit.useSDK(),
+    MessageSDK = _useSDK.ChatSDK;
   var renderTxtMsg = function renderTxtMsg(msg) {
     var _userInfo$uid, _ref;
     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());
@@ -249,18 +251,18 @@ var CustomChatView = function CustomChatView(props) {
     return _getShareGroupInfo.apply(this, arguments);
   }
   function _getShareGroupInfo() {
-    _getShareGroupInfo = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(shareInfo, isJoined) {
+    _getShareGroupInfo = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee8(shareInfo, isJoined) {
       var params, response, data, groupInfo, waitJoinGroupinfo, conversation, _response$data2;
-      return _regeneratorRuntime.wrap(function _callee5$(_context6) {
-        while (1) switch (_context6.prev = _context6.next) {
+      return _regeneratorRuntime.wrap(function _callee8$(_context9) {
+        while (1) switch (_context9.prev = _context9.next) {
           case 0:
             params = {
               sendbirdid: shareInfo === null || shareInfo === void 0 ? void 0 : shareInfo.objectId
             };
-            _context6.next = 3;
+            _context9.next = 3;
             return http.post("/capi/account/imchannel/getdetails", params);
           case 3:
-            response = _context6.sent;
+            response = _context9.sent;
             data = response.data;
             if (data && data.code === 200 && data.data) {
               groupInfo = data.data;
@@ -297,9 +299,9 @@ var CustomChatView = function CustomChatView(props) {
             }
           case 6:
           case "end":
-            return _context6.stop();
+            return _context9.stop();
         }
-      }, _callee5);
+      }, _callee8);
     }));
     return _getShareGroupInfo.apply(this, arguments);
   }
@@ -385,14 +387,14 @@ var CustomChatView = function CustomChatView(props) {
   }, []);
   var customHeader = function customHeader() {
     return /*#__PURE__*/React.createElement("div", {
-      className: "flex h-[64px] items-center bg-[var(--im-main-backgroundColor)] pl-4 pr-4 justify-between"
+      className: "flex h-20 items-center bg-[var(--im-main-backgroundColor)] border-b border-[var(--im-border-10)] mx-4 justify-between"
     }, /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center gap-2"
+      className: "flex items-center gap-4"
     }, /*#__PURE__*/React.createElement("img", {
       src: headerInfo.headerImageURL,
       className: "w-12 h-12 ".concat(headerInfo.chatType === 'groupChat' ? 'rounded-md' : 'rounded-full', " bg-blue")
     }), /*#__PURE__*/React.createElement("div", {
-      className: "flex flex-col overflow-hidden mx-5 flex-1"
+      className: "flex flex-col overflow-hidden flex-1"
     }, /*#__PURE__*/React.createElement("p", {
       className: "text-[var(--im-main-fontColor)] text-base font-normal line-clamp-1 mr-[100px]"
     }, headerInfo.conversationName), headerInfo.chatType === 'groupChat' && /*#__PURE__*/React.createElement("p", {
@@ -511,8 +513,88 @@ var CustomChatView = function CustomChatView(props) {
       return _ref13.apply(this, arguments);
     };
   }();
+  // 给agent 发送消息需要调用该接口
+  var sendAgentMsg = /*#__PURE__*/function () {
+    var _ref14 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+      var userid,
+        content,
+        options,
+        _args5 = arguments;
+      return _regeneratorRuntime.wrap(function _callee5$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            userid = _args5.length > 0 && _args5[0] !== undefined ? _args5[0] : '';
+            content = _args5.length > 1 && _args5[1] !== undefined ? _args5[1] : '';
+            _context6.prev = 2;
+            options = {
+              userid: userid,
+              content: content,
+              contractaddress: props.tokenId
+            };
+            _context6.next = 6;
+            return http.post('/api/imchannel/sendagentmessage', options);
+          case 6:
+            _context6.next = 11;
+            break;
+          case 8:
+            _context6.prev = 8;
+            _context6.t0 = _context6["catch"](2);
+            console.log(_context6.t0);
+          case 11:
+          case "end":
+            return _context6.stop();
+        }
+      }, _callee5, null, [[2, 8]]);
+    }));
+    return function sendAgentMsg() {
+      return _ref14.apply(this, arguments);
+    };
+  }();
+  var postMessage = /*#__PURE__*/function () {
+    var _ref15 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6(msg) {
+      var customMessage;
+      return _regeneratorRuntime.wrap(function _callee6$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
+          case 0:
+            customMessage = MessageSDK.message.create({
+              type: 'txt',
+              msg: msg,
+              to: curAgentId || '',
+              // Need to be the user ID of the current conversation
+              chatType: 'singleChat'
+            });
+            _context7.next = 3;
+            return agoraChatUikit.rootStore.messageStore.sendMessage(customMessage);
+          case 3:
+            sendAgentMsg(curAgentId, msg);
+          case 4:
+          case "end":
+            return _context7.stop();
+        }
+      }, _callee6);
+    }));
+    return function postMessage(_x5) {
+      return _ref15.apply(this, arguments);
+    };
+  }();
+  var afterSendMsg = /*#__PURE__*/function () {
+    var _ref16 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee7(msgInfo) {
+      return _regeneratorRuntime.wrap(function _callee7$(_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
+          case 0:
+            sendAgentMsg(curAgentId, msgInfo.msg);
+          case 1:
+          case "end":
+            return _context8.stop();
+        }
+      }, _callee7);
+    }));
+    return function afterSendMsg(_x6) {
+      return _ref16.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/React.createElement("div", {
-    className: "bg-[var(--im-main-backgroundColor)] ".concat((_props$className = props.className) !== null && _props$className !== void 0 ? _props$className : '', " w-full h-full overflow-hidden flex flex-col")
+    className: "bg-[var(--im-main-backgroundColor)] bg-pink ".concat((_props$className = props.className) !== null && _props$className !== void 0 ? _props$className : '', " w-full h-full overflow-hidden flex flex-col")
   }, (collectList === null || collectList === void 0 ? void 0 : collectList.length) && /*#__PURE__*/React.createElement("div", {
     className: "mb-2 mx-5 py-2 rounded-lg bg-[var(--im-main-bg-five)]"
   }, /*#__PURE__*/React.createElement(antd.Select, {
@@ -533,7 +615,7 @@ var CustomChatView = function CustomChatView(props) {
   })), customHeader(), /*#__PURE__*/React.createElement(agoraChatUikit.MessageList, {
     className: "w-full flex-1",
     conversation: {
-      conversationId: props.conversationId,
+      conversationId: curAgentId,
       chatType: props.chatType
     },
     renderMessage: function renderMessage(msg) {
@@ -549,18 +631,21 @@ var CustomChatView = function CustomChatView(props) {
       className: "flex-shrink-0 py-1 px-2.5 text-xs text-[var(--im-five-fontColor)] border border-[var(--im-main-bg-ten)] rounded-sm cursor-pointer",
       key: "tip".concat(index),
       onClick: function onClick() {
-        return postMessage(item);
+        postMessage(item);
       }
     }, item);
   }))), /*#__PURE__*/React.createElement(agoraChatUikit.MessageInput, _extends({
     enabledTyping: true,
     placeHolder: '',
     conversation: {
-      conversationId: props.conversationId,
+      conversationId: curAgentId,
       chatType: props.chatType
     }
   }, type.commonMessageInputConfig, {
-    disabled: false
+    disabled: false,
+    onSendMessage: function onSendMessage(msg) {
+      afterSendMsg(msg);
+    }
   })));
 };
 

package/cjs/GroupDetail/GroupShareView/index.js

@@ -74,7 +74,9 @@ var GroupShareView = function GroupShareView(props) {
                 imgUrl: props.shareObjImageurl
               }
             };
-            customMessage = ChatSDK.message.create(option);
+            customMessage = ChatSDK.message.create({
+              option: option
+            });
             _context2.next = 4;
             return agoraChatUikit.rootStore.messageStore.sendMessage(customMessage);
           case 4:

package/cjs/IM/style/index.scss

@@ -21,6 +21,14 @@
   --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-border-10: rgba(0, 0, 0, 0.1);
+
+
+  .cui-textarea-input{
+    color: var(--im-five-fontColor);
+    background-color: var(--im-main-bg-five);
+  }
 }
 .im-dark {
   --im-main-backgroundColor: #1e2329;
@@ -67,6 +75,8 @@
 
   --im-main-buttonColor: rgba(156, 255, 30, 1);
   --im-main-switchColor: rgba(0, 200, 5, 1);
+
+  --im-border-10: rgba(255, 255, 255, 0.1);
 }
 
 .cui-message-base-right {

package/es/CustomChatView/index.d.ts

@@ -5,6 +5,8 @@ export interface ICustomChatbox {
     conversationId: string;
     chatType: ChatType;
     className?: string;
+    tokenId?: string;
+    tokenName?: string;
 }
 declare const CustomChatView: React.FC<ICustomChatbox>;
 export default CustomChatView;

package/es/CustomChatView/index.js

@@ -15,7 +15,7 @@ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/inst
 import _JSON$stringify from '@babel/runtime-corejs3/core-js-stable/json/stringify';
 import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
 import React, { useContext, useState, useEffect } from 'react';
-import { rootStore, MessageList, MessageInput, ImageMessage, FileMessage, VideoMessage, AudioMessage, BaseMessage, TextMessage } from 'agora-chat-uikit';
+import { useSDK, rootStore, MessageList, MessageInput, ImageMessage, FileMessage, VideoMessage, AudioMessage, BaseMessage, TextMessage } from 'agora-chat-uikit';
 import { Context } from '../IM/context.js';
 import { Modal, Select, message } from 'antd';
 import { commonMessageInputConfig, commonMessageProps } from '../type.js';
@@ -23,7 +23,7 @@ import img from './image/set.svg.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 _context7, _context8; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context7 = ownKeys(Object(t), true)).call(_context7, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context8 = ownKeys(Object(t))).call(_context8, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context10, _context11; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context10 = ownKeys(Object(t), true)).call(_context10, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context11 = ownKeys(Object(t))).call(_context11, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var CustomChatView = function CustomChatView(props) {
   var _props$className;
   var _useContext = useContext(Context),
@@ -51,6 +51,8 @@ var CustomChatView = function CustomChatView(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     headerInfo = _useState6[0],
     setHeaderInfo = _useState6[1];
+  var _useSDK = useSDK(),
+    MessageSDK = _useSDK.ChatSDK;
   var renderTxtMsg = function renderTxtMsg(msg) {
     var _userInfo$uid, _ref;
     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());
@@ -247,18 +249,18 @@ var CustomChatView = function CustomChatView(props) {
     return _getShareGroupInfo.apply(this, arguments);
   }
   function _getShareGroupInfo() {
-    _getShareGroupInfo = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(shareInfo, isJoined) {
+    _getShareGroupInfo = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee8(shareInfo, isJoined) {
       var params, response, data, groupInfo, waitJoinGroupinfo, conversation, _response$data2;
-      return _regeneratorRuntime.wrap(function _callee5$(_context6) {
-        while (1) switch (_context6.prev = _context6.next) {
+      return _regeneratorRuntime.wrap(function _callee8$(_context9) {
+        while (1) switch (_context9.prev = _context9.next) {
           case 0:
             params = {
               sendbirdid: shareInfo === null || shareInfo === void 0 ? void 0 : shareInfo.objectId
             };
-            _context6.next = 3;
+            _context9.next = 3;
             return http.post("/capi/account/imchannel/getdetails", params);
           case 3:
-            response = _context6.sent;
+            response = _context9.sent;
             data = response.data;
             if (data && data.code === 200 && data.data) {
               groupInfo = data.data;
@@ -295,9 +297,9 @@ var CustomChatView = function CustomChatView(props) {
             }
           case 6:
           case "end":
-            return _context6.stop();
+            return _context9.stop();
         }
-      }, _callee5);
+      }, _callee8);
     }));
     return _getShareGroupInfo.apply(this, arguments);
   }
@@ -383,14 +385,14 @@ var CustomChatView = function CustomChatView(props) {
   }, []);
   var customHeader = function customHeader() {
     return /*#__PURE__*/React.createElement("div", {
-      className: "flex h-[64px] items-center bg-[var(--im-main-backgroundColor)] pl-4 pr-4 justify-between"
+      className: "flex h-20 items-center bg-[var(--im-main-backgroundColor)] border-b border-[var(--im-border-10)] mx-4 justify-between"
     }, /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center gap-2"
+      className: "flex items-center gap-4"
     }, /*#__PURE__*/React.createElement("img", {
       src: headerInfo.headerImageURL,
       className: "w-12 h-12 ".concat(headerInfo.chatType === 'groupChat' ? 'rounded-md' : 'rounded-full', " bg-blue")
     }), /*#__PURE__*/React.createElement("div", {
-      className: "flex flex-col overflow-hidden mx-5 flex-1"
+      className: "flex flex-col overflow-hidden flex-1"
     }, /*#__PURE__*/React.createElement("p", {
       className: "text-[var(--im-main-fontColor)] text-base font-normal line-clamp-1 mr-[100px]"
     }, headerInfo.conversationName), headerInfo.chatType === 'groupChat' && /*#__PURE__*/React.createElement("p", {
@@ -509,8 +511,88 @@ var CustomChatView = function CustomChatView(props) {
       return _ref13.apply(this, arguments);
     };
   }();
+  // 给agent 发送消息需要调用该接口
+  var sendAgentMsg = /*#__PURE__*/function () {
+    var _ref14 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+      var userid,
+        content,
+        options,
+        _args5 = arguments;
+      return _regeneratorRuntime.wrap(function _callee5$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            userid = _args5.length > 0 && _args5[0] !== undefined ? _args5[0] : '';
+            content = _args5.length > 1 && _args5[1] !== undefined ? _args5[1] : '';
+            _context6.prev = 2;
+            options = {
+              userid: userid,
+              content: content,
+              contractaddress: props.tokenId
+            };
+            _context6.next = 6;
+            return http.post('/api/imchannel/sendagentmessage', options);
+          case 6:
+            _context6.next = 11;
+            break;
+          case 8:
+            _context6.prev = 8;
+            _context6.t0 = _context6["catch"](2);
+            console.log(_context6.t0);
+          case 11:
+          case "end":
+            return _context6.stop();
+        }
+      }, _callee5, null, [[2, 8]]);
+    }));
+    return function sendAgentMsg() {
+      return _ref14.apply(this, arguments);
+    };
+  }();
+  var postMessage = /*#__PURE__*/function () {
+    var _ref15 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6(msg) {
+      var customMessage;
+      return _regeneratorRuntime.wrap(function _callee6$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
+          case 0:
+            customMessage = MessageSDK.message.create({
+              type: 'txt',
+              msg: msg,
+              to: curAgentId || '',
+              // Need to be the user ID of the current conversation
+              chatType: 'singleChat'
+            });
+            _context7.next = 3;
+            return rootStore.messageStore.sendMessage(customMessage);
+          case 3:
+            sendAgentMsg(curAgentId, msg);
+          case 4:
+          case "end":
+            return _context7.stop();
+        }
+      }, _callee6);
+    }));
+    return function postMessage(_x5) {
+      return _ref15.apply(this, arguments);
+    };
+  }();
+  var afterSendMsg = /*#__PURE__*/function () {
+    var _ref16 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee7(msgInfo) {
+      return _regeneratorRuntime.wrap(function _callee7$(_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
+          case 0:
+            sendAgentMsg(curAgentId, msgInfo.msg);
+          case 1:
+          case "end":
+            return _context8.stop();
+        }
+      }, _callee7);
+    }));
+    return function afterSendMsg(_x6) {
+      return _ref16.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/React.createElement("div", {
-    className: "bg-[var(--im-main-backgroundColor)] ".concat((_props$className = props.className) !== null && _props$className !== void 0 ? _props$className : '', " w-full h-full overflow-hidden flex flex-col")
+    className: "bg-[var(--im-main-backgroundColor)] bg-pink ".concat((_props$className = props.className) !== null && _props$className !== void 0 ? _props$className : '', " w-full h-full overflow-hidden flex flex-col")
   }, (collectList === null || collectList === void 0 ? void 0 : collectList.length) && /*#__PURE__*/React.createElement("div", {
     className: "mb-2 mx-5 py-2 rounded-lg bg-[var(--im-main-bg-five)]"
   }, /*#__PURE__*/React.createElement(Select, {
@@ -531,7 +613,7 @@ var CustomChatView = function CustomChatView(props) {
   })), customHeader(), /*#__PURE__*/React.createElement(MessageList, {
     className: "w-full flex-1",
     conversation: {
-      conversationId: props.conversationId,
+      conversationId: curAgentId,
       chatType: props.chatType
     },
     renderMessage: function renderMessage(msg) {
@@ -547,18 +629,21 @@ var CustomChatView = function CustomChatView(props) {
       className: "flex-shrink-0 py-1 px-2.5 text-xs text-[var(--im-five-fontColor)] border border-[var(--im-main-bg-ten)] rounded-sm cursor-pointer",
       key: "tip".concat(index),
       onClick: function onClick() {
-        return postMessage(item);
+        postMessage(item);
       }
     }, item);
   }))), /*#__PURE__*/React.createElement(MessageInput, _extends({
     enabledTyping: true,
     placeHolder: '',
     conversation: {
-      conversationId: props.conversationId,
+      conversationId: curAgentId,
       chatType: props.chatType
     }
   }, commonMessageInputConfig, {
-    disabled: false
+    disabled: false,
+    onSendMessage: function onSendMessage(msg) {
+      afterSendMsg(msg);
+    }
   })));
 };
 

package/es/GroupDetail/GroupShareView/index.js

@@ -72,7 +72,9 @@ var GroupShareView = function GroupShareView(props) {
                 imgUrl: props.shareObjImageurl
               }
             };
-            customMessage = ChatSDK.message.create(option);
+            customMessage = ChatSDK.message.create({
+              option: option
+            });
             _context2.next = 4;
             return rootStore.messageStore.sendMessage(customMessage);
           case 4:

package/es/IM/style/index.scss

@@ -21,6 +21,14 @@
   --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-border-10: rgba(0, 0, 0, 0.1);
+
+
+  .cui-textarea-input{
+    color: var(--im-five-fontColor);
+    background-color: var(--im-main-bg-five);
+  }
 }
 .im-dark {
   --im-main-backgroundColor: #1e2329;
@@ -67,6 +75,8 @@
 
   --im-main-buttonColor: rgba(156, 255, 30, 1);
   --im-main-switchColor: rgba(0, 200, 5, 1);
+
+  --im-border-10: rgba(255, 255, 255, 0.1);
 }
 
 .cui-message-base-right {

package/package.json

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