hanbiro-react16-sdk 1.0.27 → 1.0.28

package/dist/components/ChatAIDraft/ChatList/LoadingDots.js

@@ -9,11 +9,12 @@ const LoadingDots = ({
       alignItems: "center",
       gap: 6,
       background: "var(--background-softGrey)",
-      borderRadius: 8,
-      borderTopLeftRadius: 0,
+      borderRadius: 16,
+      borderTopLeftRadius: 4,
       padding: "8px 12px",
       fontSize: 13,
-      color: "var(--text-secondary)"
+      color: "var(--text-secondary)",
+      width: "fit-content"
     }
   },
   /* @__PURE__ */ React.createElement("span", null, label),

package/dist/components/ChatAIDraft/ChatList/MessageItem.js

@@ -61,8 +61,8 @@ const MessageItem = ({
         {
           data: { question: item.question },
           style: {
-            borderRadius: 8,
-            borderTopRightRadius: 0,
+            borderRadius: 12,
+            borderTopRightRadius: 4,
             padding: "8px 12px",
             background: "var(--primary-main)",
             color: "var(--primary-contrasttext)"
@@ -100,8 +100,8 @@ const MessageItem = ({
             data: { subject: item.subject, body: item.body },
             style: {
               background: "var(--background-softGrey)",
-              borderRadius: 8,
-              borderTopLeftRadius: 0,
+              borderRadius: 12,
+              borderTopLeftRadius: 4,
               padding: "8px 12px"
             }
           }

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+interface BaseModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    header?: React.ReactNode;
+    children?: React.ReactNode;
+    maxWidth?: number;
+}
+declare class BaseModal extends React.Component<BaseModalProps> {
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    render(): React.ReactPortal | null;
+}
+export default BaseModal;

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

@@ -0,0 +1,101 @@
+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 X from "../../../node_modules/react-feather/dist/icons/x.js";
+class BaseModal extends React.Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "handleKeyDown", (e) => {
+      if (e.key === "Escape" && this.props.isOpen) this.props.onClose();
+    });
+  }
+  componentDidMount() {
+    document.addEventListener("keydown", this.handleKeyDown);
+  }
+  componentWillUnmount() {
+    document.removeEventListener("keydown", this.handleKeyDown);
+  }
+  render() {
+    const { isOpen, onClose, header, children, maxWidth = 600 } = this.props;
+    if (!isOpen) return null;
+    return ReactDOM.createPortal(
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          onClick: onClose,
+          style: {
+            position: "fixed",
+            inset: 0,
+            background: "rgba(0, 0, 0, 0.1)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1100,
+            padding: 16
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            onClick: (e) => e.stopPropagation(),
+            style: {
+              background: "#fff",
+              borderRadius: 12,
+              maxWidth,
+              width: "100%",
+              maxHeight: "80vh",
+              display: "flex",
+              flexDirection: "column",
+              boxShadow: "0 10px 40px rgba(0, 0, 0, 0.15)",
+              overflow: "hidden",
+              fontFamily: "inherit"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "flex-start",
+                gap: 8,
+                padding: "16px 16px 12px",
+                borderBottom: "1px solid var(--border-light)"
+              }
+            },
+            /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0 } }, header),
+            /* @__PURE__ */ React.createElement(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: "icon-button small"
+              },
+              /* @__PURE__ */ React.createElement(X, { size: 16 })
+            )
+          ),
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                flex: 1,
+                minHeight: 0,
+                overflowY: "auto",
+                padding: 16,
+                fontSize: 13,
+                lineHeight: 1.6,
+                color: "var(--text-primary)"
+              }
+            },
+            children
+          )
+        )
+      ),
+      document.body
+    );
+  }
+}
+export {
+  BaseModal as default
+};

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

