hanbiro-react16-sdk 1.0.22 → 1.0.24

package/dist/components/ChatAIDraft/{SettingPopper.js → SettingPopper/index.js}

@@ -23,11 +23,12 @@ var __async = (__this, __arguments, generator) => {
 };
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import TinyMceEditor from "../TinyMceEditor/index.js";
-import Tooltip from "../Tooltip/index.js";
-import { apiGet } from "../../utils/api.js";
-import Settings from "../../node_modules/react-feather/dist/icons/settings.js";
-import Copy from "../../node_modules/react-feather/dist/icons/copy.js";
+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);
@@ -37,7 +38,7 @@ class SettingPopper extends React.Component {
       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, i) => {
+        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 {
@@ -57,12 +58,6 @@ class SettingPopper extends React.Component {
     __publicField(this, "togglePopper", () => {
       this.setState((prevState) => ({ open: !prevState.open }));
     });
-    __publicField(this, "handleLangChange", (e) => {
-      const selected = this.state.languageOptions.find(
-        (opt) => opt.value === e.target.value
-      );
-      this.props.setLang(selected || null);
-    });
     this.state = { open: false, languageOptions: [] };
     this.containerRef = React.createRef();
     this.popperRef = React.createRef();
@@ -75,13 +70,7 @@ class SettingPopper extends React.Component {
     document.removeEventListener("mousedown", this.handleClickOutside);
   }
   render() {
-    const {
-      lang,
-      originalEmail,
-      setOriginalEmail,
-      getEditorContent,
-      parentRef
-    } = this.props;
+    const { lang, tone, length, parentRef, setLang, setTone, setLength } = this.props;
     const { open, languageOptions } = this.state;
     let popperTop = 0;
     let popperLeft = 0;
@@ -139,77 +128,48 @@ class SettingPopper extends React.Component {
             /* @__PURE__ */ React.createElement(
               "div",
               {
-                style: { display: "flex", flexDirection: "column", gap: 4 }
+                style: { display: "flex", flexDirection: "column", gap: 6 }
               },
+              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Language"),
               /* @__PURE__ */ React.createElement(
-                "span",
-                {
-                  style: {
-                    fontSize: 12,
-                    fontWeight: 500
-                    // color: "var(--text-secondary)",
-                  }
-                },
-                "Language"
-              ),
-              /* @__PURE__ */ React.createElement(
-                "select",
+                LanguageSelect,
                 {
-                  name: "language",
-                  value: lang ? lang.value : "",
-                  onChange: this.handleLangChange
-                },
-                /* @__PURE__ */ React.createElement("option", { value: "", disabled: true }, "Select Language"),
-                languageOptions.map((opt) => {
-                  return /* @__PURE__ */ React.createElement("option", { key: opt.value, value: opt.value }, opt.label);
-                })
+                  value: lang,
+                  options: languageOptions,
+                  onChange: (opt) => setLang(opt)
+                }
               )
             ),
             /* @__PURE__ */ React.createElement(
               "div",
               {
-                style: { display: "flex", flexDirection: "column", gap: 4 }
+                style: { display: "flex", flexDirection: "column", gap: 6 }
               },
+              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Tone"),
               /* @__PURE__ */ React.createElement(
-                "div",
+                ChipGroup,
                 {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between"
-                  }
-                },
-                /* @__PURE__ */ React.createElement(
-                  "span",
-                  {
-                    style: {
-                      fontSize: 12,
-                      fontWeight: 500
-                      // color: "var(--text-secondary)",
-                    }
-                  },
-                  "AI Context"
-                ),
-                getEditorContent && /* @__PURE__ */ React.createElement(Tooltip, { title: "Copy from origin email" }, /* @__PURE__ */ React.createElement(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      const currentContent = getEditorContent();
-                      setOriginalEmail(currentContent);
-                    },
-                    className: "icon-button small"
-                  },
-                  /* @__PURE__ */ React.createElement(Copy, null)
-                ))
-              ),
+                  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(
-                TinyMceEditor,
+                ChipGroup,
                 {
-                  value: originalEmail,
-                  onChange: (val) => setOriginalEmail(val),
-                  height: 350,
-                  isSimple: true
+                  options: LENGTH_OPTIONS,
+                  selected: length,
+                  onSelect: (opt) => setLength(opt),
+                  iconMap: LENGTH_ICONS,
+                  columns: 4
                 }
               )
             )

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

@@ -0,0 +1,4 @@
+import { LabelValue } from '../../types';
+
+export declare const TONE_OPTIONS: LabelValue[];
+export declare const LENGTH_OPTIONS: LabelValue[];

package/dist/components/ChatAIDraft/constants.js

@@ -0,0 +1,18 @@
+const 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" }
+];
+const LENGTH_OPTIONS = [
+  { label: "Short", value: "short" },
+  { label: "Medium", value: "medium" },
+  { label: "Long", value: "long" },
+  { label: "1-liner", value: "one_liner" }
+];
+export {
+  LENGTH_OPTIONS,
+  TONE_OPTIONS
+};

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

