@fonixtree/magic-design 1.0.4 → 2.0.2

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

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _uuid = require("uuid");
+
+var _commonUtil = require("../../../utils/commonUtil");
+
+var _storeUtil = require("../../../utils/storeUtil");
+
+// 角色
+var roleMap = {
+  ASSISTANT: 'assistant',
+  USER: 'user'
+}; // 上下文缓存key
+
+var catchKey = 'fonixtree_chat_context';
+
+var FonixtreeGpt =
+/** @class */
+function () {
+  function FonixtreeGpt(params) {
+    var _this = this; // 客户端标识
+
+
+    this.clientId = ''; // 是否正在生成
+
+    this.isGenerating = false; // 初始化参数
+
+    this.initParams = {}; // 建立连接
+
+    this.initChatConnect = function () {
+      var _a = _this.initParams,
+          onMessage = _a.onMessage,
+          onEnd = _a.onEnd;
+      var text = '';
+      var sse;
+      _this.clientId = (0, _uuid.v4)();
+      var eventSource = new EventSource("/designer/v1/ai/sse/create?clientId=" + _this.clientId);
+
+      eventSource.onopen = function (event) {
+        console.log('onOpen');
+        sse = event.target;
+      };
+
+      eventSource.onmessage = function (event) {
+        if (event.data == '[DONE]') {
+          _this.isGenerating = false;
+
+          _this.insertMessage2Context(text, roleMap.ASSISTANT);
+
+          text = '';
+          onEnd();
+
+          if (sse) {
+            sse.close();
+          }
+
+          return;
+        }
+
+        var jsonData = JSON.parse(event.data); // 没有数据
+
+        if (!jsonData.choices.length) {
+          return;
+        }
+
+        text += jsonData.choices[0].delta.content || '';
+        onMessage(text);
+      };
+
+      eventSource.onerror = function (event) {
+        console.log('onerror', event);
+        _this.isGenerating = false;
+
+        _this.regenerate();
+      };
+    }; // 获取chat上下文
+
+
+    this.getContext = function () {
+      var messages = (0, _storeUtil.getSessionStore)(catchKey) || [];
+      return messages;
+    }; // 消息插入上下文中
+
+
+    this.insertMessage2Context = function (message, role) {
+      if (role === void 0) {
+        role = roleMap.USER;
+      }
+
+      var messages = (0, _storeUtil.getSessionStore)(catchKey) || [];
+      messages.push({
+        content: message,
+        role: role
+      });
+      (0, _storeUtil.setSessionStore)(catchKey, messages);
+    }; // 发送消息
+
+
+    this.sendMessage = function (message) {
+      if (!message) {
+        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);
+    }; // 重新生成
+
+
+    this.regenerate = function () {
+      var messages = (0, _storeUtil.getSessionStore)(catchKey) || [];
+
+      if (!messages.length) {
+        return;
+      }
+
+      if (!_this.isGenerating) {
+        // 清空上下文中的最后一次答案
+        messages.pop();
+        (0, _storeUtil.setSessionStore)(catchKey, messages);
+      }
+
+      _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);
+    }; // setSessionStore(catchKey, []);
+
+
+    this.clientId = (0, _uuid.v4)();
+    this.initParams = params;
+  }
+
+  return FonixtreeGpt;
+}();
+
+var _default = FonixtreeGpt;
+exports["default"] = _default;

package/es/core/Designer/index.js

@@ -15,6 +15,8 @@ var _mobxReact = require("mobx-react");
 
 var _antd = require("antd");
 
+var _ChatRobot = _interopRequireDefault(require("./ChatRobot"));
+
 var _CompListPanel = _interopRequireDefault(require("./CompListPanel"));
 
 var _PageCompList = _interopRequireDefault(require("./PageCompList"));
