hanbiro-react16-sdk 1.0.27 → 1.0.28

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

@@ -43,13 +43,13 @@ import { callAI } from "../helper.js";
 import ChatList from "../ChatList/index.js";
 import ChatInput from "../ChatInput.js";
 import EmptyState from "./EmptyState.js";
+import ContextHeader from "./Header/index.js";
 import MailListSelect from "./MailListSelect.js";
+import ContextPreviewModal from "./ContextPreviewModal.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;
@@ -98,6 +98,15 @@ class ReplyPanel extends React.Component {
         selectedMails: this.state.selectedMails.filter((m) => m.mid !== mid)
       });
     });
+    __publicField(this, "handlePreviewSelected", (mail) => {
+      this.setState({ preview: { mail, mode: "ai" } });
+    });
+    __publicField(this, "handlePreviewSource", (mail) => {
+      this.setState({ preview: { mail, mode: "html" } });
+    });
+    __publicField(this, "handlePreviewClose", () => {
+      this.setState({ preview: null });
+    });
     __publicField(this, "handleMessageChange", (value) => {
       this.setState({ message: value });
     });
@@ -177,6 +186,7 @@ class ReplyPanel extends React.Component {
       selectedMails: [],
       isLoadingSource: false,
       isLoadingSelected: false,
+      preview: null,
       message: "",
       messages: [],
       isSending: false,
@@ -189,189 +199,6 @@ class ReplyPanel extends React.Component {
   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 {
@@ -385,7 +212,8 @@ class ReplyPanel extends React.Component {
       lang,
       tone,
       length,
-      isLoadingSelected
+      isLoadingSelected,
+      preview
     } = this.state;
     if (view === "list") {
       return /* @__PURE__ */ React.createElement(
@@ -393,6 +221,7 @@ class ReplyPanel extends React.Component {
         {
           accountEmail,
           initialSelected: selectedMails.map((m) => m.mid),
+          isConfirming: isLoadingSelected,
           onCancel: this.handleListCancel,
           onConfirm: this.handleListConfirm
         }
@@ -412,22 +241,25 @@ class ReplyPanel extends React.Component {
           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,
+      /* @__PURE__ */ React.createElement(
+        ContextHeader,
         {
           sourceMail,
           selectedMails,
           onAddClick: this.handleAddClick,
-          onRemoveSelected: this.handleRemoveSelected
+          onSourceClick: this.handlePreviewSource,
+          onChipClick: this.handlePreviewSelected,
+          onRemoveChip: this.handleRemoveSelected
         }
       ),
+      view === "chat" ? /* @__PURE__ */ React.createElement(
+        ChatList,
+        {
+          items: messages,
+          onApply,
+          getEditorContent
+        }
+      ) : /* @__PURE__ */ React.createElement(EmptyState, null),
       isLoadingSelected && /* @__PURE__ */ React.createElement(
         "div",
         {
@@ -456,6 +288,13 @@ class ReplyPanel extends React.Component {
           parentRef: this.rootRef,
           placeholder: "Type a message..."
         }
+      ),
+      /* @__PURE__ */ React.createElement(
+        ContextPreviewModal,
+        {
+          preview,
+          onClose: this.handlePreviewClose
+        }
       )
     );
   }

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+interface PaginationProps {
+    total: number;
+    page: number;
+    totalPages: number;
+    onChangePage: (page: number) => void;
+}
+interface PaginationState {
+    inputValue: string;
+}
+declare class Pagination extends React.Component<PaginationProps, PaginationState> {
+    constructor(props: PaginationProps);
+    componentDidUpdate(prevProps: PaginationProps): void;
+    clamp: (value: number) => number;
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    commit: () => void;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    render(): React.JSX.Element;
+}
+export default Pagination;

package/dist/components/Pagination/index.js

@@ -0,0 +1,131 @@
+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 ChevronLeft from "../../node_modules/react-feather/dist/icons/chevron-left.js";
+import ChevronRight from "../../node_modules/react-feather/dist/icons/chevron-right.js";
+class Pagination extends React.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "clamp", (value) => {
+      const { totalPages } = this.props;
+      if (Number.isNaN(value)) return this.props.page;
+      return Math.min(Math.max(1, Math.floor(value)), Math.max(1, totalPages));
+    });
+    __publicField(this, "handleInputChange", (e) => {
+      this.setState({ inputValue: e.target.value });
+    });
+    __publicField(this, "commit", () => {
+      const next = this.clamp(parseInt(this.state.inputValue, 10));
+      this.setState({ inputValue: String(next) });
+      if (next !== this.props.page) {
+        this.props.onChangePage(next);
+      }
+    });
+    __publicField(this, "handleKeyDown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        this.commit();
+      }
+    });
+    this.state = { inputValue: String(props.page) };
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.page !== this.props.page) {
+      this.setState({ inputValue: String(this.props.page) });
+    }
+  }
+  render() {
+    const { total, page, totalPages, onChangePage } = this.props;
+    const { inputValue } = this.state;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 8,
+          padding: "8px 0",
+          marginTop: 8,
+          borderTop: "1px solid var(--border-light)"
+        }
+      },
+      /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, color: "var(--text-secondary)" } }, "Total ", total, " | Page ", page, " / ", totalPages),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 4
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: () => page > 1 && onChangePage(page - 1),
+            disabled: page <= 1,
+            className: "icon-button small"
+          },
+          /* @__PURE__ */ React.createElement(ChevronLeft, { size: 14 })
+        ),
+        /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: () => page < totalPages && onChangePage(page + 1),
+            disabled: page >= totalPages,
+            className: "icon-button small"
+          },
+          /* @__PURE__ */ React.createElement(ChevronRight, { size: 14 })
+        ),
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            style: {
+              fontSize: 12,
+              color: "var(--text-secondary)",
+              marginLeft: 4
+            }
+          },
+          "Page"
+        ),
+        /* @__PURE__ */ React.createElement(
+          "input",
+          {
+            type: "number",
+            min: 1,
+            max: Math.max(1, totalPages),
+            value: inputValue,
+            onChange: this.handleInputChange,
+            onBlur: this.commit,
+            onKeyDown: this.handleKeyDown,
+            className: "pagination-input",
+            style: {
+              width: `${Math.min(
+                4,
+                Math.max(1, inputValue.length || 1)
+              ) * 10 + 14}px`,
+              height: 24,
+              padding: "0 6px 0 6px",
+              borderRadius: 4,
+              border: "1px solid var(--border-light)",
+              background: "#fff",
+              fontSize: 12,
+              color: "var(--text-primary)",
+              textAlign: "center",
+              fontFamily: "inherit",
+              outline: "none",
+              MozAppearance: "textfield"
+            }
+          }
+        )
+      )
+    );
+  }
+}
+export {
+  Pagination as default
+};

