hanbiro-react16-sdk 1.0.22 → 1.0.24

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+interface EmptyStateProps {
+    onSelectPrompt: (text: string) => void;
+}
+declare const EmptyState: React.FunctionComponent<EmptyStateProps>;
+export default EmptyState;

package/dist/components/ChatAIDraft/EmptyState.js

@@ -0,0 +1,222 @@
+import * as React from "react";
+import CustomAiIcon from "./CustomAIIcon.js";
+import MessageSquare from "../../node_modules/react-feather/dist/icons/message-square.js";
+import MessageCircle from "../../node_modules/react-feather/dist/icons/message-circle.js";
+import Check from "../../node_modules/react-feather/dist/icons/check.js";
+const FEATURES = [
+  {
+    icon: /* @__PURE__ */ React.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)"'
+  },
+  {
+    icon: /* @__PURE__ */ React.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'."
+  },
+  {
+    icon: /* @__PURE__ */ React.createElement(Check, { size: 16 }),
+    title: "Apply to body",
+    desc: "Insert the response you like into the email body and send."
+  }
+];
+const 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)"
+];
+const EmptyState = ({
+  onSelectPrompt
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        display: "flex",
+        flexDirection: "column",
+        paddingRight: 8,
+        marginRight: -8,
+        paddingBottom: 16
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", marginTop: 8 } }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          fontSize: 14,
+          fontWeight: 600,
+          color: "var(--text-primary)",
+          lineHeight: 1.5
+        }
+      },
+      "Let's draft a new email together from scratch."
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          fontSize: 13,
+          color: "var(--text-secondary)",
+          marginTop: 4
+        }
+      },
+      "Tell me what kind of email you'd like to write."
+    )),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          alignSelf: "center",
+          width: 100,
+          height: 100,
+          borderRadius: "50%",
+          background: "var(--primary-lighter)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          margin: "20px 0",
+          color: "var(--primary-main)",
+          flexShrink: 0
+        }
+      },
+      /* @__PURE__ */ React.createElement(CustomAiIcon, { size: 52, stroke: 1.5 })
+    ),
+    /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          fontSize: 13,
+          color: "var(--text-secondary)",
+          lineHeight: 1.6
+        }
+      },
+      "Give me the recipient, purpose, and key points",
+      /* @__PURE__ */ React.createElement("br", null),
+      "and AI will generate a polished draft."
+    )),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          borderTop: "1px solid var(--border-light)",
+          marginTop: 20,
+          paddingTop: 16,
+          display: "flex",
+          flexDirection: "column",
+          gap: 14
+        }
+      },
+      FEATURES.map((f, i) => /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: i,
+          style: {
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "flex-start",
+            gap: 10
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              width: 28,
+              height: 28,
+              borderRadius: "50%",
+              background: "var(--background-softGrey)",
+              color: "var(--primary-main)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0
+            }
+          },
+          f.icon
+        ),
+        /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              fontSize: 13,
+              fontWeight: 600,
+              color: "var(--text-primary)"
+            }
+          },
+          f.title
+        ), /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              fontSize: 12,
+              color: "var(--text-secondary)",
+              marginTop: 2,
+              lineHeight: 1.5
+            }
+          },
+          f.desc
+        ))
+      ))
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          borderTop: "1px solid var(--border-light)",
+          marginTop: 20,
+          paddingTop: 16
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: 12,
+            color: "var(--text-secondary)",
+            marginBottom: 8
+          }
+        },
+        "💡 Try these prompts to get a draft right away"
+      ),
+      /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 8 } }, SUGGESTIONS.map((s, i) => /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: i,
+          type: "button",
+          onClick: () => onSelectPrompt(s),
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            width: "100%",
+            padding: "10px 12px",
+            borderRadius: 8,
+            border: "none",
+            background: "var(--primary-lighter)",
+            color: "var(--text-primary)",
+            fontSize: 13,
+            textAlign: "left",
+            cursor: "pointer",
+            fontFamily: "inherit"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          MessageSquare,
+          {
+            size: 14,
+            style: {
+              color: "var(--primary-main)",
+              flexShrink: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ React.createElement("span", null, s)
+      )))
+    )
+  );
+};
+export {
+  EmptyState as default
+};

package/dist/components/ChatAIDraft/List.js

