paul-ai-assistant 0.1.16

package/es/AssistantChat/AssistantChatApp/const.js

@@ -0,0 +1,105 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import { Tag } from '@alife/magic-basic';
+import "./index.scss";
+
+// 用户角色
+export var ROLE_TYPE = {
+  SYSTEM: 1,
+  WORKER: 2,
+  LLM: 3,
+  CUSTOMER: 4
+}; // 客户消息
+
+// 消息类型： magic-chat 协议
+export var MESSAGE_TYPE = {
+  CARD: 1,
+  TEXT: 2,
+  RICHTEXT: 3,
+  AUTH: 4,
+  MARKDOWN: 5,
+  SECRET: 21,
+  MICRO_APP: 99,
+  ANSWER_CARD: 100,
+  INTERACTIVE_CARD: 101
+}; // 交互式卡片
+
+/**
+ * 判断右边消息
+ * @param role
+ * @returns
+ */
+export var isRightMessage = function isRightMessage(role) {
+  // role===2为小二提问（右边），role===3为智能助手（左边）
+  return role === ROLE_TYPE.WORKER;
+};
+/**
+ * 判断是否为紫色卡片
+ * @param role
+ * @returns
+ */
+export var isPurpleMessageCard = function isPurpleMessageCard(role) {
+  return [ROLE_TYPE.WORKER, ROLE_TYPE.CUSTOMER].includes(role);
+};
+/**
+ * 判断是否为宽度100%卡片
+ * @param role
+ * @returns
+ */
+export var isWidth100MessageCard = function isWidth100MessageCard(role) {
+  return ![ROLE_TYPE.WORKER, ROLE_TYPE.CUSTOMER].includes(role);
+};
+export var TagShow = function TagShow(tagTypeProps) {
+  var _ref = tagTypeProps || {},
+    className = _ref.className,
+    style = _ref.style,
+    color = _ref.color,
+    backgroundColor = _ref.backgroundColor,
+    text = _ref.text,
+    _ref$noColor = _ref.noColor,
+    noColor = _ref$noColor === void 0 ? false : _ref$noColor;
+  if (!text) {
+    return null;
+  }
+  var colorProps = noColor ? {} : {
+    color: color,
+    backgroundColor: backgroundColor
+  };
+  return /*#__PURE__*/React.createElement(Tag, {
+    className: className,
+    style: _objectSpread(_objectSpread({}, colorProps), {}, {
+      flexShrink: 0
+    }, style)
+    // type="primary"
+    ,
+    size: "small"
+  }, /*#__PURE__*/React.createElement("span", null, text));
+};
+
+/**
+ * 展示卡片标签
+ * @param message
+ * @returns
+ */
+export var showCardTag = function showCardTag(message) {
+  var _message$headerInfo;
+  var noColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var _ref2 = (message === null || message === void 0 || (_message$headerInfo = message.headerInfo) === null || _message$headerInfo === void 0 ? void 0 : _message$headerInfo.extInfo) || {},
+    headerTag = _ref2.headerTag;
+  if (!headerTag) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(TagShow, _extends({}, headerTag, {
+    noColor: noColor
+  }));
+};
+/**
+ * 获取元素底部距离的方法。
+ *
+ * @param el 目标元素。
+ * @returns 返回元素底部距离的像素值。
+ */
+export function getToBottom(el) {
+  return el.scrollHeight - el.scrollTop - el.offsetHeight;
+}

package/es/AssistantChat/AssistantChatApp/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.scss';
+declare const _default: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+export default _default;

package/es/AssistantChat/AssistantChatApp/index.js

