hanbiro-react16-sdk 1.0.25 → 1.0.27

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

@@ -0,0 +1,480 @@
+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 { fetchMailList } from "./helper.js";
+import ArrowLeft from "../../../node_modules/react-feather/dist/icons/arrow-left.js";
+import Paperclip from "../../../node_modules/react-feather/dist/icons/paperclip.js";
+const PAGE_SIZE = 6;
+const MAX_SELECTED = 5;
+class MailListSelect extends React.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "loadPage", (page) => __async(this, null, function* () {
+      this.setState({ isLoading: true });
+      const { items, total } = yield fetchMailList({
+        page,
+        pageSize: PAGE_SIZE,
+        accountEmail: this.props.accountEmail
+      });
+      this.setState({ items, total, page, isLoading: false });
+    }));
+    __publicField(this, "toggleMid", (mid) => {
+      this.setState((prev) => {
+        const isSelected = prev.selectedMids.includes(mid);
+        if (isSelected) {
+          return { selectedMids: prev.selectedMids.filter((m) => m !== mid) };
+        }
+        if (prev.selectedMids.length >= MAX_SELECTED) {
+          return null;
+        }
+        return { selectedMids: [...prev.selectedMids, mid] };
+      });
+    });
+    __publicField(this, "toggleAll", () => {
+      const { items, selectedMids } = this.state;
+      const pageMids = items.map((it) => it.mid);
+      const allSelected = pageMids.every((m) => selectedMids.includes(m));
+      if (allSelected) {
+        this.setState({
+          selectedMids: selectedMids.filter((m) => !pageMids.includes(m))
+        });
+      } else {
+        const merged = Array.from(/* @__PURE__ */ new Set([...selectedMids, ...pageMids])).slice(
+          0,
+          MAX_SELECTED
+        );
+        this.setState({ selectedMids: merged });
+      }
+    });
+    __publicField(this, "clearAll", () => {
+      this.setState({ selectedMids: [] });
+    });
+    this.state = {
+      page: 1,
+      total: 0,
+      items: [],
+      selectedMids: [...props.initialSelected],
+      isLoading: false
+    };
+  }
+  componentDidMount() {
+    this.loadPage(1);
+  }
+  renderPagination() {
+    const { page, total } = this.state;
+    const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+    const pages = [];
+    for (let i = 1; i <= totalPages; i++) pages.push(i);
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 4,
+          padding: "12px 0"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => page > 1 && this.loadPage(page - 1),
+          disabled: page <= 1,
+          className: "icon-button small"
+        },
+        "‹"
+      ),
+      pages.map((p) => /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: p,
+          type: "button",
+          onClick: () => p !== page && this.loadPage(p),
+          style: {
+            minWidth: 28,
+            height: 28,
+            borderRadius: 4,
+            border: "none",
+            background: p === page ? "var(--primary-main)" : "transparent",
+            color: p === page ? "var(--primary-contrasttext)" : "var(--text-primary)",
+            cursor: "pointer",
+            fontSize: 12,
+            fontFamily: "inherit",
+            fontWeight: p === page ? 600 : 400
+          }
+        },
+        p
+      )),
+      /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => page < totalPages && this.loadPage(page + 1),
+          disabled: page >= totalPages,
+          className: "icon-button small"
+        },
+        "›"
+      )
+    );
+  }
+  render() {
+    const { onCancel, onConfirm } = this.props;
+    const { items, total, selectedMids, isLoading } = this.state;
+    const pageMids = items.map((it) => it.mid);
+    const allOnPageSelected = pageMids.length > 0 && pageMids.every((m) => selectedMids.includes(m));
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          background: "#fff",
+          fontFamily: "inherit",
+          boxSizing: "border-box",
+          padding: 16
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: onCancel,
+          className: "text-button",
+          style: { alignSelf: "flex-start" }
+        },
+        /* @__PURE__ */ React.createElement(ArrowLeft, { size: 14 }),
+        " Back"
+      ),
+      /* @__PURE__ */ React.createElement("div", { style: { marginTop: 8 } }, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: 14,
+            fontWeight: 600,
+            color: "var(--text-primary)"
+          }
+        },
+        "Add context from receive history"
+      ), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: 12,
+            color: "var(--text-secondary)",
+            marginTop: 2
+          }
+        },
+        "Select related emails to provide AI context."
+      )),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginTop: 12,
+            paddingBottom: 8,
+            borderBottom: "1px solid var(--border-light)"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "label",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 6,
+              fontSize: 12,
+              color: "var(--text-primary)",
+              cursor: "pointer"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            "input",
+            {
+              type: "checkbox",
+              checked: allOnPageSelected,
+              onChange: this.toggleAll
+            }
+          ),
+          /* @__PURE__ */ React.createElement("span", null, "Select all · ", total, " total")
+        ),
+        /* @__PURE__ */ React.createElement("span", { style: { fontSize: 11, color: "var(--text-secondary)" } }, "Sort: latest")
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            flex: 1,
+            minHeight: 0,
+            overflowY: "auto",
+            paddingRight: 8,
+            marginRight: -8
+          }
+        },
+        isLoading ? /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              padding: 24,
+              textAlign: "center",
+              color: "var(--text-secondary)",
+              fontSize: 12
+            }
+          },
+          "Loading..."
+        ) : items.length === 0 ? /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              padding: 24,
+              textAlign: "center",
+              color: "var(--text-secondary)",
+              fontSize: 12
+            }
+          },
+          "No emails found."
+        ) : items.map((it) => {
+          const isChecked = selectedMids.includes(it.mid);
+          const disabled = !isChecked && selectedMids.length >= MAX_SELECTED;
+          return /* @__PURE__ */ React.createElement(
+            "label",
+            {
+              key: it.mid,
+              style: {
+                display: "flex",
+                alignItems: "flex-start",
+                gap: 10,
+                padding: "10px 12px",
+                marginTop: 8,
+                borderRadius: 8,
+                border: isChecked ? "1px solid var(--primary-main)" : "1px solid var(--border-light)",
+                background: isChecked ? "var(--primary-lighter)" : "#fff",
+                cursor: disabled ? "not-allowed" : "pointer",
+                opacity: disabled ? 0.5 : 1
+              }
+            },
+            /* @__PURE__ */ React.createElement(
+              "input",
+              {
+                type: "checkbox",
+                checked: isChecked,
+                disabled,
+                onChange: () => this.toggleMid(it.mid),
+                style: { marginTop: 2, flexShrink: 0 }
+              }
+            ),
+            /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 6,
+                  justifyContent: "space-between"
+                }
+              },
+              /* @__PURE__ */ React.createElement(
+                "div",
+                {
+                  style: {
+                    fontSize: 13,
+                    fontWeight: 600,
+                    color: "var(--text-primary)",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    flex: 1,
+                    minWidth: 0
+                  }
+                },
+                it.subject
+              ),
+              it.is_file > 0 && /* @__PURE__ */ React.createElement(
+                "span",
+                {
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 2,
+                    fontSize: 11,
+                    color: "var(--text-secondary)",
+                    flexShrink: 0
+                  }
+                },
+                /* @__PURE__ */ React.createElement(Paperclip, { size: 10 }),
+                it.is_file
+              ),
+              /* @__PURE__ */ React.createElement(
+                "span",
+                {
+                  style: {
+                    fontSize: 11,
+                    color: "var(--text-secondary)",
+                    flexShrink: 0
+                  }
+                },
+                it.date
+              )
+            ), /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                style: {
+                  fontSize: 12,
+                  color: "var(--text-secondary)",
+                  marginTop: 2,
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                }
+              },
+              it.from_name,
+              it.from_addr ? ` <${it.from_addr}>` : "",
+              it.preview ? ` · ${it.preview}` : ""
+            ))
+          );
+        }),
+        !isLoading && items.length > 0 && this.renderPagination()
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            paddingTop: 12,
+            borderTop: "1px solid var(--border-light)",
+            marginTop: 8,
+            gap: 8
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              fontSize: 12,
+              color: "var(--text-secondary)",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 8
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              style: {
+                background: "var(--primary-main)",
+                color: "var(--primary-contrasttext)",
+                padding: "2px 8px",
+                borderRadius: 999,
+                fontWeight: 600
+              }
+            },
+            selectedMids.length,
+            "/",
+            MAX_SELECTED
+          ),
+          /* @__PURE__ */ React.createElement("span", null, "selected · up to ", MAX_SELECTED),
+          selectedMids.length > 0 && /* @__PURE__ */ React.createElement(
+            "button",
+            {
+              type: "button",
+              onClick: this.clearAll,
+              style: {
+                border: "none",
+                background: "transparent",
+                color: "var(--primary-main)",
+                cursor: "pointer",
+                fontSize: 12,
+                padding: 0,
+                fontFamily: "inherit"
+              }
+            },
+            "Clear all"
+          )
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: 8,
+            marginTop: 12
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: onCancel,
+            style: {
+              flex: 1,
+              padding: "10px 12px",
+              borderRadius: 8,
+              border: "1px solid var(--border-main)",
+              background: "#fff",
+              color: "var(--text-primary)",
+              cursor: "pointer",
+              fontSize: 13,
+              fontFamily: "inherit"
+            }
+          },
+          "Cancel"
+        ),
+        /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            disabled: selectedMids.length === 0,
+            onClick: () => onConfirm(selectedMids),
+            style: {
+              flex: 2,
+              padding: "10px 12px",
+              borderRadius: 8,
+              border: "none",
+              background: selectedMids.length === 0 ? "var(--primary-lighter)" : "var(--primary-main)",
+              color: "var(--primary-contrasttext)",
+              cursor: selectedMids.length === 0 ? "not-allowed" : "pointer",
+              fontSize: 13,
+              fontWeight: 600,
+              fontFamily: "inherit"
+            }
+          },
+          "Add ",
+          selectedMids.length > 0 ? `${selectedMids.length} ` : "",
+          "as context →"
+        )
+      )
+    );
+  }
+}
+export {
+  MailListSelect as default
+};

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

