hanbiro-react16-sdk 1.0.23 → 1.0.24

package/dist/components/ChatAIDraft/EmptyState.js

@@ -38,7 +38,8 @@ const EmptyState = ({
         display: "flex",
         flexDirection: "column",
         paddingRight: 8,
-        marginRight: -8
+        marginRight: -8,
+        paddingBottom: 16
       }
     },
     /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", marginTop: 8 } }, /* @__PURE__ */ React.createElement(
@@ -68,18 +69,19 @@ const EmptyState = ({
       {
         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.createElement(CustomAiIcon, { size: 56, stroke: 1.5 })
+      /* @__PURE__ */ React.createElement(CustomAiIcon, { size: 52, stroke: 1.5 })
     ),
     /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React.createElement(
       "div",

package/dist/components/ChatAIDraft/SettingPopper/ChipGroup.d.ts

@@ -0,0 +1,11 @@
+import { LabelValue } from '../../../types';
+import * as React from "react";
+interface ChipGroupProps {
+    options: LabelValue[];
+    selected: LabelValue | null;
+    onSelect: (opt: LabelValue) => void;
+    iconMap: Record<string, React.ReactNode>;
+    columns?: number;
+}
+declare const ChipGroup: React.FunctionComponent<ChipGroupProps>;
+export default ChipGroup;

package/dist/components/ChatAIDraft/SettingPopper/ChipGroup.js

@@ -0,0 +1,62 @@
+import * as React from "react";
+const ChipGroup = ({
+  options,
+  selected,
+  onSelect,
+  iconMap,
+  columns = 3
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        gap: 6
+      }
+    },
+    options.map((opt) => {
+      const isActive = (selected == null ? void 0 : selected.value) === opt.value;
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: opt.value,
+          type: "button",
+          onClick: () => 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.createElement(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              flexShrink: 0
+            }
+          },
+          iconMap[opt.value]
+        ),
+        /* @__PURE__ */ React.createElement("span", { style: { whiteSpace: "nowrap" } }, opt.label)
+      );
+    })
+  );
+};
+export {
+  ChipGroup as default
+};

package/dist/components/ChatAIDraft/SettingPopper/LanguageSelect.d.ts

@@ -0,0 +1,21 @@
+import { LabelValue } from '../../../types';
+import * as React from "react";
+interface LanguageSelectProps {
+    value: LabelValue | null;
+    options: LabelValue[];
+    onChange: (opt: LabelValue) => void;
+}
+interface LanguageSelectState {
+    open: boolean;
+}
+declare class LanguageSelect extends React.Component<LanguageSelectProps, LanguageSelectState> {
+    private ref;
+    constructor(props: LanguageSelectProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleClickOutside: (e: MouseEvent) => void;
+    toggle: () => void;
+    pick: (opt: LabelValue) => void;
+    render(): React.JSX.Element;
+}
+export default LanguageSelect;

package/dist/components/ChatAIDraft/SettingPopper/LanguageSelect.js

@@ -0,0 +1,137 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import * as React from "react";
+import { AI_LANG_FLAGS } from "../../../constants/index.js";
+import CountryFlag from "../../CountryFlag/index.js";
+import ChevronDown from "../../../node_modules/react-feather/dist/icons/chevron-down.js";
+const getFlagCode = (value) => {
+  var _a;
+  return (_a = AI_LANG_FLAGS.find((l) => l.value === value)) == null ? void 0 : _a.flagCode;
+};
+class LanguageSelect extends React.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "ref");
+    __publicField(this, "handleClickOutside", (e) => {
+      if (this.ref.current && !this.ref.current.contains(e.target)) {
+        this.setState({ open: false });
+      }
+    });
+    __publicField(this, "toggle", () => {
+      this.setState((s) => ({ open: !s.open }));
+    });
+    __publicField(this, "pick", (opt) => {
+      this.props.onChange(opt);
+      this.setState({ open: false });
+    });
+    this.state = { open: false };
+    this.ref = React.createRef();
+  }
+  componentDidMount() {
+    document.addEventListener("mousedown", this.handleClickOutside);
+  }
+  componentWillUnmount() {
+    document.removeEventListener("mousedown", this.handleClickOutside);
+  }
+  render() {
+    const { value, options } = this.props;
+    const { open } = this.state;
+    const selectedFlag = getFlagCode(value == null ? void 0 : value.value);
+    return /* @__PURE__ */ React.createElement("div", { ref: this.ref, style: { position: "relative", width: "100%" } }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: this.toggle,
+        style: {
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "8px 10px",
+          border: "1px solid var(--border-main)",
+          borderRadius: 4,
+          background: "#fff",
+          cursor: "pointer",
+          fontFamily: "inherit",
+          fontSize: 13,
+          color: "var(--text-primary)"
+        }
+      },
+      selectedFlag && /* @__PURE__ */ React.createElement(
+        CountryFlag,
+        {
+          flagCode: selectedFlag,
+          style: { width: 18, height: 14, flexShrink: 0 }
+        }
+      ),
+      /* @__PURE__ */ React.createElement("span", { style: { flex: 1, textAlign: "left" } }, (value == null ? void 0 : value.label) || "Select Language"),
+      /* @__PURE__ */ React.createElement(
+        ChevronDown,
+        {
+          size: 14,
+          style: {
+            transform: open ? "rotate(180deg)" : "none",
+            transition: "transform 0.15s"
+          }
+        }
+      )
+    ), open && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "calc(100% + 4px)",
+          left: 0,
+          right: 0,
+          maxHeight: 220,
+          overflowY: "auto",
+          border: "1px solid var(--border-main)",
+          borderRadius: 4,
+          background: "#fff",
+          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
+          zIndex: 2
+        }
+      },
+      options.map((opt) => {
+        const fc = getFlagCode(opt.value);
+        const isActive = (value == null ? void 0 : value.value) === opt.value;
+        return /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            key: opt.value,
+            type: "button",
+            onClick: () => this.pick(opt),
+            className: "chat-ai-lang-option" + (isActive ? " is-active" : ""),
+            style: {
+              width: "100%",
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "8px 10px",
+              border: "none",
+              background: isActive ? "var(--primary-lighter)" : void 0,
+              cursor: "pointer",
+              fontFamily: "inherit",
+              fontSize: 13,
+              textAlign: "left",
+              color: "var(--text-primary)",
+              fontWeight: 400
+            }
+          },
+          fc && /* @__PURE__ */ React.createElement(
+            CountryFlag,
+            {
+              flagCode: fc,
+              style: { width: 18, height: 14, flexShrink: 0 }
+            }
+          ),
+          /* @__PURE__ */ React.createElement("span", null, opt.label)
+        );
+      })
+    ));
+  }
+}
+export {
+  LanguageSelect as default
+};

