@fle-ui/plus-im-record 0.0.1-beta.3 → 0.0.2-beta.0

package/README.md

@@ -17,3 +17,9 @@ or using yarn:
 
 $ yarn add @fle-ui/plus-im-record
 ```
+
+## 使用
+
+```tsx
+import ImRecord from '@fle-ui/plus-im-record';
+```

package/es/ChatMessageItem/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IMMessage } from '../@types';
+import { RecordSession } from '../ChatMessageList';
 import './index.less';
 declare const ChatMessageItem: React.FC<{
     h5?: boolean;
@@ -9,9 +10,6 @@ declare const ChatMessageItem: React.FC<{
     myAccount?: string;
     accountInfo: any;
     isSessionEnd: boolean;
-    recordSession?: {
-        relationId: string | number;
-        accid: string;
-    };
+    recordSession?: RecordSession;
 }>;
 export default ChatMessageItem;

package/es/ChatMessageList/index.d.ts

@@ -3,12 +3,18 @@ import { IMMessage } from '../@types';
 import './index.less';
 declare const LOADING_STATUS: any;
 export type LoadingStatus = keyof typeof LOADING_STATUS | undefined;
+export interface RecordSession {
+    relationId?: string | number;
+    accid?: string;
+    relationType?: number;
+}
 export interface ChatMessageListProps {
     h5?: boolean;
     msgs: IMMessage[];
     myAccount?: string;
     loadingStarus?: LoadingStatus;
     onScrollTop?: UIEventHandler<HTMLDivElement>;
+    onScrollBottom?: UIEventHandler<HTMLDivElement>;
     accountsMap?: Record<string, {
         accid: string;
         nickname: string;
@@ -16,11 +22,7 @@ export interface ChatMessageListProps {
     }>;
     style?: React.CSSProperties;
     isSessionEnd?: boolean;
-    recordSession?: {
-        relationId: string | number;
-        accid: string;
-        relationType?: number;
-    };
+    recordSession?: RecordSession;
 }
 declare const ChatMessageList: React.ForwardRefExoticComponent<ChatMessageListProps & React.RefAttributes<HTMLDivElement>>;
 export default ChatMessageList;

package/es/ChatMessageList/index.js

@@ -10,8 +10,8 @@ var LOAD_LIMIT = 15;
 var ChatMessageList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var h5 = _ref.h5,
     msgs = _ref.msgs,
-    _ref$onScrollTop = _ref.onScrollTop,
-    onScrollTop = _ref$onScrollTop === void 0 ? function () {} : _ref$onScrollTop,
+    onScrollTop = _ref.onScrollTop,
+    onScrollBottom = _ref.onScrollBottom,
     _ref$loadingStarus = _ref.loadingStarus,
     loadingStarus = _ref$loadingStarus === void 0 ? '' : _ref$loadingStarus,
     myAccount = _ref.myAccount,
@@ -25,8 +25,10 @@ var ChatMessageList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var onScrollHandler = debounce(function (e) {
     var scrollElRef = ref;
     if (!(scrollElRef === null || scrollElRef === void 0 ? void 0 : scrollElRef.current)) return;
+    var isBottom = scrollElRef.current.scrollTop >= scrollElRef.current.scrollHeight - scrollElRef.current.clientHeight - 20;
     var isTop = scrollElRef.current.scrollTop < 20;
     isTop && (onScrollTop === null || onScrollTop === void 0 ? void 0 : onScrollTop(e));
+    isBottom && (onScrollBottom === null || onScrollBottom === void 0 ? void 0 : onScrollBottom(e));
   }, 200);
   return /*#__PURE__*/React.createElement("div", {
     className: prefixCls,

package/es/ChatMessageList/index.less

@@ -1,7 +1,8 @@
 @prefix: chart;
 
 .@{prefix}-messages {
-  flex: 1;
+  width: 100%;
+  height: 100%;
   position: relative;
   overflow: hidden;
   display: flex;

package/es/GoodsOrderCard/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { RecordSession } from '../ChatMessageList';
 import './index.less';
 export declare function fitUrl(url: string): string;
 declare const GoodsOrderCard: React.FC<{
@@ -8,10 +9,6 @@ declare const GoodsOrderCard: React.FC<{
     onClose?: Function;
     orderSn?: any;
     orderId?: any;
-    recordSession?: {
-        relationId: string | number;
-        accid: string;
-        relationType?: number;
-    };
+    recordSession?: RecordSession;
 }>;
 export default GoodsOrderCard;

package/es/GoodsOrderCard/index.js

@@ -62,7 +62,7 @@ var GoodsOrderCard = function GoodsOrderCard(props) {
     data = _useState2[0],
     setData = _useState2[1];
   useEffect(function () {
-    if ((orderId || orderSn) && relationId && accid) {
+    if (orderId || orderSn) {
       api.getCSOrder({
         orderSn: orderSn,
         orderId: Number(orderId) || orderId,

package/es/ParseSession/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IMMessage } from '../@types';
+import { RecordSession } from '../ChatMessageList';
 import './index.less';
 export interface IParseSessionProps {
     prefix?: string;
@@ -8,11 +9,7 @@ export interface IParseSessionProps {
     msg: IMMessage;
     isSessionEnd?: boolean;
     onChartHistoryClick?: Function;
-    recordSession?: {
-        relationId: string | number;
-        accid: string;
-        relationType?: number;
-    };
+    recordSession?: RecordSession;
 }
 export declare const pauseAllAudio: () => HTMLAudioElement;
 export declare const pauseOtherVideo: (idClient: string) => void;

package/es/api/index.d.ts

@@ -17,7 +17,7 @@ interface ApiMethods {
     getCSOrder: (data: {
         orderSn: number | string;
         orderId: any;
-        accid: string;
+        accid?: string;
         relationId?: string | number;
         relationType?: number;
     }) => Promise<any>;

package/es/index.d.ts

@@ -1,21 +1,24 @@
-import React from 'react';
+import React, { UIEventHandler } from 'react';
+import { RecordSession } from './ChatMessageList';
 import { apiCreate, Env } from './api';
 import { IMMessage } from './@types';
 import './styles/index.less';
 /**
  * @name 客服记录组件
- * @description 代码由小鲤客服平台搬运简化而来
+ * @description 代码由小鲤客服平台搬运简
  */
 export interface IMRecordProps {
     env?: Env;
     token?: string;
-    msgRecords: IMMessage[];
-    onScrollTop?: () => void;
-    recordSession?: {
-        relationId: string | number;
-        accid: string;
-        relationType?: number;
-    };
+    h5?: boolean;
+    msgs: IMMessage[];
+    myAccount?: string;
+    loadingStarus?: 'loading' | 'nomore';
+    onScrollTop?: UIEventHandler<HTMLDivElement>;
+    onScrollBottom?: UIEventHandler<HTMLDivElement>;
+    style?: React.CSSProperties;
+    isSessionEnd?: boolean;
+    recordSession?: RecordSession;
 }
 export interface ImContextProps {
     api: ReturnType<typeof apiCreate>;

package/es/index.js

@@ -1,4 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["env", "token", "msgs", "recordSession"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(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 t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -14,30 +16,33 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { createContext, useEffect, useState } from 'react';
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
+import React, { createContext, useEffect, useRef, useState } from 'react';
 import ChatMessageList from './ChatMessageList';
 import { apiCreate } from './api';
 import './styles/index.less';
 export var ImContext = /*#__PURE__*/createContext({});
 var IMRecord = function IMRecord(_ref) {
   var env = _ref.env,
-    msgRecords = _ref.msgRecords,
     token = _ref.token,
+    msgs = _ref.msgs,
     recordSession = _ref.recordSession,
-    onScrollTop = _ref.onScrollTop;
+    restProps = _objectWithoutProperties(_ref, _excluded);
   var api = apiCreate(env, token);
   var _useState = useState({}),
     _useState2 = _slicedToArray(_useState, 2),
     accountsMap = _useState2[0],
     setAccountsMap = _useState2[1];
+  var messageListDomRef = useRef(null);
   useEffect(function () {
-    var accids = _toConsumableArray(new Set(msgRecords.map(function (x) {
+    var accids = _toConsumableArray(new Set(msgs.map(function (x) {
       return x.from;
     })));
     if (accids.length) {
       getAccountByAccids(accids);
     }
-  }, [msgRecords]);
+  }, [msgs]);
   function getAccountByAccids(accids) {
     api.getAccountInfoByAccid({
       accids: accids
@@ -60,17 +65,13 @@ var IMRecord = function IMRecord(_ref) {
     value: {
       api: api
     }
-  }, /*#__PURE__*/React.createElement(ChatMessageList, {
-    msgs: msgRecords,
+  }, /*#__PURE__*/React.createElement(ChatMessageList, _extends({
+    ref: messageListDomRef,
+    msgs: msgs,
     h5: true,
-    style: {
-      height: '100%',
-      background: '#f7f7f7'
-    },
     accountsMap: accountsMap,
     isSessionEnd: true,
-    recordSession: recordSession,
-    onScrollTop: onScrollTop
-  }));
+    recordSession: recordSession
+  }, restProps)));
 };
 export default IMRecord;

package/lib/ChatMessageItem/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IMMessage } from '../@types';
+import { RecordSession } from '../ChatMessageList';
 import './index.less';
 declare const ChatMessageItem: React.FC<{
     h5?: boolean;
@@ -9,9 +10,6 @@ declare const ChatMessageItem: React.FC<{
     myAccount?: string;
     accountInfo: any;
     isSessionEnd: boolean;
-    recordSession?: {
-        relationId: string | number;
-        accid: string;
-    };
+    recordSession?: RecordSession;
 }>;
 export default ChatMessageItem;

package/lib/ChatMessageList/index.d.ts

@@ -3,12 +3,18 @@ import { IMMessage } from '../@types';
 import './index.less';
 declare const LOADING_STATUS: any;
 export type LoadingStatus = keyof typeof LOADING_STATUS | undefined;
+export interface RecordSession {
+    relationId?: string | number;
+    accid?: string;
+    relationType?: number;
+}
 export interface ChatMessageListProps {
     h5?: boolean;
     msgs: IMMessage[];
     myAccount?: string;
     loadingStarus?: LoadingStatus;
     onScrollTop?: UIEventHandler<HTMLDivElement>;
+    onScrollBottom?: UIEventHandler<HTMLDivElement>;
     accountsMap?: Record<string, {
         accid: string;
         nickname: string;
@@ -16,11 +22,7 @@ export interface ChatMessageListProps {
     }>;
     style?: React.CSSProperties;
     isSessionEnd?: boolean;
-    recordSession?: {
-        relationId: string | number;
-        accid: string;
-        relationType?: number;
-    };
+    recordSession?: RecordSession;
 }
 declare const ChatMessageList: React.ForwardRefExoticComponent<ChatMessageListProps & React.RefAttributes<HTMLDivElement>>;
 export default ChatMessageList;

package/lib/ChatMessageList/index.js

@@ -17,8 +17,8 @@ var LOAD_LIMIT = 15;
 var ChatMessageList = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var h5 = _ref.h5,
     msgs = _ref.msgs,
-    _ref$onScrollTop = _ref.onScrollTop,
-    onScrollTop = _ref$onScrollTop === void 0 ? function () {} : _ref$onScrollTop,
+    onScrollTop = _ref.onScrollTop,
+    onScrollBottom = _ref.onScrollBottom,
     _ref$loadingStarus = _ref.loadingStarus,
     loadingStarus = _ref$loadingStarus === void 0 ? '' : _ref$loadingStarus,
     myAccount = _ref.myAccount,
@@ -32,8 +32,10 @@ var ChatMessageList = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   var onScrollHandler = (0, _utils.debounce)(function (e) {
     var scrollElRef = ref;
     if (!(scrollElRef === null || scrollElRef === void 0 ? void 0 : scrollElRef.current)) return;
+    var isBottom = scrollElRef.current.scrollTop >= scrollElRef.current.scrollHeight - scrollElRef.current.clientHeight - 20;
     var isTop = scrollElRef.current.scrollTop < 20;
     isTop && (onScrollTop === null || onScrollTop === void 0 ? void 0 : onScrollTop(e));
+    isBottom && (onScrollBottom === null || onScrollBottom === void 0 ? void 0 : onScrollBottom(e));
   }, 200);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: prefixCls,

package/lib/ChatMessageList/index.less

@@ -1,7 +1,8 @@
 @prefix: chart;
 
 .@{prefix}-messages {
-  flex: 1;
+  width: 100%;
+  height: 100%;
   position: relative;
   overflow: hidden;
   display: flex;

package/lib/GoodsOrderCard/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { RecordSession } from '../ChatMessageList';
 import './index.less';
 export declare function fitUrl(url: string): string;
 declare const GoodsOrderCard: React.FC<{
@@ -8,10 +9,6 @@ declare const GoodsOrderCard: React.FC<{
     onClose?: Function;
     orderSn?: any;
     orderId?: any;
-    recordSession?: {
-        relationId: string | number;
-        accid: string;
-        relationType?: number;
-    };
+    recordSession?: RecordSession;
 }>;
 export default GoodsOrderCard;

package/lib/GoodsOrderCard/index.js

@@ -70,7 +70,7 @@ var GoodsOrderCard = function GoodsOrderCard(props) {
     data = _useState2[0],
     setData = _useState2[1];
   (0, _react.useEffect)(function () {
-    if ((orderId || orderSn) && relationId && accid) {
+    if (orderId || orderSn) {
       api.getCSOrder({
         orderSn: orderSn,
         orderId: Number(orderId) || orderId,

package/lib/ParseSession/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IMMessage } from '../@types';
+import { RecordSession } from '../ChatMessageList';
 import './index.less';
 export interface IParseSessionProps {
     prefix?: string;
@@ -8,11 +9,7 @@ export interface IParseSessionProps {
     msg: IMMessage;
     isSessionEnd?: boolean;
     onChartHistoryClick?: Function;
-    recordSession?: {
-        relationId: string | number;
-        accid: string;
-        relationType?: number;
-    };
+    recordSession?: RecordSession;
 }
 export declare const pauseAllAudio: () => HTMLAudioElement;
 export declare const pauseOtherVideo: (idClient: string) => void;

package/lib/api/index.d.ts

@@ -17,7 +17,7 @@ interface ApiMethods {
     getCSOrder: (data: {
         orderSn: number | string;
         orderId: any;
-        accid: string;
+        accid?: string;
         relationId?: string | number;
         relationType?: number;
     }) => Promise<any>;

package/lib/index.d.ts

@@ -1,21 +1,24 @@
-import React from 'react';
+import React, { UIEventHandler } from 'react';
+import { RecordSession } from './ChatMessageList';
 import { apiCreate, Env } from './api';
 import { IMMessage } from './@types';
 import './styles/index.less';
 /**
  * @name 客服记录组件
- * @description 代码由小鲤客服平台搬运简化而来
+ * @description 代码由小鲤客服平台搬运简
  */
 export interface IMRecordProps {
     env?: Env;
     token?: string;
-    msgRecords: IMMessage[];
-    onScrollTop?: () => void;
-    recordSession?: {
-        relationId: string | number;
-        accid: string;
-        relationType?: number;
-    };
+    h5?: boolean;
+    msgs: IMMessage[];
+    myAccount?: string;
+    loadingStarus?: 'loading' | 'nomore';
+    onScrollTop?: UIEventHandler<HTMLDivElement>;
+    onScrollBottom?: UIEventHandler<HTMLDivElement>;
+    style?: React.CSSProperties;
+    isSessionEnd?: boolean;
+    recordSession?: RecordSession;
 }
 export interface ImContextProps {
     api: ReturnType<typeof apiCreate>;

package/lib/index.js

@@ -9,9 +9,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _ChatMessageList = _interopRequireDefault(require("./ChatMessageList"));
 var _api = require("./api");
 require("./styles/index.less");
+var _excluded = ["env", "token", "msgs", "recordSession"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(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 t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -27,26 +29,29 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
 var ImContext = exports.ImContext = /*#__PURE__*/(0, _react.createContext)({});
 var IMRecord = function IMRecord(_ref) {
   var env = _ref.env,
-    msgRecords = _ref.msgRecords,
     token = _ref.token,
+    msgs = _ref.msgs,
     recordSession = _ref.recordSession,
-    onScrollTop = _ref.onScrollTop;
+    restProps = _objectWithoutProperties(_ref, _excluded);
   var api = (0, _api.apiCreate)(env, token);
   var _useState = (0, _react.useState)({}),
     _useState2 = _slicedToArray(_useState, 2),
     accountsMap = _useState2[0],
     setAccountsMap = _useState2[1];
+  var messageListDomRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
-    var accids = _toConsumableArray(new Set(msgRecords.map(function (x) {
+    var accids = _toConsumableArray(new Set(msgs.map(function (x) {
       return x.from;
     })));
     if (accids.length) {
       getAccountByAccids(accids);
     }
-  }, [msgRecords]);
+  }, [msgs]);
   function getAccountByAccids(accids) {
     api.getAccountInfoByAccid({
       accids: accids
@@ -69,17 +74,13 @@ var IMRecord = function IMRecord(_ref) {
     value: {
       api: api
     }
-  }, /*#__PURE__*/_react.default.createElement(_ChatMessageList.default, {
-    msgs: msgRecords,
+  }, /*#__PURE__*/_react.default.createElement(_ChatMessageList.default, _extends({
+    ref: messageListDomRef,
+    msgs: msgs,
     h5: true,
-    style: {
-      height: '100%',
-      background: '#f7f7f7'
-    },
     accountsMap: accountsMap,
     isSessionEnd: true,
-    recordSession: recordSession,
-    onScrollTop: onScrollTop
-  }));
+    recordSession: recordSession
+  }, restProps)));
 };
 var _default = exports.default = IMRecord;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fle-ui/plus-im-record",
-  "version": "0.0.1-beta.3",
+  "version": "0.0.2-beta.0",
   "description": "@fle-ui/plus-im-record",
   "keywords": [
     "fle-ui",
@@ -44,5 +44,5 @@
   "peerDependencies": {
     "react": ">=17.0.0"
   },
-  "gitHead": "b081f938415363a825529d29bfdd172845fa5e2f"
+  "gitHead": "fae9fe0beb35a02fe37964a6593da6155547d978"
 }