whyuzeim 1.0.0 → 1.0.2

package/cjs/AddMember/index.js

@@ -14,7 +14,7 @@ var index = require('../ContactList/index.js');
 var index$1 = require('../TypeItem/index.js');
 var context = require('../IM/context.js');
 var antd = require('antd');
-var usehooksTs = require('usehooks-ts');
+var useDebounce = require('use-debounce');
 require('./style/index.scss');
 
 var AddMember = function AddMember() {
@@ -48,7 +48,7 @@ var AddMember = function AddMember() {
       }
     }, _callee);
   })), [http, memberids, setRightComponent]);
-  var handleDebouncdAddMember = usehooksTs.useDebounceCallback(handleAddMember, 100);
+  var handleDebouncdAddMember = useDebounce.useDebouncedCallback(handleAddMember, 100);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames("yuze-addMember w-full h-full")
   }, /*#__PURE__*/React.createElement("div", {

package/cjs/ChatBox/index.js

@@ -77,7 +77,10 @@ var Chatbox = function Chatbox(props) {
       reaction: false,
       select: false,
       thread: false,
-      customAction: (_ref = type.commonMessageProps && (type.commonMessageProps === null || type.commonMessageProps === void 0 ? void 0 : type.commonMessageProps.customAction)) !== null && _ref !== void 0 ? _ref : undefined
+      customAction: (_ref = type.commonMessageProps && (type.commonMessageProps === null || type.commonMessageProps === void 0 ? void 0 : type.commonMessageProps.customAction)) !== null && _ref !== void 0 ? _ref : undefined,
+      renderUserProfile: function renderUserProfile() {
+        return null;
+      }
     });
   };
   var renderShareCardMsg = function renderShareCardMsg(msg) {
@@ -109,6 +112,9 @@ var Chatbox = function Chatbox(props) {
         select: false,
         thread: false,
         customAction: (_ref2 = type.commonMessageProps && (type.commonMessageProps === null || type.commonMessageProps === void 0 ? void 0 : type.commonMessageProps.customAction)) !== null && _ref2 !== void 0 ? _ref2 : undefined,
+        renderUserProfile: function renderUserProfile() {
+          return null;
+        },
         imageMessage: msg
       });
     } else if (msg.type === 'file') {
@@ -123,6 +129,9 @@ var Chatbox = function Chatbox(props) {
           padding: "10px 12px",
           color: "var(--im-msg-bubble-font-color)"
         },
+        renderUserProfile: function renderUserProfile() {
+          return null;
+        },
         customAction: (_ref3 = type.commonMessageProps && (type.commonMessageProps === null || type.commonMessageProps === void 0 ? void 0 : type.commonMessageProps.customAction)) !== null && _ref3 !== void 0 ? _ref3 : undefined,
         fileMessage: msg
       });
@@ -132,6 +141,9 @@ var Chatbox = function Chatbox(props) {
         reaction: false,
         select: false,
         thread: false,
+        renderUserProfile: function renderUserProfile() {
+          return null;
+        },
         customAction: (_ref4 = type.commonMessageProps && (type.commonMessageProps === null || type.commonMessageProps === void 0 ? void 0 : type.commonMessageProps.customAction)) !== null && _ref4 !== void 0 ? _ref4 : undefined,
         videoMessage: msg
       });
@@ -158,6 +170,9 @@ var Chatbox = function Chatbox(props) {
         select: false,
         thread: false,
         direction: isMySelf ? 'rtl' : 'ltr',
+        renderUserProfile: function renderUserProfile() {
+          return null;
+        },
         customAction: (_ref6 = type.commonMessageProps && (type.commonMessageProps === null || type.commonMessageProps === void 0 ? void 0 : type.commonMessageProps.customAction)) !== null && _ref6 !== void 0 ? _ref6 : undefined,
         children: renderShareCardMsg(msg)
       });

package/cjs/ContactList/index.js

@@ -1,14 +1,17 @@
 'use strict';
 