package/dist/components/ChatAIDraft/SettingPopper/icons.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+export declare const TONE_ICONS: Record<string, React.ReactNode>;
+export declare const LENGTH_ICONS: Record<string, React.ReactNode>;

package/dist/components/ChatAIDraft/SettingPopper/icons.js

@@ -0,0 +1,30 @@
+import * as React from "react";
+import Frown from "../../../node_modules/react-feather/dist/icons/frown.js";
+import ThumbsUp from "../../../node_modules/react-feather/dist/icons/thumbs-up.js";
+import Smile from "../../../node_modules/react-feather/dist/icons/smile.js";
+import Compass from "../../../node_modules/react-feather/dist/icons/compass.js";
+import Heart from "../../../node_modules/react-feather/dist/icons/heart.js";
+import Award from "../../../node_modules/react-feather/dist/icons/award.js";
+import Zap from "../../../node_modules/react-feather/dist/icons/zap.js";
+import FileText from "../../../node_modules/react-feather/dist/icons/file-text.js";
+import AlignJustify from "../../../node_modules/react-feather/dist/icons/align-justify.js";
+import Scissors from "../../../node_modules/react-feather/dist/icons/scissors.js";
+const ICON_SIZE = 14;
+const TONE_ICONS = {
+  formal: /* @__PURE__ */ React.createElement(Award, { size: ICON_SIZE }),
+  polite: /* @__PURE__ */ React.createElement(Heart, { size: ICON_SIZE }),
+  neutral: /* @__PURE__ */ React.createElement(Compass, { size: ICON_SIZE }),
+  friendly: /* @__PURE__ */ React.createElement(Smile, { size: ICON_SIZE }),
+  firm: /* @__PURE__ */ React.createElement(ThumbsUp, { size: ICON_SIZE }),
+  apologetic: /* @__PURE__ */ React.createElement(Frown, { size: ICON_SIZE })
+};
+const LENGTH_ICONS = {
+  short: /* @__PURE__ */ React.createElement(Scissors, { size: ICON_SIZE }),
+  medium: /* @__PURE__ */ React.createElement(AlignJustify, { size: ICON_SIZE }),
+  long: /* @__PURE__ */ React.createElement(FileText, { size: ICON_SIZE }),
+  one_liner: /* @__PURE__ */ React.createElement(Zap, { size: ICON_SIZE })
+};
+export {
+  LENGTH_ICONS,
+  TONE_ICONS
+};

package/dist/components/ChatAIDraft/{SettingPopper.d.ts → SettingPopper/index.d.ts}

