whyuzeim 1.1.12 → 1.1.13

package/cjs/ChatBox/index.js

@@ -24,6 +24,7 @@ var index = require('./JoinGroupDialog/index.js');
 var index$1 = require('../AddMember/index.js');
 var type = require('../type.js');
 var tools = require('../tools.js');
+var avatar_default = require('../Icon/avatar_default.svg.js');
 
 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; }
@@ -271,6 +272,7 @@ var Chatbox = function Chatbox(props) {
     };
   }();
   var customHeader = function customHeader() {
+    var _headerInfo$headerIma;
     var menuNode = /*#__PURE__*/React.createElement("ul", {
       className: "yuze-header-more"
     }, agoraChatUikit.rootStore.conversationStore.currentCvs.chatType === "groupChat" && /*#__PURE__*/React.createElement("li", {
@@ -331,7 +333,7 @@ var Chatbox = function Chatbox(props) {
         onBack && onBack();
       }
     }), !mobile && /*#__PURE__*/React.createElement("img", {
-      src: headerInfo.headerImageURL,
+      src: (_headerInfo$headerIma = headerInfo.headerImageURL) !== null && _headerInfo$headerIma !== void 0 ? _headerInfo$headerIma : avatar_default,
       className: "w-12 h-12 ".concat(headerInfo.chatType === "groupChat" ? "rounded-md" : "rounded-full", " bg-blue")
     }), !mobile && /*#__PURE__*/React.createElement("div", {
       className: "flex flex-col overflow-hidden mx-5 flex-1"

package/cjs/IM/style/index.scss

@@ -22,7 +22,7 @@
   --im-group-join-cancel-line: rgba(0, 0, 0 0.9);
 
   //override
-  --im-msg-bubble-color-left: #9cff1e;
+  --im-msg-bubble-color-left: rgba(89, 191, 249, 0.2);
   --im-msg-bubble-color-right: rgba(0, 0, 0, 0.05);
   --im-msg-bubble-font-color: rgba(0, 0, 0, 0.7);
 
@@ -31,6 +31,8 @@
   --im-member-remark-owner-backgroundColor: rgba(0, 0, 0, 0.9);
   --im-member-remark-admin-backgroundColor: rgba(0, 0, 0, 0.6);
 
+    --im-highlight-blue-color: rgba(89, 191, 249, 0.2);
+
   .cui-textarea-input {
     color: var(--im-five-fontColor);
     background-color: var(--im-main-bg-five);

package/cjs/Icon/avatar_default.svg.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var img = "data:image/svg+xml,%3csvg width='128' height='128' viewBox='0 0 128 128' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cforeignObject x='-1' y='-1' width='130' height='130'%3e%3cdiv xmlns='http://www.w3.org/1999/xhtml' style='backdrop-filter:blur(0.5px)%3bclip-path:url(%23bgblur_0_8293_30895_clip_path)%3bheight:100%25%3bwidth:100%25'%3e%3c/div%3e%3c/foreignObject%3e%3crect data-figma-bg-blur-radius='1' width='128' height='128' rx='4' fill='white' fill-opacity='0.05'/%3e%3cdefs%3e%3cclipPath id='bgblur_0_8293_30895_clip_path' transform='translate(1 1)'%3e%3crect width='128' height='128' rx='4'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+
+module.exports = img;

package/cjs/Sidebar/CustomConversationItem/index.js

@@ -20,6 +20,7 @@ var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
 var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var React = require('react');
+var avatar_default = require('../../Icon/avatar_default.svg.js');
 require('./style/index.scss');
 var agoraChatUikit = require('agora-chat-uikit');
 var context = require('../../IM/context.js');
@@ -173,12 +174,12 @@ var CustomConversationItem = function CustomConversationItem(props) {
     };
   }();
   return canShow ? /*#__PURE__*/React.createElement(agoraChatUikit.ConversationItem, {
-    className: "yuze-conversationItem",
+    className: "yuze-conversationItem cursor-pointer ".concat(cvs.conversationId === agoraChatUikit.rootStore.conversationStore.currentCvs.conversationId ? 'bg-[var(--im-highlight-blue-color)]' : ''),
     avatar: /*#__PURE__*/React.createElement("div", {
       className: "yuze-conversationItem-avatar relative"
     }, /*#__PURE__*/React.createElement(agoraChatUikit.Avatar, {
       shape: cvs.chatType === "groupChat" ? "square" : "circle",
-      src: avatar,
+      src: avatar !== null && avatar !== void 0 ? avatar : avatar_default,
       style: {
         background: "transparent"
       }

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

@@ -3,6 +3,7 @@ import "./style/index.scss";
 export interface ISearchbox {
     name?: string;
     style?: React.CSSProperties;
+    searchItemClick?: (conversationId: string, chatType: string) => void;
 }
 export interface IUserData {
     walletaddress: string;

package/cjs/Sidebar/Searchbox/index.js

@@ -149,6 +149,7 @@ var Searchbox = function Searchbox(props) {
             chatType: "singleChat",
             name: item.name
           });
+          props.searchItemClick && props.searchItemClick(item.id.toLowerCase(), "singleChat");
         },
         rightNode: /*#__PURE__*/React.createElement("img", {
           src: ic_messages
@@ -181,6 +182,7 @@ var Searchbox = function Searchbox(props) {
           chatType: "groupChat",
           name: item.name
         });
+        props.searchItemClick && props.searchItemClick(item.sendbirdid, "groupChat");
       },
       rightNode: /*#__PURE__*/React.createElement("img", {
         src: ic_messages

package/cjs/Sidebar/index.d.ts

@@ -5,6 +5,7 @@ export interface ISideBar {
     name?: string;
     onConversationItemClick?: (conversation: Conversation) => void;
     topCustomRender?: () => React.ReactElement;
+    className?: string;
 }
 declare const Sidebar: React.FC<ISideBar>;
 export default Sidebar;

package/cjs/Sidebar/index.js

@@ -29,6 +29,7 @@ var index$2 = require('./CustomConversationItem/index.js');
 var index = require('../IM/MobileHeader/index.js');
 
 var Sidebar = function Sidebar(props) {
+  var _props$className;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     openCreateGroup = _useState2[0],
@@ -143,6 +144,14 @@ var Sidebar = function Sidebar(props) {
     }), /*#__PURE__*/React.createElement(index$3, {
       style: {
         display: componentType !== "search" ? "none" : "block"
+      },
+      searchItemClick: function searchItemClick(conversationId, chattype) {
+        if (props.onConversationItemClick) {
+          var tempCVS = agoraChatUikit.rootStore.conversationStore.getConversation(chattype === 'singleChat' ? "singleChat" : "groupChat", conversationId);
+          if (tempCVS) {
+            props.onConversationItemClick(tempCVS);
+          }
+        }
       }
     }), /*#__PURE__*/React.createElement(index$4, {
       ref: mobileCreateGroup,
@@ -278,7 +287,7 @@ var Sidebar = function Sidebar(props) {
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "yuze-conversationList h-full",
+    className: "yuze-conversationList h-full ".concat((_props$className = props.className) !== null && _props$className !== void 0 ? _props$className : ''),
     onMouseLeave: function onMouseLeave() {
       !mobile && canSidebarExpand && componentType === "default" && userInfo.uid && setSidebarExpand && setSidebarExpand(false);
     },

package/es/ChatBox/index.js

@@ -14,7 +14,7 @@ import _regeneratorRuntime from '@babel/runtime-corejs3/regenerator';
 import React, { useContext, useState, useEffect } from 'react';
 import { useClient, rootStore, Chat, MessageList, Tooltip, ImageMessage, FileMessage, VideoMessage, AudioMessage, BaseMessage, TextMessage } from 'agora-chat-uikit';
 import './style/index.scss';
-import img$1 from './image/ic_more.svg.js';
+import img$2 from './image/ic_more.svg.js';
 import img from './image/ic_chat_back.svg.js';
 import { Context } from '../IM/context.js';
 import { Modal, Button, message } from 'antd';
@@ -22,6 +22,7 @@ import JoinGroupDialog from './JoinGroupDialog/index.js';
 import AddMember from '../AddMember/index.js';
 import { commonMessageInputConfig, commonMessageProps } from '../type.js';
 import { reportAgentInUse, reportAgentMsg } from '../tools.js';
+import img$1 from '../Icon/avatar_default.svg.js';
 
 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; }
@@ -269,6 +270,7 @@ var Chatbox = function Chatbox(props) {
     };
   }();
   var customHeader = function customHeader() {
+    var _headerInfo$headerIma;
     var menuNode = /*#__PURE__*/React.createElement("ul", {
       className: "yuze-header-more"
     }, rootStore.conversationStore.currentCvs.chatType === "groupChat" && /*#__PURE__*/React.createElement("li", {
@@ -329,7 +331,7 @@ var Chatbox = function Chatbox(props) {
         onBack && onBack();
       }
     }), !mobile && /*#__PURE__*/React.createElement("img", {
-      src: headerInfo.headerImageURL,
+      src: (_headerInfo$headerIma = headerInfo.headerImageURL) !== null && _headerInfo$headerIma !== void 0 ? _headerInfo$headerIma : img$1,
       className: "w-12 h-12 ".concat(headerInfo.chatType === "groupChat" ? "rounded-md" : "rounded-full", " bg-blue")
     }), !mobile && /*#__PURE__*/React.createElement("div", {
       className: "flex flex-col overflow-hidden mx-5 flex-1"
@@ -362,7 +364,7 @@ var Chatbox = function Chatbox(props) {
         color: "var(--im-main-backgroundColor)"
       }
     }, /*#__PURE__*/React.createElement("img", {
-      src: img$1,
+      src: img$2,
       className: "cursor-pointer"
     })), contextHolder));
   };

package/es/IM/style/index.scss

@@ -22,7 +22,7 @@
   --im-group-join-cancel-line: rgba(0, 0, 0 0.9);
 
   //override
-  --im-msg-bubble-color-left: #9cff1e;
+  --im-msg-bubble-color-left: rgba(89, 191, 249, 0.2);
   --im-msg-bubble-color-right: rgba(0, 0, 0, 0.05);
   --im-msg-bubble-font-color: rgba(0, 0, 0, 0.7);
 
@@ -31,6 +31,8 @@
   --im-member-remark-owner-backgroundColor: rgba(0, 0, 0, 0.9);
   --im-member-remark-admin-backgroundColor: rgba(0, 0, 0, 0.6);
 
+    --im-highlight-blue-color: rgba(89, 191, 249, 0.2);
+
   .cui-textarea-input {
     color: var(--im-five-fontColor);
     background-color: var(--im-main-bg-five);

package/es/Icon/avatar_default.svg.js

@@ -0,0 +1,3 @@
+var img = "data:image/svg+xml,%3csvg width='128' height='128' viewBox='0 0 128 128' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cforeignObject x='-1' y='-1' width='130' height='130'%3e%3cdiv xmlns='http://www.w3.org/1999/xhtml' style='backdrop-filter:blur(0.5px)%3bclip-path:url(%23bgblur_0_8293_30895_clip_path)%3bheight:100%25%3bwidth:100%25'%3e%3c/div%3e%3c/foreignObject%3e%3crect data-figma-bg-blur-radius='1' width='128' height='128' rx='4' fill='white' fill-opacity='0.05'/%3e%3cdefs%3e%3cclipPath id='bgblur_0_8293_30895_clip_path' transform='translate(1 1)'%3e%3crect width='128' height='128' rx='4'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+
+export { img as default };

package/es/Sidebar/CustomConversationItem/index.js

@@ -18,6 +18,7 @@ import _regeneratorRuntime from '@babel/runtime-corejs3/regenerator';
 import _findInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/find';
 import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
 import React, { useContext, useState, useEffect } from 'react';
+import img from '../../Icon/avatar_default.svg.js';
 import './style/index.scss';
 import { useConversationContext, useClient, rootStore, ConversationItem, Avatar } from 'agora-chat-uikit';
 import { Context } from '../../IM/context.js';
@@ -171,12 +172,12 @@ var CustomConversationItem = function CustomConversationItem(props) {
     };
   }();
   return canShow ? /*#__PURE__*/React.createElement(ConversationItem, {
-    className: "yuze-conversationItem",
+    className: "yuze-conversationItem cursor-pointer ".concat(cvs.conversationId === rootStore.conversationStore.currentCvs.conversationId ? 'bg-[var(--im-highlight-blue-color)]' : ''),
     avatar: /*#__PURE__*/React.createElement("div", {
       className: "yuze-conversationItem-avatar relative"
     }, /*#__PURE__*/React.createElement(Avatar, {
       shape: cvs.chatType === "groupChat" ? "square" : "circle",
-      src: avatar,
+      src: avatar !== null && avatar !== void 0 ? avatar : img,
       style: {
         background: "transparent"
       }

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

@@ -3,6 +3,7 @@ import "./style/index.scss";
 export interface ISearchbox {
     name?: string;
     style?: React.CSSProperties;
+    searchItemClick?: (conversationId: string, chatType: string) => void;
 }
 export interface IUserData {
     walletaddress: string;

package/es/Sidebar/Searchbox/index.js

@@ -147,6 +147,7 @@ var Searchbox = function Searchbox(props) {
             chatType: "singleChat",
             name: item.name
           });
+          props.searchItemClick && props.searchItemClick(item.id.toLowerCase(), "singleChat");
         },
         rightNode: /*#__PURE__*/React.createElement("img", {
           src: img
@@ -179,6 +180,7 @@ var Searchbox = function Searchbox(props) {
           chatType: "groupChat",
           name: item.name
         });
+        props.searchItemClick && props.searchItemClick(item.sendbirdid, "groupChat");
       },
       rightNode: /*#__PURE__*/React.createElement("img", {
         src: img

package/es/Sidebar/index.d.ts

@@ -5,6 +5,7 @@ export interface ISideBar {
     name?: string;
     onConversationItemClick?: (conversation: Conversation) => void;
     topCustomRender?: () => React.ReactElement;
+    className?: string;
 }
 declare const Sidebar: React.FC<ISideBar>;
 export default Sidebar;

package/es/Sidebar/index.js

@@ -27,6 +27,7 @@ import CustomConversationItem from './CustomConversationItem/index.js';
 import MobileHeader from '../IM/MobileHeader/index.js';
 
 var Sidebar = function Sidebar(props) {
+  var _props$className;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     openCreateGroup = _useState2[0],
@@ -141,6 +142,14 @@ var Sidebar = function Sidebar(props) {
     }), /*#__PURE__*/React.createElement(Searchbox, {
       style: {
         display: componentType !== "search" ? "none" : "block"
+      },
+      searchItemClick: function searchItemClick(conversationId, chattype) {
+        if (props.onConversationItemClick) {
+          var tempCVS = rootStore.conversationStore.getConversation(chattype === 'singleChat' ? "singleChat" : "groupChat", conversationId);
+          if (tempCVS) {
+            props.onConversationItemClick(tempCVS);
+          }
+        }
       }
     }), /*#__PURE__*/React.createElement(MobileCreateGroup, {
       ref: mobileCreateGroup,
@@ -276,7 +285,7 @@ var Sidebar = function Sidebar(props) {
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "yuze-conversationList h-full",
+    className: "yuze-conversationList h-full ".concat((_props$className = props.className) !== null && _props$className !== void 0 ? _props$className : ''),
     onMouseLeave: function onMouseLeave() {
       !mobile && canSidebarExpand && componentType === "default" && userInfo.uid && setSidebarExpand && setSidebarExpand(false);
     },

package/package.json

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