@@ -0,0 +1,13 @@
+import { ContextMail, MailListItem, MailViewData } from '../types';
+
+export interface MailListResponse {
+    items: MailListItem[];
+    total: number;
+}
+export declare const fetchMailView: (mid: string) => Promise<MailViewData | null>;
+export declare const fetchMailAiContext: (mids: string[]) => Promise<ContextMail[]>;
+export declare const fetchMailList: (params: {
+    page: number;
+    pageSize: number;
+    accountEmail: string;
+}) => Promise<MailListResponse>;

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

@@ -0,0 +1,100 @@
+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 { apiGet } from "../../../utils/api.js";
+import { extractEmail } from "../helper.js";
+const parseFromField = (raw) => {
+  const email = extractEmail(raw);
+  const decoded = String(raw || "").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
+  const name = decoded.replace(/<[^>]+>/, "").replace(/["']/g, "").trim();
+  return { name, email };
+};
+const fetchMailView = (mid) => __async(void 0, null, function* () {
+  var _a;
+  const { data, ok } = yield apiGet(`/email/all/${mid}`);
+  if (!ok || !data) return null;
+  const view = ((_a = data == null ? void 0 : data.mailview) == null ? void 0 : _a[0]) || (data == null ? void 0 : data.mailview) || data;
+  if (!view) return null;
+  const { name, email } = parseFromField((view == null ? void 0 : view.from) || "");
+  return {
+    mid: (view == null ? void 0 : view.mid) || mid,
+    subject: (view == null ? void 0 : view.subject) || (view == null ? void 0 : view.subj) || "",
+    from_name: name || (view == null ? void 0 : view.from_name) || "",
+    from_addr: email || (view == null ? void 0 : view.from_addr) || "",
+    date: (view == null ? void 0 : view.date) || (view == null ? void 0 : view.receivedate) || "",
+    ai_contents: (view == null ? void 0 : view.ai_contents) || "",
+    contents: (view == null ? void 0 : view.contents) || ""
+  };
+});
+const fetchMailAiContext = (mids) => __async(void 0, null, function* () {
+  if (!mids.length) return [];
+  const ids = mids.join(",");
+  const { data, ok } = yield apiGet(
+    `/email/ai/aicontext/${ids}?limit=${mids.length}`
+  );
+  if (!ok || !(data == null ? void 0 : data.items)) return [];
+  return data.items.filter((it) => (it == null ? void 0 : it.ok) !== false).map((it) => {
+    const { name, email } = parseFromField((it == null ? void 0 : it.fromaddr) || "");
+    return {
+      mid: (it == null ? void 0 : it.mid) || "",
+      subject: (it == null ? void 0 : it.subject) || "",
+      from_name: name,
+      from_addr: email,
+      date: (it == null ? void 0 : it.date) || "",
+      ai_contents: (it == null ? void 0 : it.contents) || ""
+    };
+  });
+});
+const fetchMailList = (params) => __async(void 0, null, function* () {
+  var _a;
+  const { page, pageSize, accountEmail } = params;
+  const offset = (page - 1) * pageSize;
+  const query = new URLSearchParams({
+    acl: "all",
+    act: "maillist",
+    mailsort: "date",
+    sortkind: "0",
+    timemode: "mobile",
+    viewcont: `${offset},${pageSize}`,
+    searchbox: "all"
+  });
+  if (accountEmail) query.set("f", accountEmail);
+  const { data, ok } = yield apiGet(`/email/list?${query.toString()}`);
+  if (!ok || !data) {
+    return { items: [], total: 0 };
+  }
+  const list = (data == null ? void 0 : data.maillist) || [];
+  const items = list.map((it) => ({
+    mid: (it == null ? void 0 : it.mid) || "",
+    subject: (it == null ? void 0 : it.subject) || (it == null ? void 0 : it.subj) || "(no subject)",
+    from_name: (it == null ? void 0 : it.from_name) || "",
+    from_addr: (it == null ? void 0 : it.from_addr) || "",
+    date: (it == null ? void 0 : it.date) || "",
+    is_file: Number(it == null ? void 0 : it.is_file) || 0,
+    preview: (it == null ? void 0 : it.preview) || (it == null ? void 0 : it.abstract) || (it == null ? void 0 : it.htext) || ""
+  }));
+  const total = Number((_a = data == null ? void 0 : data.boxinfo) == null ? void 0 : _a.total) || Number(data == null ? void 0 : data.total) || Number(data == null ? void 0 : data.newcount) || items.length;
+  return { items, total };
+});
+export {
+  fetchMailAiContext,
+  fetchMailList,
+  fetchMailView
+};

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

@@ -0,0 +1,46 @@
+import { LabelValue } from '../../../types';
+import { AIMessage, ChatType, ContextMail } from '../types';
+import * as React from "react";
+export interface ReplyPanelProps {
+    type: ChatType;
+    sourceMid: string;
+    defaultLang?: string;
+    getEditorContent?: () => string;
+    onApply: (params: {
+        html: string;
+    }) => void;
+}
+type View = "empty" | "list" | "chat";
+interface ReplyPanelState {
+    view: View;
+    sourceMail: ContextMail | null;
+    accountEmail: string;
+    selectedMails: ContextMail[];
+    isLoadingSource: boolean;
+    isLoadingSelected: boolean;
+    message: string;
+    messages: AIMessage[];
+    isSending: boolean;
+    lang: LabelValue | null;
+    tone: LabelValue | null;
+    length: LabelValue | null;
+    conversationId: string;
+}
+declare class ReplyPanel extends React.Component<ReplyPanelProps, ReplyPanelState> {
+    private rootRef;
+    constructor(props: ReplyPanelProps);
+    componentDidMount(): void;
+    loadSourceMail: () => Promise<void>;
+    handleAddClick: () => void;
+    handleListCancel: () => void;
+    handleListConfirm: (mids: string[]) => Promise<void>;
+    handleRemoveSelected: (mid: string) => void;
+    handleMessageChange: (value: string) => void;
+    handleSubmit: () => Promise<void>;
+    setLang: (lang: LabelValue | null) => void;
+    setTone: (tone: LabelValue | null) => void;
+    setLength: (length: LabelValue | null) => void;
+    renderContextHeader(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export default ReplyPanel;