@@ -1,4 +1,4 @@
-import { LabelValue } from '../../types';
+import { LabelValue } from '../../../types';
 import * as React from "react";
 interface SettingPopperProps {
     lang: LabelValue | null;
@@ -22,7 +22,6 @@ declare class SettingPopper extends React.Component<SettingPopperProps, SettingP
     getLanguageOptions: () => Promise<void>;
     handleClickOutside: (event: MouseEvent) => void;
     togglePopper: () => void;
-    renderChipGroup: (options: LabelValue[], selected: LabelValue | null, onSelect: (opt: LabelValue) => void, iconMap: Record<string, React.ReactNode>, columns?: number) => React.JSX.Element;
     render(): React.JSX.Element;
 }
 export default SettingPopper;

package/dist/components/ChatAIDraft/SettingPopper/index.js

@@ -0,0 +1,185 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { apiGet } from "../../../utils/api.js";
+import { TONE_OPTIONS, LENGTH_OPTIONS } from "../constants.js";
+import LanguageSelect from "./LanguageSelect.js";
+import ChipGroup from "./ChipGroup.js";
+import { TONE_ICONS, LENGTH_ICONS } from "./icons.js";
+import Settings from "../../../node_modules/react-feather/dist/icons/settings.js";
+class SettingPopper extends React.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "containerRef");
+    __publicField(this, "popperRef");
+    __publicField(this, "getLanguageOptions", () => __async(this, null, function* () {
+      var _a;
+      const { data } = yield apiGet("/email/ai/langlist");
+      if (data == null ? void 0 : data.list) {
+        const langs = (_a = Object.keys(data == null ? void 0 : data.list)) == null ? void 0 : _a.map((_key) => {
+          var _a2;
+          const _item = (_a2 = data == null ? void 0 : data.list) == null ? void 0 : _a2[_key];
+          return {
+            value: _key,
+            label: _item == null ? void 0 : _item.name
+          };
+        });
+        this.setState({ languageOptions: langs });
+      }
+    }));
+    __publicField(this, "handleClickOutside", (event) => {
+      const target = event.target;
+      if (this.containerRef.current && !this.containerRef.current.contains(target) && (!this.popperRef.current || !this.popperRef.current.contains(target))) {
+        this.setState({ open: false });
+      }
+    });
+    __publicField(this, "togglePopper", () => {
+      this.setState((prevState) => ({ open: !prevState.open }));
+    });
+    this.state = { open: false, languageOptions: [] };
+    this.containerRef = React.createRef();
+    this.popperRef = React.createRef();
+  }
+  componentDidMount() {
+    document.addEventListener("mousedown", this.handleClickOutside);
+    this.getLanguageOptions();
+  }
+  componentWillUnmount() {
+    document.removeEventListener("mousedown", this.handleClickOutside);
+  }
+  render() {
+    const { lang, tone, length, parentRef, setLang, setTone, setLength } = this.props;
+    const { open, languageOptions } = this.state;
+    let popperTop = 0;
+    let popperLeft = 0;
+    let popperWidth = 320;
+    if (open && this.containerRef.current) {
+      const rect = this.containerRef.current.getBoundingClientRect();
+      popperTop = rect.top + (window.scrollY || document.documentElement.scrollTop) - 8;
+      popperLeft = rect.left + (window.scrollX || document.documentElement.scrollLeft);
+      if (parentRef && parentRef.current) {
+        const parentRect = parentRef.current.getBoundingClientRect();
+        popperWidth = parentRect.width - 16;
+        popperLeft = parentRect.left + 8;
+      }
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: this.containerRef,
+        style: { position: "relative", display: "inline-block" }
+      },
+      /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: this.togglePopper,
+          className: "icon-button small"
+        },
+        /* @__PURE__ */ React.createElement(Settings, { size: 16 })
+      ),
+      open && this.containerRef.current && ReactDOM.createPortal(
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            ref: this.popperRef,
+            style: {
+              position: "absolute",
+              top: popperTop,
+              left: popperLeft,
+              transform: "translateY(-100%)",
+              zIndex: 1051,
+              background: "#fff",
+              border: "1px solid #ddd",
+              boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
+              borderRadius: 8,
+              padding: 16,
+              width: popperWidth,
+              boxSizing: "border-box"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: { display: "flex", flexDirection: "column", gap: 12 }
+            },
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                style: { display: "flex", flexDirection: "column", gap: 6 }
+              },
+              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Language"),
+              /* @__PURE__ */ React.createElement(
+                LanguageSelect,
+                {
+                  value: lang,
+                  options: languageOptions,
+                  onChange: (opt) => setLang(opt)
+                }
+              )
+            ),
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                style: { display: "flex", flexDirection: "column", gap: 6 }
+              },
+              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Tone"),
+              /* @__PURE__ */ React.createElement(
+                ChipGroup,
+                {
+                  options: TONE_OPTIONS,
+                  selected: tone,
+                  onSelect: (opt) => setTone(opt),
+                  iconMap: TONE_ICONS
+                }
+              )
+            ),
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                style: { display: "flex", flexDirection: "column", gap: 6 }
+              },
+              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Length"),
+              /* @__PURE__ */ React.createElement(
+                ChipGroup,
+                {
+                  options: LENGTH_OPTIONS,
+                  selected: length,
+                  onSelect: (opt) => setLength(opt),
+                  iconMap: LENGTH_ICONS,
+                  columns: 4
+                }
+              )
+            )
+          )
+        ),
+        document.body
+      )
+    );
+  }
+}
+export {
+  SettingPopper as default
+};

