@fonixtree/magic-design 1.0.5 → 1.0.6

package/lib/core/Designer/AiImageGenerator/index.less

@@ -0,0 +1,136 @@
+.generate_drawer {
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+  .dialog_head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .dialog_title {
+
+    }
+    .btn_group {
+      display: flex;
+    }
+  }
+  .drawer_content {
+    display: flex;
+    min-height: 100%;
+    .left_wrap {
+      border-radius: 4px;
+      background-color: #FFF;
+      width: 320px;
+      min-height: 100%;
+      padding: 16px;
+    }
+    .middle_wrap {
+      flex: 1 1 auto;
+      padding: 32px 54px;
+      height: 550px;
+      position: relative;
+      .img_wrap {
+        width: 492px;
+        height: 492px;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(2, 1fr);
+        grid-gap: 12px;
+        margin: 0 auto;
+    
+        .aiImageItem {
+          position: relative;
+          background-color: #ccc;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 24px;
+          img {
+            width: 100%;
+          }
+          .imgHandleBtnWrap {
+            display: flex;
+            position: absolute;
+            bottom: 12px;
+            right: 12px;
+            .refreshBtnWrap {
+              background-color: #FFF;
+              cursor: pointer;
+              height: 28px;
+              width: 28px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              border-radius: 50%;
+              border: 1px solid #D2D9E5;
+            }
+            .downloadBtnWrap {
+              background-color: #FFF;
+              cursor: pointer;
+              height: 28px;
+              width: 28px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-left: 12px;
+              border-radius: 50%;
+              border: 1px solid #D2D9E5;
+            }
+          }
+          .imgSelectBtnWrap {
+            position: absolute;
+            top: 12px;
+            right: 12px;
+            border-radius: 50%;
+            height: 19px;
+            width: 19px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: #FFF;
+
+          }
+        }
+        .noDataWrap {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .no_data {
+            height: 183px;
+            width: 212px;
+          }
+        }
+        
+      }
+      .btn_wrap {
+        margin-top: 40px;
+        display: flex;
+        justify-content: center;
+        .regenerate_btn {
+          border: 1px solid #E6EAF0;
+          border-radius: 4px;
+          padding: 4px 12px;
+          cursor: pointer;
+          font-family: 'Open Sans';
+          font-style: normal;
+          font-weight: 400;
+          font-size: 13px;
+          background-color: #FFF;
+        }
+      }
+      .search_wrap {
+        margin-top: 12px;
+        .cylon-input {
+          border-top-right-radius: 0 !important;
+          border-bottom-right-radius: 0 !important;
+        }
+        .cylon-btn {
+          border-top-left-radius: 0 !important;
+          border-bottom-left-radius: 0 !important;
+        }
+      }
+    }
+  }
+}

package/lib/core/Designer/ChatRobot/components/CopyBtn/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = CopyBtn;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _common = require("../../../../../common");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var btnTypeMap = {
+  COPY: 'icon-copy1',
+  COPIED: 'icon-vector'
+};
+
+function CopyBtn(_a) {
+  var onClick = _a.onClick;
+
+  var _b = (0, _react.useState)(btnTypeMap.COPY),
+      btnType = _b[0],
+      setBtnType = _b[1];
+
+  var onBtnClick = function onBtnClick() {
+    // 拷贝
+    setBtnType(btnTypeMap.COPIED);
+    onClick(); // 定时更改图标
+
+    setTimeout(function () {
+      setBtnType(btnTypeMap.COPY);
+    }, 2000);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+    color: "#2F54EB",
+    onClick: onBtnClick,
+    size: 20,
+    style: {
+      cursor: 'pointer'
+    },
+    type: btnType
+  });
+}

package/lib/core/Designer/ChatRobot/index.js

