hanbiro-react16-sdk 1.0.18 → 1.0.20

package/README.md

@@ -238,24 +238,7 @@ function setEmailContext(html) {
 Follow these steps when updating the library:
 
 1. **Finish coding**: Make your changes in the `src` directory.
-2. **Typecheck**: Run the typecheck command to ensure there are no errors.
+2. **Publish**: Run the publish script which will automatically run typecheck, build, commit, bump version, and publish to npm.
    ```bash
-   npm run test:typescript
-   ```
-3. **Build**: Run the build command and ensure there are no errors.
-   ```bash
-   npm run build
-   ```
-4. **Commit**: Commit your changes to git.
-5. **Patch version**: Increment the version number.
-   ```bash
-   npm version patch
-   ```
-6. **Push**: Push the changes and tags to GitHub.
-   ```bash
-   git push origin main --follow-tags
-   ```
-7. **Publish**: Publish the new version to npm.
-   ```bash
-   npm publish
+   python3 publish.py
    ```

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,6 @@
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+export {
+  getDefaultExportFromCjs
+};

package/dist/_virtual/index.js

@@ -0,0 +1,4 @@
+var propTypes = { exports: {} };
+export {
+  propTypes as __module
+};

package/dist/components/ChatAIDraft/CustomAIIcon.js

@@ -0,0 +1,63 @@
+import * as React from "react";
+const CustomAiIcon = ({ isGradient = false, stroke = 1.5, size = 40 }) => {
+  const gradientId = "ai-gradient-" + Math.random().toString(36).substr(2, 9);
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      style: { flexShrink: 0 }
+    },
+    isGradient && /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "0%", y2: "100%" }, /* @__PURE__ */ React.createElement("stop", { offset: "0%", stopColor: "#9D50BB" }, /* @__PURE__ */ React.createElement(
+      "animate",
+      {
+        attributeName: "offset",
+        values: "0%;0.4;0%",
+        dur: "1s",
+        repeatCount: "indefinite"
+      }
+    )), /* @__PURE__ */ React.createElement("stop", { offset: "30%", stopColor: "#6E48AA" }, /* @__PURE__ */ React.createElement(
+      "animate",
+      {
+        attributeName: "offset",
+        values: "0.4;0.7;0.4",
+        dur: "1s",
+        repeatCount: "indefinite"
+      }
+    )), /* @__PURE__ */ React.createElement("stop", { offset: "50%", stopColor: "#4776E6" }, /* @__PURE__ */ React.createElement(
+      "animate",
+      {
+        attributeName: "offset",
+        values: "0.5;0.7;0.5",
+        dur: "1s",
+        repeatCount: "indefinite"
+      }
+    )), /* @__PURE__ */ React.createElement(
+      "animateTransform",
+      {
+        attributeName: "gradientTransform",
+        type: "translate",
+        from: "0,0",
+        to: "100,0",
+        dur: "1s",
+        repeatCount: "indefinite"
+      }
+    ))),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        fill: "none",
+        stroke: isGradient ? `url(#${gradientId})` : "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: stroke,
+        d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0zM20 3v4m2-2h-4M4 17v2m1-1H3"
+      }
+    )
+  );
+};
+export {
+  CustomAiIcon as default
+};

package/dist/components/ChatAIDraft/List.js

@@ -0,0 +1,151 @@
+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 { 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 List = ({
+  items,
+  onApply,
+  getEditorContent
+}) => {
+  const handleApply = (body) => __async(void 0, null, function* () {
+    const titleRegex = /제목:[^\n]*/g;
+    const matches = titleRegex.exec(body) || [];
+    (matches[0] || "").replace("제목: ", "").replace("\n", "");
+    const content = body.replace(titleRegex, "").replace("본문: ", "");
+    let html = yield marked.parse(content);
+    const signatureRegex = /<!--HanbiroSignatureStart-->([\s\S]*?)<!--HanbiroSignatureEnd-->/g;
+    const editorValue = getEditorContent ? getEditorContent() : "";
+    const signatureMatch = signatureRegex.exec(editorValue) || [];
+    if (signatureMatch[0]) {
+      html = html + "<br>" + signatureMatch[0];
+    }
+    onApply({ html });
+  });
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        position: "relative",
+        overflowY: "auto",
+        paddingRight: 16,
+        marginRight: -16,
+        marginBottom: 8,
+        display: "flex",
+        flexDirection: "column"
+      }
+    },
+    items && items.map((_item) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: _item.id,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          marginBottom: 16
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            width: "100%",
+            display: "flex",
+            alignItems: "flex-end",
+            flexDirection: "column",
+            position: "relative",
+            marginTop: 8
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          TypingText,
+          {
+            data: { question: _item.question },
+            style: {
+              borderRadius: 8,
+              borderTopRightRadius: 0,
+              padding: "8px 12px",
+              background: "var(--background-softGrey)"
+            }
+          }
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            width: "100%",
+            display: "flex",
+            alignItems: "flex-start",
+            flexDirection: "column",
+            position: "relative",
+            marginTop: 8
+          }
+        },
+        (_item == null ? void 0 : _item.isLoading) ? /* @__PURE__ */ React.createElement(LoadingCircular, { size: 32 }) : /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "flex-end",
+              width: "100%"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            TypingText,
+            {
+              data: { subject: _item.subject, body: _item.body },
+              style: {
+                background: "var(--background-softGrey)",
+                borderRadius: 8,
+                borderTopLeftRadius: 0,
+                padding: "8px 12px",
+                flexShrink: 0
+              }
+            }
+          ),
+          /* @__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
+              }
+            },
+            /* @__PURE__ */ React.createElement(Copy, { size: 16 })
+          ))
+        )
+      )
+    ))
+  );
+};
+export {
+  List as default
+};

