hanbiro-react16-sdk 1.0.27 → 1.0.29

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

@@ -24,11 +24,13 @@ var __async = (__this, __arguments, generator) => {
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { apiGet } from "../../../utils/api.js";
-import { TONE_OPTIONS, LENGTH_OPTIONS } from "../constants.js";
+import { getToneOptions, getLengthOptions } from "../constants.js";
 import LanguageSelect from "./LanguageSelect.js";
 import ChipGroup from "./ChipGroup.js";
 import { TONE_ICONS, LENGTH_ICONS } from "./icons.js";
+import { t } from "../../../lang/index.js";
 import Settings from "../../../node_modules/react-feather/dist/icons/settings.js";
+import { LangKey } from "../../../lang/keyLang.js";
 class SettingPopper extends React.Component {
   constructor(props) {
     super(props);
@@ -130,7 +132,7 @@ class SettingPopper extends React.Component {
               {
                 style: { display: "flex", flexDirection: "column", gap: 6 }
               },
-              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Language"),
+              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, t(LangKey.SETTING_LANGUAGE)),
               /* @__PURE__ */ React.createElement(
                 LanguageSelect,
                 {
@@ -145,11 +147,11 @@ class SettingPopper extends React.Component {
               {
                 style: { display: "flex", flexDirection: "column", gap: 6 }
               },
-              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Tone"),
+              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, t(LangKey.SETTING_TONE)),
               /* @__PURE__ */ React.createElement(
                 ChipGroup,
                 {
-                  options: TONE_OPTIONS,
+                  options: getToneOptions(),
                   selected: tone,
                   onSelect: (opt) => setTone(opt),
                   iconMap: TONE_ICONS
@@ -161,11 +163,11 @@ class SettingPopper extends React.Component {
               {
                 style: { display: "flex", flexDirection: "column", gap: 6 }
               },
-              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Length"),
+              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, t(LangKey.SETTING_LENGTH)),
               /* @__PURE__ */ React.createElement(
                 ChipGroup,
                 {
-                  options: LENGTH_OPTIONS,
+                  options: getLengthOptions(),
                   selected: length,
                   onSelect: (opt) => setLength(opt),
                   iconMap: LENGTH_ICONS,

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

@@ -1,4 +1,4 @@
 import { LabelValue } from '../../types';
 
-export declare const TONE_OPTIONS: LabelValue[];
-export declare const LENGTH_OPTIONS: LabelValue[];
+export declare const getToneOptions: () => LabelValue[];
+export declare const getLengthOptions: () => LabelValue[];

package/dist/components/ChatAIDraft/constants.js

@@ -1,18 +1,20 @@
-const TONE_OPTIONS = [
-  { label: "Formal", value: "formal" },
-  { label: "Polite", value: "polite" },
-  { label: "Neutral", value: "neutral" },
-  { label: "Friendly", value: "friendly" },
-  { label: "Firm", value: "firm" },
-  { label: "Apology", value: "apologetic" }
+import { t } from "../../lang/index.js";
+import { LangKey } from "../../lang/keyLang.js";
+const getToneOptions = () => [
+  { label: t(LangKey.TONE_FORMAL), value: "formal" },
+  { label: t(LangKey.TONE_POLITE), value: "polite" },
+  { label: t(LangKey.TONE_NEUTRAL), value: "neutral" },
+  { label: t(LangKey.TONE_FRIENDLY), value: "friendly" },
+  { label: t(LangKey.TONE_FIRM), value: "firm" },
+  { label: t(LangKey.TONE_APOLOGY), value: "apologetic" }
 ];
-const LENGTH_OPTIONS = [
-  { label: "Short", value: "short" },
-  { label: "Medium", value: "medium" },
-  { label: "Long", value: "long" },
-  { label: "1-liner", value: "one_liner" }
+const getLengthOptions = () => [
+  { label: t(LangKey.LENGTH_SHORT), value: "short" },
+  { label: t(LangKey.LENGTH_MEDIUM), value: "medium" },
+  { label: t(LangKey.LENGTH_LONG), value: "long" },
+  { label: t(LangKey.LENGTH_ONE_LINER), value: "one_liner" }
 ];
 export {
-  LENGTH_OPTIONS,
-  TONE_OPTIONS
+  getLengthOptions,
+  getToneOptions
 };

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

@@ -4,6 +4,7 @@ export interface ChatAIDraftProps {
     type?: ChatType;
     sourceMid?: string;
     defaultLang?: string;
+    userLang?: string;
     getEditorContent?: () => string;
     onApply: (params: {
         html: string;

package/dist/components/ChatAIDraft/index.js

@@ -29,8 +29,14 @@ var __objRest = (source, exclude) => {
 import * as React from "react";
 import CreatePanel from "./CreatePanel/index.js";
 import ReplyPanel from "./ReplyPanel/index.js";
+import { SDKConfig } from "../../utils/url.js";
 const ChatAIDraft = (props) => {
-  const _a = props, { type = "new", sourceMid } = _a, rest = __objRest(_a, ["type", "sourceMid"]);
+  const _a = props, { type = "new", sourceMid, userLang } = _a, rest = __objRest(_a, ["type", "sourceMid", "userLang"]);
+  React.useEffect(() => {
+    if (userLang) {
+      SDKConfig.lang = userLang;
+    }
+  }, [userLang]);
   if ((type === "reply" || type === "forward") && sourceMid) {
     return /* @__PURE__ */ React.createElement(ReplyPanel, __spreadValues({ type, sourceMid }, rest));
   }

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,133 @@
+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 { t } from "../../lang/index.js";
+import { LangKey } from "../../lang/keyLang.js";
+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)" } }, t(LangKey.PAGINATION_TOTAL), " ", total, " | ", t(LangKey.PAGINATION_PAGE_OF), " ", 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
+            }
+          },
+          t(LangKey.PAGINATION_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,59 @@
+import * as React from "react";
+import { FILTERS } from "./utils.js";
+import { t } from "../../lang/index.js";
+import { LangKey } from "../../lang/keyLang.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)" } }, t(LangKey.SUMMARY_WARNING)),
+  /* @__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"
+          }
+        },
+        t(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;

package/dist/components/SummaryAIEmails/SummaryItem.js

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { formatDate } from "./utils.js";
+import { t } from "../../lang/index.js";
+import ArrowUp from "../../node_modules/react-feather/dist/icons/arrow-up.js";
+import ArrowDown from "../../node_modules/react-feather/dist/icons/arrow-down.js";
+import { LangKey } from "../../lang/keyLang.js";
+const SummaryItem = ({ item }) => {
+  const isSent = (item == null ? void 0 : item.direction) === "sent" || (item == null ? void 0 : item.sig) === "out";
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        background: "#fff",
+        border: "1px solid var(--border-light)",
+        borderRadius: 8,
+        padding: 12
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          marginBottom: 4
+        }
+      },
+      /* @__PURE__ */ React.createElement("span", { style: { color: "var(--text-secondary)", fontSize: 12 } }, formatDate(item == null ? void 0 : item.date)),
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 2,
+            padding: "2px 6px",
+            borderRadius: 4,
+            fontSize: 11,
+            fontWeight: 500,
+            background: isSent ? "rgba(33, 150, 243, 0.1)" : "rgba(76, 175, 80, 0.1)",
+            color: isSent ? "#1976d2" : "#2e7d32"
+          }
+        },
+        isSent ? /* @__PURE__ */ React.createElement(ArrowUp, { size: 11 }) : /* @__PURE__ */ React.createElement(ArrowDown, { size: 11 }),
+        t(isSent ? LangKey.SENT : LangKey.RECEIVED)
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          fontSize: 14,
+          fontWeight: 600,
+          color: "var(--text-primary)",
+          marginBottom: 4
+        }
+      },
+      (item == null ? void 0 : item.subject) || "-"
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          fontSize: 13,
+          color: "var(--text-secondary)",
+          lineHeight: 1.5
+        }
+      },
+      (item == null ? void 0 : item.messages) || ""
+    )
+  );
+};
+export {
+  SummaryItem as default
+};

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+interface TargetInfoBarProps {
+    targetName?: string;
+    targetEmail: string;
+    currentLangLabel: string;
+    onOpenLang: (anchor: HTMLElement) => void;
+}
+declare const TargetInfoBar: React.FunctionComponent<TargetInfoBarProps>;
+export default TargetInfoBar;

package/dist/components/SummaryAIEmails/TargetInfoBar.js

@@ -0,0 +1,81 @@
+import * as React from "react";
+import Globe from "../../node_modules/react-feather/dist/icons/globe.js";
+import ChevronDown from "../../node_modules/react-feather/dist/icons/chevron-down.js";
+const TargetInfoBar = ({
+  targetName,
+  targetEmail,
+  currentLangLabel,
+  onOpenLang
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: 12,
+      gap: 8
+    }
+  },
+  /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      style: {
+        fontSize: 13,
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: 6,
+        minWidth: 0
+      }
+    },
+    targetName && /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        style: {
+          fontSize: 14,
+          fontWeight: 600,
+          color: "var(--text-primary)"
+        }
+      },
+      targetName
+    ),
+    targetEmail && /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        style: {
+          color: "var(--text-secondary)",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis"
+        }
+      },
+      targetEmail
+    )
+  ),
+  /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        flexShrink: 0
+      }
+    },
+    /* @__PURE__ */ React.createElement("span", { style: { fontSize: 13, color: "var(--text-primary)" } }, currentLangLabel),
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => onOpenLang(e.currentTarget),
+        className: "icon-button small"
+      },
+      /* @__PURE__ */ React.createElement(Globe, { size: 14 }),
+      /* @__PURE__ */ React.createElement(ChevronDown, { size: 12, style: { marginLeft: 2 } })
+    )
+  )
+);
+export {
+  TargetInfoBar as default
+};