hanbiro-react16-sdk 1.0.27 → 1.0.29

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

@@ -1,7 +1,8 @@
 /*!
- * hanbiro-react16-sdk v1.0.27
- * Build Date: 2026-05-21
+ * hanbiro-react16-sdk v1.0.29
+ * Build Date: 2026-05-22
  */
+function _toArray(r) { return _arrayWithHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableRest(); }
 function _readOnlyError(r) { throw new TypeError('"' + r + '" is read-only'); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -35,7 +36,10 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 })(this, function (exports2, React, ReactDOM) {
   "use strict";
 
-  var _this9 = this;
+  var _this9 = this,
+    _en,
+    _vi,
+    _ko;
   var __defProp = Object.defineProperty;
   var __defProps = Object.defineProperties;
   var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -174,9 +178,43 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     rnds[8] = rnds[8] & 63 | 128;
     return unsafeStringify(rnds);
   }
+  var LOCAL_STORAGE_KEY = /* @__PURE__ */function (LOCAL_STORAGE_KEY2) {
+    LOCAL_STORAGE_KEY2["LANG_CODE"] = "lang.code";
+    return LOCAL_STORAGE_KEY2;
+  }(LOCAL_STORAGE_KEY || {});
+  var localStorageService = {
+    get: function get(key) {
+      return localStorage.getItem(key);
+    },
+    set: function set(key, value) {
+      localStorage.setItem(key, value);
+    },
+    remove: function remove(key) {
+      localStorage.removeItem(key);
+    }
+  };
+  function getBrowserLang() {
+    var shortCode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    var language = navigator.language;
+    if (language.indexOf("-") !== -1 && shortCode) {
+      language = language.substring(0, 2);
+    }
+    if (language === "ja") {
+      language = "jp";
+    }
+    var supportLanguage = ["ko", "en", "jp", "ch", "zh", "id", "vi", "es"];
+    if (!(supportLanguage.indexOf(language) > -1)) {
+      language = "en";
+    }
+    return language || "en";
+  }
+  var getCurrentLang = function getCurrentLang() {
+    return localStorageService.get(LOCAL_STORAGE_KEY.LANG_CODE) || getBrowserLang(true);
+  };
   var SDKConfig = {
     baseUrl: "V3",
-    signer: null
+    signer: null,
+    lang: getCurrentLang()
   };
   var initHanbiroReactSDK = function initHanbiroReactSDK(_ref2) {
     var baseUrl = _ref2.baseUrl,
@@ -184,6 +222,9 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     SDKConfig.baseUrl = baseUrl;
     SDKConfig.signer = signer;
   };
+  var setLibLang = function setLibLang(lang) {
+    if (lang) SDKConfig.lang = lang;
+  };
   var checkDevelopment = function checkDevelopment() {
     var locationInfo = window.location;
     var hostname = locationInfo.hostname;
@@ -211,20 +252,6 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       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,
@@ -413,8 +440,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
   }
   var propTypesExports = propTypes.exports;
   var PropTypes = /* @__PURE__ */getDefaultExportFromCjs(propTypesExports);
-  function _extends$l() {
-    _extends$l = Object.assign || function (target) {
+  function _extends$q() {
+    _extends$q = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -425,11 +452,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$l.apply(this, arguments);
+    return _extends$q.apply(this, arguments);
   }
-  function _objectWithoutProperties$l(source, excluded) {
+  function _objectWithoutProperties$q(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$l(source, excluded);
+    var target = _objectWithoutPropertiesLoose$q(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -442,7 +469,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$l(source, excluded) {
+  function _objectWithoutPropertiesLoose$q(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -459,8 +486,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$l(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$l({
+      rest = _objectWithoutProperties$q(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$q({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -498,8 +525,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
   AlignJustify.displayName = "AlignJustify";
-  function _extends$k() {
-    _extends$k = Object.assign || function (target) {
+  function _extends$p() {
+    _extends$p = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -510,11 +537,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$k.apply(this, arguments);
+    return _extends$p.apply(this, arguments);
   }
-  function _objectWithoutProperties$k(source, excluded) {
+  function _objectWithoutProperties$p(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$k(source, excluded);
+    var target = _objectWithoutPropertiesLoose$p(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -527,7 +554,79 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$k(source, excluded) {
+  function _objectWithoutPropertiesLoose$p(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 ArrowDown = 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$p(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$p({
+      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("line", {
+      x1: "12",
+      y1: "5",
+      x2: "12",
+      y2: "19"
+    }), /* @__PURE__ */React.createElement("polyline", {
+      points: "19 12 12 19 5 12"
+    }));
+  });
+  ArrowDown.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  ArrowDown.displayName = "ArrowDown";
+  function _extends$o() {
+    _extends$o = 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$o.apply(this, arguments);
+  }
+  function _objectWithoutProperties$o(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose$o(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$o(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -544,8 +643,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$k(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$k({
+      rest = _objectWithoutProperties$o(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$o({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -570,8 +669,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
   ArrowLeft.displayName = "ArrowLeft";
-  function _extends$j() {
-    _extends$j = Object.assign || function (target) {
+  function _extends$n() {
+    _extends$n = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -582,11 +681,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$j.apply(this, arguments);
+    return _extends$n.apply(this, arguments);
   }
-  function _objectWithoutProperties$j(source, excluded) {
+  function _objectWithoutProperties$n(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$j(source, excluded);
+    var target = _objectWithoutPropertiesLoose$n(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -599,7 +698,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$j(source, excluded) {
+  function _objectWithoutPropertiesLoose$n(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -616,8 +715,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$j(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$j({
+      rest = _objectWithoutProperties$n(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$n({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -642,8 +741,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
   ArrowUp.displayName = "ArrowUp";
-  function _extends$i() {
-    _extends$i = Object.assign || function (target) {
+  function _extends$m() {
+    _extends$m = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -654,11 +753,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$i.apply(this, arguments);
+    return _extends$m.apply(this, arguments);
   }
-  function _objectWithoutProperties$i(source, excluded) {
+  function _objectWithoutProperties$m(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$i(source, excluded);
+    var target = _objectWithoutPropertiesLoose$m(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -671,7 +770,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$i(source, excluded) {
+  function _objectWithoutPropertiesLoose$m(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -688,8 +787,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$i(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$i({
+      rest = _objectWithoutProperties$m(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$m({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -713,8 +812,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
   Award.displayName = "Award";
-  function _extends$h() {
-    _extends$h = Object.assign || function (target) {
+  function _extends$l() {
+    _extends$l = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -725,11 +824,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$h.apply(this, arguments);
+    return _extends$l.apply(this, arguments);
   }
-  function _objectWithoutProperties$h(source, excluded) {
+  function _objectWithoutProperties$l(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$h(source, excluded);
+    var target = _objectWithoutPropertiesLoose$l(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -742,7 +841,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$h(source, excluded) {
+  function _objectWithoutPropertiesLoose$l(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -759,8 +858,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$h(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$h({
+      rest = _objectWithoutProperties$l(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$l({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -780,8 +879,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
   Check.displayName = "Check";
-  function _extends$g() {
-    _extends$g = Object.assign || function (target) {
+  function _extends$k() {
+    _extends$k = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -792,11 +891,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$g.apply(this, arguments);
+    return _extends$k.apply(this, arguments);
   }
-  function _objectWithoutProperties$g(source, excluded) {
+  function _objectWithoutProperties$k(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$g(source, excluded);
+    var target = _objectWithoutPropertiesLoose$k(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -809,7 +908,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$g(source, excluded) {
+  function _objectWithoutPropertiesLoose$k(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -826,8 +925,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$g(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$g({
+      rest = _objectWithoutProperties$k(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$k({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -847,8 +946,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
   ChevronDown.displayName = "ChevronDown";
-  function _extends$f() {
-    _extends$f = Object.assign || function (target) {
+  function _extends$j() {
+    _extends$j = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -859,11 +958,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$f.apply(this, arguments);
+    return _extends$j.apply(this, arguments);
   }
-  function _objectWithoutProperties$f(source, excluded) {
+  function _objectWithoutProperties$j(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$f(source, excluded);
+    var target = _objectWithoutPropertiesLoose$j(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -876,7 +975,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$f(source, excluded) {
+  function _objectWithoutPropertiesLoose$j(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -888,13 +987,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Compass = React.forwardRef(function (_ref, ref) {
+  var ChevronLeft = 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$f(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$f({
+      rest = _objectWithoutProperties$j(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$j({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -905,21 +1004,17 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       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"
+    }, rest), /* @__PURE__ */React.createElement("polyline", {
+      points: "15 18 9 12 15 6"
     }));
   });
-  Compass.propTypes = {
+  ChevronLeft.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Compass.displayName = "Compass";
-  function _extends$e() {
-    _extends$e = Object.assign || function (target) {
+  ChevronLeft.displayName = "ChevronLeft";
+  function _extends$i() {
+    _extends$i = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -930,11 +1025,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$e.apply(this, arguments);
+    return _extends$i.apply(this, arguments);
   }
-  function _objectWithoutProperties$e(source, excluded) {
+  function _objectWithoutProperties$i(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$e(source, excluded);
+    var target = _objectWithoutPropertiesLoose$i(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -947,7 +1042,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$e(source, excluded) {
+  function _objectWithoutPropertiesLoose$i(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -959,13 +1054,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Copy = React.forwardRef(function (_ref, ref) {
+  var ChevronRight = 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$e(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$e({
+      rest = _objectWithoutProperties$i(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$i({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -976,24 +1071,17 @@ 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("polyline", {
+      points: "9 18 15 12 9 6"
     }));
   });
-  Copy.propTypes = {
+  ChevronRight.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Copy.displayName = "Copy";
-  function _extends$d() {
-    _extends$d = Object.assign || function (target) {
+  ChevronRight.displayName = "ChevronRight";
+  function _extends$h() {
+    _extends$h = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -1004,11 +1092,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$d.apply(this, arguments);
+    return _extends$h.apply(this, arguments);
   }
-  function _objectWithoutProperties$d(source, excluded) {
+  function _objectWithoutProperties$h(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$d(source, excluded);
+    var target = _objectWithoutPropertiesLoose$h(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1021,7 +1109,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$d(source, excluded) {
+  function _objectWithoutPropertiesLoose$h(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1033,13 +1121,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var FileText = React.forwardRef(function (_ref, ref) {
+  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$d(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$d({
+      rest = _objectWithoutProperties$h(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$h({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1050,31 +1138,21 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       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"
+    }, 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"
     }));
   });
-  FileText.propTypes = {
+  Compass.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  FileText.displayName = "FileText";
-  function _extends$c() {
-    _extends$c = Object.assign || function (target) {
+  Compass.displayName = "Compass";
+  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) {
@@ -1085,11 +1163,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$c.apply(this, arguments);
+    return _extends$g.apply(this, arguments);
   }
-  function _objectWithoutProperties$c(source, excluded) {
+  function _objectWithoutProperties$g(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$c(source, excluded);
+    var target = _objectWithoutPropertiesLoose$g(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1102,7 +1180,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$c(source, excluded) {
+  function _objectWithoutPropertiesLoose$g(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1114,14 +1192,14 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Frown = React.forwardRef(function (_ref, ref) {
+  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$c(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$c({
-      ref: ref,
+      rest = _objectWithoutProperties$g(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$g({
+      ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
       height: size,
@@ -1131,31 +1209,24 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */React.createElement("circle", {
-      cx: "12",
-      cy: "12",
-      r: "10"
+    }, rest), /* @__PURE__ */React.createElement("rect", {
+      x: "9",
+      y: "9",
+      width: "13",
+      height: "13",
+      rx: "2",
+      ry: "2"
     }), /* @__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"
+      d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
     }));
   });
-  Frown.propTypes = {
+  Copy.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Frown.displayName = "Frown";
-  function _extends$b() {
-    _extends$b = Object.assign || function (target) {
+  Copy.displayName = "Copy";
+  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) {
@@ -1166,11 +1237,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$b.apply(this, arguments);
+    return _extends$f.apply(this, arguments);
   }
-  function _objectWithoutProperties$b(source, excluded) {
+  function _objectWithoutProperties$f(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$b(source, excluded);
+    var target = _objectWithoutPropertiesLoose$f(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1183,7 +1254,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$b(source, excluded) {
+  function _objectWithoutPropertiesLoose$f(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1195,13 +1266,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Heart = React.forwardRef(function (_ref, ref) {
+  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$b(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$b({
+      rest = _objectWithoutProperties$f(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$f({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1213,16 +1284,30 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       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"
+      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"
     }));
   });
-  Heart.propTypes = {
+  FileText.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Heart.displayName = "Heart";
-  function _extends$a() {
-    _extends$a = Object.assign || function (target) {
+  FileText.displayName = "FileText";
+  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) {
@@ -1233,11 +1318,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$a.apply(this, arguments);
+    return _extends$e.apply(this, arguments);
   }
-  function _objectWithoutProperties$a(source, excluded) {
+  function _objectWithoutProperties$e(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$a(source, excluded);
+    var target = _objectWithoutPropertiesLoose$e(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1250,7 +1335,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$a(source, excluded) {
+  function _objectWithoutPropertiesLoose$e(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1262,13 +1347,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Lock = React.forwardRef(function (_ref, ref) {
+  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$a(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$a({
+      rest = _objectWithoutProperties$e(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$e({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1279,24 +1364,31 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */React.createElement("rect", {
-      x: "3",
-      y: "11",
-      width: "18",
-      height: "11",
-      rx: "2",
-      ry: "2"
+    }, rest), /* @__PURE__ */React.createElement("circle", {
+      cx: "12",
+      cy: "12",
+      r: "10"
     }), /* @__PURE__ */React.createElement("path", {
-      d: "M7 11V7a5 5 0 0 1 10 0v4"
+      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"
     }));
   });
-  Lock.propTypes = {
+  Frown.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Lock.displayName = "Lock";
-  function _extends$9() {
-    _extends$9 = Object.assign || function (target) {
+  Frown.displayName = "Frown";
+  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) {
@@ -1307,11 +1399,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$9.apply(this, arguments);
+    return _extends$d.apply(this, arguments);
   }
-  function _objectWithoutProperties$9(source, excluded) {
+  function _objectWithoutProperties$d(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$9(source, excluded);
+    var target = _objectWithoutPropertiesLoose$d(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1324,7 +1416,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$9(source, excluded) {
+  function _objectWithoutPropertiesLoose$d(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1336,13 +1428,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Mail = React.forwardRef(function (_ref, ref) {
+  var Globe = 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({
+      rest = _objectWithoutProperties$d(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$d({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1353,19 +1445,26 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */React.createElement("path", {
-      d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
-    }), /* @__PURE__ */React.createElement("polyline", {
-      points: "22,6 12,13 2,6"
+    }, rest), /* @__PURE__ */React.createElement("circle", {
+      cx: "12",
+      cy: "12",
+      r: "10"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "2",
+      y1: "12",
+      x2: "22",
+      y2: "12"
+    }), /* @__PURE__ */React.createElement("path", {
+      d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
     }));
   });
-  Mail.propTypes = {
+  Globe.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Mail.displayName = "Mail";
-  function _extends$8() {
-    _extends$8 = Object.assign || function (target) {
+  Globe.displayName = "Globe";
+  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) {
@@ -1376,11 +1475,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$8.apply(this, arguments);
+    return _extends$c.apply(this, arguments);
   }
-  function _objectWithoutProperties$8(source, excluded) {
+  function _objectWithoutProperties$c(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$8(source, excluded);
+    var target = _objectWithoutPropertiesLoose$c(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1393,7 +1492,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$8(source, excluded) {
+  function _objectWithoutPropertiesLoose$c(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1405,13 +1504,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var MessageCircle = React.forwardRef(function (_ref, ref) {
+  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$8(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$8({
+      rest = _objectWithoutProperties$c(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$c({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1423,16 +1522,16 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       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"
+      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"
     }));
   });
-  MessageCircle.propTypes = {
+  Heart.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  MessageCircle.displayName = "MessageCircle";
-  function _extends$7() {
-    _extends$7 = Object.assign || function (target) {
+  Heart.displayName = "Heart";
+  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) {
@@ -1443,11 +1542,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$7.apply(this, arguments);
+    return _extends$b.apply(this, arguments);
   }
-  function _objectWithoutProperties$7(source, excluded) {
+  function _objectWithoutProperties$b(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$7(source, excluded);
+    var target = _objectWithoutPropertiesLoose$b(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1460,7 +1559,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$7(source, excluded) {
+  function _objectWithoutPropertiesLoose$b(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1472,13 +1571,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var MessageSquare = React.forwardRef(function (_ref, ref) {
+  var Lock = 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({
+      rest = _objectWithoutProperties$b(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$b({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1489,17 +1588,24 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       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"
+    }, rest), /* @__PURE__ */React.createElement("rect", {
+      x: "3",
+      y: "11",
+      width: "18",
+      height: "11",
+      rx: "2",
+      ry: "2"
+    }), /* @__PURE__ */React.createElement("path", {
+      d: "M7 11V7a5 5 0 0 1 10 0v4"
     }));
   });
-  MessageSquare.propTypes = {
+  Lock.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  MessageSquare.displayName = "MessageSquare";
-  function _extends$6() {
-    _extends$6 = Object.assign || function (target) {
+  Lock.displayName = "Lock";
+  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) {
@@ -1510,11 +1616,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$6.apply(this, arguments);
+    return _extends$a.apply(this, arguments);
   }
-  function _objectWithoutProperties$6(source, excluded) {
+  function _objectWithoutProperties$a(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$6(source, excluded);
+    var target = _objectWithoutPropertiesLoose$a(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1527,7 +1633,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$6(source, excluded) {
+  function _objectWithoutPropertiesLoose$a(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1539,13 +1645,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Paperclip = React.forwardRef(function (_ref, ref) {
+  var Mail = 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({
+      rest = _objectWithoutProperties$a(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$a({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1557,16 +1663,18 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }, rest), /* @__PURE__ */React.createElement("path", {
-      d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"
+      d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+    }), /* @__PURE__ */React.createElement("polyline", {
+      points: "22,6 12,13 2,6"
     }));
   });
-  Paperclip.propTypes = {
+  Mail.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Paperclip.displayName = "Paperclip";
-  function _extends$5() {
-    _extends$5 = Object.assign || function (target) {
+  Mail.displayName = "Mail";
+  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) {
@@ -1577,11 +1685,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$5.apply(this, arguments);
+    return _extends$9.apply(this, arguments);
   }
-  function _objectWithoutProperties$5(source, excluded) {
+  function _objectWithoutProperties$9(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$5(source, excluded);
+    var target = _objectWithoutPropertiesLoose$9(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1594,7 +1702,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$5(source, excluded) {
+  function _objectWithoutPropertiesLoose$9(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1606,13 +1714,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Plus = React.forwardRef(function (_ref, ref) {
+  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$5(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$5({
+      rest = _objectWithoutProperties$9(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$9({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1623,25 +1731,17 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */React.createElement("line", {
-      x1: "12",
-      y1: "5",
-      x2: "12",
-      y2: "19"
-    }), /* @__PURE__ */React.createElement("line", {
-      x1: "5",
-      y1: "12",
-      x2: "19",
-      y2: "12"
-    }));
+    }, 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"
+    }));
   });
-  Plus.propTypes = {
+  MessageCircle.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Plus.displayName = "Plus";
-  function _extends$4() {
-    _extends$4 = Object.assign || function (target) {
+  MessageCircle.displayName = "MessageCircle";
+  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) {
@@ -1652,11 +1752,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$4.apply(this, arguments);
+    return _extends$8.apply(this, arguments);
   }
-  function _objectWithoutProperties$4(source, excluded) {
+  function _objectWithoutProperties$8(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$4(source, excluded);
+    var target = _objectWithoutPropertiesLoose$8(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1669,7 +1769,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$4(source, excluded) {
+  function _objectWithoutPropertiesLoose$8(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1681,13 +1781,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Scissors = React.forwardRef(function (_ref, ref) {
+  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$4(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$4({
+      rest = _objectWithoutProperties$8(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$8({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1698,38 +1798,17 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       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"
+    }, 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"
     }));
   });
-  Scissors.propTypes = {
+  MessageSquare.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Scissors.displayName = "Scissors";
-  function _extends$3() {
-    _extends$3 = Object.assign || function (target) {
+  MessageSquare.displayName = "MessageSquare";
+  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) {
@@ -1740,11 +1819,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$3.apply(this, arguments);
+    return _extends$7.apply(this, arguments);
   }
-  function _objectWithoutProperties$3(source, excluded) {
+  function _objectWithoutProperties$7(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$3(source, excluded);
+    var target = _objectWithoutPropertiesLoose$7(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1757,7 +1836,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$3(source, excluded) {
+  function _objectWithoutPropertiesLoose$7(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1769,13 +1848,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Settings = React.forwardRef(function (_ref, ref) {
+  var Paperclip = 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({
+      rest = _objectWithoutProperties$7(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$7({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1786,21 +1865,17 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       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"
+    }, rest), /* @__PURE__ */React.createElement("path", {
+      d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"
     }));
   });
-  Settings.propTypes = {
+  Paperclip.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Settings.displayName = "Settings";
-  function _extends$2() {
-    _extends$2 = Object.assign || function (target) {
+  Paperclip.displayName = "Paperclip";
+  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) {
@@ -1811,11 +1886,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$2.apply(this, arguments);
+    return _extends$6.apply(this, arguments);
   }
-  function _objectWithoutProperties$2(source, excluded) {
+  function _objectWithoutProperties$6(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$2(source, excluded);
+    var target = _objectWithoutPropertiesLoose$6(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1828,7 +1903,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$2(source, excluded) {
+  function _objectWithoutPropertiesLoose$6(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1840,13 +1915,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Smile = React.forwardRef(function (_ref, ref) {
+  var Plus = 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$6(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$6({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1857,31 +1932,25 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       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"
+    }, rest), /* @__PURE__ */React.createElement("line", {
+      x1: "12",
+      y1: "5",
+      x2: "12",
+      y2: "19"
     }), /* @__PURE__ */React.createElement("line", {
-      x1: "15",
-      y1: "9",
-      x2: "15.01",
-      y2: "9"
+      x1: "5",
+      y1: "12",
+      x2: "19",
+      y2: "12"
     }));
   });
-  Smile.propTypes = {
+  Plus.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Smile.displayName = "Smile";
-  function _extends$1() {
-    _extends$1 = Object.assign || function (target) {
+  Plus.displayName = "Plus";
+  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) {
@@ -1892,11 +1961,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$1.apply(this, arguments);
+    return _extends$5.apply(this, arguments);
   }
-  function _objectWithoutProperties$1(source, excluded) {
+  function _objectWithoutProperties$5(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$1(source, excluded);
+    var target = _objectWithoutPropertiesLoose$5(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1909,7 +1978,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$1(source, excluded) {
+  function _objectWithoutPropertiesLoose$5(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1921,13 +1990,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var ThumbsUp = React.forwardRef(function (_ref, ref) {
+  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$1(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$1({
+      rest = _objectWithoutProperties$5(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$5({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1938,17 +2007,38 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       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"
+    }, 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"
     }));
   });
-  ThumbsUp.propTypes = {
+  Scissors.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  ThumbsUp.displayName = "ThumbsUp";
-  function _extends() {
-    _extends = Object.assign || function (target) {
+  Scissors.displayName = "Scissors";
+  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) {
@@ -1959,11 +2049,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends.apply(this, arguments);
+    return _extends$4.apply(this, arguments);
   }
-  function _objectWithoutProperties(source, excluded) {
+  function _objectWithoutProperties$4(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var target = _objectWithoutPropertiesLoose$4(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1976,7 +2066,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose(source, excluded) {
+  function _objectWithoutPropertiesLoose$4(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1988,13 +2078,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Zap = React.forwardRef(function (_ref, ref) {
+  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(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends({
+      rest = _objectWithoutProperties$4(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$4({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -2005,57 +2095,351 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       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"
+    }, 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"
     }));
   });
-  Zap.propTypes = {
+  Settings.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Zap.displayName = "Zap";
-  var ARROW_SIZE = 6;
-  var GAP = 4;
-  var Tooltip = /*#__PURE__*/function (_React__namespace$Com) {
-    function Tooltip(props) {
-      var _this;
-      _classCallCheck(this, Tooltip);
-      _this = _callSuper(this, Tooltip, [props]);
-      __publicField(_this, "triggerRef");
-      __publicField(_this, "tooltipRef");
-      __publicField(_this, "enterTimer", null);
-      __publicField(_this, "leaveTimer", null);
-      __publicField(_this, "handleMouseEnter", function () {
-        if (_this.leaveTimer) {
-          clearTimeout(_this.leaveTimer);
-          _this.leaveTimer = null;
-        }
-        var enterDelay = _this.props.enterDelay;
-        _this.enterTimer = setTimeout(function () {
-          _this.setState({
-            visible: true
-          }, function () {
-            var coords = _this.computeCoords();
-            _this.setState({
-              coords: coords
-            });
-          });
-        }, enterDelay);
-      });
-      __publicField(_this, "handleMouseLeave", function () {
-        if (_this.enterTimer) {
-          clearTimeout(_this.enterTimer);
-          _this.enterTimer = null;
+  Settings.displayName = "Settings";
+  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];
+          }
         }
-        var leaveDelay = _this.props.leaveDelay;
-        _this.leaveTimer = setTimeout(function () {
-          _this.setState({
-            visible: false
-          });
-        }, leaveDelay);
-      });
-      _this.state = {
-        visible: false,
+      }
+      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 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$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: "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$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 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$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("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$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 X = 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("line", {
+      x1: "18",
+      y1: "6",
+      x2: "6",
+      y2: "18"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "6",
+      y1: "6",
+      x2: "18",
+      y2: "18"
+    }));
+  });
+  X.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  X.displayName = "X";
+  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 ARROW_SIZE = 6;
+  var GAP = 4;
+  var Tooltip = /*#__PURE__*/function (_React__namespace$Com) {
+    function Tooltip(props) {
+      var _this;
+      _classCallCheck(this, Tooltip);
+      _this = _callSuper(this, Tooltip, [props]);
+      __publicField(_this, "triggerRef");
+      __publicField(_this, "tooltipRef");
+      __publicField(_this, "enterTimer", null);
+      __publicField(_this, "leaveTimer", null);
+      __publicField(_this, "handleMouseEnter", function () {
+        if (_this.leaveTimer) {
+          clearTimeout(_this.leaveTimer);
+          _this.leaveTimer = null;
+        }
+        var enterDelay = _this.props.enterDelay;
+        _this.enterTimer = setTimeout(function () {
+          _this.setState({
+            visible: true
+          }, function () {
+            var coords = _this.computeCoords();
+            _this.setState({
+              coords: coords
+            });
+          });
+        }, enterDelay);
+      });
+      __publicField(_this, "handleMouseLeave", function () {
+        if (_this.enterTimer) {
+          clearTimeout(_this.enterTimer);
+          _this.enterTimer = null;
+        }
+        var leaveDelay = _this.props.leaveDelay;
+        _this.leaveTimer = setTimeout(function () {
+          _this.setState({
+            visible: false
+          });
+        }, leaveDelay);
+      });
+      _this.state = {
+        visible: false,
         coords: {
           top: 0,
           left: 0
@@ -2747,8 +3131,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             }
             raw = cap[0];
             src = src.substring(raw.length);
-            var line = cap[2].split("\n", 1)[0].replace(this.rules.other.listReplaceTabs, function (t) {
-              return " ".repeat(3 * t.length);
+            var line = cap[2].split("\n", 1)[0].replace(this.rules.other.listReplaceTabs, function (t2) {
+              return " ".repeat(3 * t2.length);
             });
             var nextLine = src.split("\n", 1)[0];
             var blankLine = !line.trim();
@@ -2867,11 +3251,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             this.lexer.state.top = false;
             list2.items[_i3].tokens = this.lexer.blockTokens(list2.items[_i3].text, []);
             if (!list2.loose) {
-              var spacers = list2.items[_i3].tokens.filter(function (t) {
-                return t.type === "space";
+              var spacers = list2.items[_i3].tokens.filter(function (t2) {
+                return t2.type === "space";
               });
-              var hasMultipleLineBreaks = spacers.length > 0 && spacers.some(function (t) {
-                return _this2.rules.other.anyLine.test(t.raw);
+              var hasMultipleLineBreaks = spacers.length > 0 && spacers.some(function (t2) {
+                return _this2.rules.other.anyLine.test(t2.raw);
               });
               list2.loose = hasMultipleLineBreaks;
             }
@@ -4752,11 +5136,12 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         alignItems: "center",
         gap: 6,
         background: "var(--background-softGrey)",
-        borderRadius: 8,
-        borderTopLeftRadius: 0,
+        borderRadius: 16,
+        borderTopLeftRadius: 4,
         padding: "8px 12px",
         fontSize: 13,
-        color: "var(--text-secondary)"
+        color: "var(--text-secondary)",
+        width: "fit-content"
       }
     }, /* @__PURE__ */React__namespace.createElement("span", null, label), /* @__PURE__ */React__namespace.createElement("span", {
       className: "chat-ai-dots",
@@ -4785,6 +5170,83 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }, _callee2);
     }));
   };
+  var LangKey = /* @__PURE__ */function (LangKey2) {
+    LangKey2["SUMMARY_WARNING"] = "SUMMARY_WARNING";
+    LangKey2["NO_DATA"] = "NO_DATA";
+    LangKey2["SENT"] = "SENT";
+    LangKey2["RECEIVED"] = "RECEIVED";
+    LangKey2["ALL"] = "ALL";
+    LangKey2["CREATE_EMPTY_TITLE"] = "CREATE_EMPTY_TITLE";
+    LangKey2["CREATE_EMPTY_SUBTITLE"] = "CREATE_EMPTY_SUBTITLE";
+    LangKey2["CREATE_EMPTY_GUIDE"] = "CREATE_EMPTY_GUIDE";
+    LangKey2["CREATE_FEATURE_1_TITLE"] = "CREATE_FEATURE_1_TITLE";
+    LangKey2["CREATE_FEATURE_1_DESC"] = "CREATE_FEATURE_1_DESC";
+    LangKey2["CREATE_FEATURE_2_TITLE"] = "CREATE_FEATURE_2_TITLE";
+    LangKey2["CREATE_FEATURE_2_DESC"] = "CREATE_FEATURE_2_DESC";
+    LangKey2["CREATE_FEATURE_3_TITLE"] = "CREATE_FEATURE_3_TITLE";
+    LangKey2["CREATE_FEATURE_3_DESC"] = "CREATE_FEATURE_3_DESC";
+    LangKey2["CREATE_PROMPT_HINT"] = "CREATE_PROMPT_HINT";
+    LangKey2["CREATE_SUGGESTION_1"] = "CREATE_SUGGESTION_1";
+    LangKey2["CREATE_SUGGESTION_2"] = "CREATE_SUGGESTION_2";
+    LangKey2["CREATE_SUGGESTION_3"] = "CREATE_SUGGESTION_3";
+    LangKey2["REPLY_EMPTY_TITLE"] = "REPLY_EMPTY_TITLE";
+    LangKey2["REPLY_EMPTY_GUIDE"] = "REPLY_EMPTY_GUIDE";
+    LangKey2["REPLY_FEATURE_1_TITLE"] = "REPLY_FEATURE_1_TITLE";
+    LangKey2["REPLY_FEATURE_1_DESC"] = "REPLY_FEATURE_1_DESC";
+    LangKey2["REPLY_FEATURE_2_TITLE"] = "REPLY_FEATURE_2_TITLE";
+    LangKey2["REPLY_FEATURE_2_DESC"] = "REPLY_FEATURE_2_DESC";
+    LangKey2["REPLY_FEATURE_3_TITLE"] = "REPLY_FEATURE_3_TITLE";
+    LangKey2["REPLY_FEATURE_3_DESC"] = "REPLY_FEATURE_3_DESC";
+    LangKey2["CHAT_INPUT_PLACEHOLDER"] = "CHAT_INPUT_PLACEHOLDER";
+    LangKey2["CHAT_INPUT_PLACEHOLDER_REPLY"] = "CHAT_INPUT_PLACEHOLDER_REPLY";
+    LangKey2["APPLY_CONTENT"] = "APPLY_CONTENT";
+    LangKey2["SETTING_LANGUAGE"] = "SETTING_LANGUAGE";
+    LangKey2["SETTING_TONE"] = "SETTING_TONE";
+    LangKey2["SETTING_LENGTH"] = "SETTING_LENGTH";
+    LangKey2["TONE_FORMAL"] = "TONE_FORMAL";
+    LangKey2["TONE_POLITE"] = "TONE_POLITE";
+    LangKey2["TONE_NEUTRAL"] = "TONE_NEUTRAL";
+    LangKey2["TONE_FRIENDLY"] = "TONE_FRIENDLY";
+    LangKey2["TONE_FIRM"] = "TONE_FIRM";
+    LangKey2["TONE_APOLOGY"] = "TONE_APOLOGY";
+    LangKey2["LENGTH_SHORT"] = "LENGTH_SHORT";
+    LangKey2["LENGTH_MEDIUM"] = "LENGTH_MEDIUM";
+    LangKey2["LENGTH_LONG"] = "LENGTH_LONG";
+    LangKey2["LENGTH_ONE_LINER"] = "LENGTH_ONE_LINER";
+    LangKey2["PAGINATION_TOTAL"] = "PAGINATION_TOTAL";
+    LangKey2["PAGINATION_PAGE"] = "PAGINATION_PAGE";
+    LangKey2["PAGINATION_PAGE_OF"] = "PAGINATION_PAGE_OF";
+    LangKey2["REPLY_LOADING_CONTEXT"] = "REPLY_LOADING_CONTEXT";
+    LangKey2["SOURCE_CONTEXT"] = "SOURCE_CONTEXT";
+    LangKey2["AUTO"] = "AUTO";
+    LangKey2["SELECTED_CONTEXT"] = "SELECTED_CONTEXT";
+    LangKey2["ADD"] = "ADD";
+    LangKey2["BACK"] = "BACK";
+    LangKey2["ADD_CONTEXT_TITLE"] = "ADD_CONTEXT_TITLE";
+    LangKey2["ADD_CONTEXT_DESC"] = "ADD_CONTEXT_DESC";
+    LangKey2["SELECTED_UP_TO"] = "SELECTED_UP_TO";
+    LangKey2["CLEAR_ALL"] = "CLEAR_ALL";
+    LangKey2["SORT_LATEST"] = "SORT_LATEST";
+    LangKey2["NO_EMAILS_FOUND"] = "NO_EMAILS_FOUND";
+    LangKey2["CANCEL"] = "CANCEL";
+    LangKey2["ADD_AS_CONTEXT"] = "ADD_AS_CONTEXT";
+    LangKey2["NO_SUBJECT"] = "NO_SUBJECT";
+    return LangKey2;
+  }(LangKey || {});
+  var en = (_en = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_en, LangKey.SUMMARY_WARNING, "This is a summary compiled by AI · May contain some inaccuracies"), LangKey.NO_DATA, "No data"), LangKey.SENT, "Sent"), LangKey.RECEIVED, "Received"), LangKey.ALL, "All"), LangKey.CREATE_EMPTY_TITLE, "Let's draft a new email together from scratch."), LangKey.CREATE_EMPTY_SUBTITLE, "Tell me what kind of email you'd like to write."), LangKey.CREATE_EMPTY_GUIDE, "Give me the recipient, purpose, and key points\nand AI will generate a polished draft."), LangKey.CREATE_FEATURE_1_TITLE, "Request via message"), LangKey.CREATE_FEATURE_1_DESC, 'e.g., "Draft an email to Director Hong proposing a Q3 collaboration meeting (May 20, 3 PM)"'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_en, LangKey.CREATE_FEATURE_2_TITLE, "AI generates a draft"), LangKey.CREATE_FEATURE_2_DESC, "Refine the draft freely with follow-ups like 'more polite' or 'add a deadline'."), LangKey.CREATE_FEATURE_3_TITLE, "Apply to body"), LangKey.CREATE_FEATURE_3_DESC, "Insert the response you like into the email body and send."), LangKey.CREATE_PROMPT_HINT, "💡 Try these prompts to get a draft right away"), LangKey.CREATE_SUGGESTION_1, "Propose a Q3 meeting to Director Hong (May 20, 3 PM)"), LangKey.CREATE_SUGGESTION_2, "Notify client of payment schedule (Due May 30)"), LangKey.CREATE_SUGGESTION_3, "Welcome message to new employee (Joining May 22)"), LangKey.REPLY_EMPTY_TITLE, "We'll draft a reply based on the received email.\nAdd send history if you want to match the tone."), LangKey.REPLY_EMPTY_GUIDE, "The source is auto-included. Adjust tone and length through conversation."), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_en, LangKey.REPLY_FEATURE_1_TITLE, "Auto-include source"), LangKey.REPLY_FEATURE_1_DESC, "The email you are replying to is automatically added as context."), LangKey.REPLY_FEATURE_2_TITLE, "Add send history (optional)"), LangKey.REPLY_FEATURE_2_DESC, "Use '+ Add' to pick past emails and reference their tone."), LangKey.REPLY_FEATURE_3_TITLE, "Refine with conversation"), LangKey.REPLY_FEATURE_3_DESC, "Get an AI draft, then adjust freely with chips or messages."), LangKey.CHAT_INPUT_PLACEHOLDER, "Describe your email..."), LangKey.CHAT_INPUT_PLACEHOLDER_REPLY, "Type a message..."), LangKey.APPLY_CONTENT, "Apply content"), LangKey.SETTING_LANGUAGE, "Language"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_en, LangKey.SETTING_TONE, "Tone"), LangKey.SETTING_LENGTH, "Length"), LangKey.TONE_FORMAL, "Formal"), LangKey.TONE_POLITE, "Polite"), LangKey.TONE_NEUTRAL, "Neutral"), LangKey.TONE_FRIENDLY, "Friendly"), LangKey.TONE_FIRM, "Firm"), LangKey.TONE_APOLOGY, "Apology"), LangKey.LENGTH_SHORT, "Short"), LangKey.LENGTH_MEDIUM, "Medium"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_en, LangKey.LENGTH_LONG, "Long"), LangKey.LENGTH_ONE_LINER, "1-liner"), LangKey.PAGINATION_TOTAL, "Total"), LangKey.PAGINATION_PAGE, "Page"), LangKey.PAGINATION_PAGE_OF, "Page"), LangKey.REPLY_LOADING_CONTEXT, "Loading context..."), LangKey.SOURCE_CONTEXT, "Source context"), LangKey.AUTO, "Auto"), LangKey.SELECTED_CONTEXT, "Selected context"), LangKey.ADD, "Add"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_en, LangKey.BACK, "Back"), LangKey.ADD_CONTEXT_TITLE, "Add context from receive history"), LangKey.ADD_CONTEXT_DESC, "Select related emails to provide AI context."), LangKey.SELECTED_UP_TO, "selected · up to"), LangKey.CLEAR_ALL, "Clear all"), LangKey.SORT_LATEST, "Sort: latest"), LangKey.NO_EMAILS_FOUND, "No emails found."), LangKey.CANCEL, "Cancel"), LangKey.ADD_AS_CONTEXT, "as context →"), LangKey.NO_SUBJECT, "(no subject)"));
+  var vi = (_vi = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_vi, LangKey.SUMMARY_WARNING, "Đây là bản tóm tắt do AI tổng hợp · Có thể chứa một số điểm không chính xác"), LangKey.NO_DATA, "Không có dữ liệu"), LangKey.SENT, "Đã gửi"), LangKey.RECEIVED, "Đã nhận"), LangKey.ALL, "Tất cả"), LangKey.CREATE_EMPTY_TITLE, "Hãy cùng nhau soạn thảo một email mới từ đầu."), LangKey.CREATE_EMPTY_SUBTITLE, "Hãy cho tôi biết bạn muốn viết loại email nào."), LangKey.CREATE_EMPTY_GUIDE, "Cho tôi người nhận, mục đích và những điểm chính\nvà AI sẽ tạo ra một bản nháp hoàn chỉnh."), LangKey.CREATE_FEATURE_1_TITLE, "Yêu cầu qua tin nhắn"), LangKey.CREATE_FEATURE_1_DESC, 'VD: "Soạn email gửi Giám đốc Hong đề xuất cuộc họp hợp tác quý 3 (20/5, 3 giờ chiều)"'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_vi, LangKey.CREATE_FEATURE_2_TITLE, "AI tạo bản nháp"), LangKey.CREATE_FEATURE_2_DESC, "Tinh chỉnh bản nháp thoải mái với các yêu cầu tiếp theo như 'lịch sự hơn' hoặc 'thêm thời hạn'."), LangKey.CREATE_FEATURE_3_TITLE, "Áp dụng vào nội dung"), LangKey.CREATE_FEATURE_3_DESC, "Chèn phản hồi bạn thích vào nội dung email và gửi."), LangKey.CREATE_PROMPT_HINT, "💡 Thử các câu lệnh này để nhận bản nháp ngay lập tức"), LangKey.CREATE_SUGGESTION_1, "Đề xuất cuộc họp quý 3 với Giám đốc Hong (20/5, 3 giờ chiều)"), LangKey.CREATE_SUGGESTION_2, "Thông báo lịch thanh toán cho khách hàng (Hạn chót 30/5)"), LangKey.CREATE_SUGGESTION_3, "Tin nhắn chào mừng nhân viên mới (Gia nhập 22/5)"), LangKey.REPLY_EMPTY_TITLE, "Chúng tôi sẽ soạn thảo thư trả lời dựa trên email đã nhận.\nThêm lịch sử gửi nếu bạn muốn khớp với giọng điệu."), LangKey.REPLY_EMPTY_GUIDE, "Nguồn được tự động bao gồm. Điều chỉnh giọng điệu và độ dài thông qua cuộc trò chuyện."), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_vi, LangKey.REPLY_FEATURE_1_TITLE, "Tự động bao gồm nguồn"), LangKey.REPLY_FEATURE_1_DESC, "Email bạn đang trả lời tự động được thêm làm ngữ cảnh."), LangKey.REPLY_FEATURE_2_TITLE, "Thêm lịch sử gửi (tùy chọn)"), LangKey.REPLY_FEATURE_2_DESC, "Sử dụng '+ Thêm' để chọn các email trước đây và tham khảo giọng điệu của chúng."), LangKey.REPLY_FEATURE_3_TITLE, "Tinh chỉnh thông qua trò chuyện"), LangKey.REPLY_FEATURE_3_DESC, "Nhận bản nháp AI, sau đó điều chỉnh thoải mái bằng thẻ hoặc tin nhắn."), LangKey.CHAT_INPUT_PLACEHOLDER, "Mô tả email của bạn..."), LangKey.CHAT_INPUT_PLACEHOLDER_REPLY, "Nhập tin nhắn..."), LangKey.APPLY_CONTENT, "Áp dụng nội dung"), LangKey.SETTING_LANGUAGE, "Ngôn ngữ"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_vi, LangKey.SETTING_TONE, "Giọng điệu"), LangKey.SETTING_LENGTH, "Độ dài"), LangKey.TONE_FORMAL, "Trang trọng"), LangKey.TONE_POLITE, "Lịch sự"), LangKey.TONE_NEUTRAL, "Trung lập"), LangKey.TONE_FRIENDLY, "Thân thiện"), LangKey.TONE_FIRM, "Cứng rắn"), LangKey.TONE_APOLOGY, "Xin lỗi"), LangKey.LENGTH_SHORT, "Ngắn"), LangKey.LENGTH_MEDIUM, "Trung bình"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_vi, LangKey.LENGTH_LONG, "Dài"), LangKey.LENGTH_ONE_LINER, "1 dòng"), LangKey.PAGINATION_TOTAL, "Tổng"), LangKey.PAGINATION_PAGE, "Trang"), LangKey.PAGINATION_PAGE_OF, "Trang"), LangKey.REPLY_LOADING_CONTEXT, "Đang tải ngữ cảnh..."), LangKey.SOURCE_CONTEXT, "Ngữ cảnh nguồn"), LangKey.AUTO, "Tự động"), LangKey.SELECTED_CONTEXT, "Ngữ cảnh đã chọn"), LangKey.ADD, "Thêm"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_vi, LangKey.BACK, "Trở lại"), LangKey.ADD_CONTEXT_TITLE, "Thêm ngữ cảnh từ lịch sử nhận"), LangKey.ADD_CONTEXT_DESC, "Chọn các email liên quan để cung cấp ngữ cảnh cho AI."), LangKey.SELECTED_UP_TO, "đã chọn · tối đa"), LangKey.CLEAR_ALL, "Xóa tất cả"), LangKey.SORT_LATEST, "Sắp xếp: mới nhất"), LangKey.NO_EMAILS_FOUND, "Không tìm thấy email nào."), LangKey.CANCEL, "Hủy bỏ"), LangKey.ADD_AS_CONTEXT, "làm ngữ cảnh →"), LangKey.NO_SUBJECT, "(không có chủ đề)"));
+  var ko = (_ko = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ko, LangKey.SUMMARY_WARNING, "이것은 AI가 작성한 요약입니다 · 일부 부정확한 내용이 포함될 수 있습니다"), LangKey.NO_DATA, "데이터 없음"), LangKey.SENT, "보낸 편지"), LangKey.RECEIVED, "받은 편지"), LangKey.ALL, "전체"), LangKey.CREATE_EMPTY_TITLE, "처음부터 새로운 이메일 초안을 함께 작성해 봅시다."), LangKey.CREATE_EMPTY_SUBTITLE, "어떤 종류의 이메일을 작성하고 싶으신가요?"), LangKey.CREATE_EMPTY_GUIDE, "수신자, 목적 및 주요 내용을 알려주시면\nAI가 완성도 높은 초안을 생성해 드립니다."), LangKey.CREATE_FEATURE_1_TITLE, "메시지로 요청"), LangKey.CREATE_FEATURE_1_DESC, '예: "홍길동 이사님께 3분기 협력 회의 제안 이메일 작성 (5월 20일 오후 3시)"'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ko, LangKey.CREATE_FEATURE_2_TITLE, "AI 초안 생성"), LangKey.CREATE_FEATURE_2_DESC, "'더 정중하게' 또는 '마감일 추가'와 같은 후속 요청으로 초안을 자유롭게 수정하세요."), LangKey.CREATE_FEATURE_3_TITLE, "본문에 적용"), LangKey.CREATE_FEATURE_3_DESC, "마음에 드는 답변을 이메일 본문에 삽입하고 전송하세요."), LangKey.CREATE_PROMPT_HINT, "💡 바로 초안을 받으려면 다음 프롬프트를 시도해 보세요"), LangKey.CREATE_SUGGESTION_1, "홍길동 이사님께 3분기 회의 제안 (5월 20일 오후 3시)"), LangKey.CREATE_SUGGESTION_2, "고객에게 결제 일정 안내 (마감일 5월 30일)"), LangKey.CREATE_SUGGESTION_3, "신입 사원 환영 메시지 (5월 22일 입사)"), LangKey.REPLY_EMPTY_TITLE, "받은 이메일을 바탕으로 답장 초안을 작성합니다.\n어조를 맞추고 싶다면 보낸 내역을 추가하세요."), LangKey.REPLY_EMPTY_GUIDE, "원본 메일은 자동으로 포함됩니다. 대화를 통해 어조와 길이를 조정하세요."), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ko, LangKey.REPLY_FEATURE_1_TITLE, "원본 자동 포함"), LangKey.REPLY_FEATURE_1_DESC, "답장하려는 이메일이 자동으로 컨텍스트로 추가됩니다."), LangKey.REPLY_FEATURE_2_TITLE, "발송 내역 추가 (선택사항)"), LangKey.REPLY_FEATURE_2_DESC, "'+ 추가'를 사용하여 과거 이메일을 선택하고 어조를 참조하세요."), LangKey.REPLY_FEATURE_3_TITLE, "대화로 수정"), LangKey.REPLY_FEATURE_3_DESC, "AI 초안을 받은 후 칩이나 메시지를 사용하여 자유롭게 조정하세요."), LangKey.CHAT_INPUT_PLACEHOLDER, "이메일을 설명해주세요..."), LangKey.CHAT_INPUT_PLACEHOLDER_REPLY, "메시지 입력..."), LangKey.APPLY_CONTENT, "내용 적용"), LangKey.SETTING_LANGUAGE, "언어"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ko, LangKey.SETTING_TONE, "어조"), LangKey.SETTING_LENGTH, "길이"), LangKey.TONE_FORMAL, "격식"), LangKey.TONE_POLITE, "정중"), LangKey.TONE_NEUTRAL, "중립"), LangKey.TONE_FRIENDLY, "친근"), LangKey.TONE_FIRM, "단호"), LangKey.TONE_APOLOGY, "사과"), LangKey.LENGTH_SHORT, "짧게"), LangKey.LENGTH_MEDIUM, "보통"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ko, LangKey.LENGTH_LONG, "길게"), LangKey.LENGTH_ONE_LINER, "한 줄"), LangKey.PAGINATION_TOTAL, "전체"), LangKey.PAGINATION_PAGE, "페이지"), LangKey.PAGINATION_PAGE_OF, "페이지"), LangKey.REPLY_LOADING_CONTEXT, "컨텍스트 로딩 중..."), LangKey.SOURCE_CONTEXT, "원본 컨텍스트"), LangKey.AUTO, "자동"), LangKey.SELECTED_CONTEXT, "선택한 컨텍스트"), LangKey.ADD, "추가"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ko, LangKey.BACK, "뒤로"), LangKey.ADD_CONTEXT_TITLE, "수신 내역에서 컨텍스트 추가"), LangKey.ADD_CONTEXT_DESC, "관련 이메일을 선택하여 AI에 컨텍스트를 제공하세요."), LangKey.SELECTED_UP_TO, "개 선택됨 · 최대"), LangKey.CLEAR_ALL, "모두 지우기"), LangKey.SORT_LATEST, "정렬: 최신순"), LangKey.NO_EMAILS_FOUND, "이메일을 찾을 수 없습니다."), LangKey.CANCEL, "취소"), LangKey.ADD_AS_CONTEXT, "컨텍스트로 추가 →"), LangKey.NO_SUBJECT, "(제목 없음)"));
+  var dicts = {
+    en: en,
+    vi: vi,
+    ko: ko
+  };
+  var t = function t(key) {
+    var lang = SDKConfig.lang || "en";
+    var prefix = lang.split("-")[0];
+    var dict = dicts[lang] || dicts[prefix] || dicts.en;
+    return dict[key] || en[key] || key;
+  };
   var MessageItem = function MessageItem(_ref25) {
     var item = _ref25.item,
       onApply = _ref25.onApply,
@@ -4829,8 +5291,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         question: item.question
       },
       style: {
-        borderRadius: 8,
-        borderTopRightRadius: 0,
+        borderRadius: 12,
+        borderTopRightRadius: 4,
         padding: "8px 12px",
         background: "var(--primary-main)",
         color: "var(--primary-contrasttext)"
@@ -4859,8 +5321,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       },
       style: {
         background: "var(--background-softGrey)",
-        borderRadius: 8,
-        borderTopLeftRadius: 0,
+        borderRadius: 12,
+        borderTopLeftRadius: 4,
         padding: "8px 12px"
       }
     }), /* @__PURE__ */React__namespace.createElement("div", {
@@ -4868,7 +5330,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         marginTop: 4
       }
     }, /* @__PURE__ */React__namespace.createElement(Tooltip, {
-      title: "Apply content"
+      title: t(LangKey.APPLY_CONTENT)
     }, /* @__PURE__ */React__namespace.createElement("button", {
       type: "button",
       onClick: handleApply,
@@ -6571,39 +7033,43 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }, _callee4);
     }));
   };
-  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 getFlagCode = function getFlagCode(value) {
+  var getToneOptions = function getToneOptions() {
+    return [{
+      label: t(LangKey.TONE_FORMAL),
+      value: "formal"
+    }, {
+      label: t(LangKey.TONE_POLITE),
+      value: "polite"
+    }, {
+      label: t(LangKey.TONE_NEUTRAL),
+      value: "neutral"
+    }, {
+      label: t(LangKey.TONE_FRIENDLY),
+      value: "friendly"
+    }, {
+      label: t(LangKey.TONE_FIRM),
+      value: "firm"
+    }, {
+      label: t(LangKey.TONE_APOLOGY),
+      value: "apologetic"
+    }];
+  };
+  var getLengthOptions = function getLengthOptions() {
+    return [{
+      label: t(LangKey.LENGTH_SHORT),
+      value: "short"
+    }, {
+      label: t(LangKey.LENGTH_MEDIUM),
+      value: "medium"
+    }, {
+      label: t(LangKey.LENGTH_LONG),
+      value: "long"
+    }, {
+      label: t(LangKey.LENGTH_ONE_LINER),
+      value: "one_liner"
+    }];
+  };
+  var getFlagCode$1 = function getFlagCode$1(value) {
     var _a2;
     return (_a2 = AI_LANG_FLAGS.find(function (l) {
       return l.value === value;
@@ -6660,7 +7126,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           value = _this$props3.value,
           options = _this$props3.options;
         var open = this.state.open;
-        var selectedFlag = getFlagCode(value == null ? void 0 : value.value);
+        var selectedFlag = getFlagCode$1(value == null ? void 0 : value.value);
         return /* @__PURE__ */React__namespace.createElement("div", {
           ref: this.ref,
           style: {
@@ -6717,7 +7183,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             zIndex: 2
           }
         }, options.map(function (opt) {
-          var fc = getFlagCode(opt.value);
+          var fc = getFlagCode$1(opt.value);
           var isActive = (value == null ? void 0 : value.value) === opt.value;
           return /* @__PURE__ */React__namespace.createElement("button", {
             key: opt.value,
@@ -6983,7 +7449,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             fontSize: 12,
             fontWeight: 600
           }
-        }, "Language"), /* @__PURE__ */React__namespace.createElement(LanguageSelect, {
+        }, t(LangKey.SETTING_LANGUAGE)), /* @__PURE__ */React__namespace.createElement(LanguageSelect, {
           value: lang,
           options: languageOptions,
           onChange: function onChange(opt) {
@@ -7000,8 +7466,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             fontSize: 12,
             fontWeight: 600
           }
-        }, "Tone"), /* @__PURE__ */React__namespace.createElement(ChipGroup, {
-          options: TONE_OPTIONS,
+        }, t(LangKey.SETTING_TONE)), /* @__PURE__ */React__namespace.createElement(ChipGroup, {
+          options: getToneOptions(),
           selected: tone,
           onSelect: function onSelect(opt) {
             return setTone(opt);
@@ -7018,8 +7484,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             fontSize: 12,
             fontWeight: 600
           }
-        }, "Length"), /* @__PURE__ */React__namespace.createElement(ChipGroup, {
-          options: LENGTH_OPTIONS,
+        }, t(LangKey.SETTING_LENGTH)), /* @__PURE__ */React__namespace.createElement(ChipGroup, {
+          options: getLengthOptions(),
           selected: length,
           onSelect: function onSelect(opt) {
             return setLength(opt);
@@ -7101,7 +7567,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           ref: this.textareaRef,
           value: message,
           onChange: this.handleChange,
-          placeholder: placeholder || "Describe your email...",
+          placeholder: placeholder || t(LangKey.CHAT_INPUT_PLACEHOLDER),
           name: "ai-content",
           onKeyDown: this.handleKeyDown,
           disabled: isSending,
@@ -7256,23 +7722,23 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     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)"'
+    title: t(LangKey.CREATE_FEATURE_1_TITLE),
+    desc: t(LangKey.CREATE_FEATURE_1_DESC)
   }, {
     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'."
+    title: t(LangKey.CREATE_FEATURE_2_TITLE),
+    desc: t(LangKey.CREATE_FEATURE_2_DESC)
   }, {
     icon: /* @__PURE__ */React__namespace.createElement(Check, {
       size: 16
     }),
-    title: "Apply to body",
-    desc: "Insert the response you like into the email body and send."
+    title: t(LangKey.CREATE_FEATURE_3_TITLE),
+    desc: t(LangKey.CREATE_FEATURE_3_DESC)
   }];
-  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 SUGGESTIONS = [t(LangKey.CREATE_SUGGESTION_1), t(LangKey.CREATE_SUGGESTION_2), t(LangKey.CREATE_SUGGESTION_3)];
   var EmptyState$1 = function EmptyState$1(_ref29) {
     var onSelectPrompt = _ref29.onSelectPrompt;
     return /* @__PURE__ */React__namespace.createElement("div", {
@@ -7298,13 +7764,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         color: "var(--text-primary)",
         lineHeight: 1.5
       }
-    }, "Let's draft a new email together from scratch."), /* @__PURE__ */React__namespace.createElement("div", {
+    }, t(LangKey.CREATE_EMPTY_TITLE)), /* @__PURE__ */React__namespace.createElement("div", {
       style: {
         fontSize: 13,
         color: "var(--text-secondary)",
         marginTop: 4
       }
-    }, "Tell me what kind of email you'd like to write.")), /* @__PURE__ */React__namespace.createElement("div", {
+    }, t(LangKey.CREATE_EMPTY_SUBTITLE))), /* @__PURE__ */React__namespace.createElement("div", {
       style: {
         alignSelf: "center",
         width: 100,
@@ -7331,7 +7797,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         color: "var(--text-secondary)",
         lineHeight: 1.6
       }
-    }, "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", {
+    }, t(LangKey.CREATE_EMPTY_GUIDE).split("\n").map(function (line, idx) {
+      return /* @__PURE__ */React__namespace.createElement(React__namespace.Fragment, {
+        key: idx
+      }, line, /* @__PURE__ */React__namespace.createElement("br", null));
+    }))), /* @__PURE__ */React__namespace.createElement("div", {
       style: {
         borderTop: "1px solid var(--border-light)",
         marginTop: 20,
@@ -7392,7 +7862,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         color: "var(--text-secondary)",
         marginBottom: 8
       }
-    }, "💡 Try these prompts to get a draft right away"), /* @__PURE__ */React__namespace.createElement("div", {
+    }, t(LangKey.CREATE_PROMPT_HINT)), /* @__PURE__ */React__namespace.createElement("div", {
       style: {
         display: "flex",
         flexDirection: "column",
@@ -7546,8 +8016,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         messages: [],
         isSending: false,
         lang: lang,
-        tone: TONE_OPTIONS[2],
-        length: LENGTH_OPTIONS[2],
+        tone: getToneOptions()[2],
+        length: getLengthOptions()[2],
         conversationId: ""
       };
       return _this12;
@@ -7608,25 +8078,133 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     icon: /* @__PURE__ */React__namespace.createElement(Mail, {
       size: 16
     }),
-    title: "Auto-include source",
-    desc: "The email you are replying to is automatically added as context."
+    title: t(LangKey.REPLY_FEATURE_1_TITLE),
+    desc: t(LangKey.REPLY_FEATURE_1_DESC)
   }, {
     icon: /* @__PURE__ */React__namespace.createElement(CustomAiIcon, {
       size: 16,
       stroke: 2
     }),
-    title: "Add send history (optional)",
-    desc: "Use '+ Add' to pick past emails and reference their tone."
+    title: t(LangKey.REPLY_FEATURE_2_TITLE),
+    desc: t(LangKey.REPLY_FEATURE_2_DESC)
   }, {
     icon: /* @__PURE__ */React__namespace.createElement(MessageCircle, {
       size: 16
     }),
-    title: "Refine with conversation",
-    desc: "Get an AI draft, then adjust freely with chips or messages."
+    title: t(LangKey.REPLY_FEATURE_3_TITLE),
+    desc: t(LangKey.REPLY_FEATURE_3_DESC)
   }];
+  var EmptyState = function EmptyState() {
+    return /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        display: "flex",
+        flexDirection: "column",
+        paddingRight: 8,
+        marginRight: -8,
+        paddingBottom: 16,
+        gap: 12
+      }
+    }, /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        textAlign: "center",
+        marginTop: 8
+      }
+    }, /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        fontSize: 13,
+        color: "var(--text-secondary)",
+        lineHeight: 1.6
+      }
+    }, t(LangKey.REPLY_EMPTY_TITLE).split("\n").map(function (line, idx) {
+      return /* @__PURE__ */React__namespace.createElement(React__namespace.Fragment, {
+        key: idx
+      }, line, /* @__PURE__ */React__namespace.createElement("br", null));
+    }))), /* @__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: "8px 0",
+        color: "var(--primary-main)",
+        flexShrink: 0
+      }
+    }, /* @__PURE__ */React__namespace.createElement(CustomAiIcon, {
+      size: 44,
+      stroke: 1.5
+    })), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        textAlign: "center"
+      }
+    }, /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        fontSize: 13,
+        color: "var(--text-secondary)",
+        lineHeight: 1.6
+      }
+    }, t(LangKey.REPLY_EMPTY_GUIDE))), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        borderTop: "1px solid var(--border-light)",
+        marginTop: 8,
+        paddingTop: 16,
+        display: "flex",
+        flexDirection: "column",
+        gap: 14
+      }
+    }, FEATURES.map(function (f, i) {
+      return /* @__PURE__ */React__namespace.createElement("div", {
+        key: i,
+        style: {
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "flex-start",
+          gap: 10
+        }
+      }, /* @__PURE__ */React__namespace.createElement("div", {
+        style: {
+          width: 28,
+          height: 28,
+          borderRadius: "50%",
+          background: "var(--primary-lighter)",
+          color: "var(--primary-main)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0
+        }
+      }, f.icon), /* @__PURE__ */React__namespace.createElement("div", {
+        style: {
+          flex: 1,
+          minWidth: 0
+        }
+      }, /* @__PURE__ */React__namespace.createElement("div", {
+        style: {
+          fontSize: 13,
+          fontWeight: 600,
+          color: "var(--text-primary)"
+        }
+      }, f.title), /* @__PURE__ */React__namespace.createElement("div", {
+        style: {
+          fontSize: 12,
+          color: "var(--text-secondary)",
+          marginTop: 2,
+          lineHeight: 1.5
+        }
+      }, f.desc)));
+    })));
+  };
   var SourceCard = function SourceCard(_ref30) {
-    var mail = _ref30.mail;
+    var mail = _ref30.mail,
+      onClick = _ref30.onClick;
     return /* @__PURE__ */React__namespace.createElement("div", {
+      onClick: onClick,
       style: {
         border: "1px solid var(--border-light)",
         borderRadius: 8,
@@ -7634,7 +8212,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         display: "flex",
         gap: 8,
         alignItems: "flex-start",
-        background: "#fff"
+        background: "#fff",
+        cursor: onClick ? "pointer" : "default"
       }
     }, /* @__PURE__ */React__namespace.createElement("div", {
       style: {
@@ -7664,8 +8243,12 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
   var SelectedChip = function SelectedChip(_ref31) {
     var index = _ref31.index,
       mail = _ref31.mail,
+      _onClick = _ref31.onClick,
       onRemove = _ref31.onRemove;
     return /* @__PURE__ */React__namespace.createElement("div", {
+      onClick: function onClick() {
+        return _onClick(mail);
+      },
       style: {
         display: "inline-flex",
         alignItems: "center",
@@ -7675,7 +8258,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         border: "1px solid var(--border-light)",
         background: "var(--primary-lighter)",
         fontSize: 12,
-        maxWidth: 160
+        maxWidth: 160,
+        cursor: "pointer"
       }
     }, /* @__PURE__ */React__namespace.createElement("span", {
       style: {
@@ -7700,8 +8284,9 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
     }, mail.subject || "(no subject)"), /* @__PURE__ */React__namespace.createElement("button", {
       type: "button",
-      onClick: function onClick() {
-        return onRemove(mail.mid);
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onRemove(mail.mid);
       },
       style: {
         border: "none",
@@ -7715,22 +8300,20 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
     }, "×"));
   };
-  var EmptyState = function EmptyState(_ref32) {
+  var ContextHeader = function ContextHeader(_ref32) {
     var sourceMail = _ref32.sourceMail,
       selectedMails = _ref32.selectedMails,
       onAddClick = _ref32.onAddClick,
-      onRemoveSelected = _ref32.onRemoveSelected;
+      onSourceClick = _ref32.onSourceClick,
+      onChipClick = _ref32.onChipClick,
+      onRemoveChip = _ref32.onRemoveChip;
     return /* @__PURE__ */React__namespace.createElement("div", {
       style: {
-        flex: 1,
-        minHeight: 0,
-        overflowY: "auto",
         display: "flex",
         flexDirection: "column",
-        paddingRight: 8,
-        marginRight: -8,
-        paddingBottom: 16,
-        gap: 12
+        gap: 12,
+        paddingBottom: 12,
+        marginBottom: 12
       }
     }, sourceMail && /* @__PURE__ */React__namespace.createElement("div", {
       style: {
@@ -7747,7 +8330,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         color: "var(--text-primary)",
         fontWeight: 600
       }
-    }, /* @__PURE__ */React__namespace.createElement("span", null, "Source context"), /* @__PURE__ */React__namespace.createElement("span", {
+    }, /* @__PURE__ */React__namespace.createElement("span", null, t(LangKey.SOURCE_CONTEXT)), /* @__PURE__ */React__namespace.createElement("span", {
       style: {
         background: "var(--primary-main)",
         color: "var(--primary-contrasttext)",
@@ -7767,8 +8350,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
     }, /* @__PURE__ */React__namespace.createElement(Lock, {
       size: 11
-    }), " Auto")), /* @__PURE__ */React__namespace.createElement(SourceCard, {
-      mail: sourceMail
+    }), " ", t(LangKey.AUTO))), /* @__PURE__ */React__namespace.createElement(SourceCard, {
+      mail: sourceMail,
+      onClick: function onClick() {
+        return onSourceClick(sourceMail);
+      }
     })), /* @__PURE__ */React__namespace.createElement("div", {
       style: {
         display: "flex",
@@ -7790,7 +8376,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         color: "var(--text-primary)",
         fontWeight: 600
       }
-    }, /* @__PURE__ */React__namespace.createElement("span", null, "Selected context"), /* @__PURE__ */React__namespace.createElement("span", {
+    }, /* @__PURE__ */React__namespace.createElement("span", null, t(LangKey.SELECTED_CONTEXT)), /* @__PURE__ */React__namespace.createElement("span", {
       style: {
         background: "var(--background-softGrey)",
         color: "var(--text-primary)",
@@ -7805,7 +8391,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       className: "text-button primary"
     }, /* @__PURE__ */React__namespace.createElement(Plus, {
       size: 12
-    }), " Add")), selectedMails.length > 0 && /* @__PURE__ */React__namespace.createElement("div", {
+    }), " ", t(LangKey.ADD))), selectedMails.length > 0 && /* @__PURE__ */React__namespace.createElement("div", {
       style: {
         display: "flex",
         flexWrap: "wrap",
@@ -7816,97 +8402,200 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         key: m.mid,
         index: i,
         mail: m,
-        onRemove: onRemoveSelected
+        onClick: onChipClick,
+        onRemove: onRemoveChip
       });
-    }))), /* @__PURE__ */React__namespace.createElement("div", {
+    }))));
+  };
+  var LoadingCircular = function LoadingCircular(_ref33) {
+    var _ref33$size = _ref33.size,
+      size = _ref33$size === void 0 ? 40 : _ref33$size,
+      _ref33$color = _ref33.color,
+      color = _ref33$color === void 0 ? "var(--primary-main)" : _ref33$color,
+      _ref33$thickness = _ref33.thickness,
+      thickness = _ref33$thickness === void 0 ? 3.6 : _ref33$thickness;
+    var radius = 20;
+    var circumference = 2 * Math.PI * radius;
+    return /* @__PURE__ */React.createElement("div", {
+      className: "circular-container",
       style: {
-        textAlign: "center",
-        marginTop: 8
-      }
-    }, /* @__PURE__ */React__namespace.createElement("div", {
+        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: {
-        fontSize: 13,
-        color: "var(--text-secondary)",
-        lineHeight: 1.6
+        strokeDashoffset: circumference * 0.7
+        // Độ dài của thanh loading
       }
-    }, "We'll draft a reply based on the received email.", /* @__PURE__ */React__namespace.createElement("br", null), "Add send history if you want to match the tone.")), /* @__PURE__ */React__namespace.createElement("div", {
-      style: {
-        alignSelf: "center",
-        width: 100,
-        height: 100,
-        borderRadius: "50%",
-        background: "var(--primary-lighter)",
+    })));
+  };
+  var circularSize = {
+    small: 28,
+    medium: 40
+  };
+  var LoadingContainer = function LoadingContainer(_ref34) {
+    var style = _ref34.style,
+      _ref34$fullHeight = _ref34.fullHeight,
+      fullHeight = _ref34$fullHeight === void 0 ? false : _ref34$fullHeight,
+      _ref34$size = _ref34.size,
+      size = _ref34$size === void 0 ? "medium" : _ref34$size,
+      label = _ref34.label;
+    return /* @__PURE__ */React.createElement("div", {
+      style: __spreadValues({
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        margin: "8px 0",
-        color: "var(--primary-main)",
-        flexShrink: 0
-      }
-    }, /* @__PURE__ */React__namespace.createElement(CustomAiIcon, {
-      size: 44,
-      stroke: 1.5
-    })), /* @__PURE__ */React__namespace.createElement("div", {
-      style: {
-        textAlign: "center"
-      }
-    }, /* @__PURE__ */React__namespace.createElement("div", {
-      style: {
-        fontSize: 13,
-        color: "var(--text-secondary)",
-        lineHeight: 1.6
-      }
-    }, "The source is auto-included. Adjust tone and length through conversation.")), /* @__PURE__ */React__namespace.createElement("div", {
-      style: {
-        borderTop: "1px solid var(--border-light)",
-        marginTop: 8,
-        paddingTop: 16,
-        display: "flex",
-        flexDirection: "column",
-        gap: 14
-      }
-    }, FEATURES.map(function (f, i) {
-      return /* @__PURE__ */React__namespace.createElement("div", {
-        key: i,
-        style: {
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "flex-start",
-          gap: 10
-        }
-      }, /* @__PURE__ */React__namespace.createElement("div", {
-        style: {
-          width: 28,
-          height: 28,
-          borderRadius: "50%",
-          background: "var(--primary-lighter)",
-          color: "var(--primary-main)",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          flexShrink: 0
-        }
-      }, f.icon), /* @__PURE__ */React__namespace.createElement("div", {
-        style: {
-          flex: 1,
-          minWidth: 0
+        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));
+  };
+  var Pagination = /*#__PURE__*/function (_React__namespace$Com6) {
+    function Pagination(props) {
+      var _this15;
+      _classCallCheck(this, Pagination);
+      _this15 = _callSuper(this, Pagination, [props]);
+      __publicField(_this15, "clamp", function (value) {
+        var totalPages = _this15.props.totalPages;
+        if (Number.isNaN(value)) return _this15.props.page;
+        return Math.min(Math.max(1, Math.floor(value)), Math.max(1, totalPages));
+      });
+      __publicField(_this15, "handleInputChange", function (e) {
+        _this15.setState({
+          inputValue: e.target.value
+        });
+      });
+      __publicField(_this15, "commit", function () {
+        var next = _this15.clamp(parseInt(_this15.state.inputValue, 10));
+        _this15.setState({
+          inputValue: String(next)
+        });
+        if (next !== _this15.props.page) {
+          _this15.props.onChangePage(next);
         }
-      }, /* @__PURE__ */React__namespace.createElement("div", {
-        style: {
-          fontSize: 13,
-          fontWeight: 600,
-          color: "var(--text-primary)"
+      });
+      __publicField(_this15, "handleKeyDown", function (e) {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          _this15.commit();
         }
-      }, f.title), /* @__PURE__ */React__namespace.createElement("div", {
-        style: {
-          fontSize: 12,
-          color: "var(--text-secondary)",
-          marginTop: 2,
-          lineHeight: 1.5
+      });
+      _this15.state = {
+        inputValue: String(props.page)
+      };
+      return _this15;
+    }
+    _inherits(Pagination, _React__namespace$Com6);
+    return _createClass(Pagination, [{
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps) {
+        if (prevProps.page !== this.props.page) {
+          this.setState({
+            inputValue: String(this.props.page)
+          });
         }
-      }, f.desc)));
-    })));
-  };
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this$props7 = this.props,
+          total = _this$props7.total,
+          page = _this$props7.page,
+          totalPages = _this$props7.totalPages,
+          onChangePage = _this$props7.onChangePage;
+        var inputValue = this.state.inputValue;
+        return /* @__PURE__ */React__namespace.createElement("div", {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 8,
+            padding: "8px 0",
+            marginTop: 8,
+            borderTop: "1px solid var(--border-light)"
+          }
+        }, /* @__PURE__ */React__namespace.createElement("span", {
+          style: {
+            fontSize: 12,
+            color: "var(--text-secondary)"
+          }
+        }, t(LangKey.PAGINATION_TOTAL), " ", total, " | ", t(LangKey.PAGINATION_PAGE_OF), " ", page, " / ", totalPages), /* @__PURE__ */React__namespace.createElement("div", {
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 4
+          }
+        }, /* @__PURE__ */React__namespace.createElement("button", {
+          type: "button",
+          onClick: function onClick() {
+            return page > 1 && onChangePage(page - 1);
+          },
+          disabled: page <= 1,
+          className: "icon-button small"
+        }, /* @__PURE__ */React__namespace.createElement(ChevronLeft, {
+          size: 14
+        })), /* @__PURE__ */React__namespace.createElement("button", {
+          type: "button",
+          onClick: function onClick() {
+            return page < totalPages && onChangePage(page + 1);
+          },
+          disabled: page >= totalPages,
+          className: "icon-button small"
+        }, /* @__PURE__ */React__namespace.createElement(ChevronRight, {
+          size: 14
+        })), /* @__PURE__ */React__namespace.createElement("span", {
+          style: {
+            fontSize: 12,
+            color: "var(--text-secondary)",
+            marginLeft: 4
+          }
+        }, t(LangKey.PAGINATION_PAGE)), /* @__PURE__ */React__namespace.createElement("input", {
+          type: "number",
+          min: 1,
+          max: Math.max(1, totalPages),
+          value: inputValue,
+          onChange: this.handleInputChange,
+          onBlur: this.commit,
+          onKeyDown: this.handleKeyDown,
+          className: "pagination-input",
+          style: {
+            width: "".concat(Math.min(4, Math.max(1, inputValue.length || 1)) * 10 + 14, "px"),
+            height: 24,
+            padding: "0 6px 0 6px",
+            borderRadius: 4,
+            border: "1px solid var(--border-light)",
+            background: "#fff",
+            fontSize: 12,
+            color: "var(--text-primary)",
+            textAlign: "center",
+            fontFamily: "inherit",
+            outline: "none",
+            MozAppearance: "textfield"
+          }
+        })));
+      }
+    }]);
+  }(React__namespace.Component);
   var parseFromField = function parseFromField(raw) {
     var email = extractEmail(raw);
     var decoded = String(raw || "").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
@@ -8053,15 +8742,15 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }, _callee9);
     }));
   };
-  var PAGE_SIZE = 6;
+  var PAGE_SIZE$1 = 6;
   var MAX_SELECTED = 5;
-  var MailListSelect = /*#__PURE__*/function (_React__namespace$Com6) {
+  var MailListSelect = /*#__PURE__*/function (_React__namespace$Com7) {
     function MailListSelect(props) {
-      var _this15;
+      var _this16;
       _classCallCheck(this, MailListSelect);
-      _this15 = _callSuper(this, MailListSelect, [props]);
-      __publicField(_this15, "loadPage", function (page) {
-        return __async(_this15, null, /*#__PURE__*/_regenerator().m(function _callee0() {
+      _this16 = _callSuper(this, MailListSelect, [props]);
+      __publicField(_this16, "loadPage", function (page) {
+        return __async(_this16, null, /*#__PURE__*/_regenerator().m(function _callee0() {
           var _yield$fetchMailList, items, total;
           return _regenerator().w(function (_context0) {
             while (1) switch (_context0.n) {
@@ -8072,7 +8761,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                 _context0.n = 1;
                 return fetchMailList({
                   page: page,
-                  pageSize: PAGE_SIZE,
+                  pageSize: PAGE_SIZE$1,
                   accountEmail: this.props.accountEmail
                 });
               case 1:
@@ -8091,8 +8780,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           }, _callee0, this);
         }));
       });
-      __publicField(_this15, "toggleMid", function (mid) {
-        _this15.setState(function (prev) {
+      __publicField(_this16, "toggleMid", function (mid) {
+        _this16.setState(function (prev) {
           var isSelected = prev.selectedMids.includes(mid);
           if (isSelected) {
             return {
@@ -8109,44 +8798,39 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           };
         });
       });
-      __publicField(_this15, "toggleAll", function () {
-        var _this15$state = _this15.state,
-          items = _this15$state.items,
-          selectedMids = _this15$state.selectedMids;
+      __publicField(_this16, "toggleAll", function () {
+        var _this16$state = _this16.state,
+          items = _this16$state.items,
+          selectedMids = _this16$state.selectedMids;
+        if (selectedMids.length >= MAX_SELECTED) {
+          _this16.setState({
+            selectedMids: []
+          });
+          return;
+        }
         var pageMids = items.map(function (it) {
           return it.mid;
         });
-        var allSelected = pageMids.every(function (m) {
-          return selectedMids.includes(m);
+        var merged = Array.from(/* @__PURE__ */new Set([].concat(_toConsumableArray(selectedMids), _toConsumableArray(pageMids)))).slice(0, MAX_SELECTED);
+        _this16.setState({
+          selectedMids: merged
         });
-        if (allSelected) {
-          _this15.setState({
-            selectedMids: selectedMids.filter(function (m) {
-              return !pageMids.includes(m);
-            })
-          });
-        } else {
-          var merged = Array.from(/* @__PURE__ */new Set([].concat(_toConsumableArray(selectedMids), _toConsumableArray(pageMids)))).slice(0, MAX_SELECTED);
-          _this15.setState({
-            selectedMids: merged
-          });
-        }
       });
-      __publicField(_this15, "clearAll", function () {
-        _this15.setState({
+      __publicField(_this16, "clearAll", function () {
+        _this16.setState({
           selectedMids: []
         });
       });
-      _this15.state = {
+      _this16.state = {
         page: 1,
         total: 0,
         items: [],
         selectedMids: _toConsumableArray(props.initialSelected),
         isLoading: false
       };
-      return _this15;
+      return _this16;
     }
-    _inherits(MailListSelect, _React__namespace$Com6);
+    _inherits(MailListSelect, _React__namespace$Com7);
     return _createClass(MailListSelect, [{
       key: "componentDidMount",
       value: function componentDidMount() {
@@ -8155,75 +8839,31 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }, {
       key: "renderPagination",
       value: function renderPagination() {
-        var _this16 = this;
         var _this$state5 = this.state,
           page = _this$state5.page,
           total = _this$state5.total;
-        var totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
-        var pages = [];
-        for (var _i9 = 1; _i9 <= totalPages; _i9++) pages.push(_i9);
-        return /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: 4,
-            padding: "12px 0"
-          }
-        }, /* @__PURE__ */React__namespace.createElement("button", {
-          type: "button",
-          onClick: function onClick() {
-            return page > 1 && _this16.loadPage(page - 1);
-          },
-          disabled: page <= 1,
-          className: "icon-button small"
-        }, "‹"), pages.map(function (p) {
-          return /* @__PURE__ */React__namespace.createElement("button", {
-            key: p,
-            type: "button",
-            onClick: function onClick() {
-              return p !== page && _this16.loadPage(p);
-            },
-            style: {
-              minWidth: 28,
-              height: 28,
-              borderRadius: 4,
-              border: "none",
-              background: p === page ? "var(--primary-main)" : "transparent",
-              color: p === page ? "var(--primary-contrasttext)" : "var(--text-primary)",
-              cursor: "pointer",
-              fontSize: 12,
-              fontFamily: "inherit",
-              fontWeight: p === page ? 600 : 400
-            }
-          }, p);
-        }), /* @__PURE__ */React__namespace.createElement("button", {
-          type: "button",
-          onClick: function onClick() {
-            return page < totalPages && _this16.loadPage(page + 1);
-          },
-          disabled: page >= totalPages,
-          className: "icon-button small"
-        }, "›"));
+        var totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE$1));
+        return /* @__PURE__ */React__namespace.createElement(Pagination, {
+          total: total,
+          page: page,
+          totalPages: totalPages,
+          onChangePage: this.loadPage
+        });
       }
     }, {
       key: "render",
       value: function render() {
         var _this17 = this;
-        var _this$props7 = this.props,
-          onCancel = _this$props7.onCancel,
-          onConfirm = _this$props7.onConfirm;
+        var _this$props8 = this.props,
+          onCancel = _this$props8.onCancel,
+          onConfirm = _this$props8.onConfirm,
+          isConfirming = _this$props8.isConfirming;
         var _this$state6 = this.state,
           items = _this$state6.items,
           total = _this$state6.total,
           selectedMids = _this$state6.selectedMids,
           isLoading = _this$state6.isLoading;
-        var pageMids = items.map(function (it) {
-          return it.mid;
-        });
-        var allOnPageSelected = pageMids.length > 0 && pageMids.every(function (m) {
-          return selectedMids.includes(m);
-        });
+        var isFull = selectedMids.length >= MAX_SELECTED;
         return /* @__PURE__ */React__namespace.createElement("div", {
           style: {
             display: "flex",
@@ -8243,7 +8883,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           }
         }, /* @__PURE__ */React__namespace.createElement(ArrowLeft, {
           size: 14
-        }), " Back"), /* @__PURE__ */React__namespace.createElement("div", {
+        }), " ", t(LangKey.BACK)), /* @__PURE__ */React__namespace.createElement("div", {
           style: {
             marginTop: 8
           }
@@ -8253,13 +8893,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             fontWeight: 600,
             color: "var(--text-primary)"
           }
-        }, "Add context from receive history"), /* @__PURE__ */React__namespace.createElement("div", {
+        }, t(LangKey.ADD_CONTEXT_TITLE)), /* @__PURE__ */React__namespace.createElement("div", {
           style: {
             fontSize: 12,
             color: "var(--text-secondary)",
             marginTop: 2
           }
-        }, "Select related emails to provide AI context.")), /* @__PURE__ */React__namespace.createElement("div", {
+        }, t(LangKey.ADD_CONTEXT_DESC))), /* @__PURE__ */React__namespace.createElement("div", {
           style: {
             display: "flex",
             alignItems: "center",
@@ -8272,21 +8912,36 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           style: {
             display: "inline-flex",
             alignItems: "center",
-            gap: 6,
+            gap: 8,
             fontSize: 12,
-            color: "var(--text-primary)",
+            color: "var(--text-secondary)",
             cursor: "pointer"
           }
         }, /* @__PURE__ */React__namespace.createElement("input", {
           type: "checkbox",
-          checked: allOnPageSelected,
+          checked: isFull,
           onChange: this.toggleAll
-        }), /* @__PURE__ */React__namespace.createElement("span", null, "Select all · ", total, " total")), /* @__PURE__ */React__namespace.createElement("span", {
+        }), /* @__PURE__ */React__namespace.createElement("span", {
+          style: {
+            background: "var(--primary-main)",
+            color: "var(--primary-contrasttext)",
+            padding: "2px 8px",
+            borderRadius: 999,
+            fontWeight: 600
+          }
+        }, selectedMids.length, "/", MAX_SELECTED), /* @__PURE__ */React__namespace.createElement("span", null, t(LangKey.SELECTED_UP_TO), " ", MAX_SELECTED), selectedMids.length > 0 && /* @__PURE__ */React__namespace.createElement("button", {
+          type: "button",
+          onClick: function onClick(e) {
+            e.preventDefault();
+            _this17.clearAll();
+          },
+          className: "text-button primary"
+        }, t(LangKey.CLEAR_ALL))), /* @__PURE__ */React__namespace.createElement("span", {
           style: {
             fontSize: 11,
             color: "var(--text-secondary)"
           }
-        }, "Sort: latest")), /* @__PURE__ */React__namespace.createElement("div", {
+        }, t(LangKey.SORT_LATEST))), /* @__PURE__ */React__namespace.createElement("div", {
           style: {
             flex: 1,
             minHeight: 0,
@@ -8294,21 +8949,17 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             paddingRight: 8,
             marginRight: -8
           }
-        }, isLoading ? /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            padding: 24,
-            textAlign: "center",
-            color: "var(--text-secondary)",
-            fontSize: 12
-          }
-        }, "Loading...") : items.length === 0 ? /* @__PURE__ */React__namespace.createElement("div", {
+        }, isLoading ? /* @__PURE__ */React__namespace.createElement(LoadingContainer, {
+          fullHeight: true,
+          size: "small"
+        }) : items.length === 0 ? /* @__PURE__ */React__namespace.createElement("div", {
           style: {
             padding: 24,
             textAlign: "center",
             color: "var(--text-secondary)",
             fontSize: 12
           }
-        }, "No emails found.") : items.map(function (it) {
+        }, t(LangKey.NO_EMAILS_FOUND)) : items.map(function (it) {
           var isChecked = selectedMids.includes(it.mid);
           var disabled = !isChecked && selectedMids.length >= MAX_SELECTED;
           return /* @__PURE__ */React__namespace.createElement("label", {
@@ -8387,44 +9038,6 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             }
           }, it.from_name, it.from_addr ? " <".concat(it.from_addr, ">") : "", it.preview ? " \xB7 ".concat(it.preview) : "")));
         }), !isLoading && items.length > 0 && this.renderPagination()), /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            paddingTop: 12,
-            borderTop: "1px solid var(--border-light)",
-            marginTop: 8,
-            gap: 8
-          }
-        }, /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            fontSize: 12,
-            color: "var(--text-secondary)",
-            display: "inline-flex",
-            alignItems: "center",
-            gap: 8
-          }
-        }, /* @__PURE__ */React__namespace.createElement("span", {
-          style: {
-            background: "var(--primary-main)",
-            color: "var(--primary-contrasttext)",
-            padding: "2px 8px",
-            borderRadius: 999,
-            fontWeight: 600
-          }
-        }, selectedMids.length, "/", MAX_SELECTED), /* @__PURE__ */React__namespace.createElement("span", null, "selected · up to ", MAX_SELECTED), selectedMids.length > 0 && /* @__PURE__ */React__namespace.createElement("button", {
-          type: "button",
-          onClick: this.clearAll,
-          style: {
-            border: "none",
-            background: "transparent",
-            color: "var(--primary-main)",
-            cursor: "pointer",
-            fontSize: 12,
-            padding: 0,
-            fontFamily: "inherit"
-          }
-        }, "Clear all"))), /* @__PURE__ */React__namespace.createElement("div", {
           style: {
             display: "flex",
             gap: 8,
@@ -8444,9 +9057,9 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             fontSize: 13,
             fontFamily: "inherit"
           }
-        }, "Cancel"), /* @__PURE__ */React__namespace.createElement("button", {
+        }, t(LangKey.CANCEL)), /* @__PURE__ */React__namespace.createElement("button", {
           type: "button",
-          disabled: selectedMids.length === 0,
+          disabled: selectedMids.length === 0 || isConfirming,
           onClick: function onClick() {
             return onConfirm(selectedMids);
           },
@@ -8455,25 +9068,174 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             padding: "10px 12px",
             borderRadius: 8,
             border: "none",
-            background: selectedMids.length === 0 ? "var(--primary-lighter)" : "var(--primary-main)",
+            background: selectedMids.length === 0 || isConfirming ? "var(--primary-lighter)" : "var(--primary-main)",
             color: "var(--primary-contrasttext)",
-            cursor: selectedMids.length === 0 ? "not-allowed" : "pointer",
+            cursor: selectedMids.length === 0 || isConfirming ? "not-allowed" : "pointer",
             fontSize: 13,
             fontWeight: 600,
+            fontFamily: "inherit",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 8
+          }
+        }, isConfirming && /* @__PURE__ */React__namespace.createElement(LoadingCircular, {
+          size: 16,
+          color: "var(--primary-contrasttext)"
+        }), /* @__PURE__ */React__namespace.createElement("span", null, t(LangKey.ADD), " ", selectedMids.length > 0 ? "".concat(selectedMids.length, " ") : "", t(LangKey.ADD_AS_CONTEXT)))));
+      }
+    }]);
+  }(React__namespace.Component);
+  var BaseModal = /*#__PURE__*/function (_React__namespace$Com8) {
+    function BaseModal() {
+      var _this18;
+      _classCallCheck(this, BaseModal);
+      _this18 = _callSuper(this, BaseModal, arguments);
+      __publicField(_this18, "handleKeyDown", function (e) {
+        if (e.key === "Escape" && _this18.props.isOpen) _this18.props.onClose();
+      });
+      return _this18;
+    }
+    _inherits(BaseModal, _React__namespace$Com8);
+    return _createClass(BaseModal, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        document.addEventListener("keydown", this.handleKeyDown);
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        document.removeEventListener("keydown", this.handleKeyDown);
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this$props9 = this.props,
+          isOpen = _this$props9.isOpen,
+          onClose = _this$props9.onClose,
+          header = _this$props9.header,
+          children = _this$props9.children,
+          _this$props9$maxWidth = _this$props9.maxWidth,
+          maxWidth = _this$props9$maxWidth === void 0 ? 600 : _this$props9$maxWidth;
+        if (!isOpen) return null;
+        return ReactDOM__namespace.createPortal(/* @__PURE__ */React__namespace.createElement("div", {
+          onClick: onClose,
+          style: {
+            position: "fixed",
+            inset: 0,
+            background: "rgba(0, 0, 0, 0.1)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1100,
+            padding: 16
+          }
+        }, /* @__PURE__ */React__namespace.createElement("div", {
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          },
+          style: {
+            background: "#fff",
+            borderRadius: 12,
+            maxWidth: maxWidth,
+            width: "100%",
+            maxHeight: "80vh",
+            display: "flex",
+            flexDirection: "column",
+            boxShadow: "0 10px 40px rgba(0, 0, 0, 0.15)",
+            overflow: "hidden",
             fontFamily: "inherit"
           }
-        }, "Add ", selectedMids.length > 0 ? "".concat(selectedMids.length, " ") : "", "as context →")));
+        }, /* @__PURE__ */React__namespace.createElement("div", {
+          style: {
+            display: "flex",
+            alignItems: "flex-start",
+            gap: 8,
+            padding: "16px 16px 12px",
+            borderBottom: "1px solid var(--border-light)"
+          }
+        }, /* @__PURE__ */React__namespace.createElement("div", {
+          style: {
+            flex: 1,
+            minWidth: 0
+          }
+        }, header), /* @__PURE__ */React__namespace.createElement("button", {
+          type: "button",
+          onClick: onClose,
+          className: "icon-button small"
+        }, /* @__PURE__ */React__namespace.createElement(X, {
+          size: 16
+        }))), /* @__PURE__ */React__namespace.createElement("div", {
+          style: {
+            flex: 1,
+            minHeight: 0,
+            overflowY: "auto",
+            padding: 16,
+            fontSize: 13,
+            lineHeight: 1.6,
+            color: "var(--text-primary)"
+          }
+        }, children))), document.body);
+      }
+    }]);
+  }(React__namespace.Component);
+  var renderMarkdown = function renderMarkdown(md) {
+    try {
+      return marked.parse(md, {
+        async: false
+      });
+    } catch (e) {
+      return md;
+    }
+  };
+  var MailHeader = function MailHeader(_ref35) {
+    var mail = _ref35.mail;
+    return /* @__PURE__ */React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        fontSize: 14,
+        fontWeight: 600,
+        color: "var(--text-primary)",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
       }
-    }]);
-  }(React__namespace.Component);
-  var ReplyPanel = /*#__PURE__*/function (_React__namespace$Com7) {
+    }, mail.subject || t(LangKey.NO_SUBJECT)), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        fontSize: 12,
+        color: "var(--text-secondary)",
+        marginTop: 2,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }
+    }, mail.from_name, mail.from_addr ? " <".concat(mail.from_addr, ">") : "", mail.date ? " \xB7 ".concat(mail.date) : ""));
+  };
+  var ContextPreviewModal = function ContextPreviewModal(_ref36) {
+    var preview = _ref36.preview,
+      onClose = _ref36.onClose;
+    var html2 = preview ? preview.mode === "html" ? preview.mail.contents || "" : renderMarkdown(preview.mail.ai_contents || "") : "";
+    return /* @__PURE__ */React__namespace.createElement(BaseModal, {
+      isOpen: !!preview,
+      onClose: onClose,
+      header: preview && /* @__PURE__ */React__namespace.createElement(MailHeader, {
+        mail: preview.mail
+      }),
+      maxWidth: (preview == null ? void 0 : preview.mode) === "html" ? 900 : 600
+    }, preview && /* @__PURE__ */React__namespace.createElement("div", {
+      className: "chat-ai-context-preview",
+      dangerouslySetInnerHTML: {
+        __html: html2
+      }
+    }));
+  };
+  var ReplyPanel = /*#__PURE__*/function (_React__namespace$Com9) {
     function ReplyPanel(props) {
-      var _this18;
+      var _this19;
       _classCallCheck(this, ReplyPanel);
-      _this18 = _callSuper(this, ReplyPanel, [props]);
-      __publicField(_this18, "rootRef");
-      __publicField(_this18, "loadSourceMail", function () {
-        return __async(_this18, null, /*#__PURE__*/_regenerator().m(function _callee1() {
+      _this19 = _callSuper(this, ReplyPanel, [props]);
+      __publicField(_this19, "rootRef");
+      __publicField(_this19, "loadSourceMail", function () {
+        return __async(_this19, null, /*#__PURE__*/_regenerator().m(function _callee1() {
           var sourceMid, view;
           return _regenerator().w(function (_context1) {
             while (1) switch (_context1.n) {
@@ -8517,18 +9279,18 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           }, _callee1, this);
         }));
       });
-      __publicField(_this18, "handleAddClick", function () {
-        _this18.setState({
+      __publicField(_this19, "handleAddClick", function () {
+        _this19.setState({
           view: "list"
         });
       });
-      __publicField(_this18, "handleListCancel", function () {
-        _this18.setState({
-          view: _this18.state.messages.length > 0 ? "chat" : "empty"
+      __publicField(_this19, "handleListCancel", function () {
+        _this19.setState({
+          view: _this19.state.messages.length > 0 ? "chat" : "empty"
         });
       });
-      __publicField(_this18, "handleListConfirm", function (mids) {
-        return __async(_this18, null, /*#__PURE__*/_regenerator().m(function _callee10() {
+      __publicField(_this19, "handleListConfirm", function (mids) {
+        return __async(_this19, null, /*#__PURE__*/_regenerator().m(function _callee10() {
           var selectedMails;
           return _regenerator().w(function (_context10) {
             while (1) switch (_context10.n) {
@@ -8551,21 +9313,42 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           }, _callee10, this);
         }));
       });
-      __publicField(_this18, "handleRemoveSelected", function (mid) {
-        _this18.setState({
-          selectedMails: _this18.state.selectedMails.filter(function (m) {
+      __publicField(_this19, "handleRemoveSelected", function (mid) {
+        _this19.setState({
+          selectedMails: _this19.state.selectedMails.filter(function (m) {
             return m.mid !== mid;
           })
         });
       });
-      __publicField(_this18, "handleMessageChange", function (value) {
-        _this18.setState({
+      __publicField(_this19, "handlePreviewSelected", function (mail) {
+        _this19.setState({
+          preview: {
+            mail: mail,
+            mode: "ai"
+          }
+        });
+      });
+      __publicField(_this19, "handlePreviewSource", function (mail) {
+        _this19.setState({
+          preview: {
+            mail: mail,
+            mode: "html"
+          }
+        });
+      });
+      __publicField(_this19, "handlePreviewClose", function () {
+        _this19.setState({
+          preview: null
+        });
+      });
+      __publicField(_this19, "handleMessageChange", function (value) {
+        _this19.setState({
           message: value
         });
       });
-      __publicField(_this18, "handleSubmit", function () {
-        return __async(_this18, null, /*#__PURE__*/_regenerator().m(function _callee11() {
-          var _this19 = this;
+      __publicField(_this19, "handleSubmit", function () {
+        return __async(_this19, null, /*#__PURE__*/_regenerator().m(function _callee11() {
+          var _this20 = this;
           var type, _this$state7, message, messages, lang, tone, length, conversationId, sourceMail, selectedMails, newId, newMessage, params, setContent, setIsLoading, setConversationId;
           return _regenerator().w(function (_context11) {
             while (1) switch (_context11.n) {
@@ -8612,7 +9395,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                 if (length) params.length = length.value;
                 if (conversationId) params.conversation_id = conversationId;
                 setContent = function setContent(nContent) {
-                  _this19.setState(function (prevState) {
+                  _this20.setState(function (prevState) {
                     return {
                       messages: prevState.messages.map(function (m) {
                         return m.id === newId ? __spreadProps(__spreadValues({}, m), {
@@ -8626,7 +9409,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                   });
                 };
                 setIsLoading = function setIsLoading(loading) {
-                  _this19.setState(function (prevState) {
+                  _this20.setState(function (prevState) {
                     return {
                       messages: prevState.messages.map(function (m) {
                         return m.id === newId ? __spreadProps(__spreadValues({}, m), {
@@ -8637,7 +9420,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                   });
                 };
                 setConversationId = function setConversationId(id) {
-                  _this19.setState({
+                  _this20.setState({
                     conversationId: id
                   });
                 };
@@ -8657,360 +9440,713 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           }, _callee11, this);
         }));
       });
-      __publicField(_this18, "setLang", function (lang) {
-        return _this18.setState({
+      __publicField(_this19, "setLang", function (lang) {
+        return _this19.setState({
           lang: lang
         });
       });
-      __publicField(_this18, "setTone", function (tone) {
-        return _this18.setState({
+      __publicField(_this19, "setTone", function (tone) {
+        return _this19.setState({
           tone: tone
         });
       });
-      __publicField(_this18, "setLength", function (length) {
-        return _this18.setState({
+      __publicField(_this19, "setLength", function (length) {
+        return _this19.setState({
           length: length
         });
       });
-      _this18.rootRef = React__namespace.createRef();
+      _this19.rootRef = 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];
-      _this18.state = {
+      _this19.state = {
         view: "empty",
         sourceMail: null,
         accountEmail: "",
         selectedMails: [],
         isLoadingSource: false,
         isLoadingSelected: false,
+        preview: null,
         message: "",
         messages: [],
         isSending: false,
         lang: lang,
-        tone: TONE_OPTIONS[2],
-        length: LENGTH_OPTIONS[2],
+        tone: getToneOptions()[2],
+        length: getLengthOptions()[2],
         conversationId: ""
       };
-      return _this18;
+      return _this19;
     }
-    _inherits(ReplyPanel, _React__namespace$Com7);
+    _inherits(ReplyPanel, _React__namespace$Com9);
     return _createClass(ReplyPanel, [{
       key: "componentDidMount",
       value: function componentDidMount() {
         this.loadSourceMail();
       }
     }, {
-      key: "renderContextHeader",
-      value: function renderContextHeader() {
-        var _this20 = this;
+      key: "render",
+      value: function render() {
+        var _this$props0 = this.props,
+          onApply = _this$props0.onApply,
+          getEditorContent = _this$props0.getEditorContent;
         var _this$state8 = this.state,
+          view = _this$state8.view,
           sourceMail = _this$state8.sourceMail,
-          selectedMails = _this$state8.selectedMails;
+          accountEmail = _this$state8.accountEmail,
+          selectedMails = _this$state8.selectedMails,
+          message = _this$state8.message,
+          messages = _this$state8.messages,
+          isSending = _this$state8.isSending,
+          lang = _this$state8.lang,
+          tone = _this$state8.tone,
+          length = _this$state8.length,
+          isLoadingSelected = _this$state8.isLoadingSelected,
+          preview = _this$state8.preview;
+        if (view === "list") {
+          return /* @__PURE__ */React__namespace.createElement(MailListSelect, {
+            accountEmail: accountEmail,
+            initialSelected: selectedMails.map(function (m) {
+              return m.mid;
+            }),
+            isConfirming: isLoadingSelected,
+            onCancel: this.handleListCancel,
+            onConfirm: this.handleListConfirm
+          });
+        }
         return /* @__PURE__ */React__namespace.createElement("div", {
+          ref: this.rootRef,
           style: {
             display: "flex",
+            height: "100%",
+            padding: 16,
             flexDirection: "column",
-            gap: 8,
-            paddingBottom: 12,
-            borderBottom: "1px solid var(--border-light)",
-            marginBottom: 12
-          }
-        }, sourceMail && /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: 4
-          }
-        }, /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 6,
-            fontSize: 12,
-            fontWeight: 600,
-            color: "var(--text-primary)"
-          }
-        }, /* @__PURE__ */React__namespace.createElement("span", null, "Source context"), /* @__PURE__ */React__namespace.createElement("span", {
-          style: {
-            background: "var(--primary-main)",
-            color: "var(--primary-contrasttext)",
-            fontSize: 10,
-            padding: "1px 6px",
-            borderRadius: 999
-          }
-        }, "1"), /* @__PURE__ */React__namespace.createElement("span", {
-          style: {
-            display: "inline-flex",
-            alignItems: "center",
-            gap: 2,
-            fontSize: 11,
-            color: "var(--text-secondary)"
+            background: "#fff",
+            fontFamily: "inherit",
+            boxSizing: "border-box"
           }
-        }, /* @__PURE__ */React__namespace.createElement(Lock, {
-          size: 11
-        }), " Auto")), /* @__PURE__ */React__namespace.createElement("div", {
+        }, /* @__PURE__ */React__namespace.createElement(ContextHeader, {
+          sourceMail: sourceMail,
+          selectedMails: selectedMails,
+          onAddClick: this.handleAddClick,
+          onSourceClick: this.handlePreviewSource,
+          onChipClick: this.handlePreviewSelected,
+          onRemoveChip: this.handleRemoveSelected
+        }), view === "chat" ? /* @__PURE__ */React__namespace.createElement(ChatList, {
+          items: messages,
+          onApply: onApply,
+          getEditorContent: getEditorContent
+        }) : /* @__PURE__ */React__namespace.createElement(EmptyState, null), isLoadingSelected && /* @__PURE__ */React__namespace.createElement("div", {
           style: {
             fontSize: 12,
             color: "var(--text-secondary)",
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "ellipsis"
-          }
-        }, sourceMail.subject, " ·", " ", /* @__PURE__ */React__namespace.createElement("span", {
-          style: {
-            color: "var(--text-primary)"
-          }
-        }, sourceMail.from_name))), /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: 6
-          }
-        }, /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between"
-          }
-        }, /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 6,
-            fontSize: 12,
-            fontWeight: 600,
-            color: "var(--text-primary)"
-          }
-        }, /* @__PURE__ */React__namespace.createElement("span", null, "Selected context"), /* @__PURE__ */React__namespace.createElement("span", {
-          style: {
-            background: "var(--background-softGrey)",
-            color: "var(--text-primary)",
-            fontSize: 10,
-            padding: "1px 6px",
-            borderRadius: 999
+            padding: 8,
+            textAlign: "center"
           }
-        }, selectedMails.length)), /* @__PURE__ */React__namespace.createElement("button", {
-          type: "button",
-          onClick: this.handleAddClick,
-          className: "text-button primary"
-        }, /* @__PURE__ */React__namespace.createElement(Plus, {
-          size: 12
-        }), " Add")), selectedMails.length > 0 && /* @__PURE__ */React__namespace.createElement("div", {
+        }, t(LangKey.REPLY_LOADING_CONTEXT)), /* @__PURE__ */React__namespace.createElement(ChatInput, {
+          message: message,
+          onMessageChange: this.handleMessageChange,
+          onSubmit: this.handleSubmit,
+          isSending: isSending,
+          lang: lang,
+          setLang: this.setLang,
+          tone: tone,
+          setTone: this.setTone,
+          length: length,
+          setLength: this.setLength,
+          parentRef: this.rootRef,
+          placeholder: t(LangKey.CHAT_INPUT_PLACEHOLDER_REPLY)
+        }), /* @__PURE__ */React__namespace.createElement(ContextPreviewModal, {
+          preview: preview,
+          onClose: this.handlePreviewClose
+        }));
+      }
+    }]);
+  }(React__namespace.Component);
+  var ChatAIDraft = function ChatAIDraft(props) {
+    var _a2 = props,
+      _a2$type = _a2.type,
+      type = _a2$type === void 0 ? "new" : _a2$type,
+      sourceMid = _a2.sourceMid,
+      userLang = _a2.userLang,
+      rest = __objRest(_a2, ["type", "sourceMid", "userLang"]);
+    React__namespace.useEffect(function () {
+      if (userLang) {
+        SDKConfig.lang = userLang;
+      }
+    }, [userLang]);
+    if ((type === "reply" || type === "forward") && sourceMid) {
+      return /* @__PURE__ */React__namespace.createElement(ReplyPanel, __spreadValues({
+        type: type,
+        sourceMid: sourceMid
+      }, rest));
+    }
+    return /* @__PURE__ */React__namespace.createElement(CreatePanel, __spreadValues({}, rest));
+  };
+  var TargetInfoBar = function TargetInfoBar(_ref37) {
+    var targetName = _ref37.targetName,
+      targetEmail = _ref37.targetEmail,
+      currentLangLabel = _ref37.currentLangLabel,
+      onOpenLang = _ref37.onOpenLang;
+    return /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: 12,
+        gap: 8
+      }
+    }, /* @__PURE__ */React__namespace.createElement("span", {
+      style: {
+        fontSize: 13,
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: 6,
+        minWidth: 0
+      }
+    }, targetName && /* @__PURE__ */React__namespace.createElement("span", {
+      style: {
+        fontSize: 14,
+        fontWeight: 600,
+        color: "var(--text-primary)"
+      }
+    }, targetName), targetEmail && /* @__PURE__ */React__namespace.createElement("span", {
+      style: {
+        color: "var(--text-secondary)",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }
+    }, targetEmail)), /* @__PURE__ */React__namespace.createElement("span", {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        flexShrink: 0
+      }
+    }, /* @__PURE__ */React__namespace.createElement("span", {
+      style: {
+        fontSize: 13,
+        color: "var(--text-primary)"
+      }
+    }, currentLangLabel), /* @__PURE__ */React__namespace.createElement("button", {
+      type: "button",
+      onClick: function onClick(e) {
+        return onOpenLang(e.currentTarget);
+      },
+      className: "icon-button small"
+    }, /* @__PURE__ */React__namespace.createElement(Globe, {
+      size: 14
+    }), /* @__PURE__ */React__namespace.createElement(ChevronDown, {
+      size: 12,
+      style: {
+        marginLeft: 2
+      }
+    }))));
+  };
+  var PAGE_SIZE = 5;
+  var FILTERS = [{
+    value: "all",
+    label: LangKey.ALL
+  }, {
+    value: "receive",
+    label: LangKey.RECEIVED
+  }, {
+    value: "sent",
+    label: LangKey.SENT
+  }];
+  var formatDate = function formatDate(raw) {
+    if (!raw) return "";
+    return String(raw).replace(/\//g, "-");
+  };
+  var parseDataLine = function parseDataLine(line) {
+    if (!line) return null;
+    var trimmed = line.trim();
+    if (trimmed.startsWith("{")) {
+      try {
+        var parsed = JSON.parse(trimmed);
+        return parsed;
+      } catch (e) {}
+    }
+    var parts = trimmed.split("|").map(function (p) {
+      return p.trim();
+    });
+    if (parts.length < 2) return null;
+    var _parts = _toArray(parts),
+      date = _parts[0],
+      sig = _parts[1],
+      _parts$ = _parts[2],
+      subject = _parts$ === void 0 ? "" : _parts$,
+      rest = _arrayLikeToArray(_parts).slice(3);
+    var messages = rest.join(" | ");
+    var direction = sig === "out" ? "sent" : "receive";
+    return {
+      date: date,
+      sig: sig,
+      direction: direction,
+      direction_label: direction === "sent" ? LangKey.SENT : LangKey.RECEIVED,
+      subject: subject,
+      messages: messages
+    };
+  };
+  var findLangLabel = function findLangLabel(lang, langList) {
+    var found = langList == null ? void 0 : langList.find(function (l) {
+      return l.value === lang;
+    });
+    if (found) return found.label;
+    return lang === "ko" ? "한국어" : lang;
+  };
+  var FilterTabs = function FilterTabs(_ref38) {
+    var mailtype = _ref38.mailtype,
+      onChangeFilter = _ref38.onChangeFilter;
+    return /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: 12,
+        gap: 8
+      }
+    }, /* @__PURE__ */React__namespace.createElement("span", {
+      style: {
+        fontSize: 13,
+        color: "var(--text-secondary)"
+      }
+    }, t(LangKey.SUMMARY_WARNING)), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        display: "inline-flex",
+        background: "var(--background-softGrey)",
+        borderRadius: 6,
+        padding: 2,
+        flexShrink: 0
+      }
+    }, FILTERS.map(function (f) {
+      var isActive = mailtype === f.value;
+      return /* @__PURE__ */React__namespace.createElement("button", {
+        key: f.value,
+        type: "button",
+        onClick: function onClick() {
+          return onChangeFilter(f.value);
+        },
+        style: {
+          border: "none",
+          background: isActive ? "var(--primary-main)" : "transparent",
+          color: isActive ? "var(--primary-contrasttext)" : "var(--text-primary)",
+          fontSize: 12,
+          fontWeight: isActive ? 600 : 400,
+          padding: "4px 12px",
+          borderRadius: 4,
+          cursor: "pointer",
+          fontFamily: "inherit",
+          transition: "background 0.15s ease-in-out"
+        }
+      }, t(f.label));
+    })));
+  };
+  var SummaryItem = function SummaryItem(_ref39) {
+    var item = _ref39.item;
+    var isSent = (item == null ? void 0 : item.direction) === "sent" || (item == null ? void 0 : item.sig) === "out";
+    return /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        background: "#fff",
+        border: "1px solid var(--border-light)",
+        borderRadius: 8,
+        padding: 12
+      }
+    }, /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        marginBottom: 4
+      }
+    }, /* @__PURE__ */React__namespace.createElement("span", {
+      style: {
+        color: "var(--text-secondary)",
+        fontSize: 12
+      }
+    }, formatDate(item == null ? void 0 : item.date)), /* @__PURE__ */React__namespace.createElement("span", {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 2,
+        padding: "2px 6px",
+        borderRadius: 4,
+        fontSize: 11,
+        fontWeight: 500,
+        background: isSent ? "rgba(33, 150, 243, 0.1)" : "rgba(76, 175, 80, 0.1)",
+        color: isSent ? "#1976d2" : "#2e7d32"
+      }
+    }, isSent ? /* @__PURE__ */React__namespace.createElement(ArrowUp, {
+      size: 11
+    }) : /* @__PURE__ */React__namespace.createElement(ArrowDown, {
+      size: 11
+    }), t(isSent ? LangKey.SENT : LangKey.RECEIVED))), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        fontSize: 14,
+        fontWeight: 600,
+        color: "var(--text-primary)",
+        marginBottom: 4
+      }
+    }, (item == null ? void 0 : item.subject) || "-"), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        fontSize: 13,
+        color: "var(--text-secondary)",
+        lineHeight: 1.5
+      }
+    }, (item == null ? void 0 : item.messages) || ""));
+  };
+  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 LanguagePopover = /*#__PURE__*/function (_React__namespace$Com0) {
+    function LanguagePopover(props) {
+      var _this21;
+      _classCallCheck(this, LanguagePopover);
+      _this21 = _callSuper(this, LanguagePopover, [props]);
+      __publicField(_this21, "panelRef");
+      __publicField(_this21, "updatePosition", function () {
+        var anchorEl = _this21.props.anchorEl;
+        if (!anchorEl) return;
+        var rect = anchorEl.getBoundingClientRect();
+        var top = rect.bottom + (window.scrollY || document.documentElement.scrollTop) + 4;
+        var right = window.innerWidth - rect.right - (window.scrollX || document.documentElement.scrollLeft);
+        _this21.setState({
+          top: top,
+          left: window.innerWidth - right - 180
+        });
+      });
+      __publicField(_this21, "handleClickOutside", function (e) {
+        var target = e.target;
+        if (_this21.panelRef.current && !_this21.panelRef.current.contains(target) && _this21.props.anchorEl && !_this21.props.anchorEl.contains(target)) {
+          _this21.props.onClose();
+        }
+      });
+      _this21.panelRef = React__namespace.createRef();
+      _this21.state = {
+        top: 0,
+        left: 0
+      };
+      return _this21;
+    }
+    _inherits(LanguagePopover, _React__namespace$Com0);
+    return _createClass(LanguagePopover, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        document.addEventListener("mousedown", this.handleClickOutside);
+        this.updatePosition();
+      }
+    }, {
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps) {
+        if (prevProps.anchorEl !== this.props.anchorEl) {
+          this.updatePosition();
+        }
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        document.removeEventListener("mousedown", this.handleClickOutside);
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this$props1 = this.props,
+          anchorEl = _this$props1.anchorEl,
+          langList = _this$props1.langList,
+          currentLang = _this$props1.currentLang,
+          onSelect = _this$props1.onSelect;
+        if (!anchorEl) return null;
+        var _this$state9 = this.state,
+          top = _this$state9.top,
+          left = _this$state9.left;
+        return ReactDOM__namespace.createPortal(/* @__PURE__ */React__namespace.createElement("div", {
+          ref: this.panelRef,
           style: {
-            display: "flex",
-            flexWrap: "wrap",
-            gap: 6
+            position: "absolute",
+            top: top,
+            left: left,
+            width: 180,
+            maxHeight: 280,
+            overflowY: "auto",
+            background: "#fff",
+            border: "1px solid var(--border-main)",
+            borderRadius: 6,
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
+            zIndex: 1200,
+            padding: "4px 0"
           }
-        }, selectedMails.map(function (m, i) {
-          return /* @__PURE__ */React__namespace.createElement("div", {
-            key: m.mid,
-            style: {
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 6,
-              padding: "4px 8px",
-              borderRadius: 8,
-              border: "1px solid var(--border-light)",
-              background: "var(--primary-lighter)",
-              fontSize: 11,
-              maxWidth: 160
-            }
-          }, /* @__PURE__ */React__namespace.createElement("span", {
-            style: {
-              width: 14,
-              height: 14,
-              borderRadius: "50%",
-              background: "var(--primary-main)",
-              color: "var(--primary-contrasttext)",
-              fontSize: 9,
-              fontWeight: 700,
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              flexShrink: 0
-            }
-          }, i + 1), /* @__PURE__ */React__namespace.createElement("span", {
-            style: {
-              whiteSpace: "nowrap",
-              overflow: "hidden",
-              textOverflow: "ellipsis"
-            }
-          }, m.subject || "(no subject)"), /* @__PURE__ */React__namespace.createElement("button", {
+        }, langList.map(function (l) {
+          var isActive = l.value === currentLang;
+          var flag = getFlagCode(l.value);
+          return /* @__PURE__ */React__namespace.createElement("button", {
+            key: l.value,
             type: "button",
             onClick: function onClick() {
-              return _this20.handleRemoveSelected(m.mid);
+              return onSelect(l.value);
             },
             style: {
+              width: "100%",
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "8px 12px",
               border: "none",
-              background: "transparent",
+              background: isActive ? "var(--primary-lighter)" : "transparent",
               cursor: "pointer",
-              padding: 0,
-              color: "var(--text-secondary)",
-              display: "inline-flex",
-              alignItems: "center",
+              fontSize: 13,
+              fontFamily: "inherit",
+              textAlign: "left",
+              color: "var(--text-primary)"
+            }
+          }, flag && /* @__PURE__ */React__namespace.createElement(CountryFlag, {
+            flagCode: flag,
+            style: {
+              width: 18,
+              height: 14,
               flexShrink: 0
             }
-          }, "×"));
-        }))));
+          }), /* @__PURE__ */React__namespace.createElement("span", null, l.label));
+        })), document.body);
+      }
+    }]);
+  }(React__namespace.Component);
+  var INITIAL_META = {
+    total: 0,
+    receive: 0,
+    sent: 0,
+    totalPages: 1,
+    filterCount: 0
+  };
+  var SummaryAIEmails = /*#__PURE__*/function (_React__namespace$Com1) {
+    function SummaryAIEmails(props) {
+      var _this22;
+      _classCallCheck(this, SummaryAIEmails);
+      _this22 = _callSuper(this, SummaryAIEmails, [props]);
+      __publicField(_this22, "eventSource", null);
+      __publicField(_this22, "closeStream", function () {
+        if (_this22.eventSource) {
+          _this22.eventSource.close();
+          _this22.eventSource = null;
+        }
+      });
+      __publicField(_this22, "startStream", function () {
+        var targetEmail = _this22.props.targetEmail;
+        var _this22$state = _this22.state,
+          lang = _this22$state.lang,
+          mailtype = _this22$state.mailtype,
+          page = _this22$state.page;
+        if (!targetEmail) return;
+        _this22.closeStream();
+        _this22.setState({
+          items: [],
+          isLoading: true
+        });
+        var url = "".concat(getBaseUrl(), "/email/ai/fromsumstreaming/").concat(encodeURIComponent(targetEmail), "/").concat(lang, "/").concat(PAGE_SIZE, "/").concat(page, "?mailtype=").concat(mailtype);
+        var es = new EventSource(url);
+        _this22.eventSource = es;
+        es.addEventListener("meta", function (ev) {
+          var _a2, _b, _c;
+          try {
+            var parsed = JSON.parse(ev.data || "{}");
+            _this22.setState({
+              meta: {
+                total: ((_a2 = parsed == null ? void 0 : parsed.counts) == null ? void 0 : _a2.total) || 0,
+                receive: ((_b = parsed == null ? void 0 : parsed.counts) == null ? void 0 : _b.receive) || 0,
+                sent: ((_c = parsed == null ? void 0 : parsed.counts) == null ? void 0 : _c.sent) || 0,
+                totalPages: (parsed == null ? void 0 : parsed.total_pages) || 1,
+                filterCount: (parsed == null ? void 0 : parsed.filter_count) || 0
+              }
+            });
+          } catch (e) {}
+        });
+        es.onmessage = function (ev) {
+          if (!(ev == null ? void 0 : ev.data)) return;
+          if (ev.data === "[DONE]") {
+            _this22.closeStream();
+            _this22.setState({
+              isLoading: false
+            });
+            return;
+          }
+          var parsed = parseDataLine(ev.data);
+          if (parsed) {
+            _this22.setState(function (prev) {
+              return {
+                items: [].concat(_toConsumableArray(prev.items), [parsed]),
+                isLoading: false
+              };
+            });
+          }
+        };
+        es.onerror = function () {
+          _this22.closeStream();
+          _this22.setState({
+            isLoading: false
+          });
+        };
+      });
+      __publicField(_this22, "handleChangeFilter", function (val) {
+        if (val === _this22.state.mailtype) return;
+        _this22.setState({
+          mailtype: val,
+          page: 1
+        });
+      });
+      __publicField(_this22, "handleChangeLang", function (val) {
+        _this22.setState({
+          langAnchor: null
+        });
+        if (val === _this22.state.lang) return;
+        _this22.setState({
+          lang: val,
+          page: 1
+        });
+      });
+      __publicField(_this22, "handleChangePage", function (page) {
+        _this22.setState({
+          page: page
+        });
+      });
+      __publicField(_this22, "handleOpenLang", function (anchor) {
+        _this22.setState({
+          langAnchor: anchor
+        });
+      });
+      __publicField(_this22, "handleCloseLang", function () {
+        _this22.setState({
+          langAnchor: null
+        });
+      });
+      _this22.state = {
+        lang: props.defaultLang || "ko",
+        mailtype: "all",
+        page: 1,
+        items: [],
+        meta: INITIAL_META,
+        isLoading: false,
+        langAnchor: null
+      };
+      if (props.userLang) {
+        SDKConfig.lang = props.userLang;
+      }
+      return _this22;
+    }
+    _inherits(SummaryAIEmails, _React__namespace$Com1);
+    return _createClass(SummaryAIEmails, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this.startStream();
+      }
+    }, {
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps, prevState) {
+        if (this.props.userLang !== prevProps.userLang && this.props.userLang) {
+          SDKConfig.lang = this.props.userLang;
+          this.forceUpdate();
+        }
+        var targetChanged = prevProps.targetEmail !== this.props.targetEmail;
+        var filterChanged = prevState.lang !== this.state.lang || prevState.mailtype !== this.state.mailtype || prevState.page !== this.state.page;
+        if (targetChanged || filterChanged) {
+          this.startStream();
+        }
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this.closeStream();
       }
     }, {
       key: "render",
       value: function render() {
-        var _this$props8 = this.props,
-          onApply = _this$props8.onApply,
-          getEditorContent = _this$props8.getEditorContent;
-        var _this$state9 = this.state,
-          view = _this$state9.view,
-          sourceMail = _this$state9.sourceMail,
-          accountEmail = _this$state9.accountEmail,
-          selectedMails = _this$state9.selectedMails,
-          message = _this$state9.message,
-          messages = _this$state9.messages,
-          isSending = _this$state9.isSending,
-          lang = _this$state9.lang,
-          tone = _this$state9.tone,
-          length = _this$state9.length,
-          isLoadingSelected = _this$state9.isLoadingSelected;
-        if (view === "list") {
-          return /* @__PURE__ */React__namespace.createElement(MailListSelect, {
-            accountEmail: accountEmail,
-            initialSelected: selectedMails.map(function (m) {
-              return m.mid;
-            }),
-            onCancel: this.handleListCancel,
-            onConfirm: this.handleListConfirm
-          });
-        }
+        var _this$props10 = this.props,
+          targetEmail = _this$props10.targetEmail,
+          targetName = _this$props10.targetName,
+          _this$props10$langLis = _this$props10.langList,
+          langList = _this$props10$langLis === void 0 ? [] : _this$props10$langLis;
+        var _this$state0 = this.state,
+          lang = _this$state0.lang,
+          mailtype = _this$state0.mailtype,
+          page = _this$state0.page,
+          items = _this$state0.items,
+          meta = _this$state0.meta,
+          isLoading = _this$state0.isLoading,
+          langAnchor = _this$state0.langAnchor;
+        var currentLangLabel = findLangLabel(lang, langList);
+        var totalPages = Math.max(1, meta.totalPages || Math.ceil((meta.filterCount || meta.total) / PAGE_SIZE));
+        var filterCount = meta.filterCount || meta.total || 0;
         return /* @__PURE__ */React__namespace.createElement("div", {
-          ref: this.rootRef,
           style: {
             display: "flex",
-            height: "100%",
-            padding: 16,
             flexDirection: "column",
-            background: "#fff",
+            background: "var(--background-softGrey)",
+            padding: 16,
+            borderRadius: 8,
             fontFamily: "inherit",
             boxSizing: "border-box"
           }
-        }, view === "chat" ? /* @__PURE__ */React__namespace.createElement(React__namespace.Fragment, null, this.renderContextHeader(), /* @__PURE__ */React__namespace.createElement(ChatList, {
-          items: messages,
-          onApply: onApply,
-          getEditorContent: getEditorContent
-        })) : /* @__PURE__ */React__namespace.createElement(EmptyState, {
-          sourceMail: sourceMail,
-          selectedMails: selectedMails,
-          onAddClick: this.handleAddClick,
-          onRemoveSelected: this.handleRemoveSelected
-        }), isLoadingSelected && /* @__PURE__ */React__namespace.createElement("div", {
+        }, /* @__PURE__ */React__namespace.createElement(TargetInfoBar, {
+          targetName: targetName,
+          targetEmail: targetEmail,
+          currentLangLabel: currentLangLabel,
+          onOpenLang: this.handleOpenLang
+        }), /* @__PURE__ */React__namespace.createElement(FilterTabs, {
+          mailtype: mailtype,
+          onChangeFilter: this.handleChangeFilter
+        }), /* @__PURE__ */React__namespace.createElement("div", {
           style: {
-            fontSize: 12,
+            display: "flex",
+            flexDirection: "column",
+            gap: 8,
+            minHeight: 120
+          }
+        }, isLoading && items.length === 0 && /* @__PURE__ */React__namespace.createElement(LoadingContainer, {
+          style: {
+            background: "#fff",
+            borderRadius: 8,
+            height: 160
+          },
+          size: "small"
+        }), !isLoading && items.length === 0 && /* @__PURE__ */React__namespace.createElement("div", {
+          style: {
+            background: "#fff",
+            borderRadius: 8,
+            padding: 24,
+            textAlign: "center",
             color: "var(--text-secondary)",
-            padding: 8,
-            textAlign: "center"
+            fontSize: 13
           }
-        }, "Loading context..."), /* @__PURE__ */React__namespace.createElement(ChatInput, {
-          message: message,
-          onMessageChange: this.handleMessageChange,
-          onSubmit: this.handleSubmit,
-          isSending: isSending,
-          lang: lang,
-          setLang: this.setLang,
-          tone: tone,
-          setTone: this.setTone,
-          length: length,
-          setLength: this.setLength,
-          parentRef: this.rootRef,
-          placeholder: "Type a message..."
+        }, t(LangKey.NO_DATA)), items.map(function (item, idx) {
+          return /* @__PURE__ */React__namespace.createElement(SummaryItem, {
+            key: idx,
+            item: item
+          });
+        })), filterCount > 0 && /* @__PURE__ */React__namespace.createElement(Pagination, {
+          total: filterCount,
+          page: page,
+          totalPages: totalPages,
+          onChangePage: this.handleChangePage
+        }), /* @__PURE__ */React__namespace.createElement(LanguagePopover, {
+          anchorEl: langAnchor,
+          langList: langList,
+          currentLang: lang,
+          onSelect: this.handleChangeLang,
+          onClose: this.handleCloseLang
         }));
       }
     }]);
   }(React__namespace.Component);
-  var ChatAIDraft = function ChatAIDraft(props) {
-    var _a2 = props,
-      _a2$type = _a2.type,
-      type = _a2$type === void 0 ? "new" : _a2$type,
-      sourceMid = _a2.sourceMid,
-      rest = __objRest(_a2, ["type", "sourceMid"]);
-    if ((type === "reply" || type === "forward") && sourceMid) {
-      return /* @__PURE__ */React__namespace.createElement(ReplyPanel, __spreadValues({
-        type: type,
-        sourceMid: sourceMid
-      }, rest));
-    }
-    return /* @__PURE__ */React__namespace.createElement(CreatePanel, __spreadValues({}, rest));
-  };
-  var LoadingCircular = function LoadingCircular(_ref33) {
-    var _ref33$size = _ref33.size,
-      size = _ref33$size === void 0 ? 40 : _ref33$size,
-      _ref33$color = _ref33.color,
-      color = _ref33$color === void 0 ? "var(--primary-main)" : _ref33$color,
-      _ref33$thickness = _ref33.thickness,
-      thickness = _ref33$thickness === void 0 ? 3.6 : _ref33$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(_ref34) {
-    var style = _ref34.style,
-      _ref34$fullHeight = _ref34.fullHeight,
-      fullHeight = _ref34$fullHeight === void 0 ? false : _ref34$fullHeight,
-      _ref34$size = _ref34.size,
-      size = _ref34$size === void 0 ? "medium" : _ref34$size,
-      label = _ref34.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;
   exports2.LoadingCircular = LoadingCircular;
   exports2.LoadingContainer = LoadingContainer;
-  exports2.Tooltip = Tooltip;
-  exports2.getBaseUrl = getBaseUrl;
-  exports2.getGroupwareUrl = getGroupwareUrl;
+  exports2.Pagination = Pagination;
+  exports2.SummaryAIEmails = SummaryAIEmails;
   exports2.initHanbiroReactSDK = initHanbiroReactSDK;
+  exports2.setLibLang = setLibLang;
   Object.defineProperty(exports2, Symbol.toStringTag, {
     value: "Module"
   });