@@ -0,0 +1,343 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _CopyBtn = _interopRequireDefault(require("./components/CopyBtn"));
+
+var _common = require("../../../common");
+
+var _FonixtreeGpt = _interopRequireDefault(require("../FonixtreeGpt"));
+
+var _AiImageGenerator = _interopRequireDefault(require("../AiImageGenerator"));
+
+var _commonUtil = require("../../../utils/commonUtil");
+
+require("./index.less");
+
+require("./markdown.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var ChatRobot =
+/** @class */
+function (_super) {
+  __extends(ChatRobot, _super);
+
+  function ChatRobot(props) {
+    var _this = _super.call(this, props) || this;
+
+    _this.state = {
+      open: false,
+      message: '',
+      context: [],
+      isGenerating: false,
+      aiImageVisible: false,
+      loading: true
+    };
+
+    _this.scrollBottom = function () {
+      var container = document.getElementById('content_wrap');
+      container.scrollTop = container.scrollHeight + 50;
+    };
+
+    _this.onMessageChage = function (e) {
+      _this.setState({
+        message: e.target.value
+      });
+    };
+
+    _this.getMarkText = function (text) {
+      return marked.parse(text);
+    };
+
+    _this.onEnter = function () {
+      var message = _this.state.message;
+
+      if (!message) {
+        return;
+      } // chat
+
+
+      _this.chatGpt.sendMessage(message);
+
+      var context = _this.chatGpt.getContext();
+
+      _this.setState({
+        isGenerating: true,
+        context: context,
+        message: ''
+      }, function () {
+        _this.scrollBottom();
+      });
+    };
+
+    _this.onShowDrawer = function () {
+      _this.setState({
+        open: true
+      });
+    };
+
+    _this.onCloseDrawer = function () {
+      _this.setState({
+        open: false
+      });
+    };
+
+    _this.onRegenarate = function () {
+      _this.setState({
+        isGenerating: true
+      });
+
+      _this.chatGpt.regenerate();
+
+      var context = _this.chatGpt.getContext();
+
+      _this.setState({
+        context: context
+      });
+    };
+
+    _this.generateImage = function () {
+      _this.setState({
+        open: false
+      });
+
+      _this.setState({
+        aiImageVisible: true
+      });
+    };
+
+    _this.copyToClipboard = function (text) {
+      (0, _commonUtil.copy2ClipBoard)(text);
+    };
+
+    _this.chatGpt = new _FonixtreeGpt["default"]({
+      onMessage: function onMessage(text) {
+        document.getElementById('recent_response').innerHTML = _this.getMarkText(text);
+
+        _this.scrollBottom();
+      },
+      onEnd: function onEnd() {
+        var context = _this.chatGpt.getContext();
+
+        document.getElementById('recent_response').innerHTML = '';
+
+        _this.setState({
+          context: context,
+          isGenerating: false
+        });
+      }
+    });
+    return _this;
+  }
+
+  ChatRobot.prototype.componentDidMount = function () {
+    var _this = this;
+
+    var context = this.chatGpt.getContext();
+    this.setState({
+      context: context
+    });
+    (0, _commonUtil.importAsync)('https://cdn.jsdelivr.net/npm/marked/marked.min.js').then(function () {
+      return _this.setState({
+        loading: false
+      });
+    });
+  };
+
+  ChatRobot.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.state,
+        context = _a.context,
+        message = _a.message,
+        open = _a.open,
+        isGenerating = _a.isGenerating,
+        aiImageVisible = _a.aiImageVisible,
+        loading = _a.loading;
+
+    if (loading) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "chat_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "chat_btn_wrap",
+      onClick: this.onShowDrawer
+    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      color: "#2F54EB",
+      size: 36,
+      type: "icon-ai"
+    })), /*#__PURE__*/_react["default"].createElement(_antd.Drawer, {
+      bodyStyle: {
+        padding: 0
+      },
+      className: "chat_drawer",
+      closable: false,
+      footer: /*#__PURE__*/_react["default"].createElement("div", {
+        className: "dialog_bottom"
+      }, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
+        onChange: this.onMessageChage,
+        onPressEnter: this.onEnter,
+        placeholder: "Send a message",
+        value: message
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "btn_wrap"
+      }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+        color: "#2F54EB",
+        onClick: this.generateImage,
+        size: 20,
+        style: {
+          cursor: 'pointer'
+        },
+        type: "icon-image"
+      }), /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+        color: message.length > 0 ? '#2F54EB' : '#C1C9D7',
+        onClick: this.onEnter,
+        size: 20,
+        style: {
+          cursor: 'pointer'
+        },
+        type: message.length > 0 ? 'icon-send1' : 'icon-send'
+      }))),
+      footerStyle: {
+        padding: 12
+      },
+      headerStyle: {
+        padding: '12px 24px'
+      },
+      onClose: this.onCloseDrawer,
+      open: open,
+      placement: "right",
+      title: /*#__PURE__*/_react["default"].createElement("div", {
+        className: "dialog_head"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "dialog_title"
+      }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+        color: "#2F54EB",
+        onClick: this.onCloseDrawer,
+        size: 24,
+        style: {
+          marginRight: 5
+        },
+        type: "icon-ai"
+      }), "Conversational Editor"), /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+        onClick: this.onCloseDrawer,
+        size: 24,
+        style: {
+          cursor: 'pointer'
+        },
+        type: "icon-close"
+      })),
+      width: 600
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "chat_content_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "content_wrap markdown-body",
+      id: "content_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('messageOuterWrap', {
+        assistantMessage: true
+      })
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "messageWrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "messageContentWrap"
+    }, "What would like to create?"))), context.length > 0 && context.map(function (ctxNode) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])('messageOuterWrap', {
+          userMessage: ctxNode.role === 'user',
+          assistantMessage: ctxNode.role === 'assistant'
+        })
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "messageWrap"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "messageContentWrap",
+        dangerouslySetInnerHTML: {
+          __html: _this.getMarkText(ctxNode.content)
+        }
+      }), ctxNode.role === 'assistant' && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "msgIconWrap"
+      }, /*#__PURE__*/_react["default"].createElement(_CopyBtn["default"], {
+        onClick: function onClick() {
+          _this.copyToClipboard(ctxNode.content);
+        }
+      }))));
+    }), isGenerating && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "recent_response",
+      id: "recent_response"
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Spin, {
+      spinning: true
+    }))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "regenerate_btn",
+      onClick: this.onRegenarate
+    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      color: "#232F46",
+      onClick: this.onCloseDrawer,
+      size: 16,
+      style: {
+        marginRight: 5
+      },
+      type: "icon-refresh"
+    }), "Regenerate Response"))), /*#__PURE__*/_react["default"].createElement(_AiImageGenerator["default"], {
+      onClose: function onClose() {
+        return _this.setState({
+          aiImageVisible: false
+        });
+      },
+      onConfirm: function onConfirm() {
+        return _this.setState({
+          aiImageVisible: false
+        });
+      },
+      visible: aiImageVisible
+    }));
+  };
+
+  return ChatRobot;
+}(_react.Component);
+
+var _default = ChatRobot;
+exports["default"] = _default;