package/dist/components/SummaryAIEmails/FilterTabs.d.ts

@@ -0,0 +1,8 @@
+import { MailType } from './types';
+import * as React from "react";
+interface FilterTabsProps {
+    mailtype: MailType;
+    onChangeFilter: (val: MailType) => void;
+}
+declare const FilterTabs: React.FunctionComponent<FilterTabsProps>;
+export default FilterTabs;

package/dist/components/SummaryAIEmails/FilterTabs.js

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { FILTERS } from "./utils.js";
+const FilterTabs = ({
+  mailtype,
+  onChangeFilter
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: 12,
+      gap: 8
+    }
+  },
+  /* @__PURE__ */ React.createElement("span", { style: { fontSize: 13, color: "var(--text-secondary)" } }, "This is a summary compiled by AI · May contain some inaccuracies"),
+  /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        display: "inline-flex",
+        background: "var(--background-softGrey)",
+        borderRadius: 6,
+        padding: 2,
+        flexShrink: 0
+      }
+    },
+    FILTERS.map((f) => {
+      const isActive = mailtype === f.value;
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: f.value,
+          type: "button",
+          onClick: () => onChangeFilter(f.value),
+          style: {
+            border: "none",
+            background: isActive ? "var(--primary-main)" : "transparent",
+            color: isActive ? "var(--primary-contrasttext)" : "var(--text-primary)",
+            fontSize: 12,
+            fontWeight: isActive ? 600 : 400,
+            padding: "4px 12px",
+            borderRadius: 4,
+            cursor: "pointer",
+            fontFamily: "inherit",
+            transition: "background 0.15s ease-in-out"
+          }
+        },
+        f.label
+      );
+    })
+  )
+);
+export {
+  FilterTabs as default
+};

package/dist/components/SummaryAIEmails/LanguagePopover.d.ts

