hanbiro-react16-sdk 1.0.25 → 1.0.26

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

@@ -0,0 +1,173 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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 { callAI } from "../helper.js";
+import ChatList from "../ChatList/index.js";
+import ChatInput from "../ChatInput.js";
+import EmptyState from "./EmptyState.js";
+import { LENGTH_OPTIONS, TONE_OPTIONS } from "../constants.js";
+import { AI_LANG_FLAGS } from "../../../constants/index.js";
+import v4 from "../../../node_modules/uuid/dist/esm-browser/v4.js";
+class CreatePanel extends React.Component {
+  constructor(props) {
+    var _a;
+    super(props);
+    __publicField(this, "rootRef");
+    __publicField(this, "handleMessageChange", (value) => {
+      this.setState({ message: value });
+    });
+    __publicField(this, "handleSubmit", () => __async(this, null, function* () {
+      const { message, messages, lang, tone, length, conversationId } = this.state;
+      if (!message.trim()) return;
+      const newId = v4();
+      const newMessage = {
+        id: newId,
+        question: message,
+        subject: "",
+        body: "",
+        created_at: (/* @__PURE__ */ new Date()).getTime(),
+        isLoading: true
+      };
+      this.setState({
+        messages: [...messages, newMessage],
+        message: "",
+        isSending: true
+      });
+      const params = {
+        query: message,
+        default_language: lang ? lang.value : "KR",
+        debug_grpc: true
+      };
+      if (tone) params.tone = tone.value;
+      if (length) params.length = length.value;
+      if (conversationId) params.conversation_id = conversationId;
+      const setContent = (nContent) => {
+        this.setState((prevState) => ({
+          messages: prevState.messages.map(
+            (m) => m.id === newId ? __spreadProps(__spreadValues({}, m), {
+              subject: "Some thing not used",
+              body: nContent,
+              isLoading: false,
+              created_at: (/* @__PURE__ */ new Date()).getTime()
+            }) : m
+          )
+        }));
+      };
+      const setIsLoading = (loading) => {
+        this.setState((prevState) => ({
+          messages: prevState.messages.map(
+            (m) => m.id === newId ? __spreadProps(__spreadValues({}, m), { isLoading: loading }) : m
+          )
+        }));
+      };
+      const setConversationId = (id) => {
+        this.setState({ conversationId: id });
+      };
+      yield callAI(params, { setContent, setIsLoading, setConversationId });
+      this.setState({ isSending: false });
+    }));
+    __publicField(this, "setLang", (lang) => this.setState({ lang }));
+    __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];
+    this.state = {
+      message: "",
+      messages: [],
+      isSending: false,
+      lang,
+      tone: TONE_OPTIONS[2],
+      length: LENGTH_OPTIONS[2],
+      conversationId: ""
+    };
+  }
+  render() {
+    const { onApply, getEditorContent } = this.props;
+    const { message, messages, isSending, lang, tone, length } = this.state;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: this.rootRef,
+        style: {
+          display: "flex",
+          height: "100%",
+          padding: 16,
+          flexDirection: "column",
+          background: "#fff",
+          fontFamily: "inherit",
+          boxSizing: "border-box"
+        }
+      },
+      messages.length > 0 ? /* @__PURE__ */ React.createElement(
+        ChatList,
+        {
+          items: messages,
+          onApply,
+          getEditorContent
+        }
+      ) : /* @__PURE__ */ React.createElement(
+        EmptyState,
+        {
+          onSelectPrompt: (text) => this.setState({ message: text })
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        ChatInput,
+        {
+          message,
+          onMessageChange: this.handleMessageChange,
+          onSubmit: this.handleSubmit,
+          isSending,
+          lang,
+          setLang: this.setLang,
+          tone,
+          setTone: this.setTone,
+          length,
+          setLength: this.setLength,
+          parentRef: this.rootRef
+        }
+      )
+    );
+  }
+}
+export {
+  CreatePanel as default
+};

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

@@ -0,0 +1,10 @@
+import { ContextMail } from '../types';
+import * as React from "react";
+interface EmptyStateProps {
+    sourceMail: ContextMail | null;
+    selectedMails: ContextMail[];
+    onAddClick: () => void;
+    onRemoveSelected: (mid: string) => void;
+}
+declare const EmptyState: React.FunctionComponent<EmptyStateProps>;
+export default EmptyState;

package/dist/components/ChatAIDraft/ReplyPanel/EmptyState.js

