hanbiro-react16-sdk 1.0.23 → 1.0.25

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

@@ -1,5 +1,5 @@
 /*!
- * hanbiro-react16-sdk v1.0.23
+ * hanbiro-react16-sdk v1.0.25
  * Build Date: 2026-05-21
  */
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -4607,7 +4607,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         display: "flex",
         flexDirection: "column",
         paddingRight: 8,
-        marginRight: -8
+        marginRight: -8,
+        paddingBottom: 16
       }
     }, /* @__PURE__ */React__namespace.createElement("div", {
       style: {
@@ -4630,18 +4631,19 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }, "Tell me what kind of email you'd like to write.")), /* @__PURE__ */React__namespace.createElement("div", {
       style: {
         alignSelf: "center",
-        width: 120,
-        height: 120,
+        width: 100,
+        height: 100,
         borderRadius: "50%",
         background: "var(--primary-lighter)",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         margin: "20px 0",
-        color: "var(--primary-main)"
+        color: "var(--primary-main)",
+        flexShrink: 0
       }
     }, /* @__PURE__ */React__namespace.createElement(CustomAiIcon, {
-      size: 56,
+      size: 52,
       stroke: 1.5
     })), /* @__PURE__ */React__namespace.createElement("div", {
       style: {
@@ -4789,6 +4791,38 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }, _callee3);
     }));
   };
+  var TONE_OPTIONS = [{
+    label: "Formal",
+    value: "formal"
+  }, {
+    label: "Polite",
+    value: "polite"
+  }, {
+    label: "Neutral",
+    value: "neutral"
+  }, {
+    label: "Friendly",
+    value: "friendly"
+  }, {
+    label: "Firm",
+    value: "firm"
+  }, {
+    label: "Apology",
+    value: "apologetic"
+  }];
+  var LENGTH_OPTIONS = [{
+    label: "Short",
+    value: "short"
+  }, {
+    label: "Medium",
+    value: "medium"
+  }, {
+    label: "Long",
+    value: "long"
+  }, {
+    label: "1-liner",
+    value: "one_liner"
+  }];
   var AI_LANG_FLAGS = [{
     label: "English",
     value: "en",
@@ -6419,38 +6453,6 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       style: style
     }, rest));
   };
-  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 _a2;
     return (_a2 = AI_LANG_FLAGS.find(function (l) {
@@ -6601,6 +6603,57 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
     }]);
   }(React__namespace.Component);
