@fonixtree/magic-design 0.1.77 → 1.0.2-0.1

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

@@ -11,18 +11,18 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _antd = require("antd");
 
-var _marked = require("marked");
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _CopyBtn = _interopRequireDefault(require("./components/CopyBtn"));
 
 var _common = require("../../../common");
 
-var _mobx = require("../../../mobx");
-
 var _FonixtreeGpt = _interopRequireDefault(require("../FonixtreeGpt"));
 
+var _AiImageGenerator = _interopRequireDefault(require("../AiImageGenerator"));
+
+var _commonUtil = require("../../../utils/commonUtil");
+
 require("./index.less");
 
 require("./markdown.less");
@@ -71,12 +71,14 @@ function (_super) {
       open: false,
       message: '',
       context: [],
-      isGenerating: false
+      isGenerating: false,
+      aiImageVisible: false,
+      loading: true
     };
 
     _this.scrollBottom = function () {
       var container = document.getElementById('content_wrap');
-      container.scrollTop = container.scrollHeight;
+      container.scrollTop = container.scrollHeight + 50;
     };
 
     _this.onMessageChage = function (e) {
@@ -86,7 +88,7 @@ function (_super) {
     };
 
     _this.getMarkText = function (text) {
-      return _marked.marked.parse(text);
+      return marked.parse(text);
     };
 
     _this.onEnter = function () {
@@ -105,6 +107,8 @@ function (_super) {
         isGenerating: true,
         context: context,
         message: ''
+      }, function () {
+        _this.scrollBottom();
       });
     };
 
@@ -139,13 +143,13 @@ function (_super) {
         open: false
       });
 