package/dist/components/ChatAIDraft/index.d.ts

@@ -26,8 +26,11 @@ interface AIPaneState {
 }
 declare class ChatAIDraft extends React.Component<ChatAIDraftProps, AIPaneState> {
     private rootRef;
+    private textareaRef;
     constructor(props: ChatAIDraftProps);
+    adjustTextareaHeight: () => void;
     handleMessageChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    componentDidUpdate(_: ChatAIDraftProps, prevState: AIPaneState): void;
     handleSubmit: () => Promise<void>;
     handleKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
     setLang: (lang: LabelValue | null) => void;

package/dist/components/ChatAIDraft/index.js

@@ -42,7 +42,7 @@ import * as React from "react";
 import { callAI } from "./helper.js";
 import List from "./List.js";
 import EmptyState from "./EmptyState.js";
-import SettingPopper from "./SettingPopper.js";
+import SettingPopper from "./SettingPopper/index.js";
 import { LENGTH_OPTIONS, TONE_OPTIONS } from "./constants.js";
 import { AI_LANG_FLAGS } from "../../constants/index.js";
 import CountryFlag from "../CountryFlag/index.js";
@@ -53,8 +53,15 @@ class ChatAIDraft extends React.Component {
     var _a;
     super(props);
     __publicField(this, "rootRef");
+    __publicField(this, "textareaRef");
+    __publicField(this, "adjustTextareaHeight", () => {
+      const el = this.textareaRef.current;
+      if (!el) return;
+      el.style.height = "auto";
+      el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
+    });
     __publicField(this, "handleMessageChange", (e) => {
-      this.setState({ message: e.target.value });
+      this.setState({ message: e.target.value }, this.adjustTextareaHeight);
     });
     __publicField(this, "handleSubmit", () => __async(this, null, function* () {
       const { message, messages, lang, tone, length, conversationId } = this.state;
@@ -135,6 +142,7 @@ class ChatAIDraft extends React.Component {
       this.setState({ length });
     });
     this.rootRef = React.createRef();
+    this.textareaRef = React.createRef();
     const lang = ((_a = AI_LANG_FLAGS) == null ? void 0 : _a.find((_item) => (_item == null ? void 0 : _item.value) === (props == null ? void 0 : props.defaultLang))) || AI_LANG_FLAGS[0];
     this.state = {
       message: "",
@@ -148,6 +156,11 @@ class ChatAIDraft extends React.Component {
       conversationId: ""
     };
   }
+  componentDidUpdate(_, prevState) {
+    if (prevState.message !== this.state.message) {
+      this.adjustTextareaHeight();
+    }
+  }
   render() {
     var _a, _b;
     const { onApply, getEditorContent } = this.props;
@@ -191,18 +204,21 @@ class ChatAIDraft extends React.Component {
             overflow: "hidden",
             background: "var(--background-softGrey)",
             display: "flex",
-            flexDirection: "column"
+            flexDirection: "column",
+            border: "1px solid var(--border-light)"
           }
         },
         /* @__PURE__ */ React.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,
@@ -211,9 +227,9 @@ class ChatAIDraft extends React.Component {
               border: "none",
               resize: "none",
               outline: "none",
-              minHeight: 60,
               fontFamily: "inherit",
-              background: "transparent"
+              background: "transparent",
+              overflowY: "auto"
             }
           }
         ),
@@ -288,8 +304,8 @@ class ChatAIDraft extends React.Component {
               onClick: this.handleSubmit,
               style: {
                 marginLeft: "auto",
-                width: 32,
-                height: 32,
+                width: 28,
+                height: 28,
                 borderRadius: "50%",
                 border: "none",
                 display: "flex",

package/dist/hanbiro-react16-sdk.style.css

@@ -1,5 +1,5 @@
 /*!
- * hanbiro-react16-sdk v1.0.23
+ * hanbiro-react16-sdk v1.0.24
  * Build Date: 2026-05-21
  */
 @charset "UTF-8";