package/dist/components/ChatAIDraft/SettingPopper.js

@@ -0,0 +1,225 @@
+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);
+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 * as ReactDOM from "react-dom";
+import TinyMceEditor from "../TinyMceEditor/index.js";
+import Tooltip from "../Tooltip/index.js";
+import { axiosApi } from "../../utils/axiosAPI.js";
+import Settings from "../../node_modules/react-feather/dist/icons/settings.js";
+import Copy from "../../node_modules/react-feather/dist/icons/copy.js";
+class SettingPopper extends React.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "containerRef");
+    __publicField(this, "popperRef");
+    __publicField(this, "getLanguageOptions", () => __async(this, null, function* () {
+      var _a;
+      const res = yield axiosApi.get("/email/ai/langlist");
+      if (res == null ? void 0 : res.list) {
+        const langs = (_a = Object.keys(res == null ? void 0 : res.list)) == null ? void 0 : _a.map((_key, i) => {
+          var _a2;
+          const _item = (_a2 = res == null ? void 0 : res.list) == null ? void 0 : _a2[_key];
+          return {
+            value: _key,
+            label: _item == null ? void 0 : _item.name
+          };
+        });
+        this.setState({ languageOptions: langs });
+      }
+    }));
+    __publicField(this, "handleClickOutside", (event) => {
+      const target = event.target;
+      if (this.containerRef.current && !this.containerRef.current.contains(target) && (!this.popperRef.current || !this.popperRef.current.contains(target))) {
+        this.setState({ open: false });
+      }
+    });
+    __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();
+  }
+  componentDidMount() {
+    document.addEventListener("mousedown", this.handleClickOutside);
+    this.getLanguageOptions();
+  }
+  componentWillUnmount() {
+    document.removeEventListener("mousedown", this.handleClickOutside);
+  }
+  render() {
+    const {
+      lang,
+      originalEmail,
+      setOriginalEmail,
+      getEditorContent,
+      parentRef
+    } = this.props;
+    const { open, languageOptions } = this.state;
+    let popperTop = 0;
+    let popperLeft = 0;
+    let popperWidth = 320;
+    if (open && this.containerRef.current) {
+      const rect = this.containerRef.current.getBoundingClientRect();
+      popperTop = rect.top + (window.scrollY || document.documentElement.scrollTop) - 8;
+      popperLeft = rect.left + (window.scrollX || document.documentElement.scrollLeft);
+      if (parentRef && parentRef.current) {
+        const parentRect = parentRef.current.getBoundingClientRect();
+        popperWidth = parentRect.width - 16;
+        popperLeft = parentRect.left + 8;
+      }
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: this.containerRef,
+        style: { position: "relative", display: "inline-block" }
+      },
+      /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: this.togglePopper,
+          className: "icon-button small"
+        },
+        /* @__PURE__ */ React.createElement(Settings, { size: 16 })
+      ),
+      open && this.containerRef.current && ReactDOM.createPortal(
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            ref: this.popperRef,
+            style: {
+              position: "absolute",
+              top: popperTop,
+              left: popperLeft,
+              transform: "translateY(-100%)",
+              zIndex: 1051,
+              background: "#fff",
+              border: "1px solid #ddd",
+              boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
+              borderRadius: 8,
+              padding: 16,
+              width: popperWidth,
+              boxSizing: "border-box"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: { display: "flex", flexDirection: "column", gap: 12 }
+            },
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                style: { display: "flex", flexDirection: "column", gap: 4 }
+              },
+              /* @__PURE__ */ React.createElement(
+                "span",
+                {
+                  style: {
+                    fontSize: 12,
+                    fontWeight: 500
+                    // color: "var(--text-secondary)",
+                  }
+                },
+                "Language"
+              ),
+              /* @__PURE__ */ React.createElement(
+                "select",
+                {
+                  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);
+                })
+              )
+            ),
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                style: { display: "flex", flexDirection: "column", gap: 4 }
+              },
+              /* @__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
+                }
+              )
+            )
+          )
+        ),
+        document.body
+      )
+    );
+  }
+}
+export {
+  SettingPopper as default
+};

package/dist/components/ChatAIDraft/TypingText.js

@@ -0,0 +1,39 @@
+var __defProp = Object.defineProperty;
+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;
+};
+import * as React from "react";
+import { marked } from "../../node_modules/marked/lib/marked.esm.js";
+const TypingText = ({ data, style }) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: __spreadValues({
+        maxWidth: "80%"
+      }, style)
+    },
+    data && data.subject ? /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        dangerouslySetInnerHTML: {
+          __html: marked.parse(data.body, { async: false })
+        }
+      }
+    ) : /* @__PURE__ */ React.createElement("p", { style: { margin: 0, whiteSpace: "pre-wrap" } }, data ? data.question : "")
+  );
+};
+export {
+  TypingText as default
+};