+var _toConsumableArray = require('@babel/runtime-corejs3/helpers/esm/toConsumableArray');
 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 _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var React = require('react');
+var InfiniteScroll = require('react-infinite-scroll-component');
 require('./style/index.scss');
 var context = require('../IM/context.js');
 var agoraChatUikit = require('agora-chat-uikit');
-var usehooksTs = require('usehooks-ts');
+var useDebounce = require('use-debounce');
 var classNames = require('classnames');
 var index = require('../NoData/index.js');
 
@@ -20,29 +23,39 @@ var ContactList = function ContactList(props) {
     _useState2 = _slicedToArray(_useState, 2),
     list = _useState2[0],
     setList = _useState2[1];
+  var listRef = React.useRef(null);
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    total = _useState4[0],
+    setTotal = _useState4[1];
+  var pageRef = React.useRef(0);
   var _useContext = React.useContext(context.Context),
     http = _useContext.http;
   var handleGetFrindList = React.useCallback(/*#__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) {
+      var _context;
+      var result, _result$data$data, data, total;
+      return _regeneratorRuntime.wrap(function _callee$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            _context.next = 2;
+            pageRef.current = pageRef.current + 1;
+            _context2.next = 3;
             return http.post("/capi/account/imsearch/findpage", {
               keyword: keyword,
               type: 2,
               userid: agoraChatUikit.rootStore.initConfig.userId,
               size: 10,
-              page: 1
+              page: pageRef.current
             });
-          case 2:
-            result = _context.sent;
-            list = result.data.data.list;
-            setList(list);
-          case 5:
+          case 3:
+            result = _context2.sent;
+            _result$data$data = result.data.data, data = _result$data$data.list, total = _result$data$data.total;
+            listRef.current = !listRef.current ? data : _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(listRef.current), _toConsumableArray(data));
+            setList(listRef.current);
+            setTotal(total);
+          case 8:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
       }, _callee);
     }));
@@ -50,15 +63,27 @@ var ContactList = function ContactList(props) {
       return _ref.apply(this, arguments);
     };
   }(), [http]);
-  var handleDebounceFriendList = usehooksTs.useDebounceCallback(handleGetFrindList, 500);
+  var handleDebounceFriendList = useDebounce.useDebouncedCallback(handleGetFrindList, 100);
   React.useEffect(function () {
+    pageRef.current = 0;
+    listRef.current = [];
     handleDebounceFriendList(keyword);
   }, [handleDebounceFriendList, keyword]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("yuze-contactList w-full overflow-auto", className)
+    className: classNames("yuze-contactList w-full overflow-auto", className),
+    id: "contactList"
+  }, /*#__PURE__*/React.createElement(InfiniteScroll, {
+    dataLength: (list === null || list === void 0 ? void 0 : list.length) || 0,
+    next: handleGetFrindList,
+    inverse: false //
+    ,
+    hasMore: ((list === null || list === void 0 ? void 0 : list.length) || 0) < total,
+    scrollableTarget: "contactList",
+    loader: /*#__PURE__*/React.createElement(React.Fragment, null),
+    className: "h-full"
   }, list === null || list === void 0 ? void 0 : _mapInstanceProperty(list).call(list, function (item) {
     return renderItem(item);
-  }), (list === null || list === void 0 ? void 0 : list.length) === 0 && /*#__PURE__*/React.createElement(index, null));
+  })), (list === null || list === void 0 ? void 0 : list.length) === 0 && /*#__PURE__*/React.createElement(index, null));
 };
 
 module.exports = ContactList;