@@ -21,9 +21,48 @@ var __async = (__this, __arguments, generator) => {
 import * as React from "react";
 import { marked } from "../../node_modules/marked/lib/marked.esm.js";
 import TypingText from "./TypingText.js";
-import LoadingCircular from "../LoadingCircular/index.js";
 import Tooltip from "../Tooltip/index.js";
 import Copy from "../../node_modules/react-feather/dist/icons/copy.js";
+const AIAvatar = () => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    style: {
+      width: 28,
+      height: 28,
+      borderRadius: "50%",
+      background: "var(--primary-main)",
+      color: "var(--primary-contrasttext)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: 11,
+      fontWeight: 700,
+      letterSpacing: 0.5,
+      flexShrink: 0
+    }
+  },
+  "AI"
+);
+const LoadingDots = ({
+  label = "Thinking"
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 6,
+      background: "var(--background-softGrey)",
+      borderRadius: 8,
+      borderTopLeftRadius: 0,
+      padding: "8px 12px",
+      fontSize: 13,
+      color: "var(--text-secondary)"
+    }
+  },
+  /* @__PURE__ */ React.createElement("span", null, label),
+  /* @__PURE__ */ React.createElement("span", { className: "chat-ai-dots", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("span", null), /* @__PURE__ */ React.createElement("span", null), /* @__PURE__ */ React.createElement("span", null))
+);
 const List = ({
   items,
   onApply,
@@ -88,7 +127,8 @@ const List = ({
               borderRadius: 8,
               borderTopRightRadius: 0,
               padding: "8px 12px",
-              background: "var(--background-softGrey)"
+              background: "var(--primary-main)",
+              color: "var(--primary-contrasttext)"
             }
           }
         )
@@ -100,22 +140,24 @@ const List = ({
             width: "100%",
             display: "flex",
             alignItems: "flex-start",
-            flexDirection: "column",
+            flexDirection: "row",
             position: "relative",
-            marginTop: 8
+            marginTop: 8,
+            gap: 8
           }
         },
-        (_item == null ? void 0 : _item.isLoading) ? /* @__PURE__ */ React.createElement(LoadingCircular, { size: 32 }) : /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement(AIAvatar, null),
+        /* @__PURE__ */ React.createElement(
           "div",
           {
             style: {
+              flex: 1,
+              minWidth: 0,
               display: "flex",
-              flexDirection: "row",
-              alignItems: "flex-end",
-              width: "100%"
+              flexDirection: "column"
             }
           },
-          /* @__PURE__ */ React.createElement(
+          (_item == null ? void 0 : _item.isLoading) ? /* @__PURE__ */ React.createElement(LoadingDots, null) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
             TypingText,
             {
               data: { subject: _item.subject, body: _item.body },
@@ -123,24 +165,19 @@ const List = ({
                 background: "var(--background-softGrey)",
                 borderRadius: 8,
                 borderTopLeftRadius: 0,
-                padding: "8px 12px",
-                flexShrink: 0
+                padding: "8px 12px"
               }
             }
-          ),
-          /* @__PURE__ */ React.createElement(Tooltip, { title: "Apply content" }, /* @__PURE__ */ React.createElement(
+          ), /* @__PURE__ */ React.createElement("div", { style: { marginTop: 4 } }, /* @__PURE__ */ React.createElement(Tooltip, { title: "Apply content" }, /* @__PURE__ */ React.createElement(
             "button",
             {
               type: "button",
               onClick: () => handleApply(_item.body),
               color: "primary",
-              className: "icon-button small",
-              style: {
-                marginLeft: 4
-              }
+              className: "icon-button small"
             },
             /* @__PURE__ */ React.createElement(Copy, { size: 16 })
-          ))
+          ))))
         )
       )
     ))

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,11 +1,12 @@
-import { LabelValue } from '../../types';
+import { LabelValue } from '../../../types';
 import * as React from "react";
 interface SettingPopperProps {
     lang: LabelValue | null;
     setLang: (lang: LabelValue | null) => void;
-    originalEmail: string;
-    setOriginalEmail: (email: string) => void;
-    getEditorContent?: () => string;
+    tone: LabelValue | null;
+    setTone: (tone: LabelValue | null) => void;
+    length: LabelValue | null;
+    setLength: (length: LabelValue | null) => void;
     parentRef?: React.RefObject<HTMLDivElement>;
 }
 interface SettingPopperState {
@@ -21,7 +22,6 @@ declare class SettingPopper extends React.Component<SettingPopperProps, SettingP
     getLanguageOptions: () => Promise<void>;
     handleClickOutside: (event: MouseEvent) => void;
     togglePopper: () => void;
-    handleLangChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
     render(): React.JSX.Element;
 }
 export default SettingPopper;