@fle-ui/plus-im-record 0.0.7-beta.0 → 0.0.8-beta.1

package/lib/ParseSession/index.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.pauseOtherVideo = exports.pauseAllVideo = exports.pauseAllAudio = exports.default = void 0;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _antd = require("antd");
 var _reactStringReplace = _interopRequireDefault(require("react-string-replace"));
@@ -17,6 +17,8 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 var _GoodsCard = _interopRequireDefault(require("../GoodsCard"));
 var _GoodsOrderCard = _interopRequireDefault(require("../GoodsOrderCard"));
 var _2 = require("..");
+var _audioAndVideoTool = require("../audioAndVideoTool");
+var _AudioPlayer = _interopRequireDefault(require("./AudioPlayer"));
 require("./index.less");
 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); }
@@ -30,27 +32,6 @@ 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; }
-var pauseAllAudio = exports.pauseAllAudio = function pauseAllAudio() {
-  var audio = document.getElementById('fxMessageAudio');
-  audio === null || audio === void 0 ? void 0 : audio.pause();
-  return audio;
-};
-var pauseOtherVideo = exports.pauseOtherVideo = function pauseOtherVideo(idClient) {
-  var videoElements = document.getElementsByTagName('video');
-  for (var i = 0; i < videoElements.length; i++) {
-    if (videoElements[i].id !== "fxMessageVideo-".concat(idClient)) {
-      videoElements[i].pause();
-    }
-  }
-};
-var pauseAllVideo = exports.pauseAllVideo = function pauseAllVideo() {
-  var videoElements = document.getElementsByTagName('video');
-  for (var i = 0; i < videoElements.length; i++) {
-    if (videoElements[i].id.startsWith('fxMessageVideo-')) {
-      videoElements[i].pause();
-    }
-  }
-};
 //
 var ParseSession = function ParseSession(_ref) {
   var prefix = _ref.prefix,
@@ -63,17 +44,15 @@ var ParseSession = function ParseSession(_ref) {
   var _useContext = (0, _react.useContext)(_2.ImContext),
     api = _useContext.api;
   var formRef = (0, _react.useRef)();
-  var audioRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(),
     _useState2 = _slicedToArray(_useState, 2),
-    animationFlag = _useState2[0],
-    setAnimationFlag = _useState2[1];
-  var _useState3 = (0, _react.useState)(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    contactInfo = _useState4[0],
-    setContactInfo = _useState4[1];
+    contactInfo = _useState2[0],
+    setContactInfo = _useState2[1];
   var attach = msg.attach || {};
   var renderText = function renderText(preset) {
+    if (attach.refMsg) {
+      return renderRefMsg();
+    }
     var text = (0, _reactStringReplace.default)(attach.content, /(https?:\/\/\S+)/gi, function (match) {
       return /*#__PURE__*/_react.default.createElement("a", {
         key: msg.idClient,
@@ -101,6 +80,101 @@ var ParseSession = function ParseSession(_ref) {
       className: "".concat(prefix, "-text")
     }, preset || text.map(renderKeywordText));
   };
+  var renderRefMsg = function renderRefMsg() {
+    var refContent = attach.refMsg.type !== 'text' ? JSON.parse(attach.refMsg.content) : attach.refMsg.content;
+    var nickname = attach.refMsg.nickname;
+    var content = attach.content;
+    var renderers = {
+      image: function image() {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "".concat(prefix, "-ref-img-body")
+        }, /*#__PURE__*/_react.default.createElement("img", {
+          src: refContent.url,
+          alt: ""
+        }));
+      },
+      video: function video() {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "".concat(prefix, "-ref-video-body")
+        }, /*#__PURE__*/_react.default.createElement("video", {
+          key: msg.idServer,
+          playsInline: true,
+          preload: "auto",
+          controls: true,
+          autoPlay: false,
+          onLoadedData: function onLoadedData(event) {
+            return event.currentTarget.pause();
+          }
+        }, /*#__PURE__*/_react.default.createElement("source", {
+          src: refContent.url,
+          type: "video/mp4"
+        }), "Your browser does not support the video element."));
+      },
+      audio: function audio() {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "".concat(prefix, "-ref-audio-body")
+        }, /*#__PURE__*/_react.default.createElement(_AudioPlayer.default, {
+          style: {
+            backgroundColor: '#fff',
+            borderRadius: 4,
+            width: 80
+          },
+          prefix: prefix || '',
+          msg: msg,
+          url: refContent.url,
+          dur: refContent.dur,
+          text: refContent.text
+        }));
+      },
+      file: function file() {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "".concat(prefix, "-ref-file")
+        }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          className: "".concat(prefix, "-file-icon"),
+          type: 'icon-wenjian',
+          style: {
+            fontSize: 16
+          }
+        }), /*#__PURE__*/_react.default.createElement("a", {
+          style: {
+            marginLeft: 8
+          },
+          download: refContent.fileName,
+          href: (0, _utils.addUrlSearch)(refContent.url, "download=".concat(refContent.fileName)),
+          target: "_blank",
+          rel: "noreferrer"
+        }, refContent.fileName)));
+      },
+      product: function product() {
+        return /*#__PURE__*/_react.default.createElement(_GoodsCard.default, {
+          prefix: prefix,
+          content: refContent
+        });
+      },
+      order: function order() {
+        return /*#__PURE__*/_react.default.createElement(_GoodsOrderCard.default, {
+          prefix: prefix,
+          recordSession: recordSession,
+          orderSn: refContent.orderSn,
+          orderId: refContent.orderId
+        });
+      },
+      text: function text() {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "".concat(prefix, "-ref-text-body")
+        }, refContent);
+      }
+    };
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefix, "-ref")
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefix, "-ref-body")
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefix, "-ref-nickname")
+    }, nickname, ":"), renderers[attach.refMsg.type]()), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefix, "-text")
+    }, content));
+  };
   var renderImage = function renderImage() {
     return /*#__PURE__*/_react.default.createElement(_antd.Image, {
       loading: "lazy",
@@ -261,48 +335,12 @@ var ParseSession = function ParseSession(_ref) {
   var renderAudio = function renderAudio() {
     var flow = msg.flow;
     var duration = Math.floor(attach.content.dur) || 0;
-    var durations = {
-      mm: Math.floor(duration / 60),
-      ss: duration % 60
-    };
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefix, "-audio"),
-      ref: audioRef
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: flow === 'in' ? "".concat(prefix, "-audio-in") : "".concat(prefix, "-audio-out"),
-      onClick: function onClick() {
-        var _audioRef$current;
-        pauseAllVideo();
-        var oldAudio = pauseAllAudio();
-        var msgId = oldAudio === null || oldAudio === void 0 ? void 0 : oldAudio.getAttribute('msgId');
-        if (msgId === msg.idClient) {
-          setAnimationFlag(false);
-          return;
-        }
-        var audio = new Audio(attach.content.url);
-        audio.id = 'fxMessageAudio';
-        audio.setAttribute('msgId', msg.idClient);
-        audio.play();
-        (_audioRef$current = audioRef.current) === null || _audioRef$current === void 0 ? void 0 : _audioRef$current.appendChild(audio);
-        audio.addEventListener('ended', function () {
-          var _audio$parentNode;
-          setAnimationFlag(false);
-          (_audio$parentNode = audio.parentNode) === null || _audio$parentNode === void 0 ? void 0 : _audio$parentNode.removeChild(audio);
-        });
-        audio.addEventListener('pause', function () {
-          var _audio$parentNode2;
-          setAnimationFlag(false);
-          (_audio$parentNode2 = audio.parentNode) === null || _audio$parentNode2 === void 0 ? void 0 : _audio$parentNode2.removeChild(audio);
-        });
-        setAnimationFlag(true);
-      }
-    }, /*#__PURE__*/_react.default.createElement("span", null, "".concat(durations.mm > 0 ? "".concat(durations.mm, "'") : '', " ").concat(durations.ss, "\"")), /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(prefix, "-audio-icon")
-    }, animationFlag ? /*#__PURE__*/_react.default.createElement("img", {
-      src: "https://qa-oss.elebuys.com/tmpdir/202401152050070000640984.gif"
-    }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      type: "icon-a-yuyin2"
-    }))));
+    return /*#__PURE__*/_react.default.createElement(_AudioPlayer.default, {
+      prefix: prefix || '',
+      msg: msg,
+      url: attach.content.url,
+      dur: duration
+    });
   };
   var renderVideo = function renderVideo() {
     var _attach$content4;
@@ -316,8 +354,8 @@ var ParseSession = function ParseSession(_ref) {
       id: "fxMessageVideo-".concat(msg.idClient),
       controls: true,
       onPlay: function onPlay() {
-        pauseOtherVideo(msg.idClient);
-        pauseAllAudio();
+        (0, _audioAndVideoTool.pauseOtherVideo)(msg.idClient);
+        (0, _audioAndVideoTool.pauseAllAudio)();
       }
       // onCanPlay={(e: any) => {
       //   setTimeout(() => {

package/lib/ParseSession/index.less

@@ -5,6 +5,50 @@
     padding: 8px;
   }
 
+  &-ref {
+    padding: 12px;
+    padding-bottom: 16px;
+    &-body {
+      border-left: 2px solid #c2d4ff;
+      padding-left: 8px;
+    }
+    &-text-body {
+      // width: 328px;
+      max-height: 115px;
+      font-size: 12px;
+      color: #777;
+      overflow: hidden;
+      display: -webkit-box;
+      word-break: break-all;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      text-overflow: ellipsis;
+    }
+    &-img-body {
+      width: 170px;
+      height: 115px;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    &-video-body {
+      width: 170px;
+      height: 115px;
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    &-nickname {
+      font-size: 12px;
+      color: #777;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+  }
   &-image {
     // padding: 4px;
     border-radius: 6px;
@@ -26,7 +70,8 @@
 
     &-in,
     &-out {
-      width: 90px;
+      max-width: 90px;
+      min-width: 64px;
       display: flex;
       justify-content: space-between;
       cursor: pointer;

package/lib/api/index.d.ts

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

package/lib/audioAndVideoTool.d.ts

@@ -0,0 +1,3 @@
+export declare const pauseAllAudio: () => HTMLAudioElement;
+export declare const pauseOtherVideo: (idClient: string) => void;
+export declare const pauseAllVideo: () => void;

package/lib/audioAndVideoTool.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pauseOtherVideo = exports.pauseAllVideo = exports.pauseAllAudio = void 0;
+var pauseAllAudio = exports.pauseAllAudio = function pauseAllAudio() {
+  var audio = document.getElementById('fxMessageAudio');
+  audio === null || audio === void 0 ? void 0 : audio.pause();
+  return audio;
+};
+var pauseOtherVideo = exports.pauseOtherVideo = function pauseOtherVideo(idClient) {
+  var videoElements = document.getElementsByTagName('video');
+  for (var i = 0; i < videoElements.length; i++) {
+    if (videoElements[i].id !== "fxMessageVideo-".concat(idClient)) {
+      videoElements[i].pause();
+    }
+  }
+};
+var pauseAllVideo = exports.pauseAllVideo = function pauseAllVideo() {
+  var videoElements = document.getElementsByTagName('video');
+  for (var i = 0; i < videoElements.length; i++) {
+    if (videoElements[i].id.startsWith('fxMessageVideo-')) {
+      videoElements[i].pause();
+    }
+  }
+};

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.7-beta.0",
+  "version": "0.0.8-beta.1",
   "description": "@fle-ui/plus-im-record",
   "keywords": [
     "fle-ui",
@@ -45,5 +45,5 @@
   "peerDependencies": {
     "react": ">=17.0.0"
   },
-  "gitHead": "009fe2c46a634dc85deb25d46b39b611b09bafab"
+  "gitHead": "4bd791803dc3214ac5ed0ee7209f996b4e62eac7"
 }