@fonixtree/magic-design 0.1.74 → 0.1.76

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

@@ -17,17 +17,13 @@ var _GenerateArtist = _interopRequireDefault(require("./GenerateArtist"));
 
 var _UploadReference = _interopRequireDefault(require("./UploadReference"));
 
-var _History = _interopRequireDefault(require("./History"));
-
 var _nodata = _interopRequireDefault(require("./images/nodata.png"));
 
 var _common = require("../../../common");
 
-var _commonUtil = require("../../../utils/commonUtil");
-
-var _storeUtil = require("../../../utils/storeUtil");
+var _mobx = require("../../../mobx");
 
-var _constants = require("../../../constants");
+var _commonUtil = require("../../../utils/commonUtil");
 
 require("./index.less");
 
@@ -63,22 +59,6 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
-var __assign = void 0 && (void 0).__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-
-      for (var p in s) {
-        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-    }
-
-    return t;
-  };
-
-  return __assign.apply(this, arguments);
-};
-
 var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
@@ -234,25 +214,13 @@ function (_super) {
 
     _this.state = {
       loading: false,
-      selected: [],
-      prompt: '',
-      history: [],
-      hisCursor: 0
+      visible: false,
+      images: []
     };
     _this.formRef = /*#__PURE__*/_react["default"].createRef();
 
-    _this.onHisConfigClick = function () {};
-
-    _this.historyChange = function (newHis) {
-      (0, _storeUtil.setSessionStore)(_constants.STORAGE_KEY.FONIXTREE_AI_IMG_HIS, newHis);
-
-      _this.setState({
-        history: newHis
-      });
-    };
-
     _this.getColumnNum = function (num) {
-      if (num <= 1) {
+      if (num === 1) {
         return 1;
       } else if (num > 1 && num <= 4) {
         return 2;
@@ -262,89 +230,42 @@ function (_super) {
     };
 
     _this.onCloseDrawer = function () {
-      _this.props.onClose();
-    };
-
-    _this.onConfirm = function () {
-      return __awaiter(_this, void 0, void 0, function () {
-        var _a, history, hisCursor, selected, images, imageList, result;
-
-        return __generator(this, function (_b) {
-          switch (_b.label) {
-            case 0:
-              _a = this.state, history = _a.history, hisCursor = _a.hisCursor, selected = _a.selected;
-
-              if (!selected.length) {
-                return [2
-                /*return*/
-                ];
-              }
-
-              images = history[hisCursor].images;
-              imageList = selected.map(function (sel) {
-                return images[sel];
-              });
-              return [4
-              /*yield*/
-              , (0, _commonUtil.commonFetch)('/designer/v1/uploadImage', {
-                base64Images: imageList
-              }, 'POST')];
-
-            case 1:
-              result = _b.sent();
-              this.props.onConfirm(result[0]);
-              return [2
-              /*return*/
-              ];
-          }
-        });
+      _mobx.store.setState({
+        imgGenVisible: false
       });
     };
 
+    _this.onHisConfigClick = function () {};
+
     _this.onGenarate = function (prompt) {
       return __awaiter(_this, void 0, void 0, function () {
-        var history, formVal, params, result, e_1;
+        var formVal, result, e_1;
         return __generator(this, function (_a) {
           switch (_a.label) {
             case 0:
-              history = this.state.history;
-
-              if (!prompt) {
-                return [2
-                /*return*/
-                ];
-              }
-
               formVal = this.formRef.current.getFieldsValue(true);
-              params = {
-                prompt: prompt,
-                n: formVal.number || 1,
-                height: 256,
-                width: 256
-              };
+              this.setState({
+                loading: true
+              });
               _a.label = 1;
 
             case 1:
               _a.trys.push([1, 3,, 4]);
 
-              this.setState({
-                prompt: prompt,
-                loading: true
-              });
               return [4
               /*yield*/
-              , (0, _commonUtil.commonFetch)('/designer/v1/ai/create-image', params, 'POST')];
+              , (0, _commonUtil.commonFetch)('/designer/v1/ai/create-image', {
+                prompt: prompt,
+                n: formVal.number || 4,
+                height: 256,
+                width: 256
+              }, 'POST')];
 
             case 2:
               result = _a.sent();
-              history.push({
-                images: result.imageList,
-                params: params
-              });
-              this.historyChange(history);
               this.setState({
                 loading: false,
-                hisCursor: history.length - 1
+                images: result.imageList
               });
               return [3
               /*break*/
@@ -368,197 +289,16 @@ function (_super) {
       });
     };
 
-    _this.onRegenerate = function () {
-      return __awaiter(_this, void 0, void 0, function () {
-        var _a, history, hisCursor, params, result, e_2;
-
-        return __generator(this, function (_b) {
-          switch (_b.label) {
-            case 0:
-              _a = this.state, history = _a.history, hisCursor = _a.hisCursor;
-              params = history[hisCursor].params;
-              _b.label = 1;
-
-            case 1:
-              _b.trys.push([1, 3,, 4]);
-
-              this.setState({
-                loading: true
-              });
-              return [4
-              /*yield*/
-              , (0, _commonUtil.commonFetch)('/designer/v1/ai/create-image', params, 'POST')];
-
-            case 2:
-              result = _b.sent();
-              history[hisCursor] = {
-                images: result.imageList,
-                params: params
-              };
-              this.historyChange(history);
-              this.setState({
-                loading: false
-              });
-              return [3
-              /*break*/
-              , 4];
-
-            case 3:
-              e_2 = _b.sent();
-              this.setState({
-                loading: false
-              });
-              return [3
-              /*break*/
-              , 4];
-
-            case 4:
-              return [2
-              /*return*/
-              ];
-          }
-        });
-      });
-    };
-
     _this.getImageList = function (images) {
-      var selected = _this.state.selected;
-      return images.map(function (img, index) {
+      var columnNum = _this.getColumnNum(images.length);
+
+      return images.map(function (img) {
         return /*#__PURE__*/_react["default"].createElement("div", {
-          className: "aiImageItem"
+          className: "aiImageWrap" + columnNum
         }, /*#__PURE__*/_react["default"].createElement("img", {
           alt: "",
           src: img
-        }), /*#__PURE__*/_react["default"].createElement("div", {
-          className: "imgHandleBtnWrap"
-        }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "refreshBtnWrap"
-        }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-          color: "#232F46",
-          onClick: function onClick() {
-            return _this.onRefresh(index);
-          },
-          size: 16,
-          type: "icon-refresh"
-        })), /*#__PURE__*/_react["default"].createElement("div", {
-          className: "downloadBtnWrap"
-        }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-          color: "#232F46",
-          onClick: function onClick() {
-            return _this.onDownload(index);
-          },
-          size: 16,
-          type: "icon-download1"
-        }))), /*#__PURE__*/_react["default"].createElement("div", {
-          className: "imgSelectBtnWrap"
-        }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-          color: "#2F54EB",
-          onClick: function onClick() {
-            return _this.onSelectClick(index);
-          },
-          size: 22,
-          style: {
-            cursor: 'pointer'
-          },
-          type: selected.includes(index) ? 'icon-select1' : 'icon-uncheck'
-        })));
-      });
-    };
-
-    _this.onRefresh = function (index) {
-      return __awaiter(_this, void 0, void 0, function () {
-        var _a, history, hisCursor, _b, images, params, result, e_3;
-
-        return __generator(this, function (_c) {
-          switch (_c.label) {
-            case 0:
-              _a = this.state, history = _a.history, hisCursor = _a.hisCursor;
-              _b = history[hisCursor], images = _b.images, params = _b.params;
-              _c.label = 1;
-
-            case 1:
-              _c.trys.push([1, 3,, 4]);
-
-              this.setState({
-                loading: true
-              });
-              return [4
-              /*yield*/
-              , (0, _commonUtil.commonFetch)('/designer/v1/ai/create-image', __assign(__assign({}, params), {
-                n: 1
-              }), 'POST')];
-
-            case 2:
-              result = _c.sent();
-              images[index] = result.imageList[0];
-              this.historyChange(history);
-              this.setState({
-                loading: false
-              });
-              return [3
-              /*break*/
-              , 4];
-
-            case 3:
-              e_3 = _c.sent();
-              this.setState({
-                loading: false
-              });
-              return [3
-              /*break*/
-              , 4];
-
-            case 4:
-              return [2
-              /*return*/
-              ];
-          }
-        });
-      });
-    };
-
-    _this.onDownload = function (index) {
-      var _a = _this.state,
-          prompt = _a.prompt,
-          history = _a.history,
-          hisCursor = _a.hisCursor;
-      var images = history[hisCursor].images;
-      (0, _commonUtil.downloadBase64Image)(images[index], prompt + ".png");
-    };
-
-    _this.onSelectClick = function (index) {
-      var selected = _this.state.selected;
-      var single = _this.props.single; // 单选模式下，智能选中一个
-
-      if (single) {
-        _this.setState({
-          selected: [index]
-        });
-
-        return;
-      } // 多选模式，可以选择多个
-
-
-      if (selected.includes(index)) {
-        var newSelected = selected.filter(function (sel) {
-          return sel !== index;
-        });
-
-        _this.setState({
-          selected: newSelected
-        });
-      } else {
-        selected.push(index);
-
-        _this.setState({
-          selected: selected
-        });
-      }
-    };
-
-    _this.onHistoryClick = function (index) {
-      _this.setState({
-        hisCursor: index
+        }));
       });
     };
 
@@ -566,9 +306,12 @@ function (_super) {
   }
 
   AiImageGenerator.prototype.componentDidMount = function () {
-    var history = (0, _storeUtil.getSessionStore)(_constants.STORAGE_KEY.FONIXTREE_AI_IMG_HIS) || [];
-    this.setState({
-      history: history
+    var _this = this;
+
+    this.destory = (0, _mobx.autorun)(function () {
+      _this.setState({
+        visible: _mobx.store.imgGenVisible
+      });
     });
   };
 
@@ -577,15 +320,10 @@ function (_super) {
   };
 
   AiImageGenerator.prototype.render = function () {
-    var _a;
-
-    var _b = this.state,
-        loading = _b.loading,
-        history = _b.history,
-        hisCursor = _b.hisCursor;
-    var visible = this.props.visible;
-    var images = ((_a = history[hisCursor]) === null || _a === void 0 ? void 0 : _a.images) || [];
-    var columnNum = this.getColumnNum(images.length || []);
+    var _a = this.state,
+        visible = _a.visible,
+        images = _a.images,
+        loading = _a.loading;
     return /*#__PURE__*/_react["default"].createElement(_antd.Drawer, {
       bodyStyle: {
         padding: 16,
@@ -611,7 +349,6 @@ function (_super) {
         type: "light"
       }, "Cancel"), /*#__PURE__*/_react["default"].createElement(_common.Button, {
         className: "ml8",
-        onClick: this.onConfirm,
         size: "small",
         type: "primary"
       }, "Confirm"))),
@@ -667,24 +404,19 @@ function (_super) {
     })))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "middle_wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "img_wrap",
-      style: {
-        gridTemplateColumns: "repeat(" + columnNum + ", 1fr)",
-        gridTemplateRows: "repeat(" + columnNum + ", 1fr)"
-      }
-    }, images.length > 0 ? this.getImageList(images) : /*#__PURE__*/_react["default"].createElement("div", {
-      className: "noDataWrap"
-    }, /*#__PURE__*/_react["default"].createElement("img", {
+      className: "img_wrap"
+    }, images.length > 0 ? this.getImageList(images) : /*#__PURE__*/_react["default"].createElement("img", {
       alt: "",
       className: "no_data",
       src: _nodata["default"]
-    })), /*#__PURE__*/_react["default"].createElement("div", null)), /*#__PURE__*/_react["default"].createElement("div", {
+    }), /*#__PURE__*/_react["default"].createElement("div", null)), /*#__PURE__*/_react["default"].createElement("div", {
       className: "btn_wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "regenerate_btn",
-      onClick: this.onRegenerate
+      onClick: this.onRegenarate
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
       color: "#232F46",
+      onClick: this.onCloseDrawer,
       size: 16,
       style: {
         marginRight: 5
@@ -696,12 +428,20 @@ function (_super) {
       enterButton: "Generate",
       onSearch: this.onGenarate,
       size: "large"
-    }))), /*#__PURE__*/_react["default"].createElement(_History["default"], {
-      onChange: this.historyChange,
-      onClick: this.onHistoryClick,
-      selectIndex: hisCursor,
-      source: history
-    }))));
+    }))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "right_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "right_header"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "title"
+    }, "History"), /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      onClick: this.onHisConfigClick,
+      size: 20,
+      style: {
+        cursor: 'pointer'
+      },
+      type: "icon-setting1"
+    }))))));
   };
 
   return AiImageGenerator;

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