package/lib/core/Designer/ChatRobot/index.less

@@ -0,0 +1,138 @@
+.chat_wrap {
+  .chat_btn_wrap {
+    position: absolute;
+    right: 24px;
+    top: 104px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 999;
+    height: 64px;
+    width: 64px;
+    background-color: #FFF;
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: -3px -3px 12px rgba(45, 48, 64, 0.2), 3px 3px 12px rgba(45, 48, 64, 0.2);
+  }
+}
+.chat_drawer {
+  .dialog_head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .dialog_title {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 600;
+      font-weight: 600;
+      font-size: 16px;
+      color: #232F46;
+      display: flex;
+      align-items: center;
+    }
+  }
+  .chat_content_wrap {
+    position: relative;
+    padding-bottom: 40px;
+    height: 100%;
+    .content_wrap {
+      padding: 16px;
+      height: 100%;
+      overflow: scroll;
+      font-family: 'Open Sans';
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      &::-webkit-scrollbar-corner {
+        background:transparent;
+      }
+    
+      .messageOuterWrap {
+        margin-bottom: 20px;
+        .messageWrap {
+          position: relative;
+          width: fit-content;
+          max-width: 70%;
+          padding: 7px 14px;
+          .messageContentWrap {
+            display: flex;
+            flex-direction: column;
+            p {
+              margin-bottom: 0;
+              display: inline;
+              width: fit-content;
+            }
+          }
+          
+          .msgIconWrap {
+            position: absolute;
+            right: -25px;
+            bottom: 0;
+          }
+        }
+      }
+      .userMessage {
+        display: flex;
+        justify-content: flex-end;
+        .messageWrap {
+          border-radius: 4px;
+          background: #E9F0FF;
+          color: #2F54EB;
+        }
+      }
+      .assistantMessage {
+        .messageWrap {
+          border-radius: 4px;
+          background: #F5F6F7;
+          color: #232F46;
+        }
+      }
+      .recent_response {
+        min-height: 36px;
+        max-width: 70%;
+        padding: 7px 14px;
+        background: #F5F6F7;
+        color: #232F46;
+        p {
+          margin-bottom: 0;
+        }
+      }
+    }
+    .regenerate_btn {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      bottom: 10px;
+      border: 1px solid #E6EAF0;
+      border-radius: 4px;
+      padding: 4px 12px;
+      left: 50%;
+      transform: translateX(-50%);
+      cursor: pointer;
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+    }
+  }
+  .dialog_bottom {
+    position: relative;
+    font-size: 14px;
+    input {
+      padding-right: 60px !important;
+    }
+    .btn_wrap {
+      position: absolute;
+      right: 15px;
+      top: 0px;
+      width: 50px;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+}