package/cjs/CustomChatView/image/set.svg.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var img = "data:image/svg+xml,%3csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Config (%26%23233%3b%26%23133%3b%26%23141%3b%26%23231%3b%26%23189%3b%26%23174%3b)'%3e%3cpath id='Vector' d='M8.00016 1.83337L6.00016 3.83337H3.3335V6.50004L1.3335 8.50004L3.3335 10.5V13.1667H6.00016L8.00016 15.1667L10.0002 13.1667H12.6668V10.5L14.6668 8.50004L12.6668 6.50004V3.83337H10.0002L8.00016 1.83337Z' fill='black' fill-opacity='0.9' stroke='black' stroke-opacity='0.9' stroke-width='2' stroke-linejoin='round'/%3e%3cpath id='Vector_2' d='M8 10.5C9.10457 10.5 10 9.60457 10 8.5C10 7.39543 9.10457 6.5 8 6.5C6.89543 6.5 6 7.39543 6 8.5C6 9.60457 6.89543 10.5 8 10.5Z' fill='white' stroke='white' stroke-width='2' stroke-linejoin='round'/%3e%3c/g%3e%3c/svg%3e";
+
+module.exports = img;

package/cjs/CustomChatView/index.d.ts

@@ -1,9 +1,12 @@
 import React from "react";
 import { ChatType } from "agora-chat-uikit/types/module/types/messageType";
+import "./style/index.scss";
 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

@@ -15,14 +15,17 @@ var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
 var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
 var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
 var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var React = require('react');
 var agoraChatUikit = require('agora-chat-uikit');
 var context = require('../IM/context.js');
 var antd = require('antd');
 var type = require('../type.js');
+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 _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; }
+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),
@@ -44,11 +47,14 @@ var CustomChatView = function CustomChatView(props) {
       headerImageURL: '',
       conversationName: '',
       memberCount: 0,
-      chatType: 'singleChat'
+      chatType: 'singleChat',
+      conversationId: ''
     }),
     _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());
@@ -66,6 +72,9 @@ var CustomChatView = function CustomChatView(props) {
       reaction: false,
       select: false,
       thread: false,
+      renderUserProfile: function renderUserProfile() {
+        return null;
+      },
       customAction: (_ref = type.commonMessageProps && (type.commonMessageProps === null || type.commonMessageProps === void 0 ? void 0 : type.commonMessageProps.customAction)) !== null && _ref !== void 0 ? _ref : undefined
     });
   };
@@ -97,6 +106,9 @@ var CustomChatView = function CustomChatView(props) {
         reaction: false,
         select: false,
         thread: false,
+        renderUserProfile: function renderUserProfile() {
+          return null;
+        },
         customAction: (_ref2 = type.commonMessageProps && (type.commonMessageProps === null || type.commonMessageProps === void 0 ? void 0 : type.commonMessageProps.customAction)) !== null && _ref2 !== void 0 ? _ref2 : undefined,
         imageMessage: msg
       });
@@ -112,6 +124,9 @@ var CustomChatView = function CustomChatView(props) {
         reaction: false,
         select: false,
         thread: false,
+        renderUserProfile: function renderUserProfile() {
+          return null;
+        },
         customAction: (_ref3 = type.commonMessageProps && (type.commonMessageProps === null || type.commonMessageProps === void 0 ? void 0 : type.commonMessageProps.customAction)) !== null && _ref3 !== void 0 ? _ref3 : undefined,
         fileMessage: msg
       });
@@ -121,6 +136,9 @@ var CustomChatView = function CustomChatView(props) {
         reaction: false,
         select: false,
         thread: false,
+        renderUserProfile: function renderUserProfile() {
+          return null;
+        },
         customAction: (_ref4 = type.commonMessageProps && (type.commonMessageProps === null || type.commonMessageProps === void 0 ? void 0 : type.commonMessageProps.customAction)) !== null && _ref4 !== void 0 ? _ref4 : undefined,
         videoMessage: msg
       });
@@ -130,6 +148,9 @@ var CustomChatView = function CustomChatView(props) {
         reaction: false,
         select: false,
         thread: false,
+        renderUserProfile: function renderUserProfile() {
+          return null;
+        },
         customAction: (_ref5 = type.commonMessageProps && (type.commonMessageProps === null || type.commonMessageProps === void 0 ? void 0 : type.commonMessageProps.customAction)) !== null && _ref5 !== void 0 ? _ref5 : undefined,
         audioMessage: msg
       });