@@ -27,74 +27,46 @@
       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;
-            }
+        height: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        .aiImageWrap1 {
+          height: 492px;
+          width: 492px;
+        }
+        .aiImageWrap2 {
+          height: 240px;
+          width: 240px;
+          margin-bottom: 12px;
+          margin-left: 12px;
+          &:nth-child(2n - 1) {
+            margin-left: 0;
           }
-          .imgSelectBtnWrap {
-            position: absolute;
-            top: 12px;
-            right: 12px;
-            border-radius: 50%;
-            height: 22px;
-            display: flex;
-            background: #FFF;
+          img {
+            max-width: 100%;
           }
         }
-        .noDataWrap {
-          width: 100%;
-          height: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          .no_data {
-            height: 183px;
-            width: 212px;
+        
+        .aiImageWrap3 {
+          height: 156px;
+          width: 156px;
+          margin-bottom: 12px;
+          margin-bottom: 12px;
+          margin-left: 12px;
+          &:nth-child(3n + 1) {
+            margin-left: 0;
+          }
+          img {
+            max-width: 100%;
           }
         }
         
+        .no_data {
+          height: 183px;
+          width: 212px;
+        }
       }
       .btn_wrap {
         margin-top: 40px;

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

@@ -19,9 +19,9 @@ var _CopyBtn = _interopRequireDefault(require("./components/CopyBtn"));
 
 var _common = require("../../../common");
 
-var _FonixtreeGpt = _interopRequireDefault(require("../FonixtreeGpt"));
+var _mobx = require("../../../mobx");
 
-var _AiImageGenerator = _interopRequireDefault(require("../AiImageGenerator"));
+var _FonixtreeGpt = _interopRequireDefault(require("../FonixtreeGpt"));
 
 require("./index.less");
 
@@ -71,13 +71,12 @@ function (_super) {
       open: false,
       message: '',
       context: [],
-      isGenerating: false,
-      aiImageVisible: false
+      isGenerating: false
     };
 
     _this.scrollBottom = function () {
       var container = document.getElementById('content_wrap');
-      container.scrollTop = container.scrollHeight + 50;
+      container.scrollTop = container.scrollHeight;
     };
 
     _this.onMessageChage = function (e) {
@@ -106,8 +105,6 @@ function (_super) {
         isGenerating: true,
         context: context,
         message: ''
-      }, function () {
-        _this.scrollBottom();
       });
     };
 
@@ -142,8 +139,8 @@ function (_super) {
         open: false
       });
 
-      _this.setState({
-        aiImageVisible: true
+      _mobx.store.setState({
+        imgGenVisible: true
       });
     };
 
@@ -172,6 +169,7 @@ function (_super) {
   }
 
   ChatRobot.prototype.componentDidMount = function () {
+    this.chatGpt.initChatGpt();
     var context = this.chatGpt.getContext();
     this.setState({
       context: context
@@ -185,8 +183,7 @@ function (_super) {
         context = _a.context,
         message = _a.message,
         open = _a.open,
-        isGenerating = _a.isGenerating,
-        aiImageVisible = _a.aiImageVisible;
+        isGenerating = _a.isGenerating;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "chat_wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -299,19 +296,7 @@ function (_super) {
         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
-    }));
+    }), "Regenerate Response"))));
   };
 
   return ChatRobot;

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

@@ -89,9 +89,6 @@
         padding: 7px 14px;
         background: #F5F6F7;
         color: #232F46;
-        p {
-          margin-bottom: 0;
-        }
       }
     }
     .regenerate_btn {