package/dist/components/ChatAIDraft/helper.js

@@ -0,0 +1,121 @@
+var __defProp = Object.defineProperty;
+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 __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 { getBaseUrl, SDKConfig } from "../../utils/url.js";
+function callAI(_0, _1) {
+  return __async(this, arguments, function* (params, { setContent, setIsLoading, setConversationId }) {
+    var _a;
+    let currentContent = "";
+    const baseUrl = getBaseUrl();
+    try {
+      setIsLoading(true);
+      const config = {
+        method: "POST",
+        baseURL: baseUrl,
+        url: "/nmail/chatdraft",
+        params
+      };
+      let sigHeaders = {};
+      const signer = (_a = SDKConfig) == null ? void 0 : _a.signer;
+      if (signer && typeof signer.generateHeaders === "function") {
+        sigHeaders = yield signer.generateHeaders(config);
+      }
+      const response = yield fetch(`${baseUrl}/nmail/chatdraft`, {
+        method: "POST",
+        body: JSON.stringify(params),
+        headers: __spreadValues({
+          "Content-Type": "application/json",
+          "Access-Control-Allow-Origin": "*"
+        }, sigHeaders)
+      });
+      setIsLoading(false);
+      if (!response.body) {
+        throw new Error("Response body is not available for streaming.");
+      }
+      const reader = response.body.getReader();
+      let fullContentDecode = "";
+      let readIndex = 0;
+      while (true) {
+        const { done, value } = yield reader.read();
+        if (done) {
+          break;
+        }
+        let originStr = "";
+        let jsonFormat = "";
+        try {
+          const contentDecode = new TextDecoder().decode(value);
+          fullContentDecode += contentDecode;
+          const contentRegex = /"answer":".*?"/g;
+          const conversationIdRegex = /"conversation_id"\s*:\s*"([^"]+)"/;
+          const matchArray = [...fullContentDecode.matchAll(contentRegex)];
+          const conversationIdmatch = fullContentDecode.match(conversationIdRegex);
+          if (conversationIdmatch && conversationIdmatch[1]) {
+            setConversationId(conversationIdmatch[1]);
+          }
+          while (readIndex < matchArray.length) {
+            const _regMatchItem = matchArray[readIndex];
+            try {
+              originStr = _regMatchItem[0];
+              const nVal = originStr.slice(10, originStr.length - 1);
+              jsonFormat = `"${nVal}"`;
+              if (nVal.endsWith("\\")) {
+                jsonFormat = `"${nVal}\\"`;
+              }
+              const decoded = JSON.parse(jsonFormat);
+              currentContent += decoded;
+              setContent(currentContent);
+            } catch (e) {
+              console.error("Parse error: ", e, originStr, jsonFormat);
+            }
+            readIndex++;
+          }
+        } catch (e) {
+          console.error("TextDecoder error: ", e, originStr);
+        }
+      }
+      return currentContent;
+    } catch (e) {
+      console.error("Summary error:", e);
+      setContent("");
+    } finally {
+      setIsLoading(false);
+    }
+    return "";
+  });
+}
+export {
+  callAI
+};