@@ -147,6 +168,9 @@ var CustomChatView = function CustomChatView(props) {
         select: false,
         thread: false,
         direction: isMySelf ? 'rtl' : 'ltr',
+        renderUserProfile: function renderUserProfile() {
+          return null;
+        },
         customAction: (_ref6 = type.commonMessageProps && (type.commonMessageProps === null || type.commonMessageProps === void 0 ? void 0 : type.commonMessageProps.customAction)) !== null && _ref6 !== void 0 ? _ref6 : undefined,
         children: renderShareCardMsg(msg)
       });
@@ -159,6 +183,7 @@ var CustomChatView = function CustomChatView(props) {
     var cvs = _findInstanceProperty(_context = agoraChatUikit.rootStore.conversationStore.conversationList).call(_context, function (cvs) {
       return cvs.conversationId === props.conversationId;
     });
+    console.log("----getHeaderInfo---", cvs);
     if (!cvs || !(cvs !== null && cvs !== void 0 && cvs.conversationId)) {
       return;
     }
@@ -226,18 +251,18 @@ var CustomChatView = function CustomChatView(props) {
     return _getShareGroupInfo.apply(this, arguments);
   }
   function _getShareGroupInfo() {
-    _getShareGroupInfo = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(shareInfo, isJoined) {
+    _getShareGroupInfo = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee8(shareInfo, isJoined) {
       var params, response, data, groupInfo, waitJoinGroupinfo, conversation, _response$data2;
-      return _regeneratorRuntime.wrap(function _callee2$(_context3) {
-        while (1) switch (_context3.prev = _context3.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
             };
-            _context3.next = 3;
+            _context9.next = 3;
             return http.post("/capi/account/imchannel/getdetails", params);
           case 3:
-            response = _context3.sent;
+            response = _context9.sent;
             data = response.data;
             if (data && data.code === 200 && data.data) {
               groupInfo = data.data;
@@ -274,9 +299,9 @@ var CustomChatView = function CustomChatView(props) {
             }
           case 6:
           case "end":
-            return _context3.stop();
+            return _context9.stop();
         }
-      }, _callee2);
+      }, _callee8);
     }));
     return _getShareGroupInfo.apply(this, arguments);
   }
@@ -360,29 +385,267 @@ var CustomChatView = function CustomChatView(props) {
     }
     getHeaderInfo();
   }, []);
