hanbiro-react16-sdk 1.0.27 → 1.0.28

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

@@ -0,0 +1,135 @@
+import * as React from "react";
+import SourceCard from "./SourceCard.js";
+import SelectedChip from "./SelectedChip.js";
+import Lock from "../../../../node_modules/react-feather/dist/icons/lock.js";
+import Plus from "../../../../node_modules/react-feather/dist/icons/plus.js";
+const ContextHeader = ({
+  sourceMail,
+  selectedMails,
+  onAddClick,
+  onSourceClick,
+  onChipClick,
+  onRemoveChip
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        paddingBottom: 12,
+        marginBottom: 12
+      }
+    },
+    sourceMail && /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 6 } }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          fontSize: 12,
+          color: "var(--text-primary)",
+          fontWeight: 600
+        }
+      },
+      /* @__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,
+            fontWeight: 600
+          }
+        },
+        "1"
+      ),
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 2,
+            fontSize: 11,
+            color: "var(--text-secondary)",
+            fontWeight: 500
+          }
+        },
+        /* @__PURE__ */ React.createElement(Lock, { size: 11 }),
+        " Auto"
+      )
+    ), /* @__PURE__ */ React.createElement(
+      SourceCard,
+      {
+        mail: sourceMail,
+        onClick: () => onSourceClick(sourceMail)
+      }
+    )),
+    /* @__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,
+            color: "var(--text-primary)",
+            fontWeight: 600
+          }
+        },
+        /* @__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,
+              fontWeight: 600
+            }
+          },
+          selectedMails.length
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: onAddClick,
+          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(
+      SelectedChip,
+      {
+        key: m.mid,
+        index: i,
+        mail: m,
+        onClick: onChipClick,
+        onRemove: onRemoveChip
+      }
+    ))))
+  );
+};
+export {
+  ContextHeader as default
+};

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

@@ -3,6 +3,7 @@ import * as React from "react";
 interface MailListSelectProps {
     accountEmail: string;
     initialSelected: string[];
+    isConfirming?: boolean;
     onCancel: () => void;
     onConfirm: (mids: string[]) => void;
 }

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

@@ -22,6 +22,9 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import * as React from "react";
+import LoadingContainer from "../../LoadingContainer/index.js";
+import LoadingCircular from "../../LoadingCircular/index.js";
+import Pagination from "../../Pagination/index.js";
 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";
@@ -53,19 +56,16 @@ class MailListSelect extends React.Component {
     });
     __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 });
+      if (selectedMids.length >= MAX_SELECTED) {
+        this.setState({ selectedMids: [] });
+        return;
       }
+      const pageMids = items.map((it) => it.mid);
+      const merged = Array.from(/* @__PURE__ */ new Set([...selectedMids, ...pageMids])).slice(
+        0,
+        MAX_SELECTED
+      );
+      this.setState({ selectedMids: merged });
     });
     __publicField(this, "clearAll", () => {
       this.setState({ selectedMids: [] });
@@ -84,67 +84,20 @@ class MailListSelect extends React.Component {
   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",
+      Pagination,
       {
-        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"
-        },
-        "›"
-      )
+        total,
+        page,
+        totalPages,
+        onChangePage: this.loadPage
+      }
     );
   }
   render() {
-    const { onCancel, onConfirm } = this.props;
+    const { onCancel, onConfirm, isConfirming } = 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));
+    const isFull = selectedMids.length >= MAX_SELECTED;
     return /* @__PURE__ */ React.createElement(
       "div",
       {
@@ -208,9 +161,9 @@ class MailListSelect extends React.Component {
             style: {
               display: "inline-flex",
               alignItems: "center",
-              gap: 6,
+              gap: 8,
               fontSize: 12,
-              color: "var(--text-primary)",
+              color: "var(--text-secondary)",
               cursor: "pointer"
             }
           },
@@ -218,11 +171,38 @@ class MailListSelect extends React.Component {
             "input",
             {
               type: "checkbox",
-              checked: allOnPageSelected,
+              checked: isFull,
               onChange: this.toggleAll
             }
           ),
-          /* @__PURE__ */ React.createElement("span", null, "Select all · ", total, " total")
+          /* @__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: (e) => {
+                e.preventDefault();
+                this.clearAll();
+              },
+              className: "text-button primary"
+            },
+            "Clear all"
+          )
         ),
         /* @__PURE__ */ React.createElement("span", { style: { fontSize: 11, color: "var(--text-secondary)" } }, "Sort: latest")
       ),
@@ -237,18 +217,7 @@ class MailListSelect extends React.Component {
             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(
+        isLoading ? /* @__PURE__ */ React.createElement(LoadingContainer, { fullHeight: true, size: "small" }) : items.length === 0 ? /* @__PURE__ */ React.createElement(
           "div",
           {
             style: {
@@ -361,65 +330,6 @@ class MailListSelect extends React.Component {
         }),
         !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",
         {
@@ -452,24 +362,27 @@ class MailListSelect extends React.Component {
           "button",
           {
             type: "button",
-            disabled: selectedMids.length === 0,
+            disabled: selectedMids.length === 0 || isConfirming,
             onClick: () => onConfirm(selectedMids),
             style: {
               flex: 2,
               padding: "10px 12px",
               borderRadius: 8,
               border: "none",
-              background: selectedMids.length === 0 ? "var(--primary-lighter)" : "var(--primary-main)",
+              background: selectedMids.length === 0 || isConfirming ? "var(--primary-lighter)" : "var(--primary-main)",
               color: "var(--primary-contrasttext)",
-              cursor: selectedMids.length === 0 ? "not-allowed" : "pointer",
+              cursor: selectedMids.length === 0 || isConfirming ? "not-allowed" : "pointer",
               fontSize: 13,
               fontWeight: 600,
-              fontFamily: "inherit"
+              fontFamily: "inherit",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8
             }
           },
-          "Add ",
-          selectedMids.length > 0 ? `${selectedMids.length} ` : "",
-          "as context →"
+          isConfirming && /* @__PURE__ */ React.createElement(LoadingCircular, { size: 16, color: "var(--primary-contrasttext)" }),
+          /* @__PURE__ */ React.createElement("span", null, "Add ", selectedMids.length > 0 ? `${selectedMids.length} ` : "", "as context →")
         )
       )
     );

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

@@ -1,3 +1,4 @@
+import { PreviewState } from './ContextPreviewModal';
 import { LabelValue } from '../../../types';
 import { AIMessage, ChatType, ContextMail } from '../types';
 import * as React from "react";
@@ -18,6 +19,7 @@ interface ReplyPanelState {
     selectedMails: ContextMail[];
     isLoadingSource: boolean;
     isLoadingSelected: boolean;
+    preview: PreviewState | null;
     message: string;
     messages: AIMessage[];
     isSending: boolean;
@@ -35,12 +37,14 @@ declare class ReplyPanel extends React.Component<ReplyPanelProps, ReplyPanelStat
     handleListCancel: () => void;
     handleListConfirm: (mids: string[]) => Promise<void>;
     handleRemoveSelected: (mid: string) => void;
+    handlePreviewSelected: (mail: ContextMail) => void;
+    handlePreviewSource: (mail: ContextMail) => void;
+    handlePreviewClose: () => 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;