@@ -0,0 +1,13 @@
+import { ContextMail } from '../types';
+import * as React from "react";
+export type PreviewMode = "ai" | "html";
+export interface PreviewState {
+    mail: ContextMail;
+    mode: PreviewMode;
+}
+interface ContextPreviewModalProps {
+    preview: PreviewState | null;
+    onClose: () => void;
+}
+declare const ContextPreviewModal: React.FunctionComponent<ContextPreviewModalProps>;
+export default ContextPreviewModal;

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

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { marked } from "../../../node_modules/marked/lib/marked.esm.js";
+import BaseModal from "./BaseModal.js";
+const renderMarkdown = (md) => {
+  try {
+    return marked.parse(md, { async: false });
+  } catch (e) {
+    return md;
+  }
+};
+const MailHeader = ({
+  mail
+}) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    style: {
+      fontSize: 14,
+      fontWeight: 600,
+      color: "var(--text-primary)",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    }
+  },
+  mail.subject || "(no subject)"
+), /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    style: {
+      fontSize: 12,
+      color: "var(--text-secondary)",
+      marginTop: 2,
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    }
+  },
+  mail.from_name,
+  mail.from_addr ? ` <${mail.from_addr}>` : "",
+  mail.date ? ` · ${mail.date}` : ""
+));
+const ContextPreviewModal = ({ preview, onClose }) => {
+  const html = preview ? preview.mode === "html" ? preview.mail.contents || "" : renderMarkdown(preview.mail.ai_contents || "") : "";
+  return /* @__PURE__ */ React.createElement(
+    BaseModal,
+    {
+      isOpen: !!preview,
+      onClose,
+      header: preview && /* @__PURE__ */ React.createElement(MailHeader, { mail: preview.mail }),
+      maxWidth: (preview == null ? void 0 : preview.mode) === "html" ? 900 : 600
+    },
+    preview && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "chat-ai-context-preview",
+        dangerouslySetInnerHTML: { __html: html }
+      }
+    )
+  );
+};
+export {
+  ContextPreviewModal as default
+};

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

@@ -1,10 +1,3 @@
-import { ContextMail } from '../types';
 import * as React from "react";
-interface EmptyStateProps {
-    sourceMail: ContextMail | null;
-    selectedMails: ContextMail[];
-    onAddClick: () => void;
-    onRemoveSelected: (mid: string) => void;
-}
-declare const EmptyState: React.FunctionComponent<EmptyStateProps>;
+declare const EmptyState: React.FunctionComponent;
 export default EmptyState;

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

@@ -1,7 +1,5 @@
 import * as React from "react";
 import CustomAiIcon from "../CustomAIIcon.js";
-import Lock from "../../../node_modules/react-feather/dist/icons/lock.js";
-import Plus from "../../../node_modules/react-feather/dist/icons/plus.js";
 import Mail from "../../../node_modules/react-feather/dist/icons/mail.js";
 import MessageCircle from "../../../node_modules/react-feather/dist/icons/message-circle.js";
 const FEATURES = [
@@ -21,122 +19,7 @@ const FEATURES = [
     desc: "Get an AI draft, then adjust freely with chips or messages."
   }
 ];
