@fonixtree/magic-design 0.1.77 → 0.1.79

package/es/core/Designer/ChatRobot/components/SearchCondition/index.js

@@ -0,0 +1,110 @@
+"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"] = SearchCondition;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./index.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 toneList = ['Concise', 'Formal', 'Youthful', 'Innovative', 'Enticing'];
+
+function SearchCondition() {
+  var _a = (0, _react.useState)('Concise'),
+      tone = _a[0],
+      setTone = _a[1];
+
+  var _b = (0, _react.useState)('30'),
+      count = _b[0],
+      setCount = _b[1];
+
+  var _c = (0, _react.useState)(''),
+      features = _c[0],
+      setFeatures = _c[1];
+
+  var _d = (0, _react.useState)(''),
+      key = _d[0],
+      setKey = _d[1];
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "condition_wrap"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cond_title"
+  }, "Detailed description"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cond_item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "item_label"
+  }, "Preferred tone of the description?"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cond_value"
+  }, toneList.map(function (name) {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])('tone_item', {
+        tone_active: tone === name
+      }),
+      onClick: function onClick() {
+        return setTone(name);
+      }
+    }, name);
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cond_item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "item_label"
+  }, "Desired word count range?"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cond_value"
+  }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+    allowClear: true,
+    defaultValue: "30",
+    onChange: function onChange(e) {
+      return setCount(e);
+    },
+    options: [{
+      value: '30',
+      label: '30'
+    }, {
+      value: '50',
+      label: '50'
+    }, {
+      value: '70',
+      label: '70'
+    }],
+    style: {
+      width: '100%'
+    }
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cond_item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "item_label"
+  }, "What are the key features?"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cond_value"
+  }, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
+    onChange: function onChange(e) {
+      return setFeatures(e.target.value);
+    },
+    value: features
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cond_item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "item_label"
+  }, "What key details should be emphasized?"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cond_value"
+  }, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
+    onChange: function onChange(e) {
+      return setKey(e.target.value);
+    },
+    value: key
+  }))));
+}

package/es/core/Designer/ChatRobot/components/SearchCondition/index.less

@@ -0,0 +1,33 @@
+.condition_wrap {
+  padding: 12px 12px 0 12px;
+  .cond_title { 
+    font-family: Open Sans;
+    font-size: 16px;
+    font-weight: 700;
+    margin-bottom: 16px;
+  }
+  .cond_item {
+    margin-bottom: 16px;
+    .item_label {
+      font-family: Open Sans;
+      font-size: 14px;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+    .cond_value {
+      .tone_item {
+        cursor: pointer;
+        margin-right: 8px;
+        padding: 7px 10px;
+        height: 32px;
+        border: 1px solid #D2D9E5;
+        border-radius: 100px;
+      }
+      .tone_active {
+        background-color: #E9F0FF;
+        color: #2F54EB;
+        border-color: #D6E4FF;
+      }
+    }
+  }
+}

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

@@ -11,18 +11,20 @@ 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 _SearchCondition = _interopRequireDefault(require("./components/SearchCondition"));
 
-var _mobx = require("../../../mobx");
+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");
@@ -59,6 +61,8 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var TextArea = _antd.Input.TextArea;
+
 var ChatRobot =
 /** @class */
 function (_super) {
@@ -71,12 +75,15 @@ function (_super) {
       open: false,
       message: '',
       context: [],
-      isGenerating: false
+      isGenerating: false,
+      aiImageVisible: false,
+      loading: true,
+      showCondition: 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 +93,7 @@ function (_super) {
     };
 
     _this.getMarkText = function (text) {
-      return _marked.marked.parse(text);
+      return marked.parse(text);
     };
 
     _this.onEnter = function () {
@@ -105,6 +112,8 @@ function (_super) {
         isGenerating: true,
         context: context,
         message: ''
+      }, function () {
+        _this.scrollBottom();
       });
     };
 
@@ -139,13 +148,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 +178,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 +198,15 @@ function (_super) {
         context = _a.context,
         message = _a.message,
         open = _a.open,
-        isGenerating = _a.isGenerating;
+        isGenerating = _a.isGenerating,
+        aiImageVisible = _a.aiImageVisible,
+        loading = _a.loading,
+        showCondition = _a.showCondition;
+
+    if (loading) {
+      return null;
+    }
+
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "chat_wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -201,14 +224,17 @@ function (_super) {
       closable: false,
       footer: /*#__PURE__*/_react["default"].createElement("div", {
         className: "dialog_bottom"
-      }, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "bottom_input"
+      }, /*#__PURE__*/_react["default"].createElement(TextArea, {
+        autoSize: true,
+        className: "text_area",
         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, {
+      }), /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+        className: "image_btn",
         color: "#2F54EB",
         onClick: this.generateImage,
         size: 20,
@@ -217,14 +243,21 @@ function (_super) {
         },
         type: "icon-image"
       }), /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-        color: message.length > 0 ? '#2F54EB' : '#C1C9D7',
-        onClick: this.onEnter,
-        size: 20,
-        style: {
-          cursor: 'pointer'
+        className: "toggle_btn",
+        color: "#2F54EB",
+        onClick: function onClick() {
+          return _this.setState({
+            showCondition: !showCondition
+          });
         },
-        type: message.length > 0 ? 'icon-send1' : 'icon-send'
-      }))),
+        size: 24,
+        type: showCondition ? 'icon-circle-down' : 'icon-circle-up'
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])('generate_btn', {
+          disable_btn: message.length === 0
+        }),
+        onClick: this.onEnter
+      }, "Generate")),
       footerStyle: {
         padding: 12
       },
