hanbiro-react16-sdk 1.0.27 → 1.0.29

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

@@ -22,8 +22,13 @@ 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 { t } from "../../../lang/index.js";
 import ArrowLeft from "../../../node_modules/react-feather/dist/icons/arrow-left.js";
+import { LangKey } from "../../../lang/keyLang.js";
 import Paperclip from "../../../node_modules/react-feather/dist/icons/paperclip.js";
 const PAGE_SIZE = 6;
 const MAX_SELECTED = 5;
@@ -53,19 +58,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 +86,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",
       {
@@ -167,7 +122,8 @@ class MailListSelect extends React.Component {
           style: { alignSelf: "flex-start" }
         },
         /* @__PURE__ */ React.createElement(ArrowLeft, { size: 14 }),
-        " Back"
+        " ",
+        t(LangKey.BACK)
       ),
       /* @__PURE__ */ React.createElement("div", { style: { marginTop: 8 } }, /* @__PURE__ */ React.createElement(
         "div",
@@ -178,7 +134,7 @@ class MailListSelect extends React.Component {
             color: "var(--text-primary)"
           }
         },
-        "Add context from receive history"
+        t(LangKey.ADD_CONTEXT_TITLE)
       ), /* @__PURE__ */ React.createElement(
         "div",
         {
@@ -188,7 +144,7 @@ class MailListSelect extends React.Component {
             marginTop: 2
           }
         },
-        "Select related emails to provide AI context."
+        t(LangKey.ADD_CONTEXT_DESC)
       )),
       /* @__PURE__ */ React.createElement(
         "div",
@@ -208,9 +164,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,13 +174,40 @@ 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, t(LangKey.SELECTED_UP_TO), " ", MAX_SELECTED),
+          selectedMids.length > 0 && /* @__PURE__ */ React.createElement(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.preventDefault();
+                this.clearAll();
+              },
+              className: "text-button primary"
+            },
+            t(LangKey.CLEAR_ALL)
+          )
         ),
-        /* @__PURE__ */ React.createElement("span", { style: { fontSize: 11, color: "var(--text-secondary)" } }, "Sort: latest")
+        /* @__PURE__ */ React.createElement("span", { style: { fontSize: 11, color: "var(--text-secondary)" } }, t(LangKey.SORT_LATEST))
       ),
       /* @__PURE__ */ React.createElement(
         "div",
@@ -237,7 +220,7 @@ class MailListSelect extends React.Component {
             marginRight: -8
           }
         },
-        isLoading ? /* @__PURE__ */ React.createElement(
+        isLoading ? /* @__PURE__ */ React.createElement(LoadingContainer, { fullHeight: true, size: "small" }) : items.length === 0 ? /* @__PURE__ */ React.createElement(
           "div",
           {
             style: {
@@ -247,18 +230,7 @@ class MailListSelect extends React.Component {
               fontSize: 12
             }
           },
-          "Loading..."
-        ) : items.length === 0 ? /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            style: {
-              padding: 24,
-              textAlign: "center",
-              color: "var(--text-secondary)",
-              fontSize: 12
-            }
-          },
-          "No emails found."
+          t(LangKey.NO_EMAILS_FOUND)
         ) : items.map((it) => {
           const isChecked = selectedMids.includes(it.mid);
           const disabled = !isChecked && selectedMids.length >= MAX_SELECTED;
@@ -361,65 +333,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",
         {
@@ -446,30 +359,33 @@ class MailListSelect extends React.Component {
               fontFamily: "inherit"
             }
           },
-          "Cancel"
+          t(LangKey.CANCEL)
         ),
         /* @__PURE__ */ React.createElement(
           "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, t(LangKey.ADD), " ", selectedMids.length > 0 ? `${selectedMids.length} ` : "", t(LangKey.ADD_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;

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

@@ -43,13 +43,15 @@ 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 { getLengthOptions, getToneOptions } from "../constants.js";
 import { AI_LANG_FLAGS } from "../../../constants/index.js";
+import { t } from "../../../lang/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";
+import { LangKey } from "../../../lang/keyLang.js";
 class ReplyPanel extends React.Component {
   constructor(props) {
     var _a;
@@ -98,6 +100,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,201 +188,19 @@ class ReplyPanel extends React.Component {
       selectedMails: [],
       isLoadingSource: false,
       isLoadingSelected: false,
+      preview: null,
       message: "",
       messages: [],
       isSending: false,
       lang,
-      tone: TONE_OPTIONS[2],
-      length: LENGTH_OPTIONS[2],
+      tone: getToneOptions()[2],
+      length: getLengthOptions()[2],
       conversationId: ""
     };
   }
   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 +214,8 @@ class ReplyPanel extends React.Component {
       lang,
       tone,
       length,
-      isLoadingSelected
+      isLoadingSelected,
+      preview
     } = this.state;
     if (view === "list") {
       return /* @__PURE__ */ React.createElement(
@@ -393,6 +223,7 @@ class ReplyPanel extends React.Component {
         {
           accountEmail,
           initialSelected: selectedMails.map((m) => m.mid),
+          isConfirming: isLoadingSelected,
           onCancel: this.handleListCancel,
           onConfirm: this.handleListConfirm
         }
@@ -412,22 +243,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",
         {
@@ -438,7 +272,7 @@ class ReplyPanel extends React.Component {
             textAlign: "center"
           }
         },
-        "Loading context..."
+        t(LangKey.REPLY_LOADING_CONTEXT)
       ),
       /* @__PURE__ */ React.createElement(
         ChatInput,
@@ -454,7 +288,14 @@ class ReplyPanel extends React.Component {
           length,
           setLength: this.setLength,
           parentRef: this.rootRef,
-          placeholder: "Type a message..."
+          placeholder: t(LangKey.CHAT_INPUT_PLACEHOLDER_REPLY)
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        ContextPreviewModal,
+        {
+          preview,
+          onClose: this.handlePreviewClose
         }
       )
     );