hanbiro-react16-sdk 1.0.25 → 1.0.26

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

@@ -0,0 +1,27 @@
+import { LabelValue } from '../../types';
+import * as React from "react";
+interface ChatInputProps {
+    message: string;
+    onMessageChange: (value: string) => void;
+    onSubmit: () => void;
+    isSending: boolean;
+    lang: LabelValue | null;
+    setLang: (v: LabelValue | null) => void;
+    tone: LabelValue | null;
+    setTone: (v: LabelValue | null) => void;
+    length: LabelValue | null;
+    setLength: (v: LabelValue | null) => void;
+    parentRef?: React.RefObject<HTMLDivElement>;
+    placeholder?: string;
+}
+declare class ChatInput extends React.Component<ChatInputProps> {
+    private textareaRef;
+    constructor(props: ChatInputProps);
+    componentDidMount(): void;
+    componentDidUpdate(prev: ChatInputProps): void;
+    adjustHeight: () => void;
+    handleChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    render(): React.JSX.Element;
+}
+export default ChatInput;

package/dist/components/ChatAIDraft/ChatInput.js

@@ -0,0 +1,190 @@
+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 SettingPopper from "./SettingPopper/index.js";
+import ArrowUp from "../../node_modules/react-feather/dist/icons/arrow-up.js";
+class ChatInput extends React.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "textareaRef");
+    __publicField(this, "adjustHeight", () => {
+      const el = this.textareaRef.current;
+      if (!el) return;
+      el.style.height = "auto";
+      el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
+    });
+    __publicField(this, "handleChange", (e) => {
+      this.props.onMessageChange(e.target.value);
+    });
+    __publicField(this, "handleKeyDown", (event) => {
+      if (!event.shiftKey && event.key === "Enter" && !this.props.isSending) {
+        event.preventDefault();
+        this.props.onSubmit();
+      }
+    });
+    this.textareaRef = React.createRef();
+  }
+  componentDidMount() {
+    this.adjustHeight();
+  }
+  componentDidUpdate(prev) {
+    if (prev.message !== this.props.message) {
+      this.adjustHeight();
+    }
+  }
+  render() {
+    var _a, _b;
+    const {
+      message,
+      isSending,
+      lang,
+      setLang,
+      tone,
+      setTone,
+      length,
+      setLength,
+      parentRef,
+      onSubmit,
+      placeholder
+    } = this.props;
+    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;
+    const sendDisabled = !message.trim() || isSending;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          width: "100%",
+          borderRadius: 12,
+          overflow: "hidden",
+          background: "var(--background-softGrey)",
+          display: "flex",
+          flexDirection: "column",
+          border: "1px solid var(--border-light)"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "textarea",
+        {
+          ref: this.textareaRef,
+          value: message,
+          onChange: this.handleChange,
+          placeholder: placeholder || "Describe your email...",
+          name: "ai-content",
+          onKeyDown: this.handleKeyDown,
+          disabled: isSending,
+          rows: 1,
+          style: {
+            width: "100%",
+            minWidth: 0,
+            padding: 12,
+            fontSize: 13,
+            lineHeight: 1.4,
+            border: "none",
+            resize: "none",
+            outline: "none",
+            fontFamily: "inherit",
+            background: "transparent",
+            overflowY: "auto",
+            boxSizing: "border-box",
+            display: "block"
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            width: "100%",
+            padding: "8px",
+            boxSizing: "border-box"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          SettingPopper,
+          {
+            lang,
+            setLang,
+            tone,
+            setTone,
+            length,
+            setLength,
+            parentRef
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          CountryFlag,
+          {
+            flagCode,
+            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: sendDisabled,
+            onClick: onSubmit,
+            style: {
+              marginLeft: "auto",
+              width: 28,
+              height: 28,
+              borderRadius: "50%",
+              border: "none",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: sendDisabled ? "var(--primary-lighter)" : "var(--primary-main)",
+              color: "var(--primary-contrasttext)",
+              cursor: sendDisabled ? "not-allowed" : "pointer",
+              transition: "background 0.15s ease-in-out"
+            }
+          },
+          /* @__PURE__ */ React.createElement(ArrowUp, { size: 18 })
+        )
+      )
+    );
+  }
+}
+export {
+  ChatInput as default
+};

package/dist/components/ChatAIDraft/ChatList/AIAvatar.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const AIAvatar: React.FunctionComponent;
+export default AIAvatar;

package/dist/components/ChatAIDraft/ChatList/AIAvatar.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+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"
+);
+export {
+  AIAvatar as default
+};

package/dist/components/ChatAIDraft/ChatList/LoadingDots.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+interface LoadingDotsProps {
+    label?: string;
+}
+declare const LoadingDots: React.FunctionComponent<LoadingDotsProps>;
+export default LoadingDots;

package/dist/components/ChatAIDraft/ChatList/LoadingDots.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+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))
+);
+export {
+  LoadingDots as default
+};

package/dist/components/ChatAIDraft/ChatList/MessageItem.d.ts

@@ -0,0 +1,11 @@
+import { AIMessage } from '../types';
+import * as React from "react";
+interface MessageItemProps {
+    item: AIMessage;
+    onApply: (params: {
+        html: string;
+    }) => void;
+    getEditorContent?: () => string;
+}
+declare const MessageItem: React.FunctionComponent<MessageItemProps>;
+export default MessageItem;