@@ -0,0 +1,365 @@
+import * as React from "react";
+import CustomAiIcon from "../CustomAIIcon.js";
+import Lock from "../../../node_modules/react-feather/dist/icons/lock.js";
+import Plus from "../../../node_modules/react-feather/dist/icons/plus.js";
+import Mail from "../../../node_modules/react-feather/dist/icons/mail.js";
+import MessageCircle from "../../../node_modules/react-feather/dist/icons/message-circle.js";
+const FEATURES = [
+  {
+    icon: /* @__PURE__ */ React.createElement(Mail, { size: 16 }),
+    title: "Auto-include source",
+    desc: "The email you are replying to is automatically added as context."
+  },
+  {
+    icon: /* @__PURE__ */ React.createElement(CustomAiIcon, { size: 16, stroke: 2 }),
+    title: "Add send history (optional)",
+    desc: "Use '+ Add' to pick past emails and reference their tone."
+  },
+  {
+    icon: /* @__PURE__ */ React.createElement(MessageCircle, { size: 16 }),
+    title: "Refine with conversation",
+    desc: "Get an AI draft, then adjust freely with chips or messages."
+  }
+];
+const SourceCard = ({
+  mail
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    style: {
+      border: "1px solid var(--border-light)",
+      borderRadius: 8,
+      padding: 10,
+      display: "flex",
+      gap: 8,
+      alignItems: "flex-start",
+      background: "#fff"
+    }
+  },
+  /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        fontSize: 13,
+        fontWeight: 600,
+        color: "var(--text-primary)",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }
+    },
+    mail.subject || "(no subject)"
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        fontSize: 12,
+        color: "var(--text-secondary)",
+        marginTop: 2,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }
+    },
+    mail.from_name,
+    mail.from_addr ? ` <${mail.from_addr}>` : "",
+    mail.date ? ` · ${mail.date}` : ""
+  ))
+);
+const SelectedChip = ({ index, mail, onRemove }) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 6,
+      padding: "6px 8px",
+      borderRadius: 8,
+      border: "1px solid var(--border-light)",
+      background: "var(--primary-lighter)",
+      fontSize: 12,
+      maxWidth: 160
+    }
+  },
+  /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      style: {
+        width: 16,
+        height: 16,
+        borderRadius: "50%",
+        background: "var(--primary-main)",
+        color: "var(--primary-contrasttext)",
+        fontSize: 10,
+        fontWeight: 700,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0
+      }
+    },
+    index + 1
+  ),
+  /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      style: {
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        color: "var(--text-primary)"
+      }
+    },
+    mail.subject || "(no subject)"
+  ),
+  /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => onRemove(mail.mid),
+      style: {
+        border: "none",
+        background: "transparent",
+        color: "var(--text-secondary)",
+        cursor: "pointer",
+        padding: 0,
+        display: "inline-flex",
+        alignItems: "center",
+        flexShrink: 0
+      }
+    },
+    "×"
+  )
+);
+const EmptyState = ({
+  sourceMail,
+  selectedMails,
+  onAddClick,
+  onRemoveSelected
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        display: "flex",
+        flexDirection: "column",
+        paddingRight: 8,
+        marginRight: -8,
+        paddingBottom: 16,
+        gap: 12
+      }
+    },
+    sourceMail && /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 6 } }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          fontSize: 12,
+          color: "var(--text-primary)",
+          fontWeight: 600
+        }
+      },
+      /* @__PURE__ */ React.createElement("span", null, "Source context"),
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          style: {
+            background: "var(--primary-main)",
+            color: "var(--primary-contrasttext)",
+            fontSize: 10,
+            padding: "1px 6px",
+            borderRadius: 999,
+            fontWeight: 600
+          }
+        },
+        "1"
+      ),
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 2,
+            fontSize: 11,
+            color: "var(--text-secondary)",
+            fontWeight: 500
+          }
+        },
+        /* @__PURE__ */ React.createElement(Lock, { size: 11 }),
+        " Auto"
+      )
+    ), /* @__PURE__ */ React.createElement(SourceCard, { mail: sourceMail })),
+    /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 6 } }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            fontSize: 12,
+            color: "var(--text-primary)",
+            fontWeight: 600
+          }
+        },
+        /* @__PURE__ */ React.createElement("span", null, "Selected context"),
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            style: {
+              background: "var(--background-softGrey)",
+              color: "var(--text-primary)",
+              fontSize: 10,
+              padding: "1px 6px",
+              borderRadius: 999,
+              fontWeight: 600
+            }
+          },
+          selectedMails.length
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: onAddClick,
+          className: "text-button primary"
+        },
+        /* @__PURE__ */ React.createElement(Plus, { size: 12 }),
+        " Add"
+      )
+    ), selectedMails.length > 0 && /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 } }, selectedMails.map((m, i) => /* @__PURE__ */ React.createElement(
+      SelectedChip,
+      {
+        key: m.mid,
+        index: i,
+        mail: m,
+        onRemove: onRemoveSelected
+      }
+    )))),
+    /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", marginTop: 8 } }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          fontSize: 13,
+          color: "var(--text-secondary)",
+          lineHeight: 1.6
+        }
+      },
+      "We'll draft a reply based on the received email.",
+      /* @__PURE__ */ React.createElement("br", null),
+      "Add send history if you want to match the tone."
+    )),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          alignSelf: "center",
+          width: 100,
+          height: 100,
+          borderRadius: "50%",
+          background: "var(--primary-lighter)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          margin: "8px 0",
+          color: "var(--primary-main)",
+          flexShrink: 0
+        }
+      },
+      /* @__PURE__ */ React.createElement(CustomAiIcon, { size: 44, stroke: 1.5 })
+    ),
+    /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          fontSize: 13,
+          color: "var(--text-secondary)",
+          lineHeight: 1.6
+        }
+      },
+      "The source is auto-included. Adjust tone and length through conversation."
+    )),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          borderTop: "1px solid var(--border-light)",
+          marginTop: 8,
+          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(--primary-lighter)",
+              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
+        ))
+      ))
+    )
+  );
+};
+export {
+  EmptyState as default
+};

package/dist/components/ChatAIDraft/ReplyPanel/MailListSelect.d.ts

@@ -0,0 +1,26 @@
+import { MailListItem } from '../types';
+import * as React from "react";
+interface MailListSelectProps {
+    accountEmail: string;
+    initialSelected: string[];
+    onCancel: () => void;
+    onConfirm: (mids: string[]) => void;
+}
+interface MailListSelectState {
+    page: number;
+    total: number;
+    items: MailListItem[];
+    selectedMids: string[];
+    isLoading: boolean;
+}
+declare class MailListSelect extends React.Component<MailListSelectProps, MailListSelectState> {
+    constructor(props: MailListSelectProps);
+    componentDidMount(): void;
+    loadPage: (page: number) => Promise<void>;
+    toggleMid: (mid: string) => void;
+    toggleAll: () => void;
+    clearAll: () => void;
+    renderPagination(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export default MailListSelect;