-const SourceCard = ({
-  mail
-}) => /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    style: {
-      border: "1px solid var(--border-light)",
-      borderRadius: 8,
-      padding: 10,
-      display: "flex",
-      gap: 8,
-      alignItems: "flex-start",
-      background: "#fff"
-    }
-  },
-  /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      style: {
-        fontSize: 13,
-        fontWeight: 600,
-        color: "var(--text-primary)",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis"
-      }
-    },
-    mail.subject || "(no subject)"
-  ), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      style: {
-        fontSize: 12,
-        color: "var(--text-secondary)",
-        marginTop: 2,
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis"
-      }
-    },
-    mail.from_name,
-    mail.from_addr ? ` <${mail.from_addr}>` : "",
-    mail.date ? ` · ${mail.date}` : ""
-  ))
-);
-const SelectedChip = ({ index, mail, onRemove }) => /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    style: {
-      display: "inline-flex",
-      alignItems: "center",
-      gap: 6,
-      padding: "6px 8px",
-      borderRadius: 8,
-      border: "1px solid var(--border-light)",
-      background: "var(--primary-lighter)",
-      fontSize: 12,
-      maxWidth: 160
-    }
-  },
-  /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      style: {
-        width: 16,
-        height: 16,
-        borderRadius: "50%",
-        background: "var(--primary-main)",
-        color: "var(--primary-contrasttext)",
-        fontSize: 10,
-        fontWeight: 700,
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        flexShrink: 0
-      }
-    },
-    index + 1
-  ),
-  /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      style: {
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        color: "var(--text-primary)"
-      }
-    },
-    mail.subject || "(no subject)"
-  ),
-  /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => onRemove(mail.mid),
-      style: {
-        border: "none",
-        background: "transparent",
-        color: "var(--text-secondary)",
-        cursor: "pointer",
-        padding: 0,
-        display: "inline-flex",
-        alignItems: "center",
-        flexShrink: 0
-      }
-    },
-    "×"
-  )
-);
-const EmptyState = ({
-  sourceMail,
-  selectedMails,
-  onAddClick,
-  onRemoveSelected
-}) => {
+const EmptyState = () => {
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -152,105 +35,6 @@ const EmptyState = ({
         gap: 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 })),
-    /* @__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,
-        onRemove: onRemoveSelected
-      }
-    )))),
     /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", marginTop: 8 } }, /* @__PURE__ */ React.createElement(
       "div",
       {

package/dist/components/ChatAIDraft/ReplyPanel/Header/SelectedChip.d.ts

@@ -0,0 +1,10 @@
+import { ContextMail } from '../../types';
+import * as React from "react";
+interface SelectedChipProps {
+    index: number;
+    mail: ContextMail;
+    onClick: (mail: ContextMail) => void;
+    onRemove: (mid: string) => void;
+}
+declare const SelectedChip: React.FunctionComponent<SelectedChipProps>;
+export default SelectedChip;

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

@@ -0,0 +1,79 @@
+import * as React from "react";
+const SelectedChip = ({
+  index,
+  mail,
+  onClick,
+  onRemove
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    onClick: () => onClick(mail),
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 6,
+      padding: "6px 8px",
+      borderRadius: 8,
+      border: "1px solid var(--border-light)",
+      background: "var(--primary-lighter)",
+      fontSize: 12,
+      maxWidth: 160,
+      cursor: "pointer"
+    }
+  },
+  /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      style: {
+        width: 16,
+        height: 16,
+        borderRadius: "50%",
+        background: "var(--primary-main)",
+        color: "var(--primary-contrasttext)",
+        fontSize: 10,
+        fontWeight: 700,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0
+      }
+    },
+    index + 1
+  ),
+  /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      style: {
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        color: "var(--text-primary)"
+      }
+    },
+    mail.subject || "(no subject)"
+  ),
+  /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: (e) => {
+        e.stopPropagation();
+        onRemove(mail.mid);
+      },
+      style: {
+        border: "none",
+        background: "transparent",
+        color: "var(--text-secondary)",
+        cursor: "pointer",
+        padding: 0,
+        display: "inline-flex",
+        alignItems: "center",
+        flexShrink: 0
+      }
+    },
+    "×"
+  )
+);
+export {
+  SelectedChip as default
+};

package/dist/components/ChatAIDraft/ReplyPanel/Header/SourceCard.d.ts

@@ -0,0 +1,8 @@
+import { ContextMail } from '../../types';
+import * as React from "react";
+interface SourceCardProps {
+    mail: ContextMail;
+    onClick?: () => void;
+}
+declare const SourceCard: React.FunctionComponent<SourceCardProps>;
+export default SourceCard;

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

@@ -0,0 +1,52 @@
+import * as React from "react";
+const SourceCard = ({
+  mail,
+  onClick
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    onClick,
+    style: {
+      border: "1px solid var(--border-light)",
+      borderRadius: 8,
+      padding: 10,
+      display: "flex",
+      gap: 8,
+      alignItems: "flex-start",
+      background: "#fff",
+      cursor: onClick ? "pointer" : "default"
+    }
+  },
+  /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        fontSize: 13,
+        fontWeight: 600,
+        color: "var(--text-primary)",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }
+    },
+    mail.subject || "(no subject)"
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        fontSize: 12,
+        color: "var(--text-secondary)",
+        marginTop: 2,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }
+    },
+    mail.from_name,
+    mail.from_addr ? ` <${mail.from_addr}>` : "",
+    mail.date ? ` · ${mail.date}` : ""
+  ))
+);
+export {
+  SourceCard as default
+};

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

@@ -0,0 +1,12 @@
+import { ContextMail } from '../../types';
+import * as React from "react";
+interface ContextHeaderProps {
+    sourceMail: ContextMail | null;
+    selectedMails: ContextMail[];
+    onAddClick: () => void;
+    onSourceClick: (mail: ContextMail) => void;
+    onChipClick: (mail: ContextMail) => void;
+    onRemoveChip: (mid: string) => void;
+}
+declare const ContextHeader: React.FunctionComponent<ContextHeaderProps>;
+export default ContextHeader;