hanbiro-react16-sdk 1.0.25 → 1.0.27

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

@@ -0,0 +1,465 @@
+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 MailListSelect from "./MailListSelect.js";
+import { fetchMailView, fetchMailAiContext } from "./helper.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";
+import Lock from "../../../node_modules/react-feather/dist/icons/lock.js";
+import Plus from "../../../node_modules/react-feather/dist/icons/plus.js";
+class ReplyPanel extends React.Component {
+  constructor(props) {
+    var _a;
+    super(props);
+    __publicField(this, "rootRef");
+    __publicField(this, "loadSourceMail", () => __async(this, null, function* () {
+      const { sourceMid } = this.props;
+      if (!sourceMid) return;
+      this.setState({ isLoadingSource: true });
+      const view = yield fetchMailView(sourceMid);
+      if (view) {
+        this.setState({
+          sourceMail: {
+            mid: view.mid,
+            subject: view.subject,
+            from_name: view.from_name,
+            from_addr: view.from_addr,
+            date: view.date,
+            ai_contents: view.ai_contents,
+            contents: view.contents
+          },
+          accountEmail: view.from_addr,
+          isLoadingSource: false
+        });
+      } else {
+        this.setState({ isLoadingSource: false });
+      }
+    }));
+    __publicField(this, "handleAddClick", () => {
+      this.setState({ view: "list" });
+    });
+    __publicField(this, "handleListCancel", () => {
+      this.setState({ view: this.state.messages.length > 0 ? "chat" : "empty" });
+    });
+    __publicField(this, "handleListConfirm", (mids) => __async(this, null, function* () {
+      this.setState({ isLoadingSelected: true });
+      const selectedMails = yield fetchMailAiContext(mids);
+      this.setState({
+        selectedMails,
+        isLoadingSelected: false,
+        view: this.state.messages.length > 0 ? "chat" : "empty"
+      });
+    }));
+    __publicField(this, "handleRemoveSelected", (mid) => {
+      this.setState({
+        selectedMails: this.state.selectedMails.filter((m) => m.mid !== mid)
+      });
+    });
+    __publicField(this, "handleMessageChange", (value) => {
+      this.setState({ message: value });
+    });
+    __publicField(this, "handleSubmit", () => __async(this, null, function* () {
+      const { type } = this.props;
+      const {
+        message,
+        messages,
+        lang,
+        tone,
+        length,
+        conversationId,
+        sourceMail,
+        selectedMails
+      } = 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,
+        view: "chat"
+      });
+      const params = {
+        query: message,
+        default_language: lang ? lang.value : "KR",
+        debug_grpc: true,
+        action: type,
+        original_email: (sourceMail == null ? void 0 : sourceMail.contents) || "",
+        emailhistorys: selectedMails.filter((m) => m.ai_contents).map((m) => ({ date: m.date, contents: m.ai_contents }))
+      };
+      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 = {
+      view: "empty",
+      sourceMail: null,
+      accountEmail: "",
+      selectedMails: [],
+      isLoadingSource: false,
+      isLoadingSelected: false,
+      message: "",
+      messages: [],
+      isSending: false,
+      lang,
+      tone: TONE_OPTIONS[2],
+      length: LENGTH_OPTIONS[2],
+      conversationId: ""
+    };
+  }
+  componentDidMount() {
+    this.loadSourceMail();
+  }
+  renderContextHeader() {
+    const { sourceMail, selectedMails } = this.state;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 8,
+          paddingBottom: 12,
+          borderBottom: "1px solid var(--border-light)",
+          marginBottom: 12
+        }
+      },
+      sourceMail && /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 4 } }, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            fontSize: 12,
+            fontWeight: 600,
+            color: "var(--text-primary)"
+          }
+        },
+        /* @__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
+            }
+          },
+          "1"
+        ),
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 2,
+              fontSize: 11,
+              color: "var(--text-secondary)"
+            }
+          },
+          /* @__PURE__ */ React.createElement(Lock, { size: 11 }),
+          " Auto"
+        )
+      ), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: 12,
+            color: "var(--text-secondary)",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          }
+        },
+        sourceMail.subject,
+        " ·",
+        " ",
+        /* @__PURE__ */ React.createElement("span", { style: { color: "var(--text-primary)" } }, sourceMail.from_name)
+      )),
+      /* @__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,
+              fontWeight: 600,
+              color: "var(--text-primary)"
+            }
+          },
+          /* @__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
+              }
+            },
+            selectedMails.length
+          )
+        ),
+        /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: this.handleAddClick,
+            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(
+        "div",
+        {
+          key: m.mid,
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "4px 8px",
+            borderRadius: 8,
+            border: "1px solid var(--border-light)",
+            background: "var(--primary-lighter)",
+            fontSize: 11,
+            maxWidth: 160
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            style: {
+              width: 14,
+              height: 14,
+              borderRadius: "50%",
+              background: "var(--primary-main)",
+              color: "var(--primary-contrasttext)",
+              fontSize: 9,
+              fontWeight: 700,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0
+            }
+          },
+          i + 1
+        ),
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            style: {
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            }
+          },
+          m.subject || "(no subject)"
+        ),
+        /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: () => this.handleRemoveSelected(m.mid),
+            style: {
+              border: "none",
+              background: "transparent",
+              cursor: "pointer",
+              padding: 0,
+              color: "var(--text-secondary)",
+              display: "inline-flex",
+              alignItems: "center",
+              flexShrink: 0
+            }
+          },
+          "×"
+        )
+      ))))
+    );
+  }
+  render() {
+    const { onApply, getEditorContent } = this.props;
+    const {
+      view,
+      sourceMail,
+      accountEmail,
+      selectedMails,
+      message,
+      messages,
+      isSending,
+      lang,
+      tone,
+      length,
+      isLoadingSelected
+    } = this.state;
+    if (view === "list") {
+      return /* @__PURE__ */ React.createElement(
+        MailListSelect,
+        {
+          accountEmail,
+          initialSelected: selectedMails.map((m) => m.mid),
+          onCancel: this.handleListCancel,
+          onConfirm: this.handleListConfirm
+        }
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: this.rootRef,
+        style: {
+          display: "flex",
+          height: "100%",
+          padding: 16,
+          flexDirection: "column",
+          background: "#fff",
+          fontFamily: "inherit",
+          boxSizing: "border-box"
+        }
+      },
+      view === "chat" ? /* @__PURE__ */ React.createElement(React.Fragment, null, this.renderContextHeader(), /* @__PURE__ */ React.createElement(
+        ChatList,
+        {
+          items: messages,
+          onApply,
+          getEditorContent
+        }
+      )) : /* @__PURE__ */ React.createElement(
+        EmptyState,
+        {
+          sourceMail,
+          selectedMails,
+          onAddClick: this.handleAddClick,
+          onRemoveSelected: this.handleRemoveSelected
+        }
+      ),
+      isLoadingSelected && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: 12,
+            color: "var(--text-secondary)",
+            padding: 8,
+            textAlign: "center"
+          }
+        },
+        "Loading context..."
+      ),
+      /* @__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,
+          placeholder: "Type a message..."
+        }
+      )
+    );
+  }
+}
+export {
+  ReplyPanel as default
+};

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

@@ -4,4 +4,5 @@ interface Options {
     setConversationId: (nVal: string) => void;
 }
 export declare function callAI(params: any, { setContent, setIsLoading, setConversationId }: Options): Promise<string>;
+export declare const extractEmail: (raw?: string) => string;
 export {};

package/dist/components/ChatAIDraft/helper.js

@@ -116,6 +116,17 @@ function callAI(_0, _1) {
     return "";
   });
 }
+const extractEmail = (raw = "") => {
+  var _a;
+  if (!raw) return "";
+  const decoded = String(raw).replace(/&lt;/g, "<").replace(/&gt;/g, ">").trim();
+  const match = decoded.match(/<([^>]+)>/);
+  if (match) return match[1].trim();
+  const first = (_a = decoded.split(",")[0]) == null ? void 0 : _a.trim();
+  const inner = first == null ? void 0 : first.match(/([^\s<>"]+@[^\s<>"]+)/);
+  return inner ? inner[1] : first || "";
+};
 export {
-  callAI
+  callAI,
+  extractEmail
 };

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

@@ -1,41 +1,13 @@
-import { LabelValue } from '../../types';
+import { ChatType } from './types';
 import * as React from "react";
 export interface ChatAIDraftProps {
+    type?: ChatType;
+    sourceMid?: string;
     defaultLang?: string;
     getEditorContent?: () => string;
     onApply: (params: {
         html: string;
     }) => void;
 }
-export interface AIMessage {
-    id: string;
-    question: string;
-    subject: string;
-    body: string;
-    created_at: number;
-    isLoading: boolean;
-}
-interface AIPaneState {
-    message: string;
-    messages: AIMessage[];
-    isSending: boolean;
-    lang: LabelValue | null;
-    tone: LabelValue | null;
-    length: LabelValue | null;
-    conversationId: string;
-}
-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;
-    setTone: (tone: LabelValue | null) => void;
-    setLength: (length: LabelValue | null) => void;
-    render(): React.JSX.Element;
-}
+declare const ChatAIDraft: React.FunctionComponent<ChatAIDraftProps>;
 export default ChatAIDraft;