hanbiro-react16-sdk 1.0.21 → 1.0.23

package/dist/components/ChatAIDraft/SettingPopper.js

@@ -23,11 +23,164 @@ 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 { AI_LANG_FLAGS } from "../../constants/index.js";
+import CountryFlag from "../CountryFlag/index.js";
+import { TONE_OPTIONS, LENGTH_OPTIONS } from "./constants.js";
 import Settings from "../../node_modules/react-feather/dist/icons/settings.js";
-import Copy from "../../node_modules/react-feather/dist/icons/copy.js";
+import ChevronDown from "../../node_modules/react-feather/dist/icons/chevron-down.js";
+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 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)
+        );
+      })
+    ));
+  }
+}
+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 })
+};
 class SettingPopper extends React.Component {
   constructor(props) {
     super(props);
@@ -57,12 +210,56 @@ 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);
-    });
+    __publicField(this, "renderChipGroup", (options, selected, onSelect, iconMap, columns = 3) => /* @__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)
+        );
+      })
+    ));
     this.state = { open: false, languageOptions: [] };
     this.containerRef = React.createRef();
     this.popperRef = React.createRef();
@@ -75,13 +272,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 } = this.props;
     const { open, languageOptions } = this.state;
     let popperTop = 0;
     let popperLeft = 0;
@@ -139,78 +330,43 @@ 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) => this.props.setLang(opt)
+                }
               )
             ),
             /* @__PURE__ */ React.createElement(
               "div",
               {
-                style: { display: "flex", flexDirection: "column", gap: 4 }
+                style: { display: "flex", flexDirection: "column", gap: 6 }
               },
-              /* @__PURE__ */ React.createElement(
-                "div",
-                {
-                  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)
-                ))
-              ),
-              /* @__PURE__ */ React.createElement(
-                TinyMceEditor,
-                {
-                  value: originalEmail,
-                  onChange: (val) => setOriginalEmail(val),
-                  height: 350,
-                  isSimple: true
-                }
+              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Tone"),
+              this.renderChipGroup(
+                TONE_OPTIONS,
+                tone,
+                (opt) => this.props.setTone(opt),
+                TONE_ICONS
+              )
+            ),
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                style: { display: "flex", flexDirection: "column", gap: 6 }
+              },
+              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Length"),
+              this.renderChipGroup(
+                LENGTH_OPTIONS,
+                length,
+                (opt) => this.props.setLength(opt),
+                LENGTH_ICONS,
+                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,19 @@ 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;
     constructor(props: ChatAIDraftProps);
-    setAIContext: (html: string) => void;
     handleMessageChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => 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,25 @@ 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 EmptyState from "./EmptyState.js";
 import SettingPopper from "./SettingPopper.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, "handleMessageChange", (e) => {
       this.setState({ message: e.target.value });
     });
     __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 +77,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,8 +128,11 @@ 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();
     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];
@@ -135,14 +141,17 @@ class ChatAIDraft extends React.Component {
       messages: [],
       isSending: false,
       lang,
-      conversationId: "",
-      originalEmail: ""
+      tone: TONE_OPTIONS[2],
+      // Neutral
+      length: LENGTH_OPTIONS[1],
+      // Medium
+      conversationId: ""
     };
   }
   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,41 +177,19 @@ 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"
           }
@@ -219,14 +206,14 @@ class ChatAIDraft extends React.Component {
             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"
             }
           }
         ),
@@ -247,9 +234,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 +248,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: 32,
+                height: 32,
+                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';