@@ -0,0 +1,24 @@
+import { LabelValue } from '../../types';
+import * as React from "react";
+interface LanguagePopoverProps {
+    anchorEl: HTMLElement | null;
+    langList: LabelValue[];
+    currentLang: string;
+    onSelect: (val: string) => void;
+    onClose: () => void;
+}
+interface LanguagePopoverState {
+    top: number;
+    left: number;
+}
+declare class LanguagePopover extends React.Component<LanguagePopoverProps, LanguagePopoverState> {
+    private panelRef;
+    constructor(props: LanguagePopoverProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: LanguagePopoverProps): void;
+    componentWillUnmount(): void;
+    updatePosition: () => void;
+    handleClickOutside: (e: MouseEvent) => void;
+    render(): React.ReactPortal | null;
+}
+export default LanguagePopover;

package/dist/components/SummaryAIEmails/LanguagePopover.js

@@ -0,0 +1,110 @@
+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 * as ReactDOM from "react-dom";
+import { AI_LANG_FLAGS } from "../../constants/index.js";
+import CountryFlag from "../CountryFlag/index.js";
+const getFlagCode = (value) => {
+  var _a;
+  return (_a = AI_LANG_FLAGS.find((l) => l.value === value)) == null ? void 0 : _a.flagCode;
+};
+class LanguagePopover extends React.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "panelRef");
+    __publicField(this, "updatePosition", () => {
+      const { anchorEl } = this.props;
+      if (!anchorEl) return;
+      const rect = anchorEl.getBoundingClientRect();
+      const top = rect.bottom + (window.scrollY || document.documentElement.scrollTop) + 4;
+      const right = window.innerWidth - rect.right - (window.scrollX || document.documentElement.scrollLeft);
+      this.setState({ top, left: window.innerWidth - right - 180 });
+    });
+    __publicField(this, "handleClickOutside", (e) => {
+      const target = e.target;
+      if (this.panelRef.current && !this.panelRef.current.contains(target) && this.props.anchorEl && !this.props.anchorEl.contains(target)) {
+        this.props.onClose();
+      }
+    });
+    this.panelRef = React.createRef();
+    this.state = { top: 0, left: 0 };
+  }
+  componentDidMount() {
+    document.addEventListener("mousedown", this.handleClickOutside);
+    this.updatePosition();
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.anchorEl !== this.props.anchorEl) {
+      this.updatePosition();
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener("mousedown", this.handleClickOutside);
+  }
+  render() {
+    const { anchorEl, langList, currentLang, onSelect } = this.props;
+    if (!anchorEl) return null;
+    const { top, left } = this.state;
+    return ReactDOM.createPortal(
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ref: this.panelRef,
+          style: {
+            position: "absolute",
+            top,
+            left,
+            width: 180,
+            maxHeight: 280,
+            overflowY: "auto",
+            background: "#fff",
+            border: "1px solid var(--border-main)",
+            borderRadius: 6,
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
+            zIndex: 1200,
+            padding: "4px 0"
+          }
+        },
+        langList.map((l) => {
+          const isActive = l.value === currentLang;
+          const flag = getFlagCode(l.value);
+          return /* @__PURE__ */ React.createElement(
+            "button",
+            {
+              key: l.value,
+              type: "button",
+              onClick: () => onSelect(l.value),
+              style: {
+                width: "100%",
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "8px 12px",
+                border: "none",
+                background: isActive ? "var(--primary-lighter)" : "transparent",
+                cursor: "pointer",
+                fontSize: 13,
+                fontFamily: "inherit",
+                textAlign: "left",
+                color: "var(--text-primary)"
+              }
+            },
+            flag && /* @__PURE__ */ React.createElement(
+              CountryFlag,
+              {
+                flagCode: flag,
+                style: { width: 18, height: 14, flexShrink: 0 }
+              }
+            ),
+            /* @__PURE__ */ React.createElement("span", null, l.label)
+          );
+        })
+      ),
+      document.body
+    );
+  }
+}
+export {
+  LanguagePopover as default
+};

package/dist/components/SummaryAIEmails/SummaryItem.d.ts

@@ -0,0 +1,7 @@
+import { SummaryItemData } from './types';
+import * as React from "react";
+interface SummaryItemProps {
+    item: SummaryItemData;
+}
+declare const SummaryItem: React.FunctionComponent<SummaryItemProps>;
+export default SummaryItem;