package/dist/components/ChatAIDraft/ChatList/MessageItem.js

@@ -0,0 +1,124 @@
+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 Tooltip from "../../Tooltip/index.js";
+import TypingText from "../TypingText.js";
+import AIAvatar from "./AIAvatar.js";
+import LoadingDots from "./LoadingDots.js";
+import { buildApplyHtml } from "./helpers.js";
+import Copy from "../../../node_modules/react-feather/dist/icons/copy.js";
+const MessageItem = ({
+  item,
+  onApply,
+  getEditorContent
+}) => {
+  const handleApply = () => __async(void 0, null, function* () {
+    const editorValue = getEditorContent ? getEditorContent() : "";
+    const html = yield buildApplyHtml(item.body, editorValue);
+    onApply({ html });
+  });
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      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(--primary-main)",
+            color: "var(--primary-contrasttext)"
+          }
+        }
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          width: "100%",
+          display: "flex",
+          alignItems: "flex-start",
+          flexDirection: "row",
+          position: "relative",
+          marginTop: 8,
+          gap: 8
+        }
+      },
+      /* @__PURE__ */ React.createElement(AIAvatar, null),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            flex: 1,
+            minWidth: 0,
+            display: "flex",
+            flexDirection: "column"
+          }
+        },
+        item.isLoading ? /* @__PURE__ */ React.createElement(LoadingDots, null) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+          TypingText,
+          {
+            data: { subject: item.subject, body: item.body },
+            style: {
+              background: "var(--background-softGrey)",
+              borderRadius: 8,
+              borderTopLeftRadius: 0,
+              padding: "8px 12px"
+            }
+          }
+        ), /* @__PURE__ */ React.createElement("div", { style: { marginTop: 4 } }, /* @__PURE__ */ React.createElement(Tooltip, { title: "Apply content" }, /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: handleApply,
+            color: "primary",
+            className: "icon-button small"
+          },
+          /* @__PURE__ */ React.createElement(Copy, { size: 16 })
+        ))))
+      )
+    )
+  );
+};
+export {
+  MessageItem as default
+};

package/dist/components/ChatAIDraft/ChatList/helpers.d.ts

@@ -0,0 +1 @@
+export declare const buildApplyHtml: (body: string, editorValue: string) => Promise<string>;

package/dist/components/ChatAIDraft/ChatList/helpers.js

@@ -0,0 +1,35 @@
+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 { marked } from "../../../node_modules/marked/lib/marked.esm.js";
+const SIGNATURE_REGEX = /<!--HanbiroSignatureStart-->([\s\S]*?)<!--HanbiroSignatureEnd-->/g;
+const TITLE_REGEX = /제목:[^\n]*/g;
+const buildApplyHtml = (body, editorValue) => __async(void 0, null, function* () {
+  const content = body.replace(TITLE_REGEX, "").replace("본문: ", "");
+  let html = yield marked.parse(content);
+  const signatureMatch = SIGNATURE_REGEX.exec(editorValue) || [];
+  if (signatureMatch[0]) {
+    html = html + "<br>" + signatureMatch[0];
+  }
+  return html;
+});
+export {
+  buildApplyHtml
+};

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

@@ -0,0 +1,11 @@
+import { AIMessage } from '../types';
+import * as React from "react";
+interface ChatListProps {
+    items: AIMessage[];
+    onApply: (params: {
+        html: string;
+    }) => void;
+    getEditorContent?: () => string;
+}
+declare const ChatList: React.FunctionComponent<ChatListProps>;
+export default ChatList;

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+import MessageItem from "./MessageItem.js";
+const ChatList = ({
+  items,
+  onApply,
+  getEditorContent
+}) => {
+  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 == null ? void 0 : items.map((item) => /* @__PURE__ */ React.createElement(
+      MessageItem,
+      {
+        key: item.id,
+        item,
+        onApply,
+        getEditorContent
+      }
+    ))
+  );
+};
+export {
+  ChatList as default
+};

package/dist/components/ChatAIDraft/{EmptyState.js → CreatePanel/EmptyState.js}

@@ -1,8 +1,8 @@
 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";
+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 }),

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

@@ -0,0 +1,30 @@
+import { LabelValue } from '../../../types';
+import { AIMessage } from '../types';
+import * as React from "react";
+export interface CreatePanelProps {
+    defaultLang?: string;
+    getEditorContent?: () => string;
+    onApply: (params: {
+        html: string;
+    }) => void;
+}
+interface CreatePanelState {
+    message: string;
+    messages: AIMessage[];
+    isSending: boolean;
+    lang: LabelValue | null;
+    tone: LabelValue | null;
+    length: LabelValue | null;
+    conversationId: string;
+}
+declare class CreatePanel extends React.Component<CreatePanelProps, CreatePanelState> {
+    private rootRef;
+    constructor(props: CreatePanelProps);
+    handleMessageChange: (value: string) => void;
+    handleSubmit: () => Promise<void>;
+    setLang: (lang: LabelValue | null) => void;
+    setTone: (tone: LabelValue | null) => void;
+    setLength: (length: LabelValue | null) => void;
+    render(): React.JSX.Element;
+}
+export default CreatePanel;