hanbiro-react16-sdk 1.0.22 → 1.0.24

package/dist/hanbiro-react16-sdk.umd.js

@@ -1,6 +1,6 @@
 /*!
- * hanbiro-react16-sdk v1.0.22
- * Build Date: 2026-04-03
+ * hanbiro-react16-sdk v1.0.24
+ * Build Date: 2026-05-21
  */
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
@@ -35,7 +35,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 })(this, function (exports2, React, ReactDOM) {
   "use strict";
 
-  var _this0 = this;
+  var _this9 = this;
   var __defProp = Object.defineProperty;
   var __defProps = Object.defineProperties;
   var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -230,8 +230,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
   }
   var propTypesExports = propTypes.exports;
   var PropTypes = /* @__PURE__ */getDefaultExportFromCjs(propTypesExports);
-  function _extends$2() {
-    _extends$2 = Object.assign || function (target) {
+  function _extends$g() {
+    _extends$g = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -242,11 +242,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$2.apply(this, arguments);
+    return _extends$g.apply(this, arguments);
   }
-  function _objectWithoutProperties$2(source, excluded) {
+  function _objectWithoutProperties$g(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$2(source, excluded);
+    var target = _objectWithoutPropertiesLoose$g(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -259,7 +259,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$2(source, excluded) {
+  function _objectWithoutPropertiesLoose$g(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -271,13 +271,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Copy = React.forwardRef(function (_ref, ref) {
+  var AlignJustify = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$2(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$2({
+      rest = _objectWithoutProperties$g(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$g({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -288,24 +288,35 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */React.createElement("rect", {
-      x: "9",
-      y: "9",
-      width: "13",
-      height: "13",
-      rx: "2",
-      ry: "2"
-    }), /* @__PURE__ */React.createElement("path", {
-      d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+    }, rest), /* @__PURE__ */React.createElement("line", {
+      x1: "21",
+      y1: "10",
+      x2: "3",
+      y2: "10"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "21",
+      y1: "6",
+      x2: "3",
+      y2: "6"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "21",
+      y1: "14",
+      x2: "3",
+      y2: "14"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "21",
+      y1: "18",
+      x2: "3",
+      y2: "18"
     }));
   });
-  Copy.propTypes = {
+  AlignJustify.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Copy.displayName = "Copy";
-  function _extends$1() {
-    _extends$1 = Object.assign || function (target) {
+  AlignJustify.displayName = "AlignJustify";
+  function _extends$f() {
+    _extends$f = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -316,11 +327,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$1.apply(this, arguments);
+    return _extends$f.apply(this, arguments);
   }
-  function _objectWithoutProperties$1(source, excluded) {
+  function _objectWithoutProperties$f(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$1(source, excluded);
+    var target = _objectWithoutPropertiesLoose$f(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -333,7 +344,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$1(source, excluded) {
+  function _objectWithoutPropertiesLoose$f(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -345,13 +356,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Send = React.forwardRef(function (_ref, ref) {
+  var ArrowUp = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$1(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$1({
+      rest = _objectWithoutProperties$f(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$f({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -363,21 +374,21 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }, rest), /* @__PURE__ */React.createElement("line", {
-      x1: "22",
-      y1: "2",
-      x2: "11",
-      y2: "13"
-    }), /* @__PURE__ */React.createElement("polygon", {
-      points: "22 2 15 22 11 13 2 9 22 2"
+      x1: "12",
+      y1: "19",
+      x2: "12",
+      y2: "5"
+    }), /* @__PURE__ */React.createElement("polyline", {
+      points: "5 12 12 5 19 12"
     }));
   });
-  Send.propTypes = {
+  ArrowUp.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Send.displayName = "Send";
-  function _extends() {
-    _extends = Object.assign || function (target) {
+  ArrowUp.displayName = "ArrowUp";
+  function _extends$e() {
+    _extends$e = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -388,11 +399,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends.apply(this, arguments);
+    return _extends$e.apply(this, arguments);
   }
-  function _objectWithoutProperties(source, excluded) {
+  function _objectWithoutProperties$e(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var target = _objectWithoutPropertiesLoose$e(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -405,7 +416,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose(source, excluded) {
+  function _objectWithoutPropertiesLoose$e(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -417,13 +428,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Settings = React.forwardRef(function (_ref, ref) {
+  var Award = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends({
+      rest = _objectWithoutProperties$e(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$e({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -436,137 +447,1091 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeLinejoin: "round"
     }, rest), /* @__PURE__ */React.createElement("circle", {
       cx: "12",
-      cy: "12",
-      r: "3"
-    }), /* @__PURE__ */React.createElement("path", {
-      d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+      cy: "8",
+      r: "7"
+    }), /* @__PURE__ */React.createElement("polyline", {
+      points: "8.21 13.89 7 23 12 20 17 23 15.79 13.88"
     }));
   });
-  Settings.propTypes = {
+  Award.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Settings.displayName = "Settings";
-  var CustomAiIcon = function CustomAiIcon(_ref2) {
-    var _ref2$isGradient = _ref2.isGradient,
-      isGradient = _ref2$isGradient === void 0 ? false : _ref2$isGradient,
-      _ref2$stroke = _ref2.stroke,
-      stroke = _ref2$stroke === void 0 ? 1.5 : _ref2$stroke,
-      _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? 40 : _ref2$size;
-    var gradientId = "ai-gradient-" + Math.random().toString(36).substr(2, 9);
-    return /* @__PURE__ */React__namespace.createElement("svg", {
+  Award.displayName = "Award";
+  function _extends$d() {
+    _extends$d = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends$d.apply(this, arguments);
+  }
+  function _objectWithoutProperties$d(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose$d(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  function _objectWithoutPropertiesLoose$d(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
+  var Check = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$d(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$d({
+      ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
       height: size,
       viewBox: "0 0 24 24",
-      style: {
-        flexShrink: 0
-      }
-    }, isGradient && /* @__PURE__ */React__namespace.createElement("defs", null, /* @__PURE__ */React__namespace.createElement("linearGradient", {
-      id: gradientId,
-      x1: "0%",
-      y1: "0%",
-      x2: "0%",
-      y2: "100%"
-    }, /* @__PURE__ */React__namespace.createElement("stop", {
-      offset: "0%",
-      stopColor: "#9D50BB"
-    }, /* @__PURE__ */React__namespace.createElement("animate", {
-      attributeName: "offset",
-      values: "0%;0.4;0%",
-      dur: "1s",
-      repeatCount: "indefinite"
-    })), /* @__PURE__ */React__namespace.createElement("stop", {
-      offset: "30%",
-      stopColor: "#6E48AA"
-    }, /* @__PURE__ */React__namespace.createElement("animate", {
-      attributeName: "offset",
-      values: "0.4;0.7;0.4",
-      dur: "1s",
-      repeatCount: "indefinite"
-    })), /* @__PURE__ */React__namespace.createElement("stop", {
-      offset: "50%",
-      stopColor: "#4776E6"
-    }, /* @__PURE__ */React__namespace.createElement("animate", {
-      attributeName: "offset",
-      values: "0.5;0.7;0.5",
-      dur: "1s",
-      repeatCount: "indefinite"
-    })), /* @__PURE__ */React__namespace.createElement("animateTransform", {
-      attributeName: "gradientTransform",
-      type: "translate",
-      from: "0,0",
-      to: "100,0",
-      dur: "1s",
-      repeatCount: "indefinite"
-    }))), /* @__PURE__ */React__namespace.createElement("path", {
       fill: "none",
-      stroke: isGradient ? "url(#".concat(gradientId, ")") : "currentColor",
+      stroke: color,
+      strokeWidth: "2",
       strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: stroke,
-      d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0zM20 3v4m2-2h-4M4 17v2m1-1H3"
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("polyline", {
+      points: "20 6 9 17 4 12"
     }));
+  });
+  Check.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  var SDKConfig = {
-    baseUrl: "V3",
-    signer: null
-  };
-  var initHanbiroReactSDK = function initHanbiroReactSDK(_ref3) {
-    var baseUrl = _ref3.baseUrl,
-      signer = _ref3.signer;
-    SDKConfig.baseUrl = baseUrl;
-    SDKConfig.signer = signer;
-  };
-  var checkDevelopment = function checkDevelopment() {
-    var locationInfo = window.location;
-    var hostname = locationInfo.hostname;
-    if (hostname === "localhost" || hostname === "127.0.0.1") {
-      return true;
-    } else {
-      return false;
-    }
-  };
-  var isDevelopment = checkDevelopment();
-  var getBaseUrl = function getBaseUrl() {
-    var _a2;
-    var locationInfo = window.location;
-    var host = locationInfo.host;
-    if (isDevelopment) {
-      var baseUrlArr = (_a2 = SDKConfig.baseUrl) == null ? void 0 : _a2.split("/");
-      if (baseUrlArr) {
-        return "https://" + (baseUrlArr == null ? void 0 : baseUrlArr[2]);
-      } else {
-        return "https://vndev.hanbiro.com";
+  Check.displayName = "Check";
+  function _extends$c() {
+    _extends$c = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
       }
-    } else {
-      var data = localStorage.getItem("host") || host;
-      var dataArr = data == null ? void 0 : data.split("/");
-      return "https://" + (dataArr == null ? void 0 : dataArr[0]);
+      return target;
+    };
+    return _extends$c.apply(this, arguments);
+  }
+  function _objectWithoutProperties$c(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose$c(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  function _objectWithoutPropertiesLoose$c(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
     }
+    return target;
+  }
+  var ChevronDown = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$c(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$c({
+      ref: ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("polyline", {
+      points: "6 9 12 15 18 9"
+    }));
+  });
+  ChevronDown.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  var getGroupwareUrl = function getGroupwareUrl() {
-    var locationInfo = window.location;
-    if (isDevelopment) {
-      return getBaseUrl() || "https://vndev.hanbiro.com/ngw";
-    } else {
-      if (window.location !== window.parent.location) {
-        locationInfo = window.parent.location;
+  ChevronDown.displayName = "ChevronDown";
+  function _extends$b() {
+    _extends$b = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends$b.apply(this, arguments);
+  }
+  function _objectWithoutProperties$b(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose$b(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
       }
-      var _locationInfo = locationInfo,
-        hostname = _locationInfo.hostname,
-        protocol = _locationInfo.protocol;
-      return [protocol, "//", hostname, "/ngw"].join("");
     }
-  };
-  function callAI(_0, _1) {
-    return __async(this, arguments, function (params, _ref4) {
-      var setContent = _ref4.setContent,
-        setIsLoading = _ref4.setIsLoading,
-        setConversationId = _ref4.setConversationId;
-      return /*#__PURE__*/_regenerator().m(function _callee() {
-        var currentContent, baseUrl, config, sigHeaders, signer, response, reader, fullContentDecode, readIndex, _yield$reader$read, done, value, originStr, jsonFormat, contentDecode, contentRegex, conversationIdRegex, matchArray, conversationIdmatch, _regMatchItem, nVal, decoded, _t;
+    return target;
+  }
+  function _objectWithoutPropertiesLoose$b(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
+  var Compass = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$b(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$b({
+      ref: ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("circle", {
+      cx: "12",
+      cy: "12",
+      r: "10"
+    }), /* @__PURE__ */React.createElement("polygon", {
+      points: "16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"
+    }));
+  });
+  Compass.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  Compass.displayName = "Compass";
+  function _extends$a() {
+    _extends$a = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends$a.apply(this, arguments);
+  }
+  function _objectWithoutProperties$a(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose$a(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  function _objectWithoutPropertiesLoose$a(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
+  var Copy = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$a(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$a({
+      ref: ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("rect", {
+      x: "9",
+      y: "9",
+      width: "13",
+      height: "13",
+      rx: "2",
+      ry: "2"
+    }), /* @__PURE__ */React.createElement("path", {
+      d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+    }));
+  });
+  Copy.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  Copy.displayName = "Copy";
+  function _extends$9() {
+    _extends$9 = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends$9.apply(this, arguments);
+  }
+  function _objectWithoutProperties$9(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose$9(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  function _objectWithoutPropertiesLoose$9(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
+  var FileText = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$9(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$9({
+      ref: ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("path", {
+      d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+    }), /* @__PURE__ */React.createElement("polyline", {
+      points: "14 2 14 8 20 8"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "16",
+      y1: "13",
+      x2: "8",
+      y2: "13"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "16",
+      y1: "17",
+      x2: "8",
+      y2: "17"
+    }), /* @__PURE__ */React.createElement("polyline", {
+      points: "10 9 9 9 8 9"
+    }));
+  });
+  FileText.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  FileText.displayName = "FileText";
+  function _extends$8() {
+    _extends$8 = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends$8.apply(this, arguments);
+  }
+  function _objectWithoutProperties$8(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose$8(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  function _objectWithoutPropertiesLoose$8(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
+  var Frown = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$8(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$8({
+      ref: ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("circle", {
+      cx: "12",
+      cy: "12",
+      r: "10"
+    }), /* @__PURE__ */React.createElement("path", {
+      d: "M16 16s-1.5-2-4-2-4 2-4 2"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "9",
+      y1: "9",
+      x2: "9.01",
+      y2: "9"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "15",
+      y1: "9",
+      x2: "15.01",
+      y2: "9"
+    }));
+  });
+  Frown.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  Frown.displayName = "Frown";
+  function _extends$7() {
+    _extends$7 = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends$7.apply(this, arguments);
+  }
+  function _objectWithoutProperties$7(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose$7(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  function _objectWithoutPropertiesLoose$7(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
+  var Heart = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$7(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$7({
+      ref: ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("path", {
+      d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+    }));
+  });
+  Heart.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  Heart.displayName = "Heart";
+  function _extends$6() {
+    _extends$6 = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends$6.apply(this, arguments);
+  }
+  function _objectWithoutProperties$6(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose$6(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  function _objectWithoutPropertiesLoose$6(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
+  var MessageCircle = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$6(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$6({
+      ref: ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("path", {
+      d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
+    }));
+  });
+  MessageCircle.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  MessageCircle.displayName = "MessageCircle";
+  function _extends$5() {
+    _extends$5 = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends$5.apply(this, arguments);
+  }
+  function _objectWithoutProperties$5(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose$5(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  function _objectWithoutPropertiesLoose$5(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
+  var MessageSquare = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$5(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$5({
+      ref: ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("path", {
+      d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+    }));
+  });
+  MessageSquare.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  MessageSquare.displayName = "MessageSquare";
+  function _extends$4() {
+    _extends$4 = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends$4.apply(this, arguments);
+  }
+  function _objectWithoutProperties$4(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose$4(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  function _objectWithoutPropertiesLoose$4(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
+  var Scissors = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$4(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$4({
+      ref: ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("circle", {
+      cx: "6",
+      cy: "6",
+      r: "3"
+    }), /* @__PURE__ */React.createElement("circle", {
+      cx: "6",
+      cy: "18",
+      r: "3"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "20",
+      y1: "4",
+      x2: "8.12",
+      y2: "15.88"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "14.47",
+      y1: "14.48",
+      x2: "20",
+      y2: "20"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "8.12",
+      y1: "8.12",
+      x2: "12",
+      y2: "12"
+    }));
+  });
+  Scissors.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  Scissors.displayName = "Scissors";
+  function _extends$3() {
+    _extends$3 = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends$3.apply(this, arguments);
+  }
+  function _objectWithoutProperties$3(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose$3(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  function _objectWithoutPropertiesLoose$3(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
+  var Settings = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$3(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$3({
+      ref: ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("circle", {
+      cx: "12",
+      cy: "12",
+      r: "3"
+    }), /* @__PURE__ */React.createElement("path", {
+      d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+    }));
+  });
+  Settings.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  Settings.displayName = "Settings";
+  function _extends$2() {
+    _extends$2 = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends$2.apply(this, arguments);
+  }
+  function _objectWithoutProperties$2(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose$2(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  function _objectWithoutPropertiesLoose$2(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
+  var Smile = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$2(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$2({
+      ref: ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("circle", {
+      cx: "12",
+      cy: "12",
+      r: "10"
+    }), /* @__PURE__ */React.createElement("path", {
+      d: "M8 14s1.5 2 4 2 4-2 4-2"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "9",
+      y1: "9",
+      x2: "9.01",
+      y2: "9"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "15",
+      y1: "9",
+      x2: "15.01",
+      y2: "9"
+    }));
+  });
+  Smile.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  Smile.displayName = "Smile";
+  function _extends$1() {
+    _extends$1 = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends$1.apply(this, arguments);
+  }
+  function _objectWithoutProperties$1(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose$1(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  function _objectWithoutPropertiesLoose$1(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
+  var ThumbsUp = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$1(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$1({
+      ref: ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("path", {
+      d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
+    }));
+  });
+  ThumbsUp.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  ThumbsUp.displayName = "ThumbsUp";
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+  function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
+  var Zap = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends({
+      ref: ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("polygon", {
+      points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2"
+    }));
+  });
+  Zap.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  Zap.displayName = "Zap";
+  var SDKConfig = {
+    baseUrl: "V3",
+    signer: null
+  };
+  var initHanbiroReactSDK = function initHanbiroReactSDK(_ref2) {
+    var baseUrl = _ref2.baseUrl,
+      signer = _ref2.signer;
+    SDKConfig.baseUrl = baseUrl;
+    SDKConfig.signer = signer;
+  };
+  var checkDevelopment = function checkDevelopment() {
+    var locationInfo = window.location;
+    var hostname = locationInfo.hostname;
+    if (hostname === "localhost" || hostname === "127.0.0.1") {
+      return true;
+    } else {
+      return false;
+    }
+  };
+  var isDevelopment = checkDevelopment();
+  var getBaseUrl = function getBaseUrl() {
+    var _a2;
+    var locationInfo = window.location;
+    var host = locationInfo.host;
+    if (isDevelopment) {
+      var baseUrlArr = (_a2 = SDKConfig.baseUrl) == null ? void 0 : _a2.split("/");
+      if (baseUrlArr) {
+        return "https://" + (baseUrlArr == null ? void 0 : baseUrlArr[2]);
+      } else {
+        return "https://vndev.hanbiro.com";
+      }
+    } else {
+      var data = localStorage.getItem("host") || host;
+      var dataArr = data == null ? void 0 : data.split("/");
+      return "https://" + (dataArr == null ? void 0 : dataArr[0]);
+    }
+  };
+  var getGroupwareUrl = function getGroupwareUrl() {
+    var locationInfo = window.location;
+    if (isDevelopment) {
+      return getBaseUrl() || "https://vndev.hanbiro.com/ngw";
+    } else {
+      if (window.location !== window.parent.location) {
+        locationInfo = window.parent.location;
+      }
+      var _locationInfo = locationInfo,
+        hostname = _locationInfo.hostname,
+        protocol = _locationInfo.protocol;
+      return [protocol, "//", hostname, "/ngw"].join("");
+    }
+  };
+  function callAI(_0, _1) {
+    return __async(this, arguments, function (params, _ref3) {
+      var setContent = _ref3.setContent,
+        setIsLoading = _ref3.setIsLoading,
+        setConversationId = _ref3.setConversationId;
+      return /*#__PURE__*/_regenerator().m(function _callee() {
+        var currentContent, baseUrl, config, sigHeaders, signer, response, reader, fullContentDecode, readIndex, _yield$reader$read, done, value, originStr, jsonFormat, contentDecode, contentRegex, conversationIdRegex, matchArray, conversationIdmatch, _regMatchItem, nVal, decoded, _t;
         return _regenerator().w(function (_context) {
           while (1) switch (_context.p = _context.n) {
             case 0:
@@ -999,15 +1964,15 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       return -1;
     }
     var level = 0;
-    for (var _i2 = 0; _i2 < str.length; _i2++) {
-      if (str[_i2] === "\\") {
-        _i2++;
-      } else if (str[_i2] === b[0]) {
+    for (var _i = 0; _i < str.length; _i++) {
+      if (str[_i] === "\\") {
+        _i++;
+      } else if (str[_i] === b[0]) {
         level++;
-      } else if (str[_i2] === b[1]) {
+      } else if (str[_i] === b[1]) {
         level--;
         if (level < 0) {
-          return _i2;
+          return _i;
         }
       }
     }
@@ -1147,18 +2112,18 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           while (lines.length > 0) {
             var inBlockquote = false;
             var currentLines = [];
-            var _i3 = void 0;
-            for (_i3 = 0; _i3 < lines.length; _i3++) {
-              if (this.rules.other.blockquoteStart.test(lines[_i3])) {
-                currentLines.push(lines[_i3]);
+            var _i2 = void 0;
+            for (_i2 = 0; _i2 < lines.length; _i2++) {
+              if (this.rules.other.blockquoteStart.test(lines[_i2])) {
+                currentLines.push(lines[_i2]);
                 inBlockquote = true;
               } else if (!inBlockquote) {
-                currentLines.push(lines[_i3]);
+                currentLines.push(lines[_i2]);
               } else {
                 break;
               }
             }
-            lines = lines.slice(_i3);
+            lines = lines.slice(_i2);
             var currentRaw = currentLines.join("\n");
             var currentText = currentRaw.replace(this.rules.other.blockquoteSetextReplace, "\n    $1").replace(this.rules.other.blockquoteSetextReplace2, "");
             raw = raw ? "".concat(raw, "\n").concat(currentRaw) : currentRaw;
@@ -1203,7 +2168,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }, {
       key: "list",
       value: function list(src) {
-        var _this2 = this;
+        var _this = this;
         var cap = this.rules.block.list.exec(src);
         if (cap) {
           var bull = cap[1].trim();
@@ -1350,22 +2315,22 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             return;
           }
           list2.raw = list2.raw.trimEnd();
-          for (var _i4 = 0; _i4 < list2.items.length; _i4++) {
+          for (var _i3 = 0; _i3 < list2.items.length; _i3++) {
             this.lexer.state.top = false;
-            list2.items[_i4].tokens = this.lexer.blockTokens(list2.items[_i4].text, []);
+            list2.items[_i3].tokens = this.lexer.blockTokens(list2.items[_i3].text, []);
             if (!list2.loose) {
-              var spacers = list2.items[_i4].tokens.filter(function (t) {
+              var spacers = list2.items[_i3].tokens.filter(function (t) {
                 return t.type === "space";
               });
               var hasMultipleLineBreaks = spacers.length > 0 && spacers.some(function (t) {
-                return _this2.rules.other.anyLine.test(t.raw);
+                return _this.rules.other.anyLine.test(t.raw);
               });
               list2.loose = hasMultipleLineBreaks;
             }
           }
           if (list2.loose) {
-            for (var _i5 = 0; _i5 < list2.items.length; _i5++) {
-              list2.items[_i5].loose = true;
+            for (var _i4 = 0; _i4 < list2.items.length; _i4++) {
+              list2.items[_i4].loose = true;
             }
           }
           return list2;
@@ -1406,7 +2371,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }, {
       key: "table",
       value: function table(src) {
-        var _this3 = this;
+        var _this2 = this;
         var _a2;
         var cap = this.rules.block.table.exec(src);
         if (!cap) {
@@ -1448,12 +2413,12 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         } finally {
           _iterator3.f();
         }
-        for (var _i6 = 0; _i6 < headers.length; _i6++) {
+        for (var _i5 = 0; _i5 < headers.length; _i5++) {
           item.header.push({
-            text: headers[_i6],
-            tokens: this.lexer.inline(headers[_i6]),
+            text: headers[_i5],
+            tokens: this.lexer.inline(headers[_i5]),
             header: true,
-            align: item.align[_i6]
+            align: item.align[_i5]
           });
         }
         var _iterator4 = _createForOfIteratorHelper(rows),
@@ -1464,7 +2429,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             item.rows.push(splitCells(row, item.header.length).map(function (cell, i) {
               return {
                 text: cell,
-                tokens: _this3.lexer.inline(cell),
+                tokens: _this2.lexer.inline(cell),
                 header: false,
                 align: item.align[i]
               };
@@ -1850,8 +2815,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       function lex(src) {
         src = src.replace(other.carriageReturn, "\n");
         this.blockTokens(src, this.tokens);
-        for (var _i7 = 0; _i7 < this.inlineQueue.length; _i7++) {
-          var next = this.inlineQueue[_i7];
+        for (var _i6 = 0; _i6 < this.inlineQueue.length; _i6++) {
+          var next = this.inlineQueue[_i6];
           this.inlineTokens(next.src, next.tokens);
         }
         this.inlineQueue = [];
@@ -1860,7 +2825,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }, {
       key: "blockTokens",
       value: function blockTokens(src) {
-        var _this4 = this;
+        var _this3 = this;
         var tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
         var lastParagraphClipped = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
         var _a2, _b, _c;
@@ -1869,9 +2834,9 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         }
         var _loop2 = function _loop2() {
             var token;
-            if ((_b = (_a2 = _this4.options.extensions) == null ? void 0 : _a2.block) == null ? void 0 : _b.some(function (extTokenizer) {
+            if ((_b = (_a2 = _this3.options.extensions) == null ? void 0 : _a2.block) == null ? void 0 : _b.some(function (extTokenizer) {
               if (token = extTokenizer.call({
-                lexer: _this4
+                lexer: _this3
               }, src, tokens)) {
                 src = src.substring(token.raw.length);
                 tokens.push(token);
@@ -1881,7 +2846,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             })) {
               return 0; // continue
             }
-            if (token = _this4.tokenizer.space(src)) {
+            if (token = _this3.tokenizer.space(src)) {
               src = src.substring(token.raw.length);
               var lastToken = tokens.at(-1);
               if (token.raw.length === 1 && lastToken !== void 0) {
@@ -1891,81 +2856,81 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
               }
               return 0; // continue
             }
-            if (token = _this4.tokenizer.code(src)) {
+            if (token = _this3.tokenizer.code(src)) {
               src = src.substring(token.raw.length);
               var _lastToken = tokens.at(-1);
               if ((_lastToken == null ? void 0 : _lastToken.type) === "paragraph" || (_lastToken == null ? void 0 : _lastToken.type) === "text") {
                 _lastToken.raw += "\n" + token.raw;
                 _lastToken.text += "\n" + token.text;
-                _this4.inlineQueue.at(-1).src = _lastToken.text;
+                _this3.inlineQueue.at(-1).src = _lastToken.text;
               } else {
                 tokens.push(token);
               }
               return 0; // continue
             }
-            if (token = _this4.tokenizer.fences(src)) {
+            if (token = _this3.tokenizer.fences(src)) {
               src = src.substring(token.raw.length);
               tokens.push(token);
               return 0; // continue
             }
-            if (token = _this4.tokenizer.heading(src)) {
+            if (token = _this3.tokenizer.heading(src)) {
               src = src.substring(token.raw.length);
               tokens.push(token);
               return 0; // continue
             }
-            if (token = _this4.tokenizer.hr(src)) {
+            if (token = _this3.tokenizer.hr(src)) {
               src = src.substring(token.raw.length);
               tokens.push(token);
               return 0; // continue
             }
-            if (token = _this4.tokenizer.blockquote(src)) {
+            if (token = _this3.tokenizer.blockquote(src)) {
               src = src.substring(token.raw.length);
               tokens.push(token);
               return 0; // continue
             }
-            if (token = _this4.tokenizer.list(src)) {
+            if (token = _this3.tokenizer.list(src)) {
               src = src.substring(token.raw.length);
               tokens.push(token);
               return 0; // continue
             }
-            if (token = _this4.tokenizer.html(src)) {
+            if (token = _this3.tokenizer.html(src)) {
               src = src.substring(token.raw.length);
               tokens.push(token);
               return 0; // continue
             }
-            if (token = _this4.tokenizer.def(src)) {
+            if (token = _this3.tokenizer.def(src)) {
               src = src.substring(token.raw.length);
               var _lastToken2 = tokens.at(-1);
               if ((_lastToken2 == null ? void 0 : _lastToken2.type) === "paragraph" || (_lastToken2 == null ? void 0 : _lastToken2.type) === "text") {
                 _lastToken2.raw += "\n" + token.raw;
                 _lastToken2.text += "\n" + token.raw;
-                _this4.inlineQueue.at(-1).src = _lastToken2.text;
-              } else if (!_this4.tokens.links[token.tag]) {
-                _this4.tokens.links[token.tag] = {
+                _this3.inlineQueue.at(-1).src = _lastToken2.text;
+              } else if (!_this3.tokens.links[token.tag]) {
+                _this3.tokens.links[token.tag] = {
                   href: token.href,
                   title: token.title
                 };
               }
               return 0; // continue
             }
-            if (token = _this4.tokenizer.table(src)) {
+            if (token = _this3.tokenizer.table(src)) {
               src = src.substring(token.raw.length);
               tokens.push(token);
               return 0; // continue
             }
-            if (token = _this4.tokenizer.lheading(src)) {
+            if (token = _this3.tokenizer.lheading(src)) {
               src = src.substring(token.raw.length);
               tokens.push(token);
               return 0; // continue
             }
             var cutSrc = src;
-            if ((_c = _this4.options.extensions) == null ? void 0 : _c.startBlock) {
+            if ((_c = _this3.options.extensions) == null ? void 0 : _c.startBlock) {
               var startIndex = Infinity;
               var tempSrc = src.slice(1);
               var tempStart;
-              _this4.options.extensions.startBlock.forEach(function (getStartIndex) {
+              _this3.options.extensions.startBlock.forEach(function (getStartIndex) {
                 tempStart = getStartIndex.call({
-                  lexer: _this4
+                  lexer: _this3
                 }, tempSrc);
                 if (typeof tempStart === "number" && tempStart >= 0) {
                   startIndex = Math.min(startIndex, tempStart);
@@ -1975,13 +2940,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                 cutSrc = src.substring(0, startIndex + 1);
               }
             }
-            if (_this4.state.top && (token = _this4.tokenizer.paragraph(cutSrc))) {
+            if (_this3.state.top && (token = _this3.tokenizer.paragraph(cutSrc))) {
               var _lastToken3 = tokens.at(-1);
               if (lastParagraphClipped && (_lastToken3 == null ? void 0 : _lastToken3.type) === "paragraph") {
                 _lastToken3.raw += "\n" + token.raw;
                 _lastToken3.text += "\n" + token.text;
-                _this4.inlineQueue.pop();
-                _this4.inlineQueue.at(-1).src = _lastToken3.text;
+                _this3.inlineQueue.pop();
+                _this3.inlineQueue.at(-1).src = _lastToken3.text;
               } else {
                 tokens.push(token);
               }
@@ -1989,14 +2954,14 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
               src = src.substring(token.raw.length);
               return 0; // continue
             }
-            if (token = _this4.tokenizer.text(src)) {
+            if (token = _this3.tokenizer.text(src)) {
               src = src.substring(token.raw.length);
               var _lastToken4 = tokens.at(-1);
               if ((_lastToken4 == null ? void 0 : _lastToken4.type) === "text") {
                 _lastToken4.raw += "\n" + token.raw;
                 _lastToken4.text += "\n" + token.text;
-                _this4.inlineQueue.pop();
-                _this4.inlineQueue.at(-1).src = _lastToken4.text;
+                _this3.inlineQueue.pop();
+                _this3.inlineQueue.at(-1).src = _lastToken4.text;
               } else {
                 tokens.push(token);
               }
@@ -2004,7 +2969,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             }
             if (src) {
               var errMsg = "Infinite loop on byte: " + src.charCodeAt(0);
-              if (_this4.options.silent) {
+              if (_this3.options.silent) {
                 console.error(errMsg);
                 return 1; // break
               } else {
@@ -2037,7 +3002,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }, {
       key: "inlineTokens",
       value: function inlineTokens(src) {
-        var _this5 = this;
+        var _this4 = this;
         var tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
         var _a2, _b, _c;
         var maskedSrc = src;
@@ -2066,9 +3031,9 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             }
             keepPrevChar = false;
             var token;
-            if ((_b = (_a2 = _this5.options.extensions) == null ? void 0 : _a2.inline) == null ? void 0 : _b.some(function (extTokenizer) {
+            if ((_b = (_a2 = _this4.options.extensions) == null ? void 0 : _a2.inline) == null ? void 0 : _b.some(function (extTokenizer) {
               if (token = extTokenizer.call({
-                lexer: _this5
+                lexer: _this4
               }, src, tokens)) {
                 src = src.substring(token.raw.length);
                 tokens.push(token);
@@ -2078,22 +3043,22 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             })) {
               return 0; // continue
             }
-            if (token = _this5.tokenizer.escape(src)) {
+            if (token = _this4.tokenizer.escape(src)) {
               src = src.substring(token.raw.length);
               tokens.push(token);
               return 0; // continue
             }
-            if (token = _this5.tokenizer.tag(src)) {
+            if (token = _this4.tokenizer.tag(src)) {
               src = src.substring(token.raw.length);
               tokens.push(token);
               return 0; // continue
             }
-            if (token = _this5.tokenizer.link(src)) {
+            if (token = _this4.tokenizer.link(src)) {
               src = src.substring(token.raw.length);
               tokens.push(token);
               return 0; // continue
             }
-            if (token = _this5.tokenizer.reflink(src, _this5.tokens.links)) {
+            if (token = _this4.tokenizer.reflink(src, _this4.tokens.links)) {
               src = src.substring(token.raw.length);
               var lastToken = tokens.at(-1);
               if (token.type === "text" && (lastToken == null ? void 0 : lastToken.type) === "text") {
@@ -2104,44 +3069,44 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
               }
               return 0; // continue
             }
-            if (token = _this5.tokenizer.emStrong(src, maskedSrc, prevChar)) {
+            if (token = _this4.tokenizer.emStrong(src, maskedSrc, prevChar)) {
               src = src.substring(token.raw.length);
               tokens.push(token);
               return 0; // continue
             }
-            if (token = _this5.tokenizer.codespan(src)) {
+            if (token = _this4.tokenizer.codespan(src)) {
               src = src.substring(token.raw.length);
               tokens.push(token);
               return 0; // continue
             }
-            if (token = _this5.tokenizer.br(src)) {
+            if (token = _this4.tokenizer.br(src)) {
               src = src.substring(token.raw.length);
               tokens.push(token);
               return 0; // continue
             }
-            if (token = _this5.tokenizer.del(src)) {
+            if (token = _this4.tokenizer.del(src)) {
               src = src.substring(token.raw.length);
               tokens.push(token);
               return 0; // continue
             }
-            if (token = _this5.tokenizer.autolink(src)) {
+            if (token = _this4.tokenizer.autolink(src)) {
               src = src.substring(token.raw.length);
               tokens.push(token);
               return 0; // continue
             }
-            if (!_this5.state.inLink && (token = _this5.tokenizer.url(src))) {
+            if (!_this4.state.inLink && (token = _this4.tokenizer.url(src))) {
               src = src.substring(token.raw.length);
               tokens.push(token);
               return 0; // continue
             }
             var cutSrc = src;
-            if ((_c = _this5.options.extensions) == null ? void 0 : _c.startInline) {
+            if ((_c = _this4.options.extensions) == null ? void 0 : _c.startInline) {
               var startIndex = Infinity;
               var tempSrc = src.slice(1);
               var tempStart;
-              _this5.options.extensions.startInline.forEach(function (getStartIndex) {
+              _this4.options.extensions.startInline.forEach(function (getStartIndex) {
                 tempStart = getStartIndex.call({
-                  lexer: _this5
+                  lexer: _this4
                 }, tempSrc);
                 if (typeof tempStart === "number" && tempStart >= 0) {
                   startIndex = Math.min(startIndex, tempStart);
@@ -2151,7 +3116,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                 cutSrc = src.substring(0, startIndex + 1);
               }
             }
-            if (token = _this5.tokenizer.inlineText(cutSrc)) {
+            if (token = _this4.tokenizer.inlineText(cutSrc)) {
               src = src.substring(token.raw.length);
               if (token.raw.slice(-1) !== "_") {
                 prevChar = token.raw.slice(-1);
@@ -2168,7 +3133,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             }
             if (src) {
               var errMsg = "Infinite loop on byte: " + src.charCodeAt(0);
-              if (_this5.options.silent) {
+              if (_this4.options.silent) {
                 console.error(errMsg);
                 return 1; // break
               } else {
@@ -2227,10 +3192,10 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
     }, {
       key: "code",
-      value: function code(_ref5) {
-        var text = _ref5.text,
-          lang = _ref5.lang,
-          escaped = _ref5.escaped;
+      value: function code(_ref4) {
+        var text = _ref4.text,
+          lang = _ref4.lang,
+          escaped = _ref4.escaped;
         var _a2;
         var langString = (_a2 = (lang || "").match(other.notSpaceStart)) == null ? void 0 : _a2[0];
         var code = text.replace(other.endingNewline, "") + "\n";
@@ -2241,22 +3206,22 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
     }, {
       key: "blockquote",
-      value: function blockquote(_ref6) {
-        var tokens = _ref6.tokens;
+      value: function blockquote(_ref5) {
+        var tokens = _ref5.tokens;
         var body = this.parser.parse(tokens);
         return "<blockquote>\n".concat(body, "</blockquote>\n");
       }
     }, {
       key: "html",
-      value: function html(_ref7) {
-        var text = _ref7.text;
+      value: function html(_ref6) {
+        var text = _ref6.text;
         return text;
       }
     }, {
       key: "heading",
-      value: function heading(_ref8) {
-        var tokens = _ref8.tokens,
-          depth = _ref8.depth;
+      value: function heading(_ref7) {
+        var tokens = _ref7.tokens,
+          depth = _ref7.depth;
         return "<h".concat(depth, ">").concat(this.parser.parseInline(tokens), "</h").concat(depth, ">\n");
       }
     }, {
@@ -2311,14 +3276,14 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
     }, {
       key: "checkbox",
-      value: function checkbox(_ref9) {
-        var checked = _ref9.checked;
+      value: function checkbox(_ref8) {
+        var checked = _ref8.checked;
         return "<input " + (checked ? 'checked="" ' : "") + 'disabled="" type="checkbox">';
       }
     }, {
       key: "paragraph",
-      value: function paragraph(_ref0) {
-        var tokens = _ref0.tokens;
+      value: function paragraph(_ref9) {
+        var tokens = _ref9.tokens;
         return "<p>".concat(this.parser.parseInline(tokens), "</p>\n");
       }
     }, {
@@ -2348,8 +3313,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
     }, {
       key: "tablerow",
-      value: function tablerow(_ref1) {
-        var text = _ref1.text;
+      value: function tablerow(_ref0) {
+        var text = _ref0.text;
         return "<tr>\n".concat(text, "</tr>\n");
       }
     }, {
@@ -2365,20 +3330,20 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
        */
     }, {
       key: "strong",
-      value: function strong(_ref10) {
-        var tokens = _ref10.tokens;
+      value: function strong(_ref1) {
+        var tokens = _ref1.tokens;
         return "<strong>".concat(this.parser.parseInline(tokens), "</strong>");
       }
     }, {
       key: "em",
-      value: function em(_ref11) {
-        var tokens = _ref11.tokens;
+      value: function em(_ref10) {
+        var tokens = _ref10.tokens;
         return "<em>".concat(this.parser.parseInline(tokens), "</em>");
       }
     }, {
       key: "codespan",
-      value: function codespan(_ref12) {
-        var text = _ref12.text;
+      value: function codespan(_ref11) {
+        var text = _ref11.text;
         return "<code>".concat(escape2(text, true), "</code>");
       }
     }, {
@@ -2388,16 +3353,16 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
     }, {
       key: "del",
-      value: function del(_ref13) {
-        var tokens = _ref13.tokens;
+      value: function del(_ref12) {
+        var tokens = _ref12.tokens;
         return "<del>".concat(this.parser.parseInline(tokens), "</del>");
       }
     }, {
       key: "link",
-      value: function link(_ref14) {
-        var href = _ref14.href,
-          title = _ref14.title,
-          tokens = _ref14.tokens;
+      value: function link(_ref13) {
+        var href = _ref13.href,
+          title = _ref13.title,
+          tokens = _ref13.tokens;
         var text = this.parser.parseInline(tokens);
         var cleanHref = cleanUrl(href);
         if (cleanHref === null) {
@@ -2413,11 +3378,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
     }, {
       key: "image",
-      value: function image(_ref15) {
-        var href = _ref15.href,
-          title = _ref15.title,
-          text = _ref15.text,
-          tokens = _ref15.tokens;
+      value: function image(_ref14) {
+        var href = _ref14.href,
+          title = _ref14.title,
+          text = _ref14.text,
+          tokens = _ref14.tokens;
         if (tokens) {
           text = this.parser.parseInline(tokens, this.parser.textRenderer);
         }
@@ -2448,50 +3413,50 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       key: "strong",
       value:
       // no need for block level renderers
-      function strong(_ref16) {
-        var text = _ref16.text;
+      function strong(_ref15) {
+        var text = _ref15.text;
         return text;
       }
     }, {
       key: "em",
-      value: function em(_ref17) {
-        var text = _ref17.text;
+      value: function em(_ref16) {
+        var text = _ref16.text;
         return text;
       }
     }, {
       key: "codespan",
-      value: function codespan(_ref18) {
-        var text = _ref18.text;
+      value: function codespan(_ref17) {
+        var text = _ref17.text;
         return text;
       }
     }, {
       key: "del",
-      value: function del(_ref19) {
-        var text = _ref19.text;
+      value: function del(_ref18) {
+        var text = _ref18.text;
         return text;
       }
     }, {
       key: "html",
-      value: function html(_ref20) {
-        var text = _ref20.text;
+      value: function html(_ref19) {
+        var text = _ref19.text;
         return text;
       }
     }, {
       key: "text",
-      value: function text(_ref21) {
-        var _text = _ref21.text;
+      value: function text(_ref20) {
+        var _text = _ref20.text;
         return _text;
       }
     }, {
       key: "link",
-      value: function link(_ref22) {
-        var text = _ref22.text;
+      value: function link(_ref21) {
+        var text = _ref21.text;
         return "" + text;
       }
     }, {
       key: "image",
-      value: function image(_ref23) {
-        var text = _ref23.text;
+      value: function image(_ref22) {
+        var text = _ref22.text;
         return "" + text;
       }
     }, {
@@ -2527,8 +3492,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
         var _a2, _b;
         var out = "";
-        for (var _i8 = 0; _i8 < tokens.length; _i8++) {
-          var anyToken = tokens[_i8];
+        for (var _i7 = 0; _i7 < tokens.length; _i7++) {
+          var anyToken = tokens[_i7];
           if ((_b = (_a2 = this.options.extensions) == null ? void 0 : _a2.renderers) == null ? void 0 : _b[anyToken.type]) {
             var genericToken = anyToken;
             var ret = this.options.extensions.renderers[genericToken.type].call({
@@ -2590,8 +3555,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
               {
                 var textToken = token;
                 var body = this.renderer.text(textToken);
-                while (_i8 + 1 < tokens.length && tokens[_i8 + 1].type === "text") {
-                  textToken = tokens[++_i8];
+                while (_i7 + 1 < tokens.length && tokens[_i7 + 1].type === "text") {
+                  textToken = tokens[++_i7];
                   body += "\n" + this.renderer.text(textToken);
                 }
                 if (top) {
@@ -2634,8 +3599,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         var renderer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.renderer;
         var _a2, _b;
         var out = "";
-        for (var _i9 = 0; _i9 < tokens.length; _i9++) {
-          var anyToken = tokens[_i9];
+        for (var _i8 = 0; _i8 < tokens.length; _i8++) {
+          var anyToken = tokens[_i8];
           if ((_b = (_a2 = this.options.extensions) == null ? void 0 : _a2.renderers) == null ? void 0 : _b[anyToken.type]) {
             var ret = this.options.extensions.renderers[anyToken.type].call({
               parser: this
@@ -2798,7 +3763,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     return _createClass(Marked, [{
       key: "walkTokens",
       value: function walkTokens(tokens, callback) {
-        var _this6 = this;
+        var _this5 = this;
         var _a2, _b;
         var values = [];
         var _iterator5 = _createForOfIteratorHelper(tokens),
@@ -2806,7 +3771,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         try {
           var _loop4 = function _loop4() {
             var token = _step5.value;
-            values = values.concat(callback.call(_this6, token));
+            values = values.concat(callback.call(_this5, token));
             switch (token.type) {
               case "table":
                 {
@@ -2816,7 +3781,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                   try {
                     for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
                       var cell = _step6.value;
-                      values = values.concat(_this6.walkTokens(cell.tokens, callback));
+                      values = values.concat(_this5.walkTokens(cell.tokens, callback));
                     }
                   } catch (err) {
                     _iterator6.e(err);
@@ -2833,7 +3798,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                       try {
                         for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
                           var _cell = _step8.value;
-                          values = values.concat(_this6.walkTokens(_cell.tokens, callback));
+                          values = values.concat(_this5.walkTokens(_cell.tokens, callback));
                         }
                       } catch (err) {
                         _iterator8.e(err);
@@ -2851,19 +3816,19 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
               case "list":
                 {
                   var listToken = token;
-                  values = values.concat(_this6.walkTokens(listToken.items, callback));
+                  values = values.concat(_this5.walkTokens(listToken.items, callback));
                   break;
                 }
               default:
                 {
                   var genericToken = token;
-                  if ((_b = (_a2 = _this6.defaults.extensions) == null ? void 0 : _a2.childTokens) == null ? void 0 : _b[genericToken.type]) {
-                    _this6.defaults.extensions.childTokens[genericToken.type].forEach(function (childTokens) {
+                  if ((_b = (_a2 = _this5.defaults.extensions) == null ? void 0 : _a2.childTokens) == null ? void 0 : _b[genericToken.type]) {
+                    _this5.defaults.extensions.childTokens[genericToken.type].forEach(function (childTokens) {
                       var tokens2 = genericToken[childTokens].flat(Infinity);
-                      values = values.concat(_this6.walkTokens(tokens2, callback));
+                      values = values.concat(_this5.walkTokens(tokens2, callback));
                     });
                   } else if (genericToken.tokens) {
-                    values = values.concat(_this6.walkTokens(genericToken.tokens, callback));
+                    values = values.concat(_this5.walkTokens(genericToken.tokens, callback));
                   }
                 }
             }
@@ -2881,7 +3846,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }, {
       key: "use",
       value: function use() {
-        var _this7 = this;
+        var _this6 = this;
         var extensions = this.defaults.extensions || {
           renderers: {},
           childTokens: {}
@@ -2891,7 +3856,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         }
         args.forEach(function (pack) {
           var opts = __spreadValues({}, pack);
-          opts.async = _this7.defaults.async || opts.async || false;
+          opts.async = _this6.defaults.async || opts.async || false;
           if (pack.extensions) {
             pack.extensions.forEach(function (ext) {
               if (!ext.name) {
@@ -2947,7 +3912,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             opts.extensions = extensions;
           }
           if (pack.renderer) {
-            var renderer = _this7.defaults.renderer || new _Renderer(_this7.defaults);
+            var renderer = _this6.defaults.renderer || new _Renderer(_this6.defaults);
             var _loop5 = function _loop5() {
               if (!(prop in renderer)) {
                 throw new Error("renderer '".concat(prop, "' does not exist"));
@@ -2975,7 +3940,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             opts.renderer = renderer;
           }
           if (pack.tokenizer) {
-            var tokenizer = _this7.defaults.tokenizer || new _Tokenizer(_this7.defaults);
+            var tokenizer = _this6.defaults.tokenizer || new _Tokenizer(_this6.defaults);
             var _loop6 = function _loop6() {
               if (!(_prop in tokenizer)) {
                 throw new Error("tokenizer '".concat(_prop, "' does not exist"));
@@ -3003,7 +3968,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             opts.tokenizer = tokenizer;
           }
           if (pack.hooks) {
-            var hooks = _this7.defaults.hooks || new _Hooks();
+            var hooks = _this6.defaults.hooks || new _Hooks();
             var _loop7 = function _loop7() {
               if (!(_prop2 in hooks)) {
                 throw new Error("hook '".concat(_prop2, "' does not exist"));
@@ -3016,7 +3981,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
               var prevHook = hooks[hooksProp];
               if (_Hooks.passThroughHooks.has(_prop2)) {
                 hooks[hooksProp] = function (arg) {
-                  if (_this7.defaults.async) {
+                  if (_this6.defaults.async) {
                     return Promise.resolve(hooksFunc.call(hooks, arg)).then(function (ret2) {
                       return prevHook.call(hooks, ret2);
                     });
@@ -3043,7 +4008,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             opts.hooks = hooks;
           }
           if (pack.walkTokens) {
-            var walkTokens2 = _this7.defaults.walkTokens;
+            var walkTokens2 = _this6.defaults.walkTokens;
             var packWalktokens = pack.walkTokens;
             opts.walkTokens = function (token) {
               var values = [];
@@ -3054,7 +4019,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
               return values;
             };
           }
-          _this7.defaults = __spreadValues(__spreadValues({}, _this7.defaults), opts);
+          _this6.defaults = __spreadValues(__spreadValues({}, _this6.defaults), opts);
         });
         return this;
       }
@@ -3077,12 +4042,12 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }, {
       key: "parseMarkdown",
       value: function parseMarkdown(blockType) {
-        var _this8 = this;
+        var _this7 = this;
         var parse2 = function parse2(src, options2) {
           var origOpt = __spreadValues({}, options2);
-          var opt = __spreadValues(__spreadValues({}, _this8.defaults), origOpt);
-          var throwError = _this8.onError(!!opt.silent, !!opt.async);
-          if (_this8.defaults.async === true && origOpt.async === false) {
+          var opt = __spreadValues(__spreadValues({}, _this7.defaults), origOpt);
+          var throwError = _this7.onError(!!opt.silent, !!opt.async);
+          if (_this7.defaults.async === true && origOpt.async === false) {
             return throwError(new Error("marked(): The async option was set to true by an extension. Remove async: false from the parse options object to return a Promise."));
           }
           if (typeof src === "undefined" || src === null) {
@@ -3103,7 +4068,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             }).then(function (tokens) {
               return opt.hooks ? opt.hooks.processAllTokens(tokens) : tokens;
             }).then(function (tokens) {
-              return opt.walkTokens ? Promise.all(_this8.walkTokens(tokens, opt.walkTokens)).then(function () {
+              return opt.walkTokens ? Promise.all(_this7.walkTokens(tokens, opt.walkTokens)).then(function () {
                 return tokens;
               }) : tokens;
             }).then(function (tokens) {
@@ -3121,7 +4086,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
               tokens = opt.hooks.processAllTokens(tokens);
             }
             if (opt.walkTokens) {
-              _this8.walkTokens(tokens, opt.walkTokens);
+              _this7.walkTokens(tokens, opt.walkTokens);
             }
             var html2 = parser2(tokens, opt);
             if (opt.hooks) {
@@ -3192,9 +4157,9 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
   marked.parseInline;
   _Parser.parse;
   _Lexer.lex;
-  var TypingText = function TypingText(_ref24) {
-    var data = _ref24.data,
-      style = _ref24.style;
+  var TypingText = function TypingText(_ref23) {
+    var data = _ref23.data,
+      style = _ref23.style;
     return /* @__PURE__ */React__namespace.createElement("div", {
       style: __spreadValues({
         maxWidth: "80%"
@@ -3212,90 +4177,56 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
     }, data ? data.question : ""));
   };
-  var LoadingCircular = function LoadingCircular(_ref25) {
-    var _ref25$size = _ref25.size,
-      size = _ref25$size === void 0 ? 40 : _ref25$size,
-      _ref25$color = _ref25.color,
-      color = _ref25$color === void 0 ? "var(--primary-main)" : _ref25$color,
-      _ref25$thickness = _ref25.thickness,
-      thickness = _ref25$thickness === void 0 ? 3.6 : _ref25$thickness;
-    var radius = 20;
-    var circumference = 2 * Math.PI * radius;
-    return /* @__PURE__ */React.createElement("div", {
-      className: "circular-container",
-      style: {
-        width: size,
-        height: size
-      },
-      role: "progressbar"
-    }, /* @__PURE__ */React.createElement("svg", {
-      className: "circular-svg",
-      viewBox: "22 22 44 44"
-    }, /* @__PURE__ */React.createElement("circle", {
-      className: "circular-circle",
-      cx: "44",
-      cy: "44",
-      r: radius,
-      fill: "none",
-      stroke: color,
-      strokeWidth: thickness,
-      strokeDasharray: circumference,
-      style: {
-        strokeDashoffset: circumference * 0.7
-        // Độ dài của thanh loading
-      }
-    })));
-  };
   var ARROW_SIZE = 6;
   var GAP = 4;
   var Tooltip = /*#__PURE__*/function (_React__namespace$Com) {
     function Tooltip(props) {
-      var _this9;
+      var _this8;
       _classCallCheck(this, Tooltip);
-      _this9 = _callSuper(this, Tooltip, [props]);
-      __publicField(_this9, "triggerRef");
-      __publicField(_this9, "tooltipRef");
-      __publicField(_this9, "enterTimer", null);
-      __publicField(_this9, "leaveTimer", null);
-      __publicField(_this9, "handleMouseEnter", function () {
-        if (_this9.leaveTimer) {
-          clearTimeout(_this9.leaveTimer);
-          _this9.leaveTimer = null;
+      _this8 = _callSuper(this, Tooltip, [props]);
+      __publicField(_this8, "triggerRef");
+      __publicField(_this8, "tooltipRef");
+      __publicField(_this8, "enterTimer", null);
+      __publicField(_this8, "leaveTimer", null);
+      __publicField(_this8, "handleMouseEnter", function () {
+        if (_this8.leaveTimer) {
+          clearTimeout(_this8.leaveTimer);
+          _this8.leaveTimer = null;
         }
-        var enterDelay = _this9.props.enterDelay;
-        _this9.enterTimer = setTimeout(function () {
-          _this9.setState({
+        var enterDelay = _this8.props.enterDelay;
+        _this8.enterTimer = setTimeout(function () {
+          _this8.setState({
             visible: true
           }, function () {
-            var coords = _this9.computeCoords();
-            _this9.setState({
+            var coords = _this8.computeCoords();
+            _this8.setState({
               coords: coords
             });
           });
         }, enterDelay);
       });
-      __publicField(_this9, "handleMouseLeave", function () {
-        if (_this9.enterTimer) {
-          clearTimeout(_this9.enterTimer);
-          _this9.enterTimer = null;
+      __publicField(_this8, "handleMouseLeave", function () {
+        if (_this8.enterTimer) {
+          clearTimeout(_this8.enterTimer);
+          _this8.enterTimer = null;
         }
-        var leaveDelay = _this9.props.leaveDelay;
-        _this9.leaveTimer = setTimeout(function () {
-          _this9.setState({
+        var leaveDelay = _this8.props.leaveDelay;
+        _this8.leaveTimer = setTimeout(function () {
+          _this8.setState({
             visible: false
           });
         }, leaveDelay);
       });
-      _this9.state = {
+      _this8.state = {
         visible: false,
         coords: {
           top: 0,
           left: 0
         }
       };
-      _this9.triggerRef = React__namespace.createRef();
-      _this9.tooltipRef = React__namespace.createRef();
-      return _this9;
+      _this8.triggerRef = React__namespace.createRef();
+      _this8.tooltipRef = React__namespace.createRef();
+      return _this8;
     }
     _inherits(Tooltip, _React__namespace$Com);
     return _createClass(Tooltip, [{
@@ -3426,12 +4357,50 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     leaveDelay: 0,
     zIndex: 1500
   });
-  var List = function List(_ref26) {
-    var items = _ref26.items,
-      onApply = _ref26.onApply,
-      getEditorContent = _ref26.getEditorContent;
+  var AIAvatar = function AIAvatar() {
+    return /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        width: 28,
+        height: 28,
+        borderRadius: "50%",
+        background: "var(--primary-main)",
+        color: "var(--primary-contrasttext)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 11,
+        fontWeight: 700,
+        letterSpacing: 0.5,
+        flexShrink: 0
+      }
+    }, "AI");
+  };
+  var LoadingDots = function LoadingDots(_ref24) {
+    var _ref24$label = _ref24.label,
+      label = _ref24$label === void 0 ? "Thinking" : _ref24$label;
+    return /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        background: "var(--background-softGrey)",
+        borderRadius: 8,
+        borderTopLeftRadius: 0,
+        padding: "8px 12px",
+        fontSize: 13,
+        color: "var(--text-secondary)"
+      }
+    }, /* @__PURE__ */React__namespace.createElement("span", null, label), /* @__PURE__ */React__namespace.createElement("span", {
+      className: "chat-ai-dots",
+      "aria-hidden": "true"
+    }, /* @__PURE__ */React__namespace.createElement("span", null), /* @__PURE__ */React__namespace.createElement("span", null), /* @__PURE__ */React__namespace.createElement("span", null)));
+  };
+  var List = function List(_ref25) {
+    var items = _ref25.items,
+      onApply = _ref25.onApply,
+      getEditorContent = _ref25.getEditorContent;
     var handleApply = function handleApply(body) {
-      return __async(_this0, null, /*#__PURE__*/_regenerator().m(function _callee2() {
+      return __async(_this9, null, /*#__PURE__*/_regenerator().m(function _callee2() {
         var titleRegex, matches, content, html2, signatureRegex, editorValue, signatureMatch;
         return _regenerator().w(function (_context2) {
           while (1) switch (_context2.n) {
@@ -3496,27 +4465,27 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           borderRadius: 8,
           borderTopRightRadius: 0,
           padding: "8px 12px",
-          background: "var(--background-softGrey)"
+          background: "var(--primary-main)",
+          color: "var(--primary-contrasttext)"
         }
       })), /* @__PURE__ */React__namespace.createElement("div", {
         style: {
           width: "100%",
           display: "flex",
           alignItems: "flex-start",
-          flexDirection: "column",
+          flexDirection: "row",
           position: "relative",
-          marginTop: 8
+          marginTop: 8,
+          gap: 8
         }
-      }, (_item == null ? void 0 : _item.isLoading) ? /* @__PURE__ */React__namespace.createElement(LoadingCircular, {
-        size: 32
-      }) : /* @__PURE__ */React__namespace.createElement("div", {
+      }, /* @__PURE__ */React__namespace.createElement(AIAvatar, null), /* @__PURE__ */React__namespace.createElement("div", {
         style: {
+          flex: 1,
+          minWidth: 0,
           display: "flex",
-          flexDirection: "row",
-          alignItems: "flex-end",
-          width: "100%"
+          flexDirection: "column"
         }
-      }, /* @__PURE__ */React__namespace.createElement(TypingText, {
+      }, (_item == null ? void 0 : _item.isLoading) ? /* @__PURE__ */React__namespace.createElement(LoadingDots, null) : /* @__PURE__ */React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */React__namespace.createElement(TypingText, {
         data: {
           subject: _item.subject,
           body: _item.body
@@ -3525,10 +4494,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           background: "var(--background-softGrey)",
           borderRadius: 8,
           borderTopLeftRadius: 0,
-          padding: "8px 12px",
-          flexShrink: 0
+          padding: "8px 12px"
         }
-      }), /* @__PURE__ */React__namespace.createElement(Tooltip, {
+      }), /* @__PURE__ */React__namespace.createElement("div", {
+        style: {
+          marginTop: 4
+        }
+      }, /* @__PURE__ */React__namespace.createElement(Tooltip, {
         title: "Apply content"
       }, /* @__PURE__ */React__namespace.createElement("button", {
         type: "button",
@@ -3536,999 +4508,253 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           return handleApply(_item.body);
         },
         color: "primary",
-        className: "icon-button small",
-        style: {
-          marginLeft: 4
-        }
+        className: "icon-button small"
       }, /* @__PURE__ */React__namespace.createElement(Copy, {
         size: 16
-      }))))));
+      }))))))));
+    }));
+  };
+  var CustomAiIcon = function CustomAiIcon(_ref26) {
+    var _ref26$isGradient = _ref26.isGradient,
+      isGradient = _ref26$isGradient === void 0 ? false : _ref26$isGradient,
+      _ref26$stroke = _ref26.stroke,
+      stroke = _ref26$stroke === void 0 ? 1.5 : _ref26$stroke,
+      _ref26$size = _ref26.size,
+      size = _ref26$size === void 0 ? 40 : _ref26$size;
+    var gradientId = "ai-gradient-" + Math.random().toString(36).substr(2, 9);
+    return /* @__PURE__ */React__namespace.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      style: {
+        flexShrink: 0
+      }
+    }, isGradient && /* @__PURE__ */React__namespace.createElement("defs", null, /* @__PURE__ */React__namespace.createElement("linearGradient", {
+      id: gradientId,
+      x1: "0%",
+      y1: "0%",
+      x2: "0%",
+      y2: "100%"
+    }, /* @__PURE__ */React__namespace.createElement("stop", {
+      offset: "0%",
+      stopColor: "#9D50BB"
+    }, /* @__PURE__ */React__namespace.createElement("animate", {
+      attributeName: "offset",
+      values: "0%;0.4;0%",
+      dur: "1s",
+      repeatCount: "indefinite"
+    })), /* @__PURE__ */React__namespace.createElement("stop", {
+      offset: "30%",
+      stopColor: "#6E48AA"
+    }, /* @__PURE__ */React__namespace.createElement("animate", {
+      attributeName: "offset",
+      values: "0.4;0.7;0.4",
+      dur: "1s",
+      repeatCount: "indefinite"
+    })), /* @__PURE__ */React__namespace.createElement("stop", {
+      offset: "50%",
+      stopColor: "#4776E6"
+    }, /* @__PURE__ */React__namespace.createElement("animate", {
+      attributeName: "offset",
+      values: "0.5;0.7;0.5",
+      dur: "1s",
+      repeatCount: "indefinite"
+    })), /* @__PURE__ */React__namespace.createElement("animateTransform", {
+      attributeName: "gradientTransform",
+      type: "translate",
+      from: "0,0",
+      to: "100,0",
+      dur: "1s",
+      repeatCount: "indefinite"
+    }))), /* @__PURE__ */React__namespace.createElement("path", {
+      fill: "none",
+      stroke: isGradient ? "url(#".concat(gradientId, ")") : "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: stroke,
+      d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0zM20 3v4m2-2h-4M4 17v2m1-1H3"
     }));
   };
-  var circularSize = {
-    small: 28,
-    medium: 40
-  };
-  var LoadingContainer = function LoadingContainer(_ref27) {
-    var style = _ref27.style,
-      _ref27$fullHeight = _ref27.fullHeight,
-      fullHeight = _ref27$fullHeight === void 0 ? false : _ref27$fullHeight,
-      _ref27$size = _ref27.size,
-      size = _ref27$size === void 0 ? "medium" : _ref27$size,
-      label = _ref27.label;
-    return /* @__PURE__ */React.createElement("div", {
-      style: __spreadValues({
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: "100%",
-        height: fullHeight ? "100%" : 350
-      }, style)
-    }, /* @__PURE__ */React.createElement(LoadingCircular, {
-      size: circularSize[size]
-    }), label && /* @__PURE__ */React.createElement("p", {
-      color: "text.secondary",
+  var FEATURES = [{
+    icon: /* @__PURE__ */React__namespace.createElement(MessageCircle, {
+      size: 16
+    }),
+    title: "Request via message",
+    desc: 'e.g., "Draft an email to Director Hong proposing a Q3 collaboration meeting (May 20, 3 PM)"'
+  }, {
+    icon: /* @__PURE__ */React__namespace.createElement(CustomAiIcon, {
+      size: 16,
+      stroke: 2
+    }),
+    title: "AI generates a draft",
+    desc: "Refine the draft freely with follow-ups like 'more polite' or 'add a deadline'."
+  }, {
+    icon: /* @__PURE__ */React__namespace.createElement(Check, {
+      size: 16
+    }),
+    title: "Apply to body",
+    desc: "Insert the response you like into the email body and send."
+  }];
+  var SUGGESTIONS = ["Propose a Q3 meeting to Director Hong (May 20, 3 PM)", "Notify client of payment schedule (Due May 30)", "Welcome message to new employee (Joining May 22)"];
+  var EmptyState = function EmptyState(_ref27) {
+    var onSelectPrompt = _ref27.onSelectPrompt;
+    return /* @__PURE__ */React__namespace.createElement("div", {
       style: {
-        marginTop: 16,
-        fontSize: size === "small" ? 12 : 13
-      }
-    }, label));
-  };
-  var scrollStyle = "\n::-webkit-scrollbar,\n*::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n*::-webkit-scrollbar-track {\n  background: transparent;\n  backdrop-filter: blur(6px);\n}\n\n::-webkit-scrollbar-thumb,\n*::-webkit-scrollbar-thumb {\n  background: #e0e0e0;\n}\n\n::-webkit-scrollbar-thumb:focus,\n*::-webkit-scrollbar-thumb:focus {\n  background: #bdbdbd;\n}\n\n::-webkit-scrollbar-thumb:active,\n*::-webkit-scrollbar-thumb:active {\n  background: #bdbdbd;\n}\n\n::-webkit-scrollbar-thumb:hover,\n*::-webkit-scrollbar-thumb:hover {\n  background: #bdbdbd;\n}\n\n::-webkit-scrollbar-corner,\n*::-webkit-scrollbar-corner {\n  background-color: transparent;\n}\n";
-  var _assign$ = function __assign$2() {
-    _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 eventPropTypes = {
-    onActivate: propTypesExports.func,
-    onAddUndo: propTypesExports.func,
-    onBeforeAddUndo: propTypesExports.func,
-    onBeforeExecCommand: propTypesExports.func,
-    onBeforeGetContent: propTypesExports.func,
-    onBeforeRenderUI: propTypesExports.func,
-    onBeforeSetContent: propTypesExports.func,
-    onBeforePaste: propTypesExports.func,
-    onBlur: propTypesExports.func,
-    onChange: propTypesExports.func,
-    onClearUndos: propTypesExports.func,
-    onClick: propTypesExports.func,
-    onContextMenu: propTypesExports.func,
-    onCommentChange: propTypesExports.func,
-    onCopy: propTypesExports.func,
-    onCut: propTypesExports.func,
-    onDblclick: propTypesExports.func,
-    onDeactivate: propTypesExports.func,
-    onDirty: propTypesExports.func,
-    onDrag: propTypesExports.func,
-    onDragDrop: propTypesExports.func,
-    onDragEnd: propTypesExports.func,
-    onDragGesture: propTypesExports.func,
-    onDragOver: propTypesExports.func,
-    onDrop: propTypesExports.func,
-    onExecCommand: propTypesExports.func,
-    onFocus: propTypesExports.func,
-    onFocusIn: propTypesExports.func,
-    onFocusOut: propTypesExports.func,
-    onGetContent: propTypesExports.func,
-    onHide: propTypesExports.func,
-    onInit: propTypesExports.func,
-    onKeyDown: propTypesExports.func,
-    onKeyPress: propTypesExports.func,
-    onKeyUp: propTypesExports.func,
-    onLoadContent: propTypesExports.func,
-    onMouseDown: propTypesExports.func,
-    onMouseEnter: propTypesExports.func,
-    onMouseLeave: propTypesExports.func,
-    onMouseMove: propTypesExports.func,
-    onMouseOut: propTypesExports.func,
-    onMouseOver: propTypesExports.func,
-    onMouseUp: propTypesExports.func,
-    onNodeChange: propTypesExports.func,
-    onObjectResizeStart: propTypesExports.func,
-    onObjectResized: propTypesExports.func,
-    onObjectSelected: propTypesExports.func,
-    onPaste: propTypesExports.func,
-    onPostProcess: propTypesExports.func,
-    onPostRender: propTypesExports.func,
-    onPreProcess: propTypesExports.func,
-    onProgressState: propTypesExports.func,
-    onRedo: propTypesExports.func,
-    onRemove: propTypesExports.func,
-    onReset: propTypesExports.func,
-    onSaveContent: propTypesExports.func,
-    onSelectionChange: propTypesExports.func,
-    onSetAttrib: propTypesExports.func,
-    onSetContent: propTypesExports.func,
-    onShow: propTypesExports.func,
-    onSubmit: propTypesExports.func,
-    onUndo: propTypesExports.func,
-    onVisualAid: propTypesExports.func,
-    onSkinLoadError: propTypesExports.func,
-    onThemeLoadError: propTypesExports.func,
-    onModelLoadError: propTypesExports.func,
-    onPluginLoadError: propTypesExports.func,
-    onIconsLoadError: propTypesExports.func,
-    onLanguageLoadError: propTypesExports.func,
-    onScriptsLoad: propTypesExports.func,
-    onScriptsLoadError: propTypesExports.func
-  };
-  var EditorPropTypes = _assign$({
-    apiKey: propTypesExports.string,
-    id: propTypesExports.string,
-    inline: propTypesExports.bool,
-    init: propTypesExports.object,
-    initialValue: propTypesExports.string,
-    onEditorChange: propTypesExports.func,
-    value: propTypesExports.string,
-    tagName: propTypesExports.string,
-    cloudChannel: propTypesExports.string,
-    plugins: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.array]),
-    toolbar: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.array]),
-    disabled: propTypesExports.bool,
-    textareaName: propTypesExports.string,
-    tinymceScriptSrc: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.arrayOf(propTypesExports.string), propTypesExports.arrayOf(propTypesExports.shape({
-      src: propTypesExports.string,
-      async: propTypesExports.bool,
-      defer: propTypesExports.bool
-    }))]),
-    rollback: propTypesExports.oneOfType([propTypesExports.number, propTypesExports.oneOf([false])]),
-    scriptLoading: propTypesExports.shape({
-      async: propTypesExports.bool,
-      defer: propTypesExports.bool,
-      delay: propTypesExports.number
-    })
-  }, eventPropTypes);
-  var isFunction = function isFunction(x) {
-    return typeof x === "function";
-  };
-  var isEventProp = function isEventProp(name) {
-    return name in eventPropTypes;
-  };
-  var eventAttrToEventName = function eventAttrToEventName(attrName) {
-    return attrName.substr(2);
-  };
-  var configHandlers2 = function configHandlers2(handlerLookup, on, off, adapter, prevProps, props, boundHandlers) {
-    var prevEventKeys = Object.keys(prevProps).filter(isEventProp);
-    var currEventKeys = Object.keys(props).filter(isEventProp);
-    var removedKeys = prevEventKeys.filter(function (key) {
-      return props[key] === void 0;
-    });
-    var addedKeys = currEventKeys.filter(function (key) {
-      return prevProps[key] === void 0;
-    });
-    removedKeys.forEach(function (key) {
-      var eventName = eventAttrToEventName(key);
-      var wrappedHandler = boundHandlers[eventName];
-      off(eventName, wrappedHandler);
-      delete boundHandlers[eventName];
-    });
-    addedKeys.forEach(function (key) {
-      var wrappedHandler = adapter(handlerLookup, key);
-      var eventName = eventAttrToEventName(key);
-      boundHandlers[eventName] = wrappedHandler;
-      on(eventName, wrappedHandler);
-    });
-  };
-  var configHandlers = function configHandlers(editor, prevProps, props, boundHandlers, lookup) {
-    return configHandlers2(lookup, editor.on.bind(editor), editor.off.bind(editor),
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    function (handlerLookup, key) {
-      return function (e) {
-        var _a2;
-        return (_a2 = handlerLookup(key)) === null || _a2 === void 0 ? void 0 : _a2(e, editor);
-      };
-    }, prevProps, props, boundHandlers);
-  };
-  var unique = 0;
-  var uuid = function uuid(prefix) {
-    var time = Date.now();
-    var random = Math.floor(Math.random() * 1e9);
-    unique++;
-    return prefix + "_" + random + unique + String(time);
-  };
-  var isTextareaOrInput = function isTextareaOrInput(element) {
-    return element !== null && (element.tagName.toLowerCase() === "textarea" || element.tagName.toLowerCase() === "input");
-  };
-  var normalizePluginArray = function normalizePluginArray(plugins) {
-    if (typeof plugins === "undefined" || plugins === "") {
-      return [];
-    }
-    return Array.isArray(plugins) ? plugins : plugins.split(" ");
-  };
-  var mergePlugins = function mergePlugins(initPlugins, inputPlugins) {
-    return normalizePluginArray(initPlugins).concat(normalizePluginArray(inputPlugins));
-  };
-  var isBeforeInputEventAvailable = function isBeforeInputEventAvailable() {
-    return window.InputEvent && typeof InputEvent.prototype.getTargetRanges === "function";
-  };
-  var isInDoc = function isInDoc(elem) {
-    if (!("isConnected" in Node.prototype)) {
-      var current = elem;
-      var parent_1 = elem.parentNode;
-      while (parent_1 != null) {
-        current = parent_1;
-        parent_1 = current.parentNode;
-      }
-      return current === elem.ownerDocument;
-    }
-    return elem.isConnected;
-  };
-  var setMode = function setMode(editor, mode) {
-    if (editor !== void 0) {
-      if (editor.mode != null && _typeof(editor.mode) === "object" && typeof editor.mode.set === "function") {
-        editor.mode.set(mode);
-      } else {
-        editor.setMode(mode);
-      }
-    }
-  };
-  var _assign$2 = function __assign$1() {
-    _assign$2 = 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$2.apply(this, arguments);
-  };
-  var injectScriptTag = function injectScriptTag(doc, item, handler) {
-    var _a2, _b;
-    var scriptTag = doc.createElement("script");
-    scriptTag.referrerPolicy = "origin";
-    scriptTag.type = "application/javascript";
-    scriptTag.id = item.id;
-    scriptTag.src = item.src;
-    scriptTag.async = (_a2 = item.async) !== null && _a2 !== void 0 ? _a2 : false;
-    scriptTag.defer = (_b = item.defer) !== null && _b !== void 0 ? _b : false;
-    var _loadHandler = function loadHandler() {
-      scriptTag.removeEventListener("load", _loadHandler);
-      scriptTag.removeEventListener("error", _errorHandler);
-      handler(item.src);
-    };
-    var _errorHandler = function errorHandler(err) {
-      scriptTag.removeEventListener("load", _loadHandler);
-      scriptTag.removeEventListener("error", _errorHandler);
-      handler(item.src, err);
-    };
-    scriptTag.addEventListener("load", _loadHandler);
-    scriptTag.addEventListener("error", _errorHandler);
-    if (doc.head) {
-      doc.head.appendChild(scriptTag);
-    }
-  };
-  var createDocumentScriptLoader = function createDocumentScriptLoader(doc) {
-    var lookup = {};
-    var scriptLoadOrErrorHandler = function scriptLoadOrErrorHandler(src, err) {
-      var item = lookup[src];
-      item.done = true;
-      item.error = err;
-      for (var _i = 0, _a2 = item.handlers; _i < _a2.length; _i++) {
-        var h = _a2[_i];
-        h(src, err);
-      }
-      item.handlers = [];
-    };
-    var loadScripts = function loadScripts(items, success, failure) {
-      var failureOrLog = function failureOrLog(err) {
-        return failure !== void 0 ? failure(err) : console.error(err);
-      };
-      if (items.length === 0) {
-        failureOrLog(new Error("At least one script must be provided"));
-        return;
+        flex: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        display: "flex",
+        flexDirection: "column",
+        paddingRight: 8,
+        marginRight: -8,
+        paddingBottom: 16
       }
-      var successCount = 0;
-      var failed = false;
-      var loaded = function loaded(_src, err) {
-        if (failed) {
-          return;
-        }
-        if (err) {
-          failed = true;
-          failureOrLog(err);
-        } else if (++successCount === items.length) {
-          success();
-        }
-      };
-      for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
-        var item = items_1[_i];
-        var existing = lookup[item.src];
-        if (existing) {
-          if (existing.done) {
-            loaded(item.src, existing.error);
-          } else {
-            existing.handlers.push(loaded);
-          }
-        } else {
-          var id = uuid("tiny-");
-          lookup[item.src] = {
-            id: id,
-            src: item.src,
-            done: false,
-            error: null,
-            handlers: [loaded]
-          };
-          injectScriptTag(doc, _assign$2({
-            id: id
-          }, item), scriptLoadOrErrorHandler);
-        }
+    }, /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        textAlign: "center",
+        marginTop: 8
       }
-    };
-    var deleteScripts = function deleteScripts() {
-      var _a2;
-      for (var _i = 0, _b = Object.values(lookup); _i < _b.length; _i++) {
-        var item = _b[_i];
-        var scriptTag = doc.getElementById(item.id);
-        if (scriptTag != null && scriptTag.tagName === "SCRIPT") {
-          (_a2 = scriptTag.parentNode) === null || _a2 === void 0 ? void 0 : _a2.removeChild(scriptTag);
-        }
+    }, /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        fontSize: 14,
+        fontWeight: 600,
+        color: "var(--text-primary)",
+        lineHeight: 1.5
       }
-      lookup = {};
-    };
-    var getDocument = function getDocument() {
-      return doc;
-    };
-    return {
-      loadScripts: loadScripts,
-      deleteScripts: deleteScripts,
-      getDocument: getDocument
-    };
-  };
-  var createScriptLoader = function createScriptLoader() {
-    var cache = [];
-    var getDocumentScriptLoader = function getDocumentScriptLoader(doc) {
-      var loader = cache.find(function (l) {
-        return l.getDocument() === doc;
-      });
-      if (loader === void 0) {
-        loader = createDocumentScriptLoader(doc);
-        cache.push(loader);
+    }, "Let's draft a new email together from scratch."), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        fontSize: 13,
+        color: "var(--text-secondary)",
+        marginTop: 4
       }
-      return loader;
-    };
-    var loadList = function loadList(doc, items, delay, success, failure) {
-      var doLoad = function doLoad() {
-        return getDocumentScriptLoader(doc).loadScripts(items, success, failure);
-      };
-      if (delay > 0) {
-        setTimeout(doLoad, delay);
-      } else {
-        doLoad();
+    }, "Tell me what kind of email you'd like to write.")), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        alignSelf: "center",
+        width: 100,
+        height: 100,
+        borderRadius: "50%",
+        background: "var(--primary-lighter)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        margin: "20px 0",
+        color: "var(--primary-main)",
+        flexShrink: 0
       }
-    };
-    var reinitialize = function reinitialize() {
-      for (var loader = cache.pop(); loader != null; loader = cache.pop()) {
-        loader.deleteScripts();
+    }, /* @__PURE__ */React__namespace.createElement(CustomAiIcon, {
+      size: 52,
+      stroke: 1.5
+    })), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        textAlign: "center"
       }
-    };
-    return {
-      loadList: loadList,
-      reinitialize: reinitialize
-    };
-  };
-  var ScriptLoader = createScriptLoader();
-  var getTinymce = function getTinymce(view) {
-    var global = view;
-    return global && global.tinymce ? global.tinymce : null;
-  };
-  var __extends = /* @__PURE__ */function () {
-    var _extendStatics = function extendStatics(d, b) {
-      _extendStatics = Object.setPrototypeOf || {
-        __proto__: []
-      } instanceof Array && function (d2, b2) {
-        d2.__proto__ = b2;
-      } || function (d2, b2) {
-        for (var p in b2) if (Object.prototype.hasOwnProperty.call(b2, p)) d2[p] = b2[p];
-      };
-      return _extendStatics(d, b);
-    };
-    return function (d, b) {
-      if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-      _extendStatics(d, b);
-      function __() {
-        this.constructor = d;
+    }, /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        fontSize: 13,
+        color: "var(--text-secondary)",
+        lineHeight: 1.6
       }
-      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-  }();
-  var _assign = function __assign() {
-    _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];
+    }, "Give me the recipient, purpose, and key points", /* @__PURE__ */React__namespace.createElement("br", null), "and AI will generate a polished draft.")), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        borderTop: "1px solid var(--border-light)",
+        marginTop: 20,
+        paddingTop: 16,
+        display: "flex",
+        flexDirection: "column",
+        gap: 14
       }
-      return t;
-    };
-    return _assign.apply(this, arguments);
-  };
-  var Editor = /** @class */
-  function (_super) {
-    __extends(Editor2, _super);
-    function Editor2(props) {
-      var _a2, _b, _c;
-      var _this = _super.call(this, props) || this;
-      _this.rollbackTimer = void 0;
-      _this.valueCursor = void 0;
-      _this.rollbackChange = function () {
-        var editor = _this.editor;
-        var value = _this.props.value;
-        if (editor && value && value !== _this.currentContent) {
-          editor.undoManager.ignore(function () {
-            editor.setContent(value);
-            if (_this.valueCursor && (!_this.inline || editor.hasFocus())) {
-              try {
-                editor.selection.moveToBookmark(_this.valueCursor);
-              } catch (e) {}
-            }
-          });
-        }
-        _this.rollbackTimer = void 0;
-      };
-      _this.handleBeforeInput = function (_evt) {
-        if (_this.props.value !== void 0 && _this.props.value === _this.currentContent && _this.editor) {
-          if (!_this.inline || _this.editor.hasFocus()) {
-            try {
-              _this.valueCursor = _this.editor.selection.getBookmark(3);
-            } catch (e) {}
-          }
-        }
-      };
-      _this.handleBeforeInputSpecial = function (evt) {
-        if (evt.key === "Enter" || evt.key === "Backspace" || evt.key === "Delete") {
-          _this.handleBeforeInput(evt);
-        }
-      };
-      _this.handleEditorChange = function (_evt) {
-        var editor = _this.editor;
-        if (editor && editor.initialized) {
-          var newContent = editor.getContent();
-          if (_this.props.value !== void 0 && _this.props.value !== newContent && _this.props.rollback !== false) {
-            if (!_this.rollbackTimer) {
-              _this.rollbackTimer = window.setTimeout(_this.rollbackChange, typeof _this.props.rollback === "number" ? _this.props.rollback : 200);
-            }
-          }
-          if (newContent !== _this.currentContent) {
-            _this.currentContent = newContent;
-            if (isFunction(_this.props.onEditorChange)) {
-              _this.props.onEditorChange(newContent, editor);
-            }
-          }
-        }
-      };
-      _this.handleEditorChangeSpecial = function (evt) {
-        if (evt.key === "Backspace" || evt.key === "Delete") {
-          _this.handleEditorChange(evt);
-        }
-      };
-      _this.initialise = function (attempts) {
-        var _a3, _b2, _c2;
-        if (attempts === void 0) {
-          attempts = 0;
-        }
-        var target = _this.elementRef.current;
-        if (!target) {
-          return;
-        }
-        if (!isInDoc(target)) {
-          if (attempts === 0) {
-            setTimeout(function () {
-              return _this.initialise(1);
-            }, 1);
-          } else if (attempts < 100) {
-            setTimeout(function () {
-              return _this.initialise(attempts + 1);
-            }, 100);
-          } else {
-            throw new Error("tinymce can only be initialised when in a document");
-          }
-          return;
-        }
-        var tinymce = getTinymce(_this.view);
-        if (!tinymce) {
-          throw new Error("tinymce should have been loaded into global scope");
-        }
-        var finalInit = _assign(_assign({}, _this.props.init), {
-          selector: void 0,
-          target: target,
-          readonly: _this.props.disabled,
-          inline: _this.inline,
-          plugins: mergePlugins((_a3 = _this.props.init) === null || _a3 === void 0 ? void 0 : _a3.plugins, _this.props.plugins),
-          toolbar: (_b2 = _this.props.toolbar) !== null && _b2 !== void 0 ? _b2 : (_c2 = _this.props.init) === null || _c2 === void 0 ? void 0 : _c2.toolbar,
-          setup: function setup(editor) {
-            _this.editor = editor;
-            _this.bindHandlers({});
-            if (_this.inline && !isTextareaOrInput(target)) {
-              editor.once("PostRender", function (_evt) {
-                editor.setContent(_this.getInitialValue(), {
-                  no_events: true
-                });
-              });
-            }
-            if (_this.props.init && isFunction(_this.props.init.setup)) {
-              _this.props.init.setup(editor);
-            }
-          },
-          init_instance_callback: function init_instance_callback(editor) {
-            var _a4, _b3;
-            var initialValue = _this.getInitialValue();
-            _this.currentContent = (_a4 = _this.currentContent) !== null && _a4 !== void 0 ? _a4 : editor.getContent();
-            if (_this.currentContent !== initialValue) {
-              _this.currentContent = initialValue;
-              editor.setContent(initialValue);
-              editor.undoManager.clear();
-              editor.undoManager.add();
-              editor.setDirty(false);
-            }
-            var disabled = (_b3 = _this.props.disabled) !== null && _b3 !== void 0 ? _b3 : false;
-            setMode(_this.editor, disabled ? "readonly" : "design");
-            if (_this.props.init && isFunction(_this.props.init.init_instance_callback)) {
-              _this.props.init.init_instance_callback(editor);
-            }
-          }
-        });
-        if (!_this.inline) {
-          target.style.visibility = "";
+    }, FEATURES.map(function (f, i) {
+      return /* @__PURE__ */React__namespace.createElement("div", {
+        key: i,
+        style: {
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "flex-start",
+          gap: 10
         }
-        if (isTextareaOrInput(target)) {
-          target.value = _this.getInitialValue();
+      }, /* @__PURE__ */React__namespace.createElement("div", {
+        style: {
+          width: 28,
+          height: 28,
+          borderRadius: "50%",
+          background: "var(--background-softGrey)",
+          color: "var(--primary-main)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0
         }
-        tinymce.init(finalInit);
-      };
-      _this.id = _this.props.id || uuid("tiny-react");
-      _this.elementRef = React__namespace.createRef();
-      _this.inline = (_c = (_a2 = _this.props.inline) !== null && _a2 !== void 0 ? _a2 : (_b = _this.props.init) === null || _b === void 0 ? void 0 : _b.inline) !== null && _c !== void 0 ? _c : false;
-      _this.boundHandlers = {};
-      return _this;
-    }
-    Object.defineProperty(Editor2.prototype, "view", {
-      get: function get() {
-        var _a2, _b;
-        return (_b = (_a2 = this.elementRef.current) === null || _a2 === void 0 ? void 0 : _a2.ownerDocument.defaultView) !== null && _b !== void 0 ? _b : window;
-      },
-      enumerable: false,
-      configurable: true
-    });
-    Editor2.prototype.componentDidUpdate = function (prevProps) {
-      var _this = this;
-      var _a2, _b;
-      if (this.rollbackTimer) {
-        clearTimeout(this.rollbackTimer);
-        this.rollbackTimer = void 0;
-      }
-      if (this.editor) {
-        this.bindHandlers(prevProps);
-        if (this.editor.initialized) {
-          this.currentContent = (_a2 = this.currentContent) !== null && _a2 !== void 0 ? _a2 : this.editor.getContent();
-          if (typeof this.props.initialValue === "string" && this.props.initialValue !== prevProps.initialValue) {
-            this.editor.setContent(this.props.initialValue);
-            this.editor.undoManager.clear();
-            this.editor.undoManager.add();
-            this.editor.setDirty(false);
-          } else if (typeof this.props.value === "string" && this.props.value !== this.currentContent) {
-            var localEditor_1 = this.editor;
-            localEditor_1.undoManager.transact(function () {
-              var cursor;
-              if (!_this.inline || localEditor_1.hasFocus()) {
-                try {
-                  cursor = localEditor_1.selection.getBookmark(3);
-                } catch (e) {}
-              }
-              var valueCursor = _this.valueCursor;
-              localEditor_1.setContent(_this.props.value);
-              if (!_this.inline || localEditor_1.hasFocus()) {
-                for (var _i = 0, _a3 = [cursor, valueCursor]; _i < _a3.length; _i++) {
-                  var bookmark = _a3[_i];
-                  if (bookmark) {
-                    try {
-                      localEditor_1.selection.moveToBookmark(bookmark);
-                      _this.valueCursor = bookmark;
-                      break;
-                    } catch (e) {}
-                  }
-                }
-              }
-            });
-          }
-          if (this.props.disabled !== prevProps.disabled) {
-            var disabled = (_b = this.props.disabled) !== null && _b !== void 0 ? _b : false;
-            setMode(this.editor, disabled ? "readonly" : "design");
-          }
+      }, f.icon), /* @__PURE__ */React__namespace.createElement("div", {
+        style: {
+          flex: 1,
+          minWidth: 0
         }
-      }
-    };
-    Editor2.prototype.componentDidMount = function () {
-      var _this = this;
-      var _a2, _b, _c, _d, _e;
-      if (getTinymce(this.view) !== null) {
-        this.initialise();
-      } else if (Array.isArray(this.props.tinymceScriptSrc) && this.props.tinymceScriptSrc.length === 0) {
-        (_b = (_a2 = this.props).onScriptsLoadError) === null || _b === void 0 ? void 0 : _b.call(_a2, new Error("No `tinymce` global is present but the `tinymceScriptSrc` prop was an empty array."));
-      } else if ((_c = this.elementRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument) {
-        var successHandler = function successHandler() {
-          var _a3, _b2;
-          (_b2 = (_a3 = _this.props).onScriptsLoad) === null || _b2 === void 0 ? void 0 : _b2.call(_a3);
-          _this.initialise();
-        };
-        var errorHandler = function errorHandler(err) {
-          var _a3, _b2;
-          (_b2 = (_a3 = _this.props).onScriptsLoadError) === null || _b2 === void 0 ? void 0 : _b2.call(_a3, err);
-        };
-        ScriptLoader.loadList(this.elementRef.current.ownerDocument, this.getScriptSources(), (_e = (_d = this.props.scriptLoading) === null || _d === void 0 ? void 0 : _d.delay) !== null && _e !== void 0 ? _e : 0, successHandler, errorHandler);
-      }
-    };
-    Editor2.prototype.componentWillUnmount = function () {
-      var _this = this;
-      var editor = this.editor;
-      if (editor) {
-        editor.off(this.changeEvents(), this.handleEditorChange);
-        editor.off(this.beforeInputEvent(), this.handleBeforeInput);
-        editor.off("keypress", this.handleEditorChangeSpecial);
-        editor.off("keydown", this.handleBeforeInputSpecial);
-        editor.off("NewBlock", this.handleEditorChange);
-        Object.keys(this.boundHandlers).forEach(function (eventName) {
-          editor.off(eventName, _this.boundHandlers[eventName]);
-        });
-        this.boundHandlers = {};
-        editor.remove();
-        this.editor = void 0;
-      }
-    };
-    Editor2.prototype.render = function () {
-      return this.inline ? this.renderInline() : this.renderIframe();
-    };
-    Editor2.prototype.changeEvents = function () {
-      var _a2, _b, _c;
-      var isIE = (_c = (_b = (_a2 = getTinymce(this.view)) === null || _a2 === void 0 ? void 0 : _a2.Env) === null || _b === void 0 ? void 0 : _b.browser) === null || _c === void 0 ? void 0 : _c.isIE();
-      return isIE ? "change keyup compositionend setcontent CommentChange" : "change input compositionend setcontent CommentChange";
-    };
-    Editor2.prototype.beforeInputEvent = function () {
-      return isBeforeInputEventAvailable() ? "beforeinput SelectionChange" : "SelectionChange";
-    };
-    Editor2.prototype.renderInline = function () {
-      var _a2 = this.props.tagName,
-        tagName = _a2 === void 0 ? "div" : _a2;
-      return React__namespace.createElement(tagName, {
-        ref: this.elementRef,
-        id: this.id
-      });
-    };
-    Editor2.prototype.renderIframe = function () {
-      return React__namespace.createElement("textarea", {
-        ref: this.elementRef,
+      }, /* @__PURE__ */React__namespace.createElement("div", {
         style: {
-          visibility: "hidden"
-        },
-        name: this.props.textareaName,
-        id: this.id
-      });
-    };
-    Editor2.prototype.getScriptSources = function () {
-      var _a2, _b;
-      var async = (_a2 = this.props.scriptLoading) === null || _a2 === void 0 ? void 0 : _a2.async;
-      var defer = (_b = this.props.scriptLoading) === null || _b === void 0 ? void 0 : _b.defer;
-      if (this.props.tinymceScriptSrc !== void 0) {
-        if (typeof this.props.tinymceScriptSrc === "string") {
-          return [{
-            src: this.props.tinymceScriptSrc,
-            async: async,
-            defer: defer
-          }];
+          fontSize: 13,
+          fontWeight: 600,
+          color: "var(--text-primary)"
         }
-        return this.props.tinymceScriptSrc.map(function (item) {
-          if (typeof item === "string") {
-            return {
-              src: item,
-              async: async,
-              defer: defer
-            };
-          } else {
-            return item;
-          }
-        });
-      }
-      var channel = this.props.cloudChannel;
-      var apiKey = this.props.apiKey ? this.props.apiKey : "no-api-key";
-      var cloudTinyJs = "https://cdn.tiny.cloud/1/".concat(apiKey, "/tinymce/").concat(channel, "/tinymce.min.js");
-      return [{
-        src: cloudTinyJs,
-        async: async,
-        defer: defer
-      }];
-    };
-    Editor2.prototype.getInitialValue = function () {
-      if (typeof this.props.initialValue === "string") {
-        return this.props.initialValue;
-      } else if (typeof this.props.value === "string") {
-        return this.props.value;
-      } else {
-        return "";
-      }
-    };
-    Editor2.prototype.bindHandlers = function (prevProps) {
-      var _this = this;
-      if (this.editor !== void 0) {
-        configHandlers(this.editor, prevProps, this.props, this.boundHandlers, function (key) {
-          return _this.props[key];
-        });
-        var isValueControlled = function isValueControlled(p) {
-          return p.onEditorChange !== void 0 || p.value !== void 0;
-        };
-        var wasControlled = isValueControlled(prevProps);
-        var nowControlled = isValueControlled(this.props);
-        if (!wasControlled && nowControlled) {
-          this.editor.on(this.changeEvents(), this.handleEditorChange);
-          this.editor.on(this.beforeInputEvent(), this.handleBeforeInput);
-          this.editor.on("keydown", this.handleBeforeInputSpecial);
-          this.editor.on("keyup", this.handleEditorChangeSpecial);
-          this.editor.on("NewBlock", this.handleEditorChange);
-        } else if (wasControlled && !nowControlled) {
-          this.editor.off(this.changeEvents(), this.handleEditorChange);
-          this.editor.off(this.beforeInputEvent(), this.handleBeforeInput);
-          this.editor.off("keydown", this.handleBeforeInputSpecial);
-          this.editor.off("keyup", this.handleEditorChangeSpecial);
-          this.editor.off("NewBlock", this.handleEditorChange);
+      }, f.title), /* @__PURE__ */React__namespace.createElement("div", {
+        style: {
+          fontSize: 12,
+          color: "var(--text-secondary)",
+          marginTop: 2,
+          lineHeight: 1.5
         }
+      }, f.desc)));
+    })), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        borderTop: "1px solid var(--border-light)",
+        marginTop: 20,
+        paddingTop: 16
       }
-    };
-    Editor2.propTypes = EditorPropTypes;
-    Editor2.defaultProps = {
-      cloudChannel: "6"
-    };
-    return Editor2;
-  }(React__namespace.Component);
-  var useEditor = function useEditor(options) {
-    var isSimple = options.isSimple,
-      noImage = options.noImage;
-    var fontSize = 13;
-    var fontType = void 0;
-    var fontWeight = 0;
-    var lang = "en";
-    var imageUploadBasePath = getBaseUrl();
-    var supportImageTypes = "jpeg,JPEG,jpg,JPG,jpe,JPE,jfi,jif,jfif,png,PNG,gif,GIF,bmp,BMP,webp,WEBP";
-    var fontfamily = function () {
-      var baseFonts = "Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats;";
-      var localeFonts = {
-        ko: '맑은고딕=Malgun Gothic;돋움="돋움",Dotum;돋움체="돋움체",DotumChe;굴림="굴림",Gulim;굴림체="굴림체",GulimChe;바탕="바탕",Batang;바탕체="바탕체",BatangChe;궁서="궁서",Gungseo;',
-        en: "MS PGothic=MS PGothic,Sans-serif;Meiryo UI=Meiryo UI,Sans-serif;HiraKakuProN-W3=HiraKakuProN-W3;MS PMincho=MS PMincho,Sans-serif;MS Gothic=MS Gothic,Sans-serif;MS Mincho=MS Mincho,Sans-serif;",
-        ch: "Microsoft YaHei=Microsoft YaHei,Sans-serif;"
-      };
-      return localeFonts[lang] + baseFonts;
-    }();
-    var imageUploadUrl = function () {
-      var locationInfo = window.location;
-      var hostname = locationInfo.hostname;
-      if (hostname === "localhost" || hostname === "127.0.0.1") {
-        return "".concat(imageUploadBasePath, "/ngw/app/lib/tinymce/plugins/jbimages/ci/index.php?upload/dropupload");
-      } else {
-        return "".concat(imageUploadBasePath, "/ngw/app/lib/tinymce/plugins/jbimages/ci/index.php?upload/dropupload");
-      }
-    }();
-    var defaultPlugins;
-    var defaultToolbar = [];
-    if (isSimple) {
-      defaultPlugins = "hanbiroclip";
-      defaultToolbar = ["fontfamily fontsize", "bold italic underline", "forecolor backcolor", "bullist numlist", "emoticons"];
-    } else {
-      defaultPlugins = "checklist lists link image table code codesample insertdatetime emoticons fullscreen wordcount hanbiroclip";
-      defaultToolbar = ["fontfamily fontsize styles", "align  lineheight checklist", "bold italic underline", "forecolor backcolor", "bullist numlist", "link image table", "code codesample", "insertdatetime emoticons", "fullscreen", "removeformat"];
-    }
-    var setupFunction = function setupFunction(ed) {
-      ed.on("init", function () {
-        setTimeout(function () {
-          var editorBody = ed == null ? void 0 : ed.getBody();
-          var style = [];
-          {
-            ed.execCommand("FontSize", false, fontSize);
-            style.push("font-size: ".concat(fontSize, "pt;"));
-          }
-          if ((style == null ? void 0 : style.length) > 0) {
-            editorBody == null ? void 0 : editorBody.setAttribute("style", style.join(" "));
-          }
-          if (Number(fontWeight)) {
-            ed.execCommand("Bold");
-          }
-        }, 0);
-      });
-      if (noImage) {
-        ed.on("BeforeSetContent", function (e) {
-          if (/<img[\s\S]*?>/i.test(e == null ? void 0 : e.content)) {
-            ed.windowManager.alert("Image is not allowed!");
-          }
-        });
-      }
-    };
-    var filePickerHandle = function filePickerHandle(cb) {
-      var input = document.createElement("input");
-      input.setAttribute("type", "file");
-      input.setAttribute("accept", "image/*");
-      input.onchange = function (event) {
-        var fileInput = event.target;
-        var file = fileInput.files && fileInput.files[0];
-        if (file) {
-          var reader = new FileReader();
-          reader.onload = function () {
-            var id = "blobid" + (/* @__PURE__ */new Date()).getTime();
-            var blobCache = window.tinymce.activeEditor.editorUpload.blobCache;
-            var result = reader.result;
-            if (result && typeof result === "string") {
-              var base64 = result.split(",")[1];
-              var blobInfo = blobCache.create(id, file, base64);
-              blobCache.add(blobInfo);
-              cb(blobInfo.blobUri(), {
-                title: file.name
-              });
-            }
-          };
-          reader.readAsDataURL(file);
-        }
-      };
-      input.click();
-    };
-    return {
-      defaultPlugins: defaultPlugins,
-      defaultToolbar: defaultToolbar == null ? void 0 : defaultToolbar.join(" | "),
-      imageUploadBasePath: imageUploadBasePath,
-      imageUploadUrl: imageUploadUrl,
-      supportImageTypes: supportImageTypes,
-      fontfamily: fontfamily,
-      setupFunction: setupFunction,
-      filePickerHandle: filePickerHandle,
-      defaultFontType: fontType,
-      defaultFontSize: fontSize,
-      isFontWeightBold: Number(fontWeight) === 1
-    };
-  };
-  var TinyMceEditor = /*#__PURE__*/function (_React$Component) {
-    function TinyMceEditor(props) {
-      var _this1;
-      _classCallCheck(this, TinyMceEditor);
-      _this1 = _callSuper(this, TinyMceEditor, [props]);
-      __publicField(_this1, "editorRef", null);
-      // Các hàm public được expose ra (tương tự như useImperativeHandle trước đó)
-      __publicField(_this1, "getContent", function () {
-        var _a2;
-        var editorContent = ((_a2 = _this1.editorRef) == null ? void 0 : _a2.getContent()) || "";
-        return {
-          content: editorContent
-        };
-      });
-      __publicField(_this1, "getRawContent", function () {
-        var _a2;
-        var editorContent = ((_a2 = _this1.editorRef) == null ? void 0 : _a2.getContent()) || "";
-        return editorContent;
-      });
-      __publicField(_this1, "handleEditorChange", function (content) {
-        if (_this1.props.onChange) {
-          _this1.props.onChange(content);
-        }
-      });
-      _this1.state = {
-        showEditor: false
-      };
-      return _this1;
-    }
-    _inherits(TinyMceEditor, _React$Component);
-    return _createClass(TinyMceEditor, [{
-      key: "render",
-      value: function render() {
-        var _this10 = this;
-        var _this$props3 = this.props,
-          value = _this$props3.value,
-          _this$props3$isSimple = _this$props3.isSimple,
-          isSimple = _this$props3$isSimple === void 0 ? false : _this$props3$isSimple,
-          _this$props3$disabled = _this$props3.disabled,
-          disabled = _this$props3$disabled === void 0 ? false : _this$props3$disabled,
-          _this$props3$height = _this$props3.height,
-          height = _this$props3$height === void 0 ? 550 : _this$props3$height,
-          _this$props3$skin = _this$props3.skin,
-          skin = _this$props3$skin === void 0 ? "tinymce-5" : _this$props3$skin,
-          onClick = _this$props3.onClick,
-          style = _this$props3.style,
-          _this$props3$lang = _this$props3.lang,
-          lang = _this$props3$lang === void 0 ? "en" : _this$props3$lang,
-          _this$props3$placehol = _this$props3.placeholder,
-          placeholder = _this$props3$placehol === void 0 ? "" : _this$props3$placehol,
-          options = _this$props3.options,
-          _this$props3$noImage = _this$props3.noImage,
-          noImage = _this$props3$noImage === void 0 ? false : _this$props3$noImage;
-        var showEditor = this.state.showEditor;
-        var _useEditor = useEditor({
-            isSimple: isSimple,
-            noImage: noImage
-          }),
-          defaultPlugins = _useEditor.defaultPlugins,
-          defaultToolbar = _useEditor.defaultToolbar,
-          imageUploadBasePath = _useEditor.imageUploadBasePath,
-          imageUploadUrl = _useEditor.imageUploadUrl,
-          supportImageTypes = _useEditor.supportImageTypes,
-          fontfamily = _useEditor.fontfamily,
-          setupFunction = _useEditor.setupFunction,
-          filePickerHandle = _useEditor.filePickerHandle,
-          defaultFontSize = _useEditor.defaultFontSize;
-        return /* @__PURE__ */React.createElement("div", {
-          style: __spreadValues({
-            position: "relative",
-            borderRadius: 1,
-            height: height
-          }, style)
-        }, /* @__PURE__ */React.createElement("style", null, "\n          .tox.tox-tinymce {\n            border-radius: 4px;\n          }\n          "), !showEditor && /* @__PURE__ */React.createElement(LoadingContainer, {
-          style: {
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            zIndex: 12,
-            background: "#ffffff",
-            border: "1px solid var(--border-main)",
-            borderRadius: 4,
-            height: (options == null ? void 0 : options.height) || height
-          }
-        }), /* @__PURE__ */React.createElement(Editor, {
-          disabled: disabled,
-          onEditorChange: this.handleEditorChange,
-          value: value,
-          onInit: function onInit(evt, editor) {
-            _this10.setState({
-              showEditor: true
-            });
-            _this10.editorRef = editor;
-          },
-          onClick: onClick,
-          plugins: defaultPlugins,
-          init: __spreadProps(__spreadValues({
-            text_patterns: false,
-            placeholder: placeholder,
-            indent: false,
-            skin: skin,
-            visual: false,
-            promotion: false,
-            language: lang || "en",
-            // language_url: language
-            //   ? `${process.env.PUBLIC_URL || ""}/js/tinymce/langs/${language}.js`
-            //   : undefined,
-            branding: false,
-            elementpath: false,
-            height: height,
-            menubar: !isSimple,
-            verify_html: true,
-            toolbar: defaultToolbar,
-            toolbar_mode: "sliding",
-            images_upload_base_path: imageUploadBasePath,
-            images_upload_url: imageUploadUrl,
-            images_upload_credentials: true,
-            automatic_uploads: true,
-            images_file_types: supportImageTypes,
-            font_family_formats: fontfamily,
-            paste_data_images: true,
-            a11y_advanced_options: true,
-            image_advtab: true,
-            file_picker_types: "file image media",
-            file_picker_callback: filePickerHandle,
-            forced_root_block_attrs: {
-              style: "margin: 0;"
-            },
-            font_size_formats: "6pt 8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 36pt 48pt 72pt"
-          }, noImage && {
-            invalid_elements: "img"
-          }), {
-            content_style: "\n            ".concat(scrollStyle, "\n            [data-mce-placeholder]::before {\n              color: rgba(0, 23, 55, 0.42) !important;\n            }\n            body { \n              font-family: ", "Helvetica,Arial,sans-serif", "; \n              font-size: ").concat(defaultFontSize, "pt;\n              line-height: unset;\n              background: var(--background-softGrey);\n              color: var(--text-primary);\n            }"),
-            setup: setupFunction,
-            relative_urls: false,
-            remove_script_host: false,
-            document_base_url: "/"
-          })
-        }));
+    }, /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        fontSize: 12,
+        color: "var(--text-secondary)",
+        marginBottom: 8
       }
-    }]);
-  }(React.Component);
+    }, "💡 Try these prompts to get a draft right away"), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 8
+      }
+    }, SUGGESTIONS.map(function (s, i) {
+      return /* @__PURE__ */React__namespace.createElement("button", {
+        key: i,
+        type: "button",
+        onClick: function onClick() {
+          return onSelectPrompt(s);
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          width: "100%",
+          padding: "10px 12px",
+          borderRadius: 8,
+          border: "none",
+          background: "var(--primary-lighter)",
+          color: "var(--text-primary)",
+          fontSize: 13,
+          textAlign: "left",
+          cursor: "pointer",
+          fontFamily: "inherit"
+        }
+      }, /* @__PURE__ */React__namespace.createElement(MessageSquare, {
+        size: 14,
+        style: {
+          color: "var(--primary-main)",
+          flexShrink: 0
+        }
+      }), /* @__PURE__ */React__namespace.createElement("span", null, s));
+    }))));
+  };
   var apiGet = function apiGet(url, opts) {
-    return __async(_this0, null, /*#__PURE__*/_regenerator().m(function _callee3() {
+    return __async(_this9, null, /*#__PURE__*/_regenerator().m(function _callee3() {
       var response, data;
       return _regenerator().w(function (_context3) {
         while (1) switch (_context3.n) {
@@ -4565,205 +4791,38 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }, _callee3);
     }));
   };
-  var SettingPopper = /*#__PURE__*/function (_React__namespace$Com2) {
-    function SettingPopper(props) {
-      var _this11;
-      _classCallCheck(this, SettingPopper);
-      _this11 = _callSuper(this, SettingPopper, [props]);
-      __publicField(_this11, "containerRef");
-      __publicField(_this11, "popperRef");
-      __publicField(_this11, "getLanguageOptions", function () {
-        return __async(_this11, null, /*#__PURE__*/_regenerator().m(function _callee4() {
-          var _a2, _yield$apiGet, data, langs;
-          return _regenerator().w(function (_context4) {
-            while (1) switch (_context4.n) {
-              case 0:
-                _context4.n = 1;
-                return apiGet("/email/ai/langlist");
-              case 1:
-                _yield$apiGet = _context4.v;
-                data = _yield$apiGet.data;
-                if (data == null ? void 0 : data.list) {
-                  langs = (_a2 = Object.keys(data == null ? void 0 : data.list)) == null ? void 0 : _a2.map(function (_key, i) {
-                    var _a3;
-                    var _item = (_a3 = data == null ? void 0 : data.list) == null ? void 0 : _a3[_key];
-                    return {
-                      value: _key,
-                      label: _item == null ? void 0 : _item.name
-                    };
-                  });
-                  this.setState({
-                    languageOptions: langs
-                  });
-                }
-              case 2:
-                return _context4.a(2);
-            }
-          }, _callee4, this);
-        }));
-      });
-      __publicField(_this11, "handleClickOutside", function (event) {
-        var target = event.target;
-        if (_this11.containerRef.current && !_this11.containerRef.current.contains(target) && (!_this11.popperRef.current || !_this11.popperRef.current.contains(target))) {
-          _this11.setState({
-            open: false
-          });
-        }
-      });
-      __publicField(_this11, "togglePopper", function () {
-        _this11.setState(function (prevState) {
-          return {
-            open: !prevState.open
-          };
-        });
-      });
-      __publicField(_this11, "handleLangChange", function (e) {
-        var selected = _this11.state.languageOptions.find(function (opt) {
-          return opt.value === e.target.value;
-        });
-        _this11.props.setLang(selected || null);
-      });
-      _this11.state = {
-        open: false,
-        languageOptions: []
-      };
-      _this11.containerRef = React__namespace.createRef();
-      _this11.popperRef = React__namespace.createRef();
-      return _this11;
-    }
-    _inherits(SettingPopper, _React__namespace$Com2);
-    return _createClass(SettingPopper, [{
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        document.addEventListener("mousedown", this.handleClickOutside);
-        this.getLanguageOptions();
-      }
-    }, {
-      key: "componentWillUnmount",
-      value: function componentWillUnmount() {
-        document.removeEventListener("mousedown", this.handleClickOutside);
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        var _this$props4 = this.props,
-          lang = _this$props4.lang,
-          originalEmail = _this$props4.originalEmail,
-          setOriginalEmail = _this$props4.setOriginalEmail,
-          getEditorContent = _this$props4.getEditorContent,
-          parentRef = _this$props4.parentRef;
-        var _this$state2 = this.state,
-          open = _this$state2.open,
-          languageOptions = _this$state2.languageOptions;
-        var popperTop = 0;
-        var popperLeft = 0;
-        var popperWidth = 320;
-        if (open && this.containerRef.current) {
-          var rect = this.containerRef.current.getBoundingClientRect();
-          popperTop = rect.top + (window.scrollY || document.documentElement.scrollTop) - 8;
-          popperLeft = rect.left + (window.scrollX || document.documentElement.scrollLeft);
-          if (parentRef && parentRef.current) {
-            var parentRect = parentRef.current.getBoundingClientRect();
-            popperWidth = parentRect.width - 16;
-            popperLeft = parentRect.left + 8;
-          }
-        }
-        return /* @__PURE__ */React__namespace.createElement("div", {
-          ref: this.containerRef,
-          style: {
-            position: "relative",
-            display: "inline-block"
-          }
-        }, /* @__PURE__ */React__namespace.createElement("button", {
-          type: "button",
-          onClick: this.togglePopper,
-          className: "icon-button small"
-        }, /* @__PURE__ */React__namespace.createElement(Settings, {
-          size: 16
-        })), open && this.containerRef.current && ReactDOM__namespace.createPortal(/* @__PURE__ */React__namespace.createElement("div", {
-          ref: this.popperRef,
-          style: {
-            position: "absolute",
-            top: popperTop,
-            left: popperLeft,
-            transform: "translateY(-100%)",
-            zIndex: 1051,
-            background: "#fff",
-            border: "1px solid #ddd",
-            boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
-            borderRadius: 8,
-            padding: 16,
-            width: popperWidth,
-            boxSizing: "border-box"
-          }
-        }, /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: 12
-          }
-        }, /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: 4
-          }
-        }, /* @__PURE__ */React__namespace.createElement("span", {
-          style: {
-            fontSize: 12,
-            fontWeight: 500
-            // color: "var(--text-secondary)",
-          }
-        }, "Language"), /* @__PURE__ */React__namespace.createElement("select", {
-          name: "language",
-          value: lang ? lang.value : "",
-          onChange: this.handleLangChange
-        }, /* @__PURE__ */React__namespace.createElement("option", {
-          value: "",
-          disabled: true
-        }, "Select Language"), languageOptions.map(function (opt) {
-          return /* @__PURE__ */React__namespace.createElement("option", {
-            key: opt.value,
-            value: opt.value
-          }, opt.label);
-        }))), /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: 4
-          }
-        }, /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between"
-          }
-        }, /* @__PURE__ */React__namespace.createElement("span", {
-          style: {
-            fontSize: 12,
-            fontWeight: 500
-            // color: "var(--text-secondary)",
-          }
-        }, "AI Context"), getEditorContent && /* @__PURE__ */React__namespace.createElement(Tooltip, {
-          title: "Copy from origin email"
-        }, /* @__PURE__ */React__namespace.createElement("button", {
-          type: "button",
-          onClick: function onClick() {
-            var currentContent = getEditorContent();
-            setOriginalEmail(currentContent);
-          },
-          className: "icon-button small"
-        }, /* @__PURE__ */React__namespace.createElement(Copy, null)))), /* @__PURE__ */React__namespace.createElement(TinyMceEditor, {
-          value: originalEmail,
-          onChange: function onChange(val) {
-            return setOriginalEmail(val);
-          },
-          height: 350,
-          isSimple: true
-        })))), document.body));
-      }
-    }]);
-  }(React__namespace.Component);
+  var TONE_OPTIONS = [{
+    label: "Formal",
+    value: "formal"
+  }, {
+    label: "Polite",
+    value: "polite"
+  }, {
+    label: "Neutral",
+    value: "neutral"
+  }, {
+    label: "Friendly",
+    value: "friendly"
+  }, {
+    label: "Firm",
+    value: "firm"
+  }, {
+    label: "Apology",
+    value: "apologetic"
+  }];
+  var LENGTH_OPTIONS = [{
+    label: "Short",
+    value: "short"
+  }, {
+    label: "Medium",
+    value: "medium"
+  }, {
+    label: "Long",
+    value: "long"
+  }, {
+    label: "1-liner",
+    value: "one_liner"
+  }];
   var AI_LANG_FLAGS = [{
     label: "English",
     value: "en",
@@ -6382,42 +6441,471 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     us: USFlag,
     vn: VNFlag
   };
-  var CountryFlag = function CountryFlag(props) {
-    var _a2 = props,
-      flagCode = _a2.flagCode,
-      style = _a2.style,
-      rest = __objRest(_a2, ["flagCode", "style"]);
-    if (!flagCode) return null;
-    var FlagComponent = FlagMap[flagCode];
-    if (!FlagComponent) return null;
-    return /* @__PURE__ */React__namespace.createElement(FlagComponent, __spreadValues({
-      style: style
-    }, rest));
+  var CountryFlag = function CountryFlag(props) {
+    var _a2 = props,
+      flagCode = _a2.flagCode,
+      style = _a2.style,
+      rest = __objRest(_a2, ["flagCode", "style"]);
+    if (!flagCode) return null;
+    var FlagComponent = FlagMap[flagCode];
+    if (!FlagComponent) return null;
+    return /* @__PURE__ */React__namespace.createElement(FlagComponent, __spreadValues({
+      style: style
+    }, rest));
+  };
+  var getFlagCode = function getFlagCode(value) {
+    var _a2;
+    return (_a2 = AI_LANG_FLAGS.find(function (l) {
+      return l.value === value;
+    })) == null ? void 0 : _a2.flagCode;
+  };
+  var LanguageSelect = /*#__PURE__*/function (_React__namespace$Com2) {
+    function LanguageSelect(props) {
+      var _this0;
+      _classCallCheck(this, LanguageSelect);
+      _this0 = _callSuper(this, LanguageSelect, [props]);
+      __publicField(_this0, "ref");
+      __publicField(_this0, "handleClickOutside", function (e) {
+        if (_this0.ref.current && !_this0.ref.current.contains(e.target)) {
+          _this0.setState({
+            open: false
+          });
+        }
+      });
+      __publicField(_this0, "toggle", function () {
+        _this0.setState(function (s) {
+          return {
+            open: !s.open
+          };
+        });
+      });
+      __publicField(_this0, "pick", function (opt) {
+        _this0.props.onChange(opt);
+        _this0.setState({
+          open: false
+        });
+      });
+      _this0.state = {
+        open: false
+      };
+      _this0.ref = React__namespace.createRef();
+      return _this0;
+    }
+    _inherits(LanguageSelect, _React__namespace$Com2);
+    return _createClass(LanguageSelect, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        document.addEventListener("mousedown", this.handleClickOutside);
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        document.removeEventListener("mousedown", this.handleClickOutside);
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this1 = this;
+        var _this$props3 = this.props,
+          value = _this$props3.value,
+          options = _this$props3.options;
+        var open = this.state.open;
+        var selectedFlag = getFlagCode(value == null ? void 0 : value.value);
+        return /* @__PURE__ */React__namespace.createElement("div", {
+          ref: this.ref,
+          style: {
+            position: "relative",
+            width: "100%"
+          }
+        }, /* @__PURE__ */React__namespace.createElement("button", {
+          type: "button",
+          onClick: this.toggle,
+          style: {
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            padding: "8px 10px",
+            border: "1px solid var(--border-main)",
+            borderRadius: 4,
+            background: "#fff",
+            cursor: "pointer",
+            fontFamily: "inherit",
+            fontSize: 13,
+            color: "var(--text-primary)"
+          }
+        }, selectedFlag && /* @__PURE__ */React__namespace.createElement(CountryFlag, {
+          flagCode: selectedFlag,
+          style: {
+            width: 18,
+            height: 14,
+            flexShrink: 0
+          }
+        }), /* @__PURE__ */React__namespace.createElement("span", {
+          style: {
+            flex: 1,
+            textAlign: "left"
+          }
+        }, (value == null ? void 0 : value.label) || "Select Language"), /* @__PURE__ */React__namespace.createElement(ChevronDown, {
+          size: 14,
+          style: {
+            transform: open ? "rotate(180deg)" : "none",
+            transition: "transform 0.15s"
+          }
+        })), open && /* @__PURE__ */React__namespace.createElement("div", {
+          style: {
+            position: "absolute",
+            top: "calc(100% + 4px)",
+            left: 0,
+            right: 0,
+            maxHeight: 220,
+            overflowY: "auto",
+            border: "1px solid var(--border-main)",
+            borderRadius: 4,
+            background: "#fff",
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
+            zIndex: 2
+          }
+        }, options.map(function (opt) {
+          var fc = getFlagCode(opt.value);
+          var isActive = (value == null ? void 0 : value.value) === opt.value;
+          return /* @__PURE__ */React__namespace.createElement("button", {
+            key: opt.value,
+            type: "button",
+            onClick: function onClick() {
+              return _this1.pick(opt);
+            },
+            className: "chat-ai-lang-option" + (isActive ? " is-active" : ""),
+            style: {
+              width: "100%",
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "8px 10px",
+              border: "none",
+              background: isActive ? "var(--primary-lighter)" : void 0,
+              cursor: "pointer",
+              fontFamily: "inherit",
+              fontSize: 13,
+              textAlign: "left",
+              color: "var(--text-primary)",
+              fontWeight: 400
+            }
+          }, fc && /* @__PURE__ */React__namespace.createElement(CountryFlag, {
+            flagCode: fc,
+            style: {
+              width: 18,
+              height: 14,
+              flexShrink: 0
+            }
+          }), /* @__PURE__ */React__namespace.createElement("span", null, opt.label));
+        })));
+      }
+    }]);
+  }(React__namespace.Component);
+  var ChipGroup = function ChipGroup(_ref28) {
+    var options = _ref28.options,
+      selected = _ref28.selected,
+      onSelect = _ref28.onSelect,
+      iconMap = _ref28.iconMap,
+      _ref28$columns = _ref28.columns,
+      columns = _ref28$columns === void 0 ? 3 : _ref28$columns;
+    return /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(".concat(columns, ", minmax(0, 1fr))"),
+        gap: 6
+      }
+    }, options.map(function (opt) {
+      var isActive = (selected == null ? void 0 : selected.value) === opt.value;
+      return /* @__PURE__ */React__namespace.createElement("button", {
+        key: opt.value,
+        type: "button",
+        onClick: function onClick() {
+          return onSelect(opt);
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 6,
+          padding: "8px 10px",
+          borderRadius: 4,
+          border: isActive ? "1px solid var(--primary-main)" : "1px solid var(--border-main)",
+          background: isActive ? "var(--primary-lighter)" : "#fff",
+          color: isActive ? "var(--primary-main)" : "var(--text-primary)",
+          fontWeight: isActive ? 600 : 400,
+          fontSize: 13,
+          cursor: "pointer",
+          fontFamily: "inherit",
+          transition: "background 0.15s, border-color 0.15s",
+          minWidth: 0
+        }
+      }, /* @__PURE__ */React__namespace.createElement("span", {
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          flexShrink: 0
+        }
+      }, iconMap[opt.value]), /* @__PURE__ */React__namespace.createElement("span", {
+        style: {
+          whiteSpace: "nowrap"
+        }
+      }, opt.label));
+    }));
+  };
+  var ICON_SIZE = 14;
+  var TONE_ICONS = {
+    formal: /* @__PURE__ */React__namespace.createElement(Award, {
+      size: ICON_SIZE
+    }),
+    polite: /* @__PURE__ */React__namespace.createElement(Heart, {
+      size: ICON_SIZE
+    }),
+    neutral: /* @__PURE__ */React__namespace.createElement(Compass, {
+      size: ICON_SIZE
+    }),
+    friendly: /* @__PURE__ */React__namespace.createElement(Smile, {
+      size: ICON_SIZE
+    }),
+    firm: /* @__PURE__ */React__namespace.createElement(ThumbsUp, {
+      size: ICON_SIZE
+    }),
+    apologetic: /* @__PURE__ */React__namespace.createElement(Frown, {
+      size: ICON_SIZE
+    })
   };
-  var ChatAIDraft = /*#__PURE__*/function (_React__namespace$Com3) {
+  var LENGTH_ICONS = {
+    short: /* @__PURE__ */React__namespace.createElement(Scissors, {
+      size: ICON_SIZE
+    }),
+    medium: /* @__PURE__ */React__namespace.createElement(AlignJustify, {
+      size: ICON_SIZE
+    }),
+    long: /* @__PURE__ */React__namespace.createElement(FileText, {
+      size: ICON_SIZE
+    }),
+    one_liner: /* @__PURE__ */React__namespace.createElement(Zap, {
+      size: ICON_SIZE
+    })
+  };
+  var SettingPopper = /*#__PURE__*/function (_React__namespace$Com3) {
+    function SettingPopper(props) {
+      var _this10;
+      _classCallCheck(this, SettingPopper);
+      _this10 = _callSuper(this, SettingPopper, [props]);
+      __publicField(_this10, "containerRef");
+      __publicField(_this10, "popperRef");
+      __publicField(_this10, "getLanguageOptions", function () {
+        return __async(_this10, null, /*#__PURE__*/_regenerator().m(function _callee4() {
+          var _a2, _yield$apiGet, data, langs;
+          return _regenerator().w(function (_context4) {
+            while (1) switch (_context4.n) {
+              case 0:
+                _context4.n = 1;
+                return apiGet("/email/ai/langlist");
+              case 1:
+                _yield$apiGet = _context4.v;
+                data = _yield$apiGet.data;
+                if (data == null ? void 0 : data.list) {
+                  langs = (_a2 = Object.keys(data == null ? void 0 : data.list)) == null ? void 0 : _a2.map(function (_key) {
+                    var _a3;
+                    var _item = (_a3 = data == null ? void 0 : data.list) == null ? void 0 : _a3[_key];
+                    return {
+                      value: _key,
+                      label: _item == null ? void 0 : _item.name
+                    };
+                  });
+                  this.setState({
+                    languageOptions: langs
+                  });
+                }
+              case 2:
+                return _context4.a(2);
+            }
+          }, _callee4, this);
+        }));
+      });
+      __publicField(_this10, "handleClickOutside", function (event) {
+        var target = event.target;
+        if (_this10.containerRef.current && !_this10.containerRef.current.contains(target) && (!_this10.popperRef.current || !_this10.popperRef.current.contains(target))) {
+          _this10.setState({
+            open: false
+          });
+        }
+      });
+      __publicField(_this10, "togglePopper", function () {
+        _this10.setState(function (prevState) {
+          return {
+            open: !prevState.open
+          };
+        });
+      });
+      _this10.state = {
+        open: false,
+        languageOptions: []
+      };
+      _this10.containerRef = React__namespace.createRef();
+      _this10.popperRef = React__namespace.createRef();
+      return _this10;
+    }
+    _inherits(SettingPopper, _React__namespace$Com3);
+    return _createClass(SettingPopper, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        document.addEventListener("mousedown", this.handleClickOutside);
+        this.getLanguageOptions();
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        document.removeEventListener("mousedown", this.handleClickOutside);
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this$props4 = this.props,
+          lang = _this$props4.lang,
+          tone = _this$props4.tone,
+          length = _this$props4.length,
+          parentRef = _this$props4.parentRef,
+          setLang = _this$props4.setLang,
+          setTone = _this$props4.setTone,
+          setLength = _this$props4.setLength;
+        var _this$state2 = this.state,
+          open = _this$state2.open,
+          languageOptions = _this$state2.languageOptions;
+        var popperTop = 0;
+        var popperLeft = 0;
+        var popperWidth = 320;
+        if (open && this.containerRef.current) {
+          var rect = this.containerRef.current.getBoundingClientRect();
+          popperTop = rect.top + (window.scrollY || document.documentElement.scrollTop) - 8;
+          popperLeft = rect.left + (window.scrollX || document.documentElement.scrollLeft);
+          if (parentRef && parentRef.current) {
+            var parentRect = parentRef.current.getBoundingClientRect();
+            popperWidth = parentRect.width - 16;
+            popperLeft = parentRect.left + 8;
+          }
+        }
+        return /* @__PURE__ */React__namespace.createElement("div", {
+          ref: this.containerRef,
+          style: {
+            position: "relative",
+            display: "inline-block"
+          }
+        }, /* @__PURE__ */React__namespace.createElement("button", {
+          type: "button",
+          onClick: this.togglePopper,
+          className: "icon-button small"
+        }, /* @__PURE__ */React__namespace.createElement(Settings, {
+          size: 16
+        })), open && this.containerRef.current && ReactDOM__namespace.createPortal(/* @__PURE__ */React__namespace.createElement("div", {
+          ref: this.popperRef,
+          style: {
+            position: "absolute",
+            top: popperTop,
+            left: popperLeft,
+            transform: "translateY(-100%)",
+            zIndex: 1051,
+            background: "#fff",
+            border: "1px solid #ddd",
+            boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
+            borderRadius: 8,
+            padding: 16,
+            width: popperWidth,
+            boxSizing: "border-box"
+          }
+        }, /* @__PURE__ */React__namespace.createElement("div", {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 12
+          }
+        }, /* @__PURE__ */React__namespace.createElement("div", {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 6
+          }
+        }, /* @__PURE__ */React__namespace.createElement("span", {
+          style: {
+            fontSize: 12,
+            fontWeight: 600
+          }
+        }, "Language"), /* @__PURE__ */React__namespace.createElement(LanguageSelect, {
+          value: lang,
+          options: languageOptions,
+          onChange: function onChange(opt) {
+            return setLang(opt);
+          }
+        })), /* @__PURE__ */React__namespace.createElement("div", {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 6
+          }
+        }, /* @__PURE__ */React__namespace.createElement("span", {
+          style: {
+            fontSize: 12,
+            fontWeight: 600
+          }
+        }, "Tone"), /* @__PURE__ */React__namespace.createElement(ChipGroup, {
+          options: TONE_OPTIONS,
+          selected: tone,
+          onSelect: function onSelect(opt) {
+            return setTone(opt);
+          },
+          iconMap: TONE_ICONS
+        })), /* @__PURE__ */React__namespace.createElement("div", {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 6
+          }
+        }, /* @__PURE__ */React__namespace.createElement("span", {
+          style: {
+            fontSize: 12,
+            fontWeight: 600
+          }
+        }, "Length"), /* @__PURE__ */React__namespace.createElement(ChipGroup, {
+          options: LENGTH_OPTIONS,
+          selected: length,
+          onSelect: function onSelect(opt) {
+            return setLength(opt);
+          },
+          iconMap: LENGTH_ICONS,
+          columns: 4
+        })))), document.body));
+      }
+    }]);
+  }(React__namespace.Component);
+  var ChatAIDraft = /*#__PURE__*/function (_React__namespace$Com4) {
     function ChatAIDraft(props) {
-      var _this12;
+      var _this11;
       _classCallCheck(this, ChatAIDraft);
-      _this12 = _callSuper(this, ChatAIDraft, [props]);
-      __publicField(_this12, "rootRef");
-      __publicField(_this12, "setAIContext", function (html2) {
-        _this12.setState({
-          originalEmail: html2
-        });
+      _this11 = _callSuper(this, ChatAIDraft, [props]);
+      __publicField(_this11, "rootRef");
+      __publicField(_this11, "textareaRef");
+      __publicField(_this11, "adjustTextareaHeight", function () {
+        var el = _this11.textareaRef.current;
+        if (!el) return;
+        el.style.height = "auto";
+        el.style.height = "".concat(Math.min(el.scrollHeight, 160), "px");
       });
-      __publicField(_this12, "handleMessageChange", function (e) {
-        _this12.setState({
+      __publicField(_this11, "handleMessageChange", function (e) {
+        _this11.setState({
           message: e.target.value
-        });
+        }, _this11.adjustTextareaHeight);
       });
-      __publicField(_this12, "handleSubmit", function () {
-        return __async(_this12, null, /*#__PURE__*/_regenerator().m(function _callee5() {
-          var _this13 = this;
-          var _this$state3, message, messages, lang, originalEmail, conversationId, newId, newMessage, currentItems, params, setContent, setIsLoading, setConversationId;
+      __publicField(_this11, "handleSubmit", function () {
+        return __async(_this11, null, /*#__PURE__*/_regenerator().m(function _callee5() {
+          var _this12 = this;
+          var _this$state3, message, messages, lang, tone, length, conversationId, newId, newMessage, currentItems, params, setContent, setIsLoading, setConversationId;
           return _regenerator().w(function (_context5) {
             while (1) switch (_context5.n) {
               case 0:
-                _this$state3 = this.state, message = _this$state3.message, messages = _this$state3.messages, lang = _this$state3.lang, originalEmail = _this$state3.originalEmail, conversationId = _this$state3.conversationId;
+                _this$state3 = this.state, message = _this$state3.message, messages = _this$state3.messages, lang = _this$state3.lang, tone = _this$state3.tone, length = _this$state3.length, conversationId = _this$state3.conversationId;
                 if (message.trim()) {
                   _context5.n = 1;
                   break;
@@ -6442,14 +6930,19 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                 params = {
                   query: message,
                   default_language: lang ? lang.value : "KR",
-                  original_email: originalEmail,
                   debug_grpc: true
                 };
+                if (tone) {
+                  params.tone = tone.value;
+                }
+                if (length) {
+                  params.length = length.value;
+                }
                 if (conversationId) {
                   params.conversation_id = conversationId;
                 }
                 setContent = function setContent(nContent) {
-                  _this13.setState(function (prevState) {
+                  _this12.setState(function (prevState) {
                     var updatedMessages = prevState.messages.map(function (m) {
                       return m.id === newId ? __spreadProps(__spreadValues({}, m), {
                         subject: "Some thing not used",
@@ -6464,7 +6957,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                   });
                 };
                 setIsLoading = function setIsLoading(loading) {
-                  _this13.setState(function (prevState) {
+                  _this12.setState(function (prevState) {
                     var updatedMessages = prevState.messages.map(function (m) {
                       return m.id === newId ? __spreadProps(__spreadValues({}, m), {
                         isLoading: loading
@@ -6476,7 +6969,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                   });
                 };
                 setConversationId = function setConversationId(id) {
-                  _this13.setState({
+                  _this12.setState({
                     conversationId: id
                   });
                 };
@@ -6496,40 +6989,57 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           }, _callee5, this);
         }));
       });
-      __publicField(_this12, "handleKeyDown", function (event) {
-        if (!event.shiftKey && event.key === "Enter" && !_this12.state.isSending) {
+      __publicField(_this11, "handleKeyDown", function (event) {
+        if (!event.shiftKey && event.key === "Enter" && !_this11.state.isSending) {
           event.preventDefault();
-          _this12.handleSubmit();
+          _this11.handleSubmit();
         }
       });
-      __publicField(_this12, "setLang", function (lang) {
-        _this12.setState({
+      __publicField(_this11, "setLang", function (lang) {
+        _this11.setState({
           lang: lang
         });
       });
-      __publicField(_this12, "setOriginalEmail", function (email) {
-        _this12.setState({
-          originalEmail: email
+      __publicField(_this11, "setTone", function (tone) {
+        _this11.setState({
+          tone: tone
         });
       });
-      _this12.rootRef = React__namespace.createRef();
+      __publicField(_this11, "setLength", function (length) {
+        _this11.setState({
+          length: length
+        });
+      });
+      _this11.rootRef = React__namespace.createRef();
+      _this11.textareaRef = React__namespace.createRef();
       var lang = (AI_LANG_FLAGS == null ? void 0 : AI_LANG_FLAGS.find(function (_item) {
         return (_item == null ? void 0 : _item.value) === (props == null ? void 0 : props.defaultLang);
       })) || AI_LANG_FLAGS[0];
-      _this12.state = {
+      _this11.state = {
         message: "",
         messages: [],
         isSending: false,
         lang: lang,
-        conversationId: "",
-        originalEmail: ""
+        tone: TONE_OPTIONS[2],
+        // Neutral
+        length: LENGTH_OPTIONS[1],
+        // Medium
+        conversationId: ""
       };
-      return _this12;
+      return _this11;
     }
-    _inherits(ChatAIDraft, _React__namespace$Com3);
+    _inherits(ChatAIDraft, _React__namespace$Com4);
     return _createClass(ChatAIDraft, [{
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(_, prevState) {
+        if (prevState.message !== this.state.message) {
+          this.adjustTextareaHeight();
+        }
+      }
+    }, {
       key: "render",
       value: function render() {
+        var _this13 = this;
         var _a2;
         var _this$props5 = this.props,
           onApply = _this$props5.onApply,
@@ -6539,7 +7049,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           messages = _this$state4.messages,
           isSending = _this$state4.isSending,
           lang = _this$state4.lang,
-          originalEmail = _this$state4.originalEmail;
+          tone = _this$state4.tone,
+          length = _this$state4.length;
         var flagCode = (_a2 = AI_LANG_FLAGS == null ? void 0 : AI_LANG_FLAGS.find(function (_item) {
           return (_item == null ? void 0 : _item.value) === (lang == null ? void 0 : lang.value);
         })) == null ? void 0 : _a2.flagCode;
@@ -6558,53 +7069,42 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           items: messages,
           onApply: onApply,
           getEditorContent: getEditorContent
-        }) : /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            flex: 1,
-            minHeight: 0,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            color: "var(--grey-light)"
-          }
-        }, /* @__PURE__ */React__namespace.createElement(CustomAiIcon, {
-          size: 46
-        }), /* @__PURE__ */React__namespace.createElement("h2", {
-          style: {
-            marginTop: 16,
-            fontWeight: 600,
-            color: "inherit",
-            fontSize: 18
+        }) : /* @__PURE__ */React__namespace.createElement(EmptyState, {
+          onSelectPrompt: function onSelectPrompt(text) {
+            return _this13.setState({
+              message: text
+            });
           }
-        }, "Build with Agent")), /* @__PURE__ */React__namespace.createElement("div", {
+        }), /* @__PURE__ */React__namespace.createElement("div", {
           style: {
             width: "100%",
-            border: "1px solid var(--border-main)",
-            borderRadius: 4,
+            borderRadius: 12,
             overflow: "hidden",
-            background: "#fff",
+            background: "var(--background-softGrey)",
             display: "flex",
-            flexDirection: "column"
+            flexDirection: "column",
+            border: "1px solid var(--border-light)"
           }
         }, /* @__PURE__ */React__namespace.createElement("textarea", {
+          ref: this.textareaRef,
           value: message,
           onChange: this.handleMessageChange,
-          placeholder: "Describe your email",
+          placeholder: "Describe your email...",
           name: "ai-content",
           onKeyDown: this.handleKeyDown,
           disabled: isSending,
+          rows: 1,
           style: {
             flex: 1,
             minWidth: 0,
-            borderRadius: 4,
             padding: 12,
             fontSize: 13,
             border: "none",
             resize: "none",
             outline: "none",
-            minHeight: 60,
-            fontFamily: "inherit"
+            fontFamily: "inherit",
+            background: "transparent",
+            overflowY: "auto"
           }
         }), /* @__PURE__ */React__namespace.createElement("div", {
           style: {
@@ -6618,9 +7118,10 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         }, /* @__PURE__ */React__namespace.createElement(SettingPopper, {
           lang: lang,
           setLang: this.setLang,
-          originalEmail: originalEmail,
-          setOriginalEmail: this.setOriginalEmail,
-          getEditorContent: getEditorContent,
+          tone: tone,
+          setTone: this.setTone,
+          length: length,
+          setLength: this.setLength,
           parentRef: this.rootRef
         }), /* @__PURE__ */React__namespace.createElement(CountryFlag, {
           flagCode: flagCode,
@@ -6628,18 +7129,115 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             marginLeft: 4,
             height: 14
           }
-        }), /* @__PURE__ */React__namespace.createElement("button", {
+        }), (tone || length) && /* @__PURE__ */React__namespace.createElement("span", {
+          style: {
+            marginLeft: 8,
+            padding: "2px 8px",
+            borderRadius: 999,
+            background: "var(--primary-lighter)",
+            color: "var(--primary-main)",
+            fontSize: 11,
+            fontWeight: 500,
+            whiteSpace: "nowrap",
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 4
+          }
+        }, (tone == null ? void 0 : tone.label) && /* @__PURE__ */React__namespace.createElement("span", null, tone.label), (tone == null ? void 0 : tone.label) && (length == null ? void 0 : length.label) && /* @__PURE__ */React__namespace.createElement("span", {
+          style: {
+            width: 3,
+            height: 3,
+            borderRadius: "50%",
+            background: "currentColor",
+            display: "inline-block"
+          }
+        }), (length == null ? void 0 : length.label) && /* @__PURE__ */React__namespace.createElement("span", null, length.label)), /* @__PURE__ */React__namespace.createElement("button", {
+          type: "button",
           disabled: !message.trim() || isSending,
           onClick: this.handleSubmit,
-          className: "icon-button",
-          color: "primary",
           style: {
-            marginLeft: "auto"
+            marginLeft: "auto",
+            width: 28,
+            height: 28,
+            borderRadius: "50%",
+            border: "none",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: !message.trim() || isSending ? "var(--primary-lighter)" : "var(--primary-main)",
+            color: "var(--primary-contrasttext)",
+            cursor: !message.trim() || isSending ? "not-allowed" : "pointer",
+            transition: "background 0.15s ease-in-out"
           }
-        }, /* @__PURE__ */React__namespace.createElement(Send, null)))));
+        }, /* @__PURE__ */React__namespace.createElement(ArrowUp, {
+          size: 18
+        })))));
       }
     }]);
   }(React__namespace.Component);
+  var LoadingCircular = function LoadingCircular(_ref29) {
+    var _ref29$size = _ref29.size,
+      size = _ref29$size === void 0 ? 40 : _ref29$size,
+      _ref29$color = _ref29.color,
+      color = _ref29$color === void 0 ? "var(--primary-main)" : _ref29$color,
+      _ref29$thickness = _ref29.thickness,
+      thickness = _ref29$thickness === void 0 ? 3.6 : _ref29$thickness;
+    var radius = 20;
+    var circumference = 2 * Math.PI * radius;
+    return /* @__PURE__ */React.createElement("div", {
+      className: "circular-container",
+      style: {
+        width: size,
+        height: size
+      },
+      role: "progressbar"
+    }, /* @__PURE__ */React.createElement("svg", {
+      className: "circular-svg",
+      viewBox: "22 22 44 44"
+    }, /* @__PURE__ */React.createElement("circle", {
+      className: "circular-circle",
+      cx: "44",
+      cy: "44",
+      r: radius,
+      fill: "none",
+      stroke: color,
+      strokeWidth: thickness,
+      strokeDasharray: circumference,
+      style: {
+        strokeDashoffset: circumference * 0.7
+        // Độ dài của thanh loading
+      }
+    })));
+  };
+  var circularSize = {
+    small: 28,
+    medium: 40
+  };
+  var LoadingContainer = function LoadingContainer(_ref30) {
+    var style = _ref30.style,
+      _ref30$fullHeight = _ref30.fullHeight,
+      fullHeight = _ref30$fullHeight === void 0 ? false : _ref30$fullHeight,
+      _ref30$size = _ref30.size,
+      size = _ref30$size === void 0 ? "medium" : _ref30$size,
+      label = _ref30.label;
+    return /* @__PURE__ */React.createElement("div", {
+      style: __spreadValues({
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "100%",
+        height: fullHeight ? "100%" : 350
+      }, style)
+    }, /* @__PURE__ */React.createElement(LoadingCircular, {
+      size: circularSize[size]
+    }), label && /* @__PURE__ */React.createElement("p", {
+      color: "text.secondary",
+      style: {
+        marginTop: 16,
+        fontSize: size === "small" ? 12 : 13
+      }
+    }, label));
+  };
   exports2.AI_LANG_FLAGS = AI_LANG_FLAGS;
   exports2.ChatAIDraft = ChatAIDraft;
   exports2.CountryFlag = CountryFlag;