+  var customHeader = function customHeader() {
+    return /*#__PURE__*/React.createElement("div", {
+      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-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 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", {
+      style: {
+        color: 'var(--im-third-fontColor)'
+      },
+      className: "text-sm"
+    }, headerInfo.memberCount, " members"))));
+  };
+  var _useState7 = React.useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    collectList = _useState8[0],
+    setCollectList = _useState8[1];
+  var _useState9 = React.useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    curAgentId = _useState10[0],
+    setCurAgentId = _useState10[1];
+  // 获取agent列表
+  var getCollectList = /*#__PURE__*/function () {
+    var _ref11 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _yield$http$get, data;
+      return _regeneratorRuntime.wrap(function _callee2$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.prev = 0;
+            _context3.next = 3;
+            return http.get("/api/agentcollect/myCollectAgent");
+          case 3:
+            _yield$http$get = _context3.sent;
+            data = _yield$http$get.data;
+            if (data.code == 200) {
+              if (data.data) {
+                setCollectList(data.data);
+              } else {
+                setCollectList([]);
+              }
+            }
+            _context3.next = 11;
+            break;
+          case 8:
+            _context3.prev = 8;
+            _context3.t0 = _context3["catch"](0);
+            console.log(_context3.t0);
+          case 11:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee2, null, [[0, 8]]);
+    }));
+    return function getCollectList() {
+      return _ref11.apply(this, arguments);
+    };
+  }();
+  var _useState11 = React.useState([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    agentTipList = _useState12[0],
+    setAgentTipList = _useState12[1];
+  var getTipsList = /*#__PURE__*/function () {
+    var _ref12 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+      var _yield$http$get2, data;
+      return _regeneratorRuntime.wrap(function _callee3$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            _context4.prev = 0;
+            _context4.next = 3;
+            return http.get("/api/agentcollect/getAgentImReplyTxt");
+          case 3:
+            _yield$http$get2 = _context4.sent;
+            data = _yield$http$get2.data;
+            setAgentTipList(data.data.txtarr);
+            _context4.next = 11;
+            break;
+          case 8:
+            _context4.prev = 8;
+            _context4.t0 = _context4["catch"](0);
+            console.log(_context4.t0);
+          case 11:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee3, null, [[0, 8]]);
+    }));
+    return function getTipsList() {
+      return _ref12.apply(this, arguments);
+    };
+  }();
+  React.useEffect(function () {
+    setCurAgentId(props.conversationId);
+    getCollectList();
+    getTipsList();
+  }, []);
+  var changeAgent = /*#__PURE__*/function () {
+    var _ref13 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(val) {
+      var curAgent;
+      return _regeneratorRuntime.wrap(function _callee4$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            setCurAgentId(val);
+            curAgent = _findInstanceProperty(collectList).call(collectList, function (item) {
+              return item.imagentid == val;
+            });
+            setHeaderInfo({
+              headerImageURL: curAgent.imageurl,
+              conversationId: curAgent.imagentid,
+              memberCount: 0,
+              conversationName: curAgent.name,
+              chatType: 'singleChat'
+            });
+          case 3:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee4);
+    }));
+    return function changeAgent(_x4) {
+      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")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "h-16 text-white"
-  }, headerInfo.conversationName), /*#__PURE__*/React.createElement(agoraChatUikit.MessageList, {
+    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, {
+    className: "w-full !h-12 border-none rouded-lg agent-select",
+    popupClassName: "agent-select-popup",
+    value: curAgentId,
+    placeholder: "Select your agent to take actions on token",
+    prefix: /*#__PURE__*/React.createElement("img", {
+      className: "size-4",
+      src: set
+    }),
+    options: collectList,
+    fieldNames: {
+      label: 'name',
+      value: 'imagentid'
+    },
+    onChange: changeAgent
+  })), customHeader(), /*#__PURE__*/React.createElement(agoraChatUikit.MessageList, {
     className: "w-full flex-1",
     conversation: {
-      conversationId: props.conversationId,
+      conversationId: curAgentId,
       chatType: props.chatType
     },
     renderMessage: function renderMessage(msg) {
       return _renderMessage(msg);
     },
     messageProps: _objectSpread({}, type.commonMessageProps)
-  }), /*#__PURE__*/React.createElement(agoraChatUikit.MessageInput, _extends({
+  }), (agentTipList === null || agentTipList === void 0 ? void 0 : agentTipList.length) && /*#__PURE__*/React.createElement("div", {
+    className: "pb-1 pl-5 overflow-x-auto"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "flex items-center gap-4"
+  }, _mapInstanceProperty(agentTipList).call(agentTipList, function (item, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      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() {
+        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/CustomChatView/style/index.scss

@@ -0,0 +1,7 @@
+.agent-select{
+    .ant-select-selector{
+        background: transparent!important;
+        border: none!important;
+        box-shadow: none !important;
+    }
+}

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:
@@ -120,7 +122,7 @@ var GroupShareView = function GroupShareView(props) {
   }, "Share")), /*#__PURE__*/React.createElement("p", {
     className: "text-[var(--im-main-fontColor)] text-base font-semibold text-center pt-6 px-4 pb-2.5 border-b border-[var(--im-main-bg-ten)]"
   }, "Groups"), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col mt-3 mx-4 gap-4 overflow-y-auto flex-1 min-h-0 pb-5"
+    className: "flex flex-col mt-3 mx-4 gap-4 overflow-y-auto flex-1 min-h-0 pb-5 no-scrollbar"
   }, _mapInstanceProperty(groupList).call(groupList, function (groupinfo, index) {
     var _groupinfo$name, _groupinfo$members;
     return /*#__PURE__*/React.createElement("div", {