@@ -260,7 +293,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',
@@ -286,6 +327,8 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement(_antd.Spin, {
       spinning: true
     }))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "regenerate_btn_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "regenerate_btn",
       onClick: this.onRegenarate
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
@@ -296,7 +339,23 @@ function (_super) {
         marginRight: 5
       },
       type: "icon-refresh"
-    }), "Regenerate Response"))));
+    }), "Regenerate Response")), /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('more_condition', {
+        more_condition_hide: !showCondition
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_SearchCondition["default"], null)))), /*#__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/es/core/Designer/ChatRobot/index.less

@@ -32,17 +32,27 @@
     }
   }
   .chat_content_wrap {
+    display: flex;
+    flex-direction: column;
     position: relative;
-    padding-bottom: 40px;
     height: 100%;
     .content_wrap {
+      background: #F5F6F7;
+      flex: 1;
       padding: 16px;
-      height: 100%;
+      // 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 {
@@ -71,16 +81,18 @@
         display: flex;
         justify-content: flex-end;
         .messageWrap {
+          border: 1px solid #E6EAF0;
           border-radius: 4px;
-          background: #E9F0FF;
-          color: #2F54EB;
+          background: #FFF;
+          color: #232F46;
         }
       }
       .assistantMessage {
         .messageWrap {
           border-radius: 4px;
-          background: #F5F6F7;
-          color: #232F46;
+          background: #E9F0FF;
+          color: #2F54EB;
+          border: 1px solid #D6E4FF;
         }
       }
       .recent_response {
@@ -89,39 +101,79 @@
         padding: 7px 14px;
         background: #F5F6F7;
         color: #232F46;
+        p {
+          margin-bottom: 0;
+        }
       }
     }
-    .regenerate_btn {
+
+    .regenerate_btn_wrap {
+      background: #F5F6F7;
       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;
+      justify-content: center;
+      padding-bottom: 12px;
+      .regenerate_btn {
+        background-color: #FFF;
+        bottom: 10px;
+        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;
+      }
+    }
+    
+    .more_condition {
+      transition: all 0.4s;
+      max-height: 400px;
+      overflow: hidden;
+      box-shadow: 3px 3px 8px 0px #2D304008;
+      box-shadow: -3px -3px 8px 0px #2D304008;
+    }
+    .more_condition_hide {
+      max-height: 0;
     }
   }
   .dialog_bottom {
     position: relative;
-    input {
-      padding-right: 60px !important;
+    font-size: 14px;
+    .bottom_input{
+      display: flex;
+      align-items: flex-start;
+      .text_area {
+        max-height: 200px;
+        padding-right: 30px;
+      }
+      .image_btn {
+        position: absolute;
+        right: 40px;
+        top: 6px;
+      }
+      .toggle_btn {
+        padding: 4px 0 4px 10px;
+        cursor: pointer;
+      }
     }
-    .btn_wrap {
-      position: absolute;
-      right: 15px;
-      top: 0px;
-      width: 50px;
-      height: 36px;
+    .generate_btn {
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      justify-content: center;
+      margin-top: 8px;
+      height: 36px;
+      background: #2F54EB;
+      border-radius: 6px;
+      color:#FFF;
+      font-family: Open Sans;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+    }
+    .disable_btn {
+      background: #C1C9D7;
     }
   }
 }

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

@@ -81,7 +81,6 @@ var getSecondConfigName = function getSecondConfigName(selectedNode, clickedGrou
 
   switch (selectedNode.type) {
     case 'IMAGE_GALLERY':
-    case 'WALLET':
     case 'BANNER':
       groupName = ''; // if (!groupName) {
       //   groupName = isPc() ? panelProps.image?.content?.pcName : panelProps.image?.content?.h5Name;
@@ -109,10 +108,13 @@ var getSecondConfigName = function getSecondConfigName(selectedNode, clickedGrou
       break;
 
     case 'TEXT':
+    case 'WALLET':
       groupName = panelProps.title.text;
       break;
 
     case 'RECOMMEND':
+    case 'AFFILIATE_RECOMMEND':
+      // console.log('RECOMMEND ---panelProps.groupName.text', panelProps.groupName.text);
       groupName = panelProps.groupName.text;
       break;
 
@@ -285,7 +287,8 @@ function (_super) {
       if (panelProps) {
         var instance = Clazz ? /*#__PURE__*/_react["default"].createElement(Clazz, {
           panelProps: panelProps,
-          outputType: outputType
+          outputType: outputType,
+          parentNode: selectedNode
         }) : null;
         return instance;
       }
@@ -373,8 +376,11 @@ function (_super) {
       onClick: this.onSecConfigBack,
       type: "icon"
     })), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "title"
-    }, getSecondConfigName(selectedNode, clickedGroup))), this.getSecondConfigInstance()));
+      className: "title",
+      dangerouslySetInnerHTML: {
+        __html: getSecondConfigName(selectedNode, clickedGroup)
+      }
+    })), this.getSecondConfigInstance()));
   };
 
   return ConfigPanel;