@@ -7,10 +7,6 @@ export interface ChatAIDraftProps {
         html: string;
     }) => void;
 }
-/** Public imperative API exposed via ref */
-export interface ChatAIDraftRef {
-    setAIContext: (html: string) => void;
-}
 export interface AIMessage {
     id: string;
     question: string;
@@ -24,18 +20,22 @@ interface AIPaneState {
     messages: AIMessage[];
     isSending: boolean;
     lang: LabelValue | null;
+    tone: LabelValue | null;
+    length: LabelValue | null;
     conversationId: string;
-    originalEmail: string;
 }
-declare class ChatAIDraft extends React.Component<ChatAIDraftProps, AIPaneState> implements ChatAIDraftRef {
+declare class ChatAIDraft extends React.Component<ChatAIDraftProps, AIPaneState> {
     private rootRef;
+    private textareaRef;
     constructor(props: ChatAIDraftProps);
-    setAIContext: (html: string) => void;
+    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;
-    setOriginalEmail: (email: string) => void;
+    setTone: (tone: LabelValue | null) => void;
+    setLength: (length: LabelValue | null) => void;
     render(): React.JSX.Element;
 }
 export default ChatAIDraft;

package/dist/components/ChatAIDraft/index.js

@@ -39,27 +39,32 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import * as React from "react";
-import CustomAiIcon from "./CustomAIIcon.js";
 import { callAI } from "./helper.js";
 import List from "./List.js";
-import SettingPopper from "./SettingPopper.js";
+import EmptyState from "./EmptyState.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";
 import v4 from "../../node_modules/uuid/dist/esm-browser/v4.js";
-import Send from "../../node_modules/react-feather/dist/icons/send.js";
+import ArrowUp from "../../node_modules/react-feather/dist/icons/arrow-up.js";
 class ChatAIDraft extends React.Component {
   constructor(props) {
     var _a;
     super(props);
     __publicField(this, "rootRef");
-    __publicField(this, "setAIContext", (html) => {
-      this.setState({ originalEmail: html });
+    __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, originalEmail, conversationId } = this.state;
+      const { message, messages, lang, tone, length, conversationId } = this.state;
       if (!message.trim()) return;
       const newId = v4();
       let newMessage = {
@@ -79,9 +84,14 @@ class ChatAIDraft extends React.Component {
       const params = {
         query: message,
         default_language: lang ? lang.value : "KR",
-        original_email: originalEmail,
         debug_grpc: true
       };
+      if (tone) {
+        params.tone = tone.value;
+      }
+      if (length) {
+        params.length = length.value;
+      }
       if (conversationId) {
         params.conversation_id = conversationId;
       }
@@ -125,24 +135,36 @@ class ChatAIDraft extends React.Component {
     __publicField(this, "setLang", (lang) => {
       this.setState({ lang });
     });
-    __publicField(this, "setOriginalEmail", (email) => {
-      this.setState({ originalEmail: email });
+    __publicField(this, "setTone", (tone) => {
+      this.setState({ tone });
+    });
+    __publicField(this, "setLength", (length) => {
+      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: "",
       messages: [],
       isSending: false,
       lang,
-      conversationId: "",
-      originalEmail: ""
+      tone: TONE_OPTIONS[2],
+      // Neutral
+      length: LENGTH_OPTIONS[1],
+      // Medium
+      conversationId: ""
     };
   }
+  componentDidUpdate(_, prevState) {
+    if (prevState.message !== this.state.message) {
+      this.adjustTextareaHeight();
+    }
+  }
   render() {
     var _a, _b;
     const { onApply, getEditorContent } = this.props;
-    const { message, messages, isSending, lang, originalEmail } = this.state;
+    const { message, messages, isSending, lang, tone, length } = this.state;
     const flagCode = (_b = (_a = AI_LANG_FLAGS) == null ? void 0 : _a.find(
       (_item) => (_item == null ? void 0 : _item.value) === (lang == null ? void 0 : lang.value)
     )) == null ? void 0 : _b.flagCode;
@@ -168,65 +190,46 @@ class ChatAIDraft extends React.Component {
           getEditorContent
         }
       ) : /* @__PURE__ */ React.createElement(
-        "div",
+        EmptyState,
         {
-          style: {
-            flex: 1,
-            minHeight: 0,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            color: "var(--grey-light)"
-          }
-        },
-        /* @__PURE__ */ React.createElement(CustomAiIcon, { size: 46 }),
-        /* @__PURE__ */ React.createElement(
-          "h2",
-          {
-            style: {
-              marginTop: 16,
-              fontWeight: 600,
-              color: "inherit",
-              fontSize: 18
-            }
-          },
-          "Build with Agent"
-        )
+          onSelectPrompt: (text) => this.setState({ message: text })
+        }
       ),
       /* @__PURE__ */ React.createElement(
         "div",
         {
           style: {
             width: "100%",
-            border: "1px solid var(--border-main)",
-            borderRadius: 4,
+            borderRadius: 12,
             overflow: "hidden",
-            background: "#fff",
+            background: "var(--background-softGrey)",
             display: "flex",
-            flexDirection: "column"
+            flexDirection: "column",
+            border: "1px solid var(--border-light)"
           }
         },
         /* @__PURE__ */ React.createElement(
           "textarea",
           {
+            ref: this.textareaRef,
             value: message,
             onChange: this.handleMessageChange,
-            placeholder: "Describe your email",
+            placeholder: "Describe your email...",
             name: "ai-content",
             onKeyDown: this.handleKeyDown,
             disabled: isSending,
+            rows: 1,
             style: {
               flex: 1,
               minWidth: 0,
-              borderRadius: 4,
               padding: 12,
               fontSize: 13,
               border: "none",
               resize: "none",
               outline: "none",
-              minHeight: 60,
-              fontFamily: "inherit"
+              fontFamily: "inherit",
+              background: "transparent",
+              overflowY: "auto"
             }
           }
         ),
@@ -247,9 +250,10 @@ class ChatAIDraft extends React.Component {
             {
               lang,
               setLang: this.setLang,
-              originalEmail,
-              setOriginalEmail: this.setOriginalEmail,
-              getEditorContent,
+              tone,
+              setTone: this.setTone,
+              length,
+              setLength: this.setLength,
               parentRef: this.rootRef
             }
           ),
@@ -260,16 +264,60 @@ class ChatAIDraft extends React.Component {
               style: { marginLeft: 4, height: 14 }
             }
           ),
+          (tone || length) && /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              style: {
+                marginLeft: 8,
+                padding: "2px 8px",
+                borderRadius: 999,
+                background: "var(--primary-lighter)",
+                color: "var(--primary-main)",
+                fontSize: 11,
+                fontWeight: 500,
+                whiteSpace: "nowrap",
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 4
+              }
+            },
+            (tone == null ? void 0 : tone.label) && /* @__PURE__ */ React.createElement("span", null, tone.label),
+            (tone == null ? void 0 : tone.label) && (length == null ? void 0 : length.label) && /* @__PURE__ */ React.createElement(
+              "span",
+              {
+                style: {
+                  width: 3,
+                  height: 3,
+                  borderRadius: "50%",
+                  background: "currentColor",
+                  display: "inline-block"
+                }
+              }
+            ),
+            (length == null ? void 0 : length.label) && /* @__PURE__ */ React.createElement("span", null, length.label)
+          ),
           /* @__PURE__ */ React.createElement(
             "button",
             {
+              type: "button",
               disabled: !message.trim() || isSending,
               onClick: this.handleSubmit,
-              className: "icon-button",
-              color: "primary",
-              style: { marginLeft: "auto" }
+              style: {
+                marginLeft: "auto",
+                width: 28,
+                height: 28,
+                borderRadius: "50%",
+                border: "none",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: !message.trim() || isSending ? "var(--primary-lighter)" : "var(--primary-main)",
+                color: "var(--primary-contrasttext)",
+                cursor: !message.trim() || isSending ? "not-allowed" : "pointer",
+                transition: "background 0.15s ease-in-out"
+              }
             },
-            /* @__PURE__ */ React.createElement(Send, null)
+            /* @__PURE__ */ React.createElement(ArrowUp, { size: 18 })
           )
         )
       )

package/dist/components/index.d.ts

@@ -1,4 +1,4 @@
-export { default as ChatAIDraft, type ChatAIDraftRef } from './ChatAIDraft';
+export { default as ChatAIDraft } from './ChatAIDraft';
 export { default as LoadingCircular } from './LoadingCircular';
 export { default as LoadingContainer } from './LoadingContainer';
 export { default as Tooltip } from './Tooltip';

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

@@ -1,6 +1,6 @@
 /*!
- * hanbiro-react16-sdk v1.0.22
- * Build Date: 2026-04-03
+ * hanbiro-react16-sdk v1.0.24
+ * Build Date: 2026-05-21
  */
 @charset "UTF-8";
 button.icon-button {
@@ -163,6 +163,43 @@ button.icon-button.large svg {
   border-right: 6px solid var(--grey-darker);
 }
 
+.chat-ai-lang-option {
+  background: transparent;
+}
+.chat-ai-lang-option:hover {
+  background: var(--background-softGrey);
+}
+
+.chat-ai-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+.chat-ai-dots > span {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--grey-main);
+  display: inline-block;
+  animation: chat-ai-dot-bounce 1.2s infinite ease-in-out both;
+}
+.chat-ai-dots > span:nth-child(1) {
+  animation-delay: -0.32s;
+}
+.chat-ai-dots > span:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes chat-ai-dot-bounce {
+  0%, 80%, 100% {
+    transform: scale(0.6);
+    opacity: 0.4;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
 p {
   font-size: 13px;
 }