@@ -0,0 +1,281 @@
+import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
+import { Checkbox, Divider } from '@alife/magic-basic';
+import { useSize } from 'ahooks';
+import classNames from 'classnames';
+import moment from 'moment';
+import { AssistantChatContext } from "../../context";
+import AigcTipsRender from "../AssistantChatCard/OperationCard/AigcTipsRender";
+import Copy from "../AssistantChatCard/OperationCard/Copy";
+import FeedBack from "../AssistantChatCard/OperationCard/FeedBack";
+import ShareButton from "../AssistantChatCard/OperationCard/ShareButton";
+import CardMatchRender from "./CardMatchRender";
+import { getToBottom as _getToBottom, isPurpleMessageCard, isRightMessage, isWidth100MessageCard } from "./const";
+import OperationMatchRender from "./OperationMatchRender";
+import "./index.scss";
+var MESSAGE_CARD_WIDTH = {
+  large: '100%',
+  medium: '80%',
+  small: '50%'
+};
+var AssistantChatApp = function AssistantChatApp(_, ref) {
+  var _useSize;
+  var _useContext = useContext(AssistantChatContext),
+    data = _useContext.messages,
+    messageCardWidth = _useContext.messageCardWidth,
+    operationRender = _useContext.operationRender,
+    topRenderMessage = _useContext.topRenderMessage,
+    shareMode = _useContext.shareMode,
+    toggleMessageSelection = _useContext.toggleMessageSelection,
+    isMessageSelected = _useContext.isMessageSelected,
+    canCancelSelection = _useContext.canCancelSelection,
+    enterShareMode = _useContext.enterShareMode;
+  var chatListRef = useRef(null);
+  var stopScrollToEndRef = useRef(false);
+  var messageWidth = (MESSAGE_CARD_WIDTH === null || MESSAGE_CARD_WIDTH === void 0 ? void 0 : MESSAGE_CARD_WIDTH[messageCardWidth]) || messageCardWidth;
+  var showChatCard = function showChatCard(message) {
+    var _message$dataInfo;
+    var isLastMessage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var _ref = message || {},
+      headerInfo = _ref.headerInfo,
+      dialogId = _ref.dialogId,
+      userInfo = _ref.userInfo,
+      timestamp = _ref.timestamp;
+    var isSelected = (isMessageSelected === null || isMessageSelected === void 0 ? void 0 : isMessageSelected(dialogId)) || false;
+    var isQuestion = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.role) === 2; // 用户问题
+    var isAnswer = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.role) === 3; // AI回答
+    var canCancel = (canCancelSelection === null || canCancelSelection === void 0 ? void 0 : canCancelSelection(dialogId)) || false;
+    // 判断是否正在推送思考过程
+    var isStreaming = (message === null || message === void 0 || (_message$dataInfo = message.dataInfo) === null || _message$dataInfo === void 0 || (_message$dataInfo = _message$dataInfo.props) === null || _message$dataInfo === void 0 || (_message$dataInfo = _message$dataInfo[0]) === null || _message$dataInfo === void 0 || (_message$dataInfo = _message$dataInfo.value) === null || _message$dataInfo === void 0 ? void 0 : _message$dataInfo.finished) === false;
+    var headerComponent = function headerComponent() {
+      if (typeof operationRender === 'function') {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "assistant-chat-paul-ai-message-header-info"
+        }, operationRender === null || operationRender === void 0 ? void 0 : operationRender(message));
+      }
+      if (headerInfo) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "assistant-chat-paul-ai-message-header-info"
+        }, /*#__PURE__*/React.createElement(OperationMatchRender, {
+          currMessage: message,
+          dataInfo: headerInfo
+        }));
+      }
+      return null;
+    };
+    var messageTime = moment(timestamp).format('YYYY-MM-DD HH:mm:ss');
+
+    // 判断在选中组中的位置
+    var getSelectedPosition = function getSelectedPosition() {
+      if (!isSelected) return null;
+      var selectedMessages = data.filter(function (msg) {
+        return isMessageSelected === null || isMessageSelected === void 0 ? void 0 : isMessageSelected(msg.dialogId);
+      });
+
+      // 找到当前消息在选中消息中的位置
+      var selectedIndex = selectedMessages.findIndex(function (msg) {
+        return msg.dialogId === dialogId;
+      });
+      if (selectedIndex === 0) return 'first';
+      if (selectedIndex === selectedMessages.length - 1) return 'last';
+      return '';
+    };
+    var selectedPosition = getSelectedPosition();
+
+    // 确定CSS类名
+    var containerClassName = classNames('assistant-chat-paul-ai-message-container', {
+      selected: isSelected,
+      'question-selected': isSelected && isQuestion,
+      'answer-selected': isSelected && isAnswer,
+      'can-cancel': canCancel,
+      'cannot-cancel': !canCancel && isSelected,
+      'has-checkbox': shareMode && (isQuestion || isAnswer),
+      'answer-checkbox': shareMode && isAnswer,
+      'selected-first': selectedPosition === 'first',
+      'selected-last': selectedPosition === 'last'
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: containerClassName,
+      id: dialogId,
+      key: dialogId,
+      "data-message-id": dialogId
+    }, shareMode && (isQuestion || isAnswer) && /*#__PURE__*/React.createElement("div", {
+      className: "message-selection-checkbox"
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      checked: isSelected,
+      onChange: function onChange() {
+        return toggleMessageSelection === null || toggleMessageSelection === void 0 ? void 0 : toggleMessageSelection(dialogId);
+      },
+      disabled: !canCancel && isSelected // 答案不能取消选中
+    })), (userInfo === null || userInfo === void 0 ? void 0 : userInfo.role) === 1 ? /*#__PURE__*/React.createElement("div", {
+      className: "assistant-chat-paul-ai-message assistant-chat-paul-ai-message-system"
+    }, /*#__PURE__*/React.createElement(CardMatchRender, {
+      currMessage: message,
+      isLastMessage: isLastMessage
+    })) : /*#__PURE__*/React.createElement("div", {
+      className: "assistant-chat-paul-ai-message assistant-chat-paul-ai-message-".concat(isRightMessage(userInfo === null || userInfo === void 0 ? void 0 : userInfo.role) ? 'right' : 'left')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "assistant-chat-paul-ai-message-meta ".concat(!isRightMessage(userInfo === null || userInfo === void 0 ? void 0 : userInfo.role) && 'assistant-chat-paul-ai-message-meta-left'),
+      style: {
+        maxWidth: messageWidth
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "assistant-chat-paul-ai-message-header-base"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "assistant-chat-paul-ai-message-card-tag"
+    }, !isRightMessage(userInfo === null || userInfo === void 0 ? void 0 : userInfo.role) && /*#__PURE__*/React.createElement("img", {
+      className: "assistant-chat-paul-ai-message-header-base-info-icon",
+      src: "https://img.alicdn.com/imgextra/i1/O1CN01kDzOky1Hg2O1syFts_!!6000000000786-2-tps-200-200.png"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "assistant-chat-paul-ai-message-header-base-info",
+      style: {
+        flexDirection: isRightMessage(userInfo === null || userInfo === void 0 ? void 0 : userInfo.role) ? 'row-reverse' : 'row'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "assistant-chat-paul-ai-message-header-base-info-name"
+    }, isRightMessage(userInfo === null || userInfo === void 0 ? void 0 : userInfo.role) ? userInfo === null || userInfo === void 0 ? void 0 : userInfo.username : 'Paul'), /*#__PURE__*/React.createElement("div", {
+      className: "assistant-chat-paul-ai-message-time",
+      title: messageTime
+    }, messageTime)), /*#__PURE__*/React.createElement("div", {
+      className: "assistant-chat-paul-ai-message-card-tag"
+    })), headerComponent()), /*#__PURE__*/React.createElement("div", {
+      className: "assistant-chat-paul-ai-message-content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames('assistant-chat-paul-ai-message-card', {
+        'assistant-chat-paul-ai-message-card-purple': isPurpleMessageCard(userInfo === null || userInfo === void 0 ? void 0 : userInfo.role),
+        'assistant-chat-paul-ai-message-card-width-100': isWidth100MessageCard(userInfo === null || userInfo === void 0 ? void 0 : userInfo.role)
+      }),
+      style: {
+        maxWidth: messageWidth
+      }
+    }, /*#__PURE__*/React.createElement(CardMatchRender, {
+      currMessage: message,
+      isLastMessage: isLastMessage
+    }))), isAnswer && !isStreaming && /*#__PURE__*/React.createElement("div", {
+      className: "assistant-chat-paul-ai-message-bottom-operations"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "operation-card-container"
+    }, /*#__PURE__*/React.createElement(Copy, {
+      ctx: {
+        meta: {
+          originData: message
+        }
+      }
+    }), /*#__PURE__*/React.createElement(ShareButton, {
+      ctx: {
+        meta: {
+          originData: message
+        }
+      },
+      enterShareMode: enterShareMode
+    }), /*#__PURE__*/React.createElement(Divider, {
+      type: "vertical"
+    }), /*#__PURE__*/React.createElement(FeedBack, {
+      ctx: {
+        meta: {
+          originData: message
+        }
+      }
+    })), /*#__PURE__*/React.createElement(AigcTipsRender, {
+      ctx: {
+        meta: {
+          originData: message
+        }
+      }
+    }))));
+  };
+  var timerRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return {
+      setStopScrollToEnd: function setStopScrollToEnd(stopScrollToEnd) {
+        stopScrollToEndRef.current = stopScrollToEnd;
+      },
+      scrollToEnd: function scrollToEnd(scrollData) {
+        var _ref2 = scrollData || {},
+          _ref2$smooth = _ref2.smooth,
+          smooth = _ref2$smooth === void 0 ? true : _ref2$smooth,
+          _ref2$scrollDelay = _ref2.scrollDelay,
+          scrollDelay = _ref2$scrollDelay === void 0 ? 500 : _ref2$scrollDelay;
+        setTimeout(function () {
+          if (chatListRef !== null && chatListRef !== void 0 && chatListRef.current) {
+            var _chatListRef$current, _chatListRef$current2;
+            chatListRef === null || chatListRef === void 0 || (_chatListRef$current = chatListRef.current) === null || _chatListRef$current === void 0 || _chatListRef$current.scrollTo({
+              top: (chatListRef === null || chatListRef === void 0 || (_chatListRef$current2 = chatListRef.current) === null || _chatListRef$current2 === void 0 ? void 0 : _chatListRef$current2.scrollHeight) || 0,
+              behavior: smooth ? 'smooth' : 'auto'
+            });
+          }
+        }, scrollDelay);
+      },
+      scrollToEndThrottle: function scrollToEndThrottle() {
+        // 节流
+        if (!(timerRef !== null && timerRef !== void 0 && timerRef.current)) {
+          timerRef.current = setTimeout(function () {
+            if (chatListRef !== null && chatListRef !== void 0 && chatListRef.current && !(stopScrollToEndRef !== null && stopScrollToEndRef !== void 0 && stopScrollToEndRef.current)) {
+              var _chatListRef$current3, _chatListRef$current4;
+              chatListRef === null || chatListRef === void 0 || (_chatListRef$current3 = chatListRef.current) === null || _chatListRef$current3 === void 0 || _chatListRef$current3.scrollTo({
+                top: (chatListRef === null || chatListRef === void 0 || (_chatListRef$current4 = chatListRef.current) === null || _chatListRef$current4 === void 0 ? void 0 : _chatListRef$current4.scrollHeight) || 0,
+                behavior: 'smooth'
+              });
+            } else {
+              clearTimeout(timerRef === null || timerRef === void 0 ? void 0 : timerRef.current);
+            }
+            timerRef.current = null;
+          }, 0);
+        }
+      },
+      showSingleMessage: function showSingleMessage(message) {
+        return showChatCard(message);
+      },
+      getToBottom: function getToBottom() {
+        return _getToBottom(chatListRef === null || chatListRef === void 0 ? void 0 : chatListRef.current);
+      },
+      getScrollInfo: function getScrollInfo() {
+        return {
+          get isTop() {
+            var _chatListRef$current5;
+            return (chatListRef === null || chatListRef === void 0 || (_chatListRef$current5 = chatListRef.current) === null || _chatListRef$current5 === void 0 ? void 0 : _chatListRef$current5.scrollTop) < 12;
+          },
+          get isBottom() {
+            return _getToBottom(chatListRef === null || chatListRef === void 0 ? void 0 : chatListRef.current) < 12;
+          },
+          get scrollOffset() {
+            var _chatListRef$current6;
+            return chatListRef === null || chatListRef === void 0 || (_chatListRef$current6 = chatListRef.current) === null || _chatListRef$current6 === void 0 ? void 0 : _chatListRef$current6.scrollTop;
+          },
+          get scrollSize() {
+            var _chatListRef$current7;
+            return chatListRef === null || chatListRef === void 0 || (_chatListRef$current7 = chatListRef.current) === null || _chatListRef$current7 === void 0 ? void 0 : _chatListRef$current7.scrollHeight;
+          },
+          get viewportSize() {
+            var _chatListRef$current8;
+            return chatListRef === null || chatListRef === void 0 || (_chatListRef$current8 = chatListRef.current) === null || _chatListRef$current8 === void 0 ? void 0 : _chatListRef$current8.clientHeight;
+          }
+        };
+      }
+    };
+  });
+
+  // 智能交互框底部输入栏高度
+  var assistantChatTopMessageHeight = ((_useSize = useSize(document.getElementById('assistantChatTopMessageId'))) === null || _useSize === void 0 ? void 0 : _useSize.height) || 0;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "assistant-chat-paul-ai-app-container"
+  }, topRenderMessage && /*#__PURE__*/React.createElement("div", {
+    id: "assistantChatTopMessageId",
+    className: "assistant-chat-paul-ai-top-message"
+  }, showChatCard(topRenderMessage)), /*#__PURE__*/React.createElement("div", {
+    ref: chatListRef,
+    className: "assistant-chat-paul-ai-list",
+    style: {
+      height: "calc(100% - ".concat(assistantChatTopMessageHeight, "px)")
+    },
+    onWheel: function onWheel(e) {
+      if (!(stopScrollToEndRef !== null && stopScrollToEndRef !== void 0 && stopScrollToEndRef.current) && (e === null || e === void 0 ? void 0 : e.deltaY) < 0) {
+        stopScrollToEndRef.current = true;
+      } else if (_getToBottom(chatListRef === null || chatListRef === void 0 ? void 0 : chatListRef.current) < 12) {
+        stopScrollToEndRef.current = false;
+      }
+    }
+  }, Array.isArray(data) && data.length > 0 && (data === null || data === void 0 ? void 0 : data.map(function (message, index) {
+    return showChatCard(message, index === data.length - 1);
+  }))));
+};
+export default /*#__PURE__*/forwardRef(AssistantChatApp);