-      _mobx.store.setState({
-        imgGenVisible: true
+      _this.setState({
+        aiImageVisible: true
       });
     };
 
     _this.copyToClipboard = function (text) {
-      navigator.clipboard.writeText(text);
+      (0, _commonUtil.copy2ClipBoard)(text);
     };
 
     _this.chatGpt = new _FonixtreeGpt["default"]({
@@ -169,11 +173,17 @@ function (_super) {
   }
 
   ChatRobot.prototype.componentDidMount = function () {
-    this.chatGpt.initChatGpt();
+    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 () {
@@ -183,7 +193,14 @@ function (_super) {
         context = _a.context,
         message = _a.message,
         open = _a.open,
-        isGenerating = _a.isGenerating;
+        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", {
@@ -260,7 +277,15 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "content_wrap markdown-body",
       id: "content_wrap"
-    }, context.length > 0 && context.map(function (ctxNode) {
+    }, /*#__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',
@@ -296,7 +321,19 @@ function (_super) {
         marginRight: 5
       },
       type: "icon-refresh"
-    }), "Regenerate Response"))));
+    }), "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;

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

@@ -43,6 +43,13 @@
       font-size: 14px;
       font-weight: 400;
       line-height: 22px;
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      &::-webkit-scrollbar-corner {
+        background:transparent;
+      }
+    
       .messageOuterWrap {
         margin-bottom: 20px;
         .messageWrap {
@@ -89,6 +96,9 @@
         padding: 7px 14px;
         background: #F5F6F7;
         color: #232F46;
+        p {
+          margin-bottom: 0;
+        }
       }
     }
     .regenerate_btn {
@@ -110,6 +120,7 @@
   }
   .dialog_bottom {
     position: relative;
+    font-size: 14px;
     input {
       padding-right: 60px !important;
     }

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

@@ -285,7 +285,8 @@ function (_super) {
       if (panelProps) {
         var instance = Clazz ? /*#__PURE__*/_react["default"].createElement(Clazz, {
           panelProps: panelProps,
-          outputType: outputType
+          outputType: outputType,
+          parentNode: selectedNode
         }) : null;
         return instance;
       }

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

@@ -11,149 +11,6 @@ var _commonUtil = require("../../../utils/commonUtil");
 
 var _storeUtil = require("../../../utils/storeUtil");
 
-var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
-var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
-  var _ = {
-    label: 0,
-    sent: function sent() {
-      if (t[0] & 1) throw t[1];
-      return t[1];
-    },
-    trys: [],
-    ops: []
-  },
-      f,
-      y,
-      t,
-      g;
-  return g = {
-    next: verb(0),
-    "throw": verb(1),
-    "return": verb(2)
-  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
-    return this;
-  }), g;
-
-  function verb(n) {
-    return function (v) {
-      return step([n, v]);
-    };
-  }
-
-  function step(op) {
-    if (f) throw new TypeError("Generator is already executing.");
-
-    while (_) {
-      try {
-        if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-        if (y = 0, t) op = [op[0] & 2, t.value];
-
-        switch (op[0]) {
-          case 0:
-          case 1:
-            t = op;
-            break;
-
-          case 4:
-            _.label++;
-            return {
-              value: op[1],
-              done: false
-            };
-
-          case 5:
-            _.label++;
-            y = op[1];
-            op = [0];
-            continue;
-
-          case 7:
-            op = _.ops.pop();
-
-            _.trys.pop();
-
-            continue;
-
-          default:
-            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-              _ = 0;
-              continue;
-            }
-
-            if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
-              _.label = op[1];
-              break;
-            }
-
-            if (op[0] === 6 && _.label < t[1]) {
-              _.label = t[1];
-              t = op;
-              break;
-            }
-
-            if (t && _.label < t[2]) {
-              _.label = t[2];
-
-              _.ops.push(op);
-
-              break;
-            }
-
-            if (t[2]) _.ops.pop();
-
-            _.trys.pop();
-
-            continue;
-        }
-
-        op = body.call(thisArg, _);
-      } catch (e) {
-        op = [6, e];
-        y = 0;
-      } finally {
-        f = t = 0;
-      }
-    }
-
-    if (op[0] & 5) throw op[1];
-    return {
-      value: op[0] ? op[1] : void 0,
-      done: true
-    };
-  }
-};
-
 // 角色
 var roleMap = {
   ASSISTANT: 'assistant',
@@ -173,9 +30,9 @@ function () {
 
     this.isGenerating = false; // 初始化参数
 
-    this.initParams = {}; // 初始化
+    this.initParams = {}; // 建立连接
 
-    this.initChatGpt = function () {
+    this.initChatConnect = function () {
       var _a = _this.initParams,
           onMessage = _a.onMessage,
           onEnd = _a.onEnd;
@@ -185,6 +42,7 @@ function () {
       var eventSource = new EventSource("/designer/v1/ai/sse/create?clientId=" + _this.clientId);
 
       eventSource.onopen = function (event) {
+        console.log('onOpen');
         sse = event.target;
       };
 
@@ -216,6 +74,9 @@ function () {
 
       eventSource.onerror = function (event) {
         console.log('onerror', event);
+        _this.isGenerating = false;
+
+        _this.regenerate();
       };
     }; // 获取chat上下文
 
@@ -241,28 +102,25 @@ function () {
 
 
     this.sendMessage = function (message) {
-      return __awaiter(_this, void 0, void 0, function () {
-        var messages;
-        return __generator(this, function (_a) {
-          if (!message) {
-            return [2
-            /*return*/
-            ];
-          }
+      if (!message) {
+        return;
+      }
 
-          this.isGenerating = true;
-          this.insertMessage2Context(message);
-          messages = this.getContext();
-          (0, _commonUtil.commonFetch)('/designer/v1/ai/stream-chat-completion', {
-            clientId: this.clientId,
-            messages: messages
-          }, 'POST');
-          this.initChatGpt();
-          return [2
-          /*return*/
-          ];
-        });
-      });
+      _this.isGenerating = true;
+
+      _this.insertMessage2Context(message);
+
+      var messages = _this.getContext();
+
+      _this.initChatConnect();
+
+      var newMessages = messages.splice(messages.length - 5);
+      setTimeout(function () {
+        (0, _commonUtil.commonFetch)('/designer/v1/ai/stream-chat-completion', {
+          clientId: _this.clientId,
+          messages: newMessages
+        }, 'POST');
+      }, 200);
     }; // 重新生成
 
 
@@ -279,12 +137,15 @@ function () {
         (0, _storeUtil.setSessionStore)(catchKey, messages);
       }
 
-      (0, _commonUtil.commonFetch)('/designer/v1/ai/stream-chat-completion', {
-        clientId: _this.clientId,
-        messages: messages
-      }, 'POST');
+      _this.initChatConnect();
 
-      _this.initChatGpt();
+      var newMessages = messages.splice(messages.length - 5);
+      setTimeout(function () {
+        (0, _commonUtil.commonFetch)('/designer/v1/ai/stream-chat-completion', {
+          clientId: _this.clientId,
+          messages: newMessages
+        }, 'POST');
+      }, 200);
     }; // setSessionStore(catchKey, []);
 
 

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

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
-var _lodash = require("lodash");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -79,7 +79,7 @@ function () {
       _this.doAction(callback);
     };
 
-    this.doAction = (0, _lodash.debounce)(function (callback) {
+    this.doAction = (0, _debounce["default"])(function (callback) {
       var newCursor = _this.cursor + _this.step;
       _this.cursor = newCursor;
       var newData = (0, _cloneDeep["default"])(_this.list[newCursor]);

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

@@ -57,7 +57,7 @@ function (_super) {
   };
 
   LeftTitle.defaultProps = {
-    title: '邮件模板'
+    title: 'Email Template'
   };
   return LeftTitle;
 }(_react["default"].Component);

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

@@ -15,7 +15,9 @@ var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"))
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _lodash = require("lodash");
+var _findLastIndex = _interopRequireDefault(require("lodash/findLastIndex"));
+
+var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
 
 var _common = require("../../../common");
 
@@ -139,7 +141,7 @@ function PageCompList(_a) {
 
   var getLastSameIndex = function getLastSameIndex(comps, index) {
     var lastComps = comps.slice(0, index);
-    var newIndex = (0, _lodash.findLastIndex)(lastComps, function (comp) {
+    var newIndex = (0, _findLastIndex["default"])(lastComps, function (comp) {
       return (0, _coreUtil.isActiveFloor)(comp.activeTerminal);
     });
     return newIndex;
@@ -147,7 +149,7 @@ function PageCompList(_a) {
 
   var getNextSameIndex = function getNextSameIndex(comps, index) {
     var nextComps = comps.slice(index + 1);
-    var newIndex = (0, _lodash.findIndex)(nextComps, function (comp) {
+    var newIndex = (0, _findIndex["default"])(nextComps, function (comp) {
       return (0, _coreUtil.isActiveFloor)(comp.activeTerminal);
     });
     return newIndex + index + 1;

package/lib/core/Designer/ToolBarModal/ToolBtn/components/AlignPicker/AlignSelectPicker/index.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _AlignLeftSVG = _interopRequireDefault(require("../images/AlignLeftSVG"));
+
+var _AlignCenterSVG = _interopRequireDefault(require("../images/AlignCenterSVG"));
+
+var _AlignRightSVG = _interopRequireDefault(require("../images/AlignRightSVG"));
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 AlignSelectPicker =
+/** @class */
+function (_super) {
+  __extends(AlignSelectPicker, _super);
+
+  function AlignSelectPicker() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  AlignSelectPicker.prototype.render = function () {
+    var _a = this.props,
+        visibility = _a.visibility,
+        value = _a.value,
+        _onChange = _a.onChange;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "align-select-picker-panel"
+    }, visibility && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "panel-bg"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "select-modal-content"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])('select-item', {
+        active: value == 'left'
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_AlignLeftSVG["default"], {
+      onChange: function onChange() {
+        return _onChange('');
+      }
+    })), /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])('select-item', {
+        active: value == 'center'
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_AlignCenterSVG["default"], {
+      onChange: function onChange() {
+        return _onChange('center');
+      }
+    })), /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])('select-item', {
+        active: value == 'right'
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_AlignRightSVG["default"], {
+      onChange: function onChange() {
+        return _onChange('right');
+      }
+    })))));
+  };
+
+  return AlignSelectPicker;
+}(_react["default"].Component);
+
+var _default = AlignSelectPicker;
+exports["default"] = _default;

package/lib/core/Designer/ToolBarModal/ToolBtn/components/AlignPicker/AlignSelectPicker/index.less

@@ -0,0 +1,54 @@
+.align-select-picker-panel {
+  z-index: 999;
+  position: absolute;
+  top: 100%;
+  left: 0;
+
+  .panel-bg {
+    position: fixed;
+    z-index: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .select-modal-content {
+    display: flex;
+    align-items: center;
+    padding: 5px;
+    background-color: #fff;
+    border: 1px solid #E7E9E8;
+    box-shadow: 0 8px 16px 4px hsla(0, 0%, 0%, 0.04);
+    color: #262626;
+    border-radius: 6px;
+
+    .select-item {
+      width: 26px;
+      height: 26px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      border-radius: 6px;
+      padding: 0;
+      border: none;
+      transition: .2s all linear;
+      position: relative;
+      margin: 0 5px;
+
+      &:hover {
+        background: #f8f8f8;
+      }
+
+      &.active {
+        background: #E7E9E8;
+      }
+
+      svg {
+        height: 18px;
+        height: 18px;
+      }
+    }
+  }
+}

package/lib/core/Designer/ToolBarModal/ToolBtn/components/AlignPicker/images/AlignCenterSVG.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = function _default(_a) {
+  var onChange = _a.onChange;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    id: "ne-t-alignment-center",
+    onClick: onChange,
+    viewBox: "0 0 256 256",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    fill: "currentColor",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M181 148c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L181 168H76c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L76 148h105ZM218 89c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L218 109H38c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L38 89h180ZM181 30c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L181 50H76c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L76 30h105ZM218 207c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L218 227H38c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L38 207h180Z"
+  })));
+};
+
+exports["default"] = _default;