+  var ChipGroup = function ChipGroup(_ref28) {
+    var options = _ref28.options,
+      selected = _ref28.selected,
+      onSelect = _ref28.onSelect,
+      iconMap = _ref28.iconMap,
+      _ref28$columns = _ref28.columns,
+      columns = _ref28$columns === void 0 ? 3 : _ref28$columns;
+    return /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(".concat(columns, ", minmax(0, 1fr))"),
+        gap: 6
+      }
+    }, options.map(function (opt) {
+      var isActive = (selected == null ? void 0 : selected.value) === opt.value;
+      return /* @__PURE__ */React__namespace.createElement("button", {
+        key: opt.value,
+        type: "button",
+        onClick: function onClick() {
+          return onSelect(opt);
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 6,
+          padding: "8px 10px",
+          borderRadius: 4,
+          border: isActive ? "1px solid var(--primary-main)" : "1px solid var(--border-main)",
+          background: isActive ? "var(--primary-lighter)" : "#fff",
+          color: isActive ? "var(--primary-main)" : "var(--text-primary)",
+          fontWeight: isActive ? 600 : 400,
+          fontSize: 13,
+          cursor: "pointer",
+          fontFamily: "inherit",
+          transition: "background 0.15s, border-color 0.15s",
+          minWidth: 0
+        }
+      }, /* @__PURE__ */React__namespace.createElement("span", {
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          flexShrink: 0
+        }
+      }, iconMap[opt.value]), /* @__PURE__ */React__namespace.createElement("span", {
+        style: {
+          whiteSpace: "nowrap"
+        }
+      }, opt.label));
+    }));
+  };
   var ICON_SIZE = 14;
   var TONE_ICONS = {
     formal: /* @__PURE__ */React__namespace.createElement(Award, {
@@ -6655,7 +6708,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                 _yield$apiGet = _context4.v;
                 data = _yield$apiGet.data;
                 if (data == null ? void 0 : data.list) {
-                  langs = (_a2 = Object.keys(data == null ? void 0 : data.list)) == null ? void 0 : _a2.map(function (_key, i) {
+                  langs = (_a2 = Object.keys(data == null ? void 0 : data.list)) == null ? void 0 : _a2.map(function (_key) {
                     var _a3;
                     var _item = (_a3 = data == null ? void 0 : data.list) == null ? void 0 : _a3[_key];
                     return {
@@ -6688,52 +6741,6 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           };
         });
       });
-      __publicField(_this10, "renderChipGroup", function (options, selected, onSelect, iconMap) {
-        var columns = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 3;
-        return /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "grid",
-            gridTemplateColumns: "repeat(".concat(columns, ", minmax(0, 1fr))"),
-            gap: 6
-          }
-        }, options.map(function (opt) {
-          var isActive = (selected == null ? void 0 : selected.value) === opt.value;
-          return /* @__PURE__ */React__namespace.createElement("button", {
-            key: opt.value,
-            type: "button",
-            onClick: function onClick() {
-              return onSelect(opt);
-            },
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 6,
-              padding: "8px 10px",
-              borderRadius: 4,
-              border: isActive ? "1px solid var(--primary-main)" : "1px solid var(--border-main)",
-              background: isActive ? "var(--primary-lighter)" : "#fff",
-              color: isActive ? "var(--primary-main)" : "var(--text-primary)",
-              fontWeight: isActive ? 600 : 400,
-              fontSize: 13,
-              cursor: "pointer",
-              fontFamily: "inherit",
-              transition: "background 0.15s, border-color 0.15s",
-              minWidth: 0
-            }
-          }, /* @__PURE__ */React__namespace.createElement("span", {
-            style: {
-              display: "inline-flex",
-              alignItems: "center",
-              flexShrink: 0
-            }
-          }, iconMap[opt.value]), /* @__PURE__ */React__namespace.createElement("span", {
-            style: {
-              whiteSpace: "nowrap"
-            }
-          }, opt.label));
-        }));
-      });
       _this10.state = {
         open: false,
         languageOptions: []
@@ -6757,12 +6764,14 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }, {
       key: "render",
       value: function render() {
-        var _this11 = this;
         var _this$props4 = this.props,
           lang = _this$props4.lang,
           tone = _this$props4.tone,
           length = _this$props4.length,
-          parentRef = _this$props4.parentRef;
+          parentRef = _this$props4.parentRef,
+          setLang = _this$props4.setLang,
+          setTone = _this$props4.setTone,
+          setLength = _this$props4.setLength;
         var _this$state2 = this.state,
           open = _this$state2.open,
           languageOptions = _this$state2.languageOptions;
@@ -6828,7 +6837,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           value: lang,
           options: languageOptions,
           onChange: function onChange(opt) {
-            return _this11.props.setLang(opt);
+            return setLang(opt);
           }
         })), /* @__PURE__ */React__namespace.createElement("div", {
           style: {
@@ -6841,9 +6850,14 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             fontSize: 12,
             fontWeight: 600
           }
-        }, "Tone"), this.renderChipGroup(TONE_OPTIONS, tone, function (opt) {
-          return _this11.props.setTone(opt);
-        }, TONE_ICONS)), /* @__PURE__ */React__namespace.createElement("div", {
+        }, "Tone"), /* @__PURE__ */React__namespace.createElement(ChipGroup, {
+          options: TONE_OPTIONS,
+          selected: tone,
+          onSelect: function onSelect(opt) {
+            return setTone(opt);
+          },
+          iconMap: TONE_ICONS
+        })), /* @__PURE__ */React__namespace.createElement("div", {
           style: {
             display: "flex",
             flexDirection: "column",
@@ -6854,26 +6868,39 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             fontSize: 12,
             fontWeight: 600
           }
-        }, "Length"), this.renderChipGroup(LENGTH_OPTIONS, length, function (opt) {
-          return _this11.props.setLength(opt);
-        }, LENGTH_ICONS, 4)))), document.body));
+        }, "Length"), /* @__PURE__ */React__namespace.createElement(ChipGroup, {
+          options: LENGTH_OPTIONS,
+          selected: length,
+          onSelect: function onSelect(opt) {
+            return setLength(opt);
+          },
+          iconMap: LENGTH_ICONS,
+          columns: 4
+        })))), document.body));
       }
     }]);
   }(React__namespace.Component);
   var ChatAIDraft = /*#__PURE__*/function (_React__namespace$Com4) {
     function ChatAIDraft(props) {
-      var _this12;
+      var _this11;
       _classCallCheck(this, ChatAIDraft);
-      _this12 = _callSuper(this, ChatAIDraft, [props]);
-      __publicField(_this12, "rootRef");
-      __publicField(_this12, "handleMessageChange", function (e) {
-        _this12.setState({
+      _this11 = _callSuper(this, ChatAIDraft, [props]);
+      __publicField(_this11, "rootRef");
+      __publicField(_this11, "textareaRef");
+      __publicField(_this11, "adjustTextareaHeight", function () {
+        var el = _this11.textareaRef.current;
+        if (!el) return;
+        el.style.height = "auto";
+        el.style.height = "".concat(Math.min(el.scrollHeight, 160), "px");
+      });
+      __publicField(_this11, "handleMessageChange", function (e) {
+        _this11.setState({
           message: e.target.value
-        });
+        }, _this11.adjustTextareaHeight);
       });
-      __publicField(_this12, "handleSubmit", function () {
-        return __async(_this12, null, /*#__PURE__*/_regenerator().m(function _callee5() {
-          var _this13 = this;
+      __publicField(_this11, "handleSubmit", function () {
+        return __async(_this11, null, /*#__PURE__*/_regenerator().m(function _callee5() {
+          var _this12 = this;
           var _this$state3, message, messages, lang, tone, length, conversationId, newId, newMessage, currentItems, params, setContent, setIsLoading, setConversationId;
           return _regenerator().w(function (_context5) {
             while (1) switch (_context5.n) {
@@ -6915,7 +6942,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                   params.conversation_id = conversationId;
                 }
                 setContent = function setContent(nContent) {
-                  _this13.setState(function (prevState) {
+                  _this12.setState(function (prevState) {
                     var updatedMessages = prevState.messages.map(function (m) {
                       return m.id === newId ? __spreadProps(__spreadValues({}, m), {
                         subject: "Some thing not used",
@@ -6930,7 +6957,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                   });
                 };
                 setIsLoading = function setIsLoading(loading) {
-                  _this13.setState(function (prevState) {
+                  _this12.setState(function (prevState) {
                     var updatedMessages = prevState.messages.map(function (m) {
                       return m.id === newId ? __spreadProps(__spreadValues({}, m), {
                         isLoading: loading
@@ -6942,7 +6969,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                   });
                 };
                 setConversationId = function setConversationId(id) {
-                  _this13.setState({
+                  _this12.setState({
                     conversationId: id
                   });
                 };
@@ -6962,49 +6989,57 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           }, _callee5, this);
         }));
       });
-      __publicField(_this12, "handleKeyDown", function (event) {
-        if (!event.shiftKey && event.key === "Enter" && !_this12.state.isSending) {
+      __publicField(_this11, "handleKeyDown", function (event) {
+        if (!event.shiftKey && event.key === "Enter" && !_this11.state.isSending) {
           event.preventDefault();
-          _this12.handleSubmit();
+          _this11.handleSubmit();
         }
       });
-      __publicField(_this12, "setLang", function (lang) {
-        _this12.setState({
+      __publicField(_this11, "setLang", function (lang) {
+        _this11.setState({
           lang: lang
         });
       });
-      __publicField(_this12, "setTone", function (tone) {
-        _this12.setState({
+      __publicField(_this11, "setTone", function (tone) {
+        _this11.setState({
           tone: tone
         });
       });
-      __publicField(_this12, "setLength", function (length) {
-        _this12.setState({
+      __publicField(_this11, "setLength", function (length) {
+        _this11.setState({
           length: length
         });
       });
-      _this12.rootRef = React__namespace.createRef();
+      _this11.rootRef = React__namespace.createRef();
+      _this11.textareaRef = React__namespace.createRef();
       var lang = (AI_LANG_FLAGS == null ? void 0 : AI_LANG_FLAGS.find(function (_item) {
         return (_item == null ? void 0 : _item.value) === (props == null ? void 0 : props.defaultLang);
       })) || AI_LANG_FLAGS[0];
-      _this12.state = {
+      _this11.state = {
         message: "",
         messages: [],
         isSending: false,
         lang: lang,
         tone: TONE_OPTIONS[2],
         // Neutral
-        length: LENGTH_OPTIONS[1],
-        // Medium
+        length: LENGTH_OPTIONS[2],
+        // Long
         conversationId: ""
       };
-      return _this12;
+      return _this11;
     }
     _inherits(ChatAIDraft, _React__namespace$Com4);
     return _createClass(ChatAIDraft, [{
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(_, prevState) {
+        if (prevState.message !== this.state.message) {
+          this.adjustTextareaHeight();
+        }
+      }
+    }, {
       key: "render",
       value: function render() {
-        var _this14 = this;
+        var _this13 = this;
         var _a2;
         var _this$props5 = this.props,
           onApply = _this$props5.onApply,
@@ -7036,7 +7071,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           getEditorContent: getEditorContent
         }) : /* @__PURE__ */React__namespace.createElement(EmptyState, {
           onSelectPrompt: function onSelectPrompt(text) {
-            return _this14.setState({
+            return _this13.setState({
               message: text
             });
           }
@@ -7047,15 +7082,18 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             overflow: "hidden",
             background: "var(--background-softGrey)",
             display: "flex",
-            flexDirection: "column"
+            flexDirection: "column",
+            border: "1px solid var(--border-light)"
           }
         }, /* @__PURE__ */React__namespace.createElement("textarea", {
+          ref: this.textareaRef,
           value: message,
           onChange: this.handleMessageChange,
-          placeholder: "Describe your email",
+          placeholder: "Describe your email...",
           name: "ai-content",
           onKeyDown: this.handleKeyDown,
           disabled: isSending,
+          rows: 1,
           style: {
             flex: 1,
             minWidth: 0,
@@ -7064,9 +7102,9 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             border: "none",
             resize: "none",
             outline: "none",
-            minHeight: 60,
             fontFamily: "inherit",
-            background: "transparent"
+            background: "transparent",
+            overflowY: "auto"
           }
         }), /* @__PURE__ */React__namespace.createElement("div", {
           style: {
@@ -7119,8 +7157,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           onClick: this.handleSubmit,
           style: {
             marginLeft: "auto",
-            width: 32,
-            height: 32,
+            width: 28,
+            height: 28,
             borderRadius: "50%",
             border: "none",
             display: "flex",
@@ -7137,13 +7175,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
     }]);
   }(React__namespace.Component);
-  var LoadingCircular = function LoadingCircular(_ref28) {
-    var _ref28$size = _ref28.size,
-      size = _ref28$size === void 0 ? 40 : _ref28$size,
-      _ref28$color = _ref28.color,
-      color = _ref28$color === void 0 ? "var(--primary-main)" : _ref28$color,
-      _ref28$thickness = _ref28.thickness,
-      thickness = _ref28$thickness === void 0 ? 3.6 : _ref28$thickness;
+  var LoadingCircular = function LoadingCircular(_ref29) {
+    var _ref29$size = _ref29.size,
+      size = _ref29$size === void 0 ? 40 : _ref29$size,
+      _ref29$color = _ref29.color,
+      color = _ref29$color === void 0 ? "var(--primary-main)" : _ref29$color,
+      _ref29$thickness = _ref29.thickness,
+      thickness = _ref29$thickness === void 0 ? 3.6 : _ref29$thickness;
     var radius = 20;
     var circumference = 2 * Math.PI * radius;
     return /* @__PURE__ */React.createElement("div", {
@@ -7175,13 +7213,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     small: 28,
     medium: 40
   };
-  var LoadingContainer = function LoadingContainer(_ref29) {
-    var style = _ref29.style,
-      _ref29$fullHeight = _ref29.fullHeight,
-      fullHeight = _ref29$fullHeight === void 0 ? false : _ref29$fullHeight,
-      _ref29$size = _ref29.size,
-      size = _ref29$size === void 0 ? "medium" : _ref29$size,
-      label = _ref29.label;
+  var LoadingContainer = function LoadingContainer(_ref30) {
+    var style = _ref30.style,
+      _ref30$fullHeight = _ref30.fullHeight,
+      fullHeight = _ref30$fullHeight === void 0 ? false : _ref30$fullHeight,
+      _ref30$size = _ref30.size,
+      size = _ref30$size === void 0 ? "medium" : _ref30$size,
+      label = _ref30.label;
     return /* @__PURE__ */React.createElement("div", {
       style: __spreadValues({
         display: "flex",

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
- * hanbiro-react16-sdk v1.0.23
+ * hanbiro-react16-sdk v1.0.25
  * Build Date: 2026-05-21
  */
 /* empty css                 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hanbiro-react16-sdk",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "React 16.2.0 compatible UI components for Hanbiro",
   "types": "./dist/index.d.ts",
   "main": "./dist/hanbiro-react16-sdk.umd.js",