hanbiro-react16-sdk 1.0.27 → 1.0.29

package/README.md

@@ -40,11 +40,12 @@ import "hanbiro-react16-sdk/style.css";
 
 ## Exported Utils
 
-| Function              | Description                      | Import path                 |
-| --------------------- | -------------------------------- | --------------------------- |
-| `initHanbiroReactSDK` | Initialize SDK (baseUrl, signer) | `hanbiro-react16-sdk/utils` |
-| `getBaseUrl`          | Get the configured base URL      | `hanbiro-react16-sdk/utils` |
-| `getGroupwareUrl`     | Get the groupware URL            | `hanbiro-react16-sdk/utils` |
+| Function              | Description                                 | Import path                 |
+| --------------------- | ------------------------------------------- | --------------------------- |
+| `initHanbiroReactSDK` | Initialize SDK (baseUrl, signer)            | `hanbiro-react16-sdk/utils` |
+| `setLibLang`          | Set the active language for SDK components  | `hanbiro-react16-sdk/utils` |
+| `getBaseUrl`          | Get the configured base URL                 | `hanbiro-react16-sdk/utils` |
+| `getGroupwareUrl`     | Get the groupware URL                       | `hanbiro-react16-sdk/utils` |
 
 ---
 
@@ -63,6 +64,58 @@ initHanbiroReactSDK({
 
 ---
 
+## Language Configuration (`setLibLang`)
+
+SDK components read their translations from a shared global config (`SDKConfig.lang`). Because some translation lookups happen at **module-load time** inside the bundled `.ts` files, the language **must be set before the SDK components are rendered** — passing it later (e.g. via a prop and `useEffect`) is too late for those module-level lookups.
+
+Use `setLibLang` to configure the active language imperatively.
+
+**Supported language codes:** `en`, `ko`, `vi` (defaults to `en`).
+
+### ES Module (npm)
+
+```ts
+import { initHanbiroReactSDK, setLibLang } from "hanbiro-react16-sdk/utils";
+
+// Call ONCE at app startup, before rendering any SDK component
+initHanbiroReactSDK({
+  baseUrl: "https://vndev.hanbiro.com",
+  signer: null,
+});
+setLibLang("ko");
+```
+
+### Changing language at runtime
+
+`setLibLang` only updates the global config — components already mounted will not re-translate module-level strings automatically. To apply a new language at runtime, set it **then** remount the SDK subtree (or reload the page):
+
+```tsx
+import { setLibLang } from "hanbiro-react16-sdk/utils";
+
+function App() {
+  const [lang, setLangState] = useState("ko");
+
+  const handleLangChange = (next: string) => {
+    setLibLang(next);    // update SDK config first
+    setLangState(next);  // then trigger remount via `key`
+  };
+
+  return <ChatAIDraft key={lang} onApply={...} />;
+}
+```
+
+### UMD (script tag)
+
+```js
+HanbiroReact16SDK.initHanbiroReactSDK({
+  baseUrl: "https://vndev.hanbiro.com",
+  signer: null,
+});
+HanbiroReact16SDK.setLibLang("ko");
+```
+
+---
+
 ## Usage: ES Module (npm)
 
 ```tsx

package/dist/components/ChatAIDraft/ChatInput.js

@@ -5,6 +5,8 @@ import * as React from "react";
 import { AI_LANG_FLAGS } from "../../constants/index.js";
 import CountryFlag from "../CountryFlag/index.js";
 import SettingPopper from "./SettingPopper/index.js";
+import { t } from "../../lang/index.js";
+import { LangKey } from "../../lang/keyLang.js";
 import ArrowUp from "../../node_modules/react-feather/dist/icons/arrow-up.js";
 class ChatInput extends React.Component {
   constructor(props) {
@@ -73,7 +75,7 @@ class ChatInput extends React.Component {
           ref: this.textareaRef,
           value: message,
           onChange: this.handleChange,
-          placeholder: placeholder || "Describe your email...",
+          placeholder: placeholder || t(LangKey.CHAT_INPUT_PLACEHOLDER),
           name: "ai-content",
           onKeyDown: this.handleKeyDown,
           disabled: isSending,

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

@@ -24,6 +24,8 @@ import TypingText from "../TypingText.js";
 import AIAvatar from "./AIAvatar.js";
 import LoadingDots from "./LoadingDots.js";
 import { buildApplyHtml } from "./helpers.js";
+import { t } from "../../../lang/index.js";
+import { LangKey } from "../../../lang/keyLang.js";
 import Copy from "../../../node_modules/react-feather/dist/icons/copy.js";
 const MessageItem = ({
   item,
@@ -61,8 +63,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,12 +102,12 @@ 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"
             }
           }
-        ), /* @__PURE__ */ React.createElement("div", { style: { marginTop: 4 } }, /* @__PURE__ */ React.createElement(Tooltip, { title: "Apply content" }, /* @__PURE__ */ React.createElement(
+        ), /* @__PURE__ */ React.createElement("div", { style: { marginTop: 4 } }, /* @__PURE__ */ React.createElement(Tooltip, { title: t(LangKey.APPLY_CONTENT) }, /* @__PURE__ */ React.createElement(
           "button",
           {
             type: "button",

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

@@ -1,29 +1,31 @@
 import * as React from "react";
 import CustomAiIcon from "../CustomAIIcon.js";
+import { t } from "../../../lang/index.js";
+import { LangKey } from "../../../lang/keyLang.js";
 import MessageSquare from "../../../node_modules/react-feather/dist/icons/message-square.js";
 import MessageCircle from "../../../node_modules/react-feather/dist/icons/message-circle.js";
 import Check from "../../../node_modules/react-feather/dist/icons/check.js";
 const FEATURES = [
   {
     icon: /* @__PURE__ */ React.createElement(MessageCircle, { size: 16 }),
-    title: "Request via message",
-    desc: 'e.g., "Draft an email to Director Hong proposing a Q3 collaboration meeting (May 20, 3 PM)"'
+    title: t(LangKey.CREATE_FEATURE_1_TITLE),
+    desc: t(LangKey.CREATE_FEATURE_1_DESC)
   },
   {
     icon: /* @__PURE__ */ React.createElement(CustomAiIcon, { size: 16, stroke: 2 }),
-    title: "AI generates a draft",
-    desc: "Refine the draft freely with follow-ups like 'more polite' or 'add a deadline'."
+    title: t(LangKey.CREATE_FEATURE_2_TITLE),
+    desc: t(LangKey.CREATE_FEATURE_2_DESC)
   },
   {
     icon: /* @__PURE__ */ React.createElement(Check, { size: 16 }),
-    title: "Apply to body",
-    desc: "Insert the response you like into the email body and send."
+    title: t(LangKey.CREATE_FEATURE_3_TITLE),
+    desc: t(LangKey.CREATE_FEATURE_3_DESC)
   }
 ];
 const SUGGESTIONS = [
-  "Propose a Q3 meeting to Director Hong (May 20, 3 PM)",
-  "Notify client of payment schedule (Due May 30)",
-  "Welcome message to new employee (Joining May 22)"
+  t(LangKey.CREATE_SUGGESTION_1),
+  t(LangKey.CREATE_SUGGESTION_2),
+  t(LangKey.CREATE_SUGGESTION_3)
 ];
 const EmptyState = ({
   onSelectPrompt
@@ -52,7 +54,7 @@ const EmptyState = ({
           lineHeight: 1.5
         }
       },
-      "Let's draft a new email together from scratch."
+      t(LangKey.CREATE_EMPTY_TITLE)
     ), /* @__PURE__ */ React.createElement(
       "div",
       {
@@ -62,7 +64,7 @@ const EmptyState = ({
           marginTop: 4
         }
       },
-      "Tell me what kind of email you'd like to write."
+      t(LangKey.CREATE_EMPTY_SUBTITLE)
     )),
     /* @__PURE__ */ React.createElement(
       "div",
@@ -92,9 +94,7 @@ const EmptyState = ({
           lineHeight: 1.6
         }
       },
-      "Give me the recipient, purpose, and key points",
-      /* @__PURE__ */ React.createElement("br", null),
-      "and AI will generate a polished draft."
+      t(LangKey.CREATE_EMPTY_GUIDE).split("\n").map((line, idx) => /* @__PURE__ */ React.createElement(React.Fragment, { key: idx }, line, /* @__PURE__ */ React.createElement("br", null)))
     )),
     /* @__PURE__ */ React.createElement(
       "div",
@@ -178,7 +178,7 @@ const EmptyState = ({
             marginBottom: 8
           }
         },
-        "💡 Try these prompts to get a draft right away"
+        t(LangKey.CREATE_PROMPT_HINT)
       ),
       /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 8 } }, SUGGESTIONS.map((s, i) => /* @__PURE__ */ React.createElement(
         "button",

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

@@ -43,7 +43,7 @@ import { callAI } from "../helper.js";
 import ChatList from "../ChatList/index.js";
 import ChatInput from "../ChatInput.js";
 import EmptyState from "./EmptyState.js";
-import { LENGTH_OPTIONS, TONE_OPTIONS } from "../constants.js";
+import { getLengthOptions, getToneOptions } from "../constants.js";
 import { AI_LANG_FLAGS } from "../../../constants/index.js";
 import v4 from "../../../node_modules/uuid/dist/esm-browser/v4.js";
 class CreatePanel extends React.Component {
@@ -114,8 +114,8 @@ class CreatePanel extends React.Component {
       messages: [],
       isSending: false,
       lang,
-      tone: TONE_OPTIONS[2],
-      length: LENGTH_OPTIONS[2],
+      tone: getToneOptions()[2],
+      length: getLengthOptions()[2],
       conversationId: ""
     };
   }

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,65 @@
+import * as React from "react";
+import { marked } from "../../../node_modules/marked/lib/marked.esm.js";
+import BaseModal from "./BaseModal.js";
+import { t } from "../../../lang/index.js";
+import { LangKey } from "../../../lang/keyLang.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 || t(LangKey.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;