@@ -610,7 +612,8 @@ function (_super) {
     var pageData = props.pageData,
         config = props.config,
         outputType = props.outputType,
-        locale = props.locale;
+        locale = props.locale; // console.log('constructor-- pageData', pageData);
+
     var MPageData = pageData.childNodes || [];
     _this.configRef = /*#__PURE__*/_react["default"].createRef(); // this.viewAreaRef = React.createRef();
 
@@ -638,25 +641,41 @@ function (_super) {
   }
 
   Designer.prototype.componentDidMount = function () {
-    var _this = this; // 复合组件点击事件
+    var _this = this;
+
+    var _a; // 复合组件点击事件
 
 
     window.document.addEventListener('component-click', this.componentClick); // 复合组件重新渲染事件
 
-    window.document.addEventListener('render-view', this.reRenderViewArea);
+    window.document.addEventListener('render-view', this.reRenderViewArea); // 兼容 旧组件新增 新功能的问题（本地）
+
+    if ((_a = this.props.pageData) === null || _a === void 0 ? void 0 : _a.childNodes) {
+      (0, _commonUtil.compatibleNewPageData)(this.props.pageData);
+    }
+
     this.destory = (0, _mobx.autorun)(function () {
+      var stateObj = {
+        imgGenVisible: _mobx.store.imgGenVisible
+      };
+
       if (_this.state.locale != _mobx.store.locale) {
-        _this.setState({
-          locale: _mobx.store.locale
-        });
+        stateObj.locale = _mobx.store.locale;
       }
+
+      _this.setState(stateObj);
     });
   };
 
   Designer.prototype.componentWillReceiveProps = function (nextProps) {
     var pageData = nextProps.pageData,
         config = nextProps.config;
-    var MPageData = pageData.childNodes || [];
+    var MPageData = pageData.childNodes || []; // 兼容 旧组件新增 新功能的问题（线上）
+
+    if (pageData === null || pageData === void 0 ? void 0 : pageData.childNodes) {
+      (0, _commonUtil.compatibleNewPageData)(pageData);
+    }
+
     this.history = new _History["default"](MPageData);
     this.setState({
       MPageData: MPageData
@@ -722,7 +741,7 @@ function (_super) {
       magic_design: ""
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "designer-wrap"
-    }, /*#__PURE__*/_react["default"].createElement(_PageCompList["default"], {
+    }, /*#__PURE__*/_react["default"].createElement(_ChatRobot["default"], null), /*#__PURE__*/_react["default"].createElement(_PageCompList["default"], {
       onAdd: this.onAdd,
       pageData: MPageData,
       pageName: pageName,

package/es/decorator/metaDecorator.js

@@ -95,7 +95,7 @@ function metaDecorator(WrappedComponent) {
               GAData = _c.GAData;
           (0, _commonUtil.pushGA)(__assign(__assign({}, GAData), {
             elementId: data.id,
-            elementName: data.text
+            elementName: data.text || GAData.groupName
           }));
           return;
         } // 组织冒泡

package/es/locale/en/en.json

@@ -1,4 +1,9 @@
 {
+  "BOLD": "Bold",
+  "SEMIBOLD": "Semibold",
+  "DARK": "Dark",
+  "LIGHT": "Light",
+  "URL_IMAGE": "url image",
   "AI_IMAGE": "AI Image",
   "IMAGE_URL": "Image URL",
   "UPLOAD": "Upload",

package/es/locale/es/es.json

@@ -1,4 +1,9 @@
 {
+  "BOLD": "Bold",
+  "SEMIBOLD": "Semibold",
+  "DARK": "Dark",
+  "LIGHT": "Light",
+  "URL_IMAGE": "url image",
   "AI_IMAGE": "AI Image",
   "IMAGE_URL": "Image URL",
   "UPLOAD": "Upload",

package/es/locale/id/id.json

@@ -1,4 +1,9 @@
 {
+  "BOLD": "Bold",
+  "SEMIBOLD": "Semibold",
+  "DARK": "Dark",
+  "LIGHT": "Light",
+  "URL_IMAGE": "url image",
   "AI_IMAGE": "AI Image",
   "IMAGE_URL": "Image URL",
   "UPLOAD": "Upload",

package/es/meta-comp/config-panels/ImageConfig/index.js

@@ -205,7 +205,7 @@ function (_super) {
     _this.onClick = function (event) {// console.log(event);
     };
 
-    _this.getImg = function (v) {
+    _this.getImg = function (v, way) {
       return __awaiter(_this, void 0, void 0, function () {
         var data, _scale, pcImg, h5Img;
 
@@ -214,6 +214,9 @@ function (_super) {
             case 0:
               data = this.props.data;
               _scale = 1;
+              if (!v) return [3
+              /*break*/
+              , 6];
               if (!(0, _coreUtil.isPc)()) return [3
               /*break*/
               , 3];
@@ -267,6 +270,10 @@ function (_super) {
               _a.label = 6;
 
             case 6:
+              if (way) {
+                data.content.imageSelectedWay = way;
+              }
+
               this.selfRender();
               return [2
               /*return*/
@@ -276,17 +283,23 @@ function (_super) {
       });
     };
 
-    _this.getImgHoverUrl = function (v) {
+    _this.getImgHoverUrl = function (v, way) {
       var data = _this.props.data;
 
-      if ((0, _coreUtil.isPc)()) {
-        data.hover.pcImgHoverUrl = v.url;
+      if (v) {
+        if ((0, _coreUtil.isPc)()) {
+          data.hover.pcImgHoverUrl = v.url;
 
-        if (!data.hover.h5ImgHoverUrl) {
+          if (!data.hover.h5ImgHoverUrl) {
+            data.hover.h5ImgHoverUrl = v.url;
+          }
+        } else {
           data.hover.h5ImgHoverUrl = v.url;
         }
-      } else {
-        data.hover.h5ImgHoverUrl = v.url;
+      }
+
+      if (way) {
+        data.hover.imageSelectedWay = way;
       }
 
       _this.selfRender();
@@ -310,8 +323,12 @@ function (_super) {
     var selectImg = this.getSelectedImg(data);
 
     var ContentSetting = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.ImagePicker, {
-      onChange: function onChange(v) {
-        _this.getImg(v);
+      imageSelectedWay: data.content.imageSelectedWay || {
+        pc: '',
+        mobile: ''
+      },
+      onChange: function onChange(v, way) {
+        _this.getImg(v, way);
       },
       value: selectImg
     }), needClickArea && selectImg && /*#__PURE__*/_react["default"].createElement(_HotAreaConfig["default"], {
@@ -364,8 +381,12 @@ function (_super) {
         count: data.hover.magnification
       }
     })), data.hover.backgroundType === 'new' && /*#__PURE__*/_react["default"].createElement(_common.ImagePicker, {
-      onChange: function onChange(v) {
-        return _this.getImgHoverUrl(v);
+      imageSelectedWay: data.hover.imageSelectedWay || {
+        pc: '',
+        mobile: ''
+      },
+      onChange: function onChange(v, way) {
+        return _this.getImgHoverUrl(v, way);
       },
       value: (0, _coreUtil.isPc)() ? data.hover.pcImgHoverUrl : data.hover.h5ImgHoverUrl
     }));

package/es/meta-comp/config-panels/PlayIconConfig/PlaySvg/images/dark-playicon-01.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.25 4.5C8.86522 4.5 4.5 8.86522 4.5 14.25C4.5 19.6348 8.86522 24 14.25 24C19.6348 24 24 19.6348 24 14.25C24 8.86522 19.6348 4.5 14.25 4.5ZM3 14.25C3 8.0368 8.0368 3 14.25 3C20.4632 3 25.5 8.0368 25.5 14.25C25.5 20.4632 20.4632 25.5 14.25 25.5C8.0368 25.5 3 20.4632 3 14.25Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8961 10.0887C12.14 9.95823 12.4359 9.97254 12.666 10.126L17.916 13.626C18.1247 13.7651 18.25 13.9992 18.25 14.25C18.25 14.5008 18.1247 14.7349 17.916 14.874L12.666 18.374C12.4359 18.5275 12.14 18.5418 11.8961 18.4113C11.6522 18.2807 11.5 18.0266 11.5 17.75V10.75C11.5 10.4734 11.6522 10.2193 11.8961 10.0887Z" fill="black"/>
+</svg>

package/es/meta-comp/config-panels/PlayIconConfig/PlaySvg/images/dark-playicon-02.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 2.625C11.7502 2.625 9.551 3.29213 7.68039 4.54203C5.80978 5.79193 4.35182 7.56847 3.49088 9.64698C2.62993 11.7255 2.40467 14.0126 2.84357 16.2192C3.28248 18.4257 4.36584 20.4525 5.95667 22.0433C7.54749 23.6342 9.57432 24.7175 11.7809 25.1564C13.9874 25.5953 16.2745 25.3701 18.353 24.5091C20.4315 23.6482 22.2081 22.1902 23.458 20.3196C24.7079 18.449 25.375 16.2498 25.375 14C25.3692 10.9849 24.1689 8.09502 22.037 5.96305C19.905 3.83107 17.0151 2.63078 14 2.625Z" fill="black"/>
+<path d="M17.9813 14.7322L12.7313 18.2322C12.5865 18.3218 12.4203 18.3709 12.25 18.3744C12.1057 18.3743 11.9634 18.3406 11.8344 18.276C11.6945 18.2005 11.5778 18.0883 11.4969 17.9515C11.416 17.8147 11.3738 17.6584 11.375 17.4994V10.4994C11.3738 10.3405 11.416 10.1842 11.4969 10.0474C11.5778 9.91054 11.6945 9.79836 11.8344 9.72286C11.9749 9.65176 12.1314 9.61841 12.2886 9.62608C12.4459 9.63375 12.5984 9.68218 12.7313 9.76661L17.9813 13.2666C18.1031 13.3461 18.2033 13.4548 18.2726 13.5827C18.3419 13.7107 18.3781 13.8539 18.3781 13.9994C18.3781 14.1449 18.3419 14.2882 18.2726 14.4161C18.2033 14.5441 18.1031 14.6527 17.9813 14.7322Z" fill="white"/>
+</svg>

package/es/meta-comp/config-panels/PlayIconConfig/PlaySvg/images/dark-playicon-03.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25 6.5H3C2.17157 6.5 1.5 7.17157 1.5 8V21C1.5 21.8284 2.17157 22.5 3 22.5H25C25.8284 22.5 26.5 21.8284 26.5 21V8C26.5 7.17157 25.8284 6.5 25 6.5ZM3 5C1.34315 5 0 6.34315 0 8V21C0 22.6569 1.34315 24 3 24H25C26.6569 24 28 22.6569 28 21V8C28 6.34315 26.6569 5 25 5H3Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8961 10.3387C12.14 10.2082 12.4359 10.2225 12.666 10.376L17.916 13.876C18.1247 14.0151 18.25 14.2492 18.25 14.5C18.25 14.7508 18.1247 14.9849 17.916 15.124L12.666 18.624C12.4359 18.7775 12.14 18.7918 11.8961 18.6613C11.6522 18.5307 11.5 18.2766 11.5 18V11C11.5 10.7234 11.6522 10.4693 11.8961 10.3387Z" fill="black"/>
+</svg>

package/es/meta-comp/config-panels/PlayIconConfig/PlaySvg/images/dark-playicon-04.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="4" width="28" height="20" rx="3" fill="black"/>
+<path d="M17.6063 14.6072L12.3563 18.1072C12.2115 18.1968 12.0453 18.2459 11.875 18.2494C11.7307 18.2493 11.5884 18.2156 11.4594 18.151C11.3195 18.0755 11.2028 17.9633 11.1219 17.8265C11.041 17.6897 10.9988 17.5334 11 17.3744V10.3744C10.9988 10.2155 11.041 10.0592 11.1219 9.92236C11.2028 9.78554 11.3195 9.67336 11.4594 9.59786C11.5999 9.52676 11.7564 9.49341 11.9136 9.50108C12.0709 9.50875 12.2234 9.55718 12.3563 9.64161L17.6063 13.1416C17.7281 13.2211 17.8283 13.3298 17.8976 13.4577C17.9669 13.5857 18.0031 13.7289 18.0031 13.8744C18.0031 14.0199 17.9669 14.1632 17.8976 14.2911C17.8283 14.4191 17.7281 14.5277 17.6063 14.6072Z" fill="white"/>
+</svg>

package/es/meta-comp/config-panels/PlayIconConfig/PlaySvg/images/dark-playicon-05.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.4288 12.9462L10.7945 6.18518C10.6174 6.06826 10.4128 6.00428 10.2032 6.00021C9.99348 5.99614 9.78676 6.05214 9.60557 6.1621C9.42169 6.26718 9.26841 6.42193 9.16184 6.61008C9.05528 6.79823 8.99937 7.01281 9.00001 7.23126V20.7687C8.99937 20.9872 9.05528 21.2018 9.16184 21.3899C9.26841 21.5781 9.42169 21.7328 9.60557 21.8379C9.78676 21.9479 9.99348 22.0039 10.2032 21.9998C10.4128 21.9957 10.6174 21.9317 10.7945 21.8148L21.4288 15.0538C21.6031 14.9443 21.7473 14.7897 21.8473 14.6051C21.9474 14.4204 22 14.212 22 14C22 13.788 21.9474 13.5796 21.8473 13.3949C21.7473 13.2103 21.6031 13.0558 21.4288 12.9462Z" fill="black"/>
+</svg>

package/es/meta-comp/config-panels/PlayIconConfig/PlaySvg/images/light-playicon-01.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.25 4.5C8.86522 4.5 4.5 8.86522 4.5 14.25C4.5 19.6348 8.86522 24 14.25 24C19.6348 24 24 19.6348 24 14.25C24 8.86522 19.6348 4.5 14.25 4.5ZM3 14.25C3 8.0368 8.0368 3 14.25 3C20.4632 3 25.5 8.0368 25.5 14.25C25.5 20.4632 20.4632 25.5 14.25 25.5C8.0368 25.5 3 20.4632 3 14.25Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8961 10.0887C12.14 9.95823 12.4359 9.97254 12.666 10.126L17.916 13.626C18.1247 13.7651 18.25 13.9992 18.25 14.25C18.25 14.5008 18.1247 14.7349 17.916 14.874L12.666 18.374C12.4359 18.5275 12.14 18.5418 11.8961 18.4113C11.6522 18.2807 11.5 18.0266 11.5 17.75V10.75C11.5 10.4734 11.6522 10.2193 11.8961 10.0887Z" fill="white"/>
+</svg>

package/es/meta-comp/config-panels/PlayIconConfig/PlaySvg/images/light-playicon-02.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 2.625C11.7502 2.625 9.551 3.29213 7.68039 4.54203C5.80978 5.79193 4.35182 7.56847 3.49088 9.64698C2.62993 11.7255 2.40467 14.0126 2.84357 16.2192C3.28248 18.4257 4.36584 20.4525 5.95667 22.0433C7.54749 23.6342 9.57432 24.7175 11.7809 25.1564C13.9874 25.5953 16.2745 25.3701 18.353 24.5091C20.4315 23.6482 22.2081 22.1902 23.458 20.3196C24.7079 18.449 25.375 16.2498 25.375 14C25.3692 10.9849 24.1689 8.09502 22.037 5.96305C19.905 3.83107 17.0151 2.63078 14 2.625Z" fill="white"/>
+<path d="M17.9813 14.7322L12.7313 18.2322C12.5865 18.3218 12.4203 18.3709 12.25 18.3744C12.1057 18.3743 11.9634 18.3406 11.8344 18.276C11.6945 18.2005 11.5778 18.0883 11.4969 17.9515C11.416 17.8147 11.3738 17.6584 11.375 17.4994V10.4994C11.3738 10.3405 11.416 10.1842 11.4969 10.0474C11.5778 9.91054 11.6945 9.79836 11.8344 9.72286C11.9749 9.65176 12.1314 9.61841 12.2886 9.62608C12.4459 9.63375 12.5984 9.68218 12.7313 9.76661L17.9813 13.2666C18.1031 13.3461 18.2033 13.4548 18.2726 13.5827C18.3419 13.7107 18.3781 13.8539 18.3781 13.9994C18.3781 14.1449 18.3419 14.2882 18.2726 14.4161C18.2033 14.5441 18.1031 14.6527 17.9813 14.7322Z" fill="black"/>
+</svg>

package/es/meta-comp/config-panels/PlayIconConfig/PlaySvg/images/light-playicon-03.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25 6.5H3C2.17157 6.5 1.5 7.17157 1.5 8V21C1.5 21.8284 2.17157 22.5 3 22.5H25C25.8284 22.5 26.5 21.8284 26.5 21V8C26.5 7.17157 25.8284 6.5 25 6.5ZM3 5C1.34315 5 0 6.34315 0 8V21C0 22.6569 1.34315 24 3 24H25C26.6569 24 28 22.6569 28 21V8C28 6.34315 26.6569 5 25 5H3Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8961 10.3387C12.14 10.2082 12.4359 10.2225 12.666 10.376L17.916 13.876C18.1247 14.0151 18.25 14.2492 18.25 14.5C18.25 14.7508 18.1247 14.9849 17.916 15.124L12.666 18.624C12.4359 18.7775 12.14 18.7918 11.8961 18.6613C11.6522 18.5307 11.5 18.2766 11.5 18V11C11.5 10.7234 11.6522 10.4693 11.8961 10.3387Z" fill="white"/>
+</svg>

package/es/meta-comp/config-panels/PlayIconConfig/PlaySvg/images/light-playicon-04.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="4" width="28" height="20" rx="3" fill="white"/>
+<path d="M17.6063 14.6072L12.3563 18.1072C12.2115 18.1968 12.0453 18.2459 11.875 18.2494C11.7307 18.2493 11.5884 18.2156 11.4594 18.151C11.3195 18.0755 11.2028 17.9633 11.1219 17.8265C11.041 17.6897 10.9988 17.5334 11 17.3744V10.3744C10.9988 10.2155 11.041 10.0592 11.1219 9.92236C11.2028 9.78554 11.3195 9.67336 11.4594 9.59786C11.5999 9.52676 11.7564 9.49341 11.9136 9.50108C12.0709 9.50875 12.2234 9.55718 12.3563 9.64161L17.6063 13.1416C17.7281 13.2211 17.8283 13.3298 17.8976 13.4577C17.9669 13.5857 18.0031 13.7289 18.0031 13.8744C18.0031 14.0199 17.9669 14.1632 17.8976 14.2911C17.8283 14.4191 17.7281 14.5277 17.6063 14.6072Z" fill="black"/>
+</svg>

package/es/meta-comp/config-panels/PlayIconConfig/PlaySvg/images/light-playicon-05.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.4288 12.9462L10.7945 6.18518C10.6174 6.06826 10.4128 6.00428 10.2032 6.00021C9.99348 5.99614 9.78676 6.05214 9.60557 6.1621C9.42169 6.26718 9.26841 6.42193 9.16184 6.61008C9.05528 6.79823 8.99937 7.01281 9.00001 7.23126V20.7687C8.99937 20.9872 9.05528 21.2018 9.16184 21.3899C9.26841 21.5781 9.42169 21.7328 9.60557 21.8379C9.78676 21.9479 9.99348 22.0039 10.2032 21.9998C10.4128 21.9957 10.6174 21.9317 10.7945 21.8148L21.4288 15.0538C21.6031 14.9443 21.7473 14.7897 21.8473 14.6051C21.9474 14.4204 22 14.212 22 14C22 13.788 21.9474 13.5796 21.8473 13.3949C21.7473 13.2103 21.6031 13.0558 21.4288 12.9462Z" fill="white"/>
+</svg>

package/es/meta-comp/config-panels/PlayIconConfig/PlaySvg/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PlaySvg;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _darkPlayicon = _interopRequireDefault(require("./images/dark-playicon-01.svg"));
+
+var _darkPlayicon2 = _interopRequireDefault(require("./images/dark-playicon-02.svg"));
+
+var _darkPlayicon3 = _interopRequireDefault(require("./images/dark-playicon-03.svg"));
+
+var _darkPlayicon4 = _interopRequireDefault(require("./images/dark-playicon-04.svg"));
+
+var _darkPlayicon5 = _interopRequireDefault(require("./images/dark-playicon-05.svg"));
+
+var _lightPlayicon = _interopRequireDefault(require("./images/light-playicon-01.svg"));
+
+var _lightPlayicon2 = _interopRequireDefault(require("./images/light-playicon-02.svg"));
+
+var _lightPlayicon3 = _interopRequireDefault(require("./images/light-playicon-03.svg"));
+
+var _lightPlayicon4 = _interopRequireDefault(require("./images/light-playicon-04.svg"));
+
+var _lightPlayicon5 = _interopRequireDefault(require("./images/light-playicon-05.svg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var imageSrcMap = {
+  'light-playicon-01': _lightPlayicon["default"],
+  'light-playicon-02': _lightPlayicon2["default"],
+  'light-playicon-03': _lightPlayicon3["default"],
+  'light-playicon-04': _lightPlayicon4["default"],
+  'light-playicon-05': _lightPlayicon5["default"],
+  'dark-playicon-01': _darkPlayicon["default"],
+  'dark-playicon-02': _darkPlayicon2["default"],
+  'dark-playicon-03': _darkPlayicon3["default"],
+  'dark-playicon-04': _darkPlayicon4["default"],
+  'dark-playicon-05': _darkPlayicon5["default"]
+};
+
+function PlaySvg(props) {
+  // const [imgSrc, setImgSrc] = useState(null);
+  // const getImageUrl = async () => {
+  //   console.log('-- imagePath', imageSrcMap[props.imgName]);
+  //   return await import(`./images/${props.imgName}.svg`);
+  // };
+  // useEffect(() => {
+  //   getImageUrl().then(v => {
+  //     setImgSrc(v.default);
+  //   });
+  // });
+  return /*#__PURE__*/_react["default"].createElement("img", {
+    alt: "icon",
+    src: imageSrcMap[props.imgName],
+    style: {
+      width: props.imgWidth
+    }
+  });
+}