hanbiro-react16-sdk 1.0.28 → 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/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,
@@ -105,7 +107,7 @@ const MessageItem = ({
               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/ContextPreviewModal.js

@@ -1,6 +1,8 @@
 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 });
@@ -22,7 +24,7 @@ const MailHeader = ({
       textOverflow: "ellipsis"
     }
   },
-  mail.subject || "(no subject)"
+  mail.subject || t(LangKey.NO_SUBJECT)
 ), /* @__PURE__ */ React.createElement(
   "div",
   {

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

@@ -1,22 +1,24 @@
 import * as React from "react";
 import CustomAiIcon from "../CustomAIIcon.js";
+import { t } from "../../../lang/index.js";
+import { LangKey } from "../../../lang/keyLang.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 = [
   {
     icon: /* @__PURE__ */ React.createElement(Mail, { size: 16 }),
-    title: "Auto-include source",
-    desc: "The email you are replying to is automatically added as context."
+    title: t(LangKey.REPLY_FEATURE_1_TITLE),
+    desc: t(LangKey.REPLY_FEATURE_1_DESC)
   },
   {
     icon: /* @__PURE__ */ React.createElement(CustomAiIcon, { size: 16, stroke: 2 }),
-    title: "Add send history (optional)",
-    desc: "Use '+ Add' to pick past emails and reference their tone."
+    title: t(LangKey.REPLY_FEATURE_2_TITLE),
+    desc: t(LangKey.REPLY_FEATURE_2_DESC)
   },
   {
     icon: /* @__PURE__ */ React.createElement(MessageCircle, { size: 16 }),
-    title: "Refine with conversation",
-    desc: "Get an AI draft, then adjust freely with chips or messages."
+    title: t(LangKey.REPLY_FEATURE_3_TITLE),
+    desc: t(LangKey.REPLY_FEATURE_3_DESC)
   }
 ];
 const EmptyState = () => {
@@ -44,9 +46,7 @@ const EmptyState = () => {
           lineHeight: 1.6
         }
       },
-      "We'll draft a reply based on the received email.",
-      /* @__PURE__ */ React.createElement("br", null),
-      "Add send history if you want to match the tone."
+      t(LangKey.REPLY_EMPTY_TITLE).split("\n").map((line, idx) => /* @__PURE__ */ React.createElement(React.Fragment, { key: idx }, line, /* @__PURE__ */ React.createElement("br", null)))
     )),
     /* @__PURE__ */ React.createElement(
       "div",
@@ -76,7 +76,7 @@ const EmptyState = () => {
           lineHeight: 1.6
         }
       },
-      "The source is auto-included. Adjust tone and length through conversation."
+      t(LangKey.REPLY_EMPTY_GUIDE)
     )),
     /* @__PURE__ */ React.createElement(
       "div",

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

@@ -1,6 +1,8 @@
 import * as React from "react";
 import SourceCard from "./SourceCard.js";
 import SelectedChip from "./SelectedChip.js";
+import { t } from "../../../../lang/index.js";
+import { LangKey } from "../../../../lang/keyLang.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 = ({
@@ -34,7 +36,7 @@ const ContextHeader = ({
           fontWeight: 600
         }
       },
-      /* @__PURE__ */ React.createElement("span", null, "Source context"),
+      /* @__PURE__ */ React.createElement("span", null, t(LangKey.SOURCE_CONTEXT)),
       /* @__PURE__ */ React.createElement(
         "span",
         {
@@ -62,7 +64,8 @@ const ContextHeader = ({
           }
         },
         /* @__PURE__ */ React.createElement(Lock, { size: 11 }),
-        " Auto"
+        " ",
+        t(LangKey.AUTO)
       )
     ), /* @__PURE__ */ React.createElement(
       SourceCard,
@@ -92,7 +95,7 @@ const ContextHeader = ({
             fontWeight: 600
           }
         },
-        /* @__PURE__ */ React.createElement("span", null, "Selected context"),
+        /* @__PURE__ */ React.createElement("span", null, t(LangKey.SELECTED_CONTEXT)),
         /* @__PURE__ */ React.createElement(
           "span",
           {
@@ -116,7 +119,8 @@ const ContextHeader = ({
           className: "text-button primary"
         },
         /* @__PURE__ */ React.createElement(Plus, { size: 12 }),
-        " Add"
+        " ",
+        t(LangKey.ADD)
       )
     ), selectedMails.length > 0 && /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 } }, selectedMails.map((m, i) => /* @__PURE__ */ React.createElement(
       SelectedChip,

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

@@ -26,7 +26,9 @@ 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;
@@ -120,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",
@@ -131,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",
         {
@@ -141,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",
@@ -190,7 +193,7 @@ class MailListSelect extends React.Component {
             "/",
             MAX_SELECTED
           ),
-          /* @__PURE__ */ React.createElement("span", null, "selected · up to ", MAX_SELECTED),
+          /* @__PURE__ */ React.createElement("span", null, t(LangKey.SELECTED_UP_TO), " ", MAX_SELECTED),
           selectedMids.length > 0 && /* @__PURE__ */ React.createElement(
             "button",
             {
@@ -201,10 +204,10 @@ class MailListSelect extends React.Component {
               },
               className: "text-button primary"
             },
-            "Clear all"
+            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",
@@ -227,7 +230,7 @@ class MailListSelect extends React.Component {
               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;
@@ -356,7 +359,7 @@ class MailListSelect extends React.Component {
               fontFamily: "inherit"
             }
           },
-          "Cancel"
+          t(LangKey.CANCEL)
         ),
         /* @__PURE__ */ React.createElement(
           "button",
@@ -382,7 +385,7 @@ class MailListSelect extends React.Component {
             }
           },
           isConfirming && /* @__PURE__ */ React.createElement(LoadingCircular, { size: 16, color: "var(--primary-contrasttext)" }),
-          /* @__PURE__ */ React.createElement("span", null, "Add ", selectedMids.length > 0 ? `${selectedMids.length} ` : "", "as context →")
+          /* @__PURE__ */ React.createElement("span", null, t(LangKey.ADD), " ", selectedMids.length > 0 ? `${selectedMids.length} ` : "", t(LangKey.ADD_AS_CONTEXT))
         )
       )
     );

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

@@ -47,9 +47,11 @@ 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 { LangKey } from "../../../lang/keyLang.js";
 class ReplyPanel extends React.Component {
   constructor(props) {
     var _a;
@@ -191,8 +193,8 @@ class ReplyPanel extends React.Component {
       messages: [],
       isSending: false,
       lang,
-      tone: TONE_OPTIONS[2],
-      length: LENGTH_OPTIONS[2],
+      tone: getToneOptions()[2],
+      length: getLengthOptions()[2],
       conversationId: ""
     };
   }
@@ -270,7 +272,7 @@ class ReplyPanel extends React.Component {
             textAlign: "center"
           }
         },
-        "Loading context..."
+        t(LangKey.REPLY_LOADING_CONTEXT)
       ),
       /* @__PURE__ */ React.createElement(
         ChatInput,
@@ -286,7 +288,7 @@ 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(

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

@@ -24,11 +24,13 @@ var __async = (__this, __arguments, generator) => {
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { apiGet } from "../../../utils/api.js";
-import { TONE_OPTIONS, LENGTH_OPTIONS } from "../constants.js";
+import { getToneOptions, getLengthOptions } from "../constants.js";
 import LanguageSelect from "./LanguageSelect.js";
 import ChipGroup from "./ChipGroup.js";
 import { TONE_ICONS, LENGTH_ICONS } from "./icons.js";
+import { t } from "../../../lang/index.js";
 import Settings from "../../../node_modules/react-feather/dist/icons/settings.js";
+import { LangKey } from "../../../lang/keyLang.js";
 class SettingPopper extends React.Component {
   constructor(props) {
     super(props);
@@ -130,7 +132,7 @@ class SettingPopper extends React.Component {
               {
                 style: { display: "flex", flexDirection: "column", gap: 6 }
               },
-              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Language"),
+              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, t(LangKey.SETTING_LANGUAGE)),
               /* @__PURE__ */ React.createElement(
                 LanguageSelect,
                 {
@@ -145,11 +147,11 @@ class SettingPopper extends React.Component {
               {
                 style: { display: "flex", flexDirection: "column", gap: 6 }
               },
-              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Tone"),
+              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, t(LangKey.SETTING_TONE)),
               /* @__PURE__ */ React.createElement(
                 ChipGroup,
                 {
-                  options: TONE_OPTIONS,
+                  options: getToneOptions(),
                   selected: tone,
                   onSelect: (opt) => setTone(opt),
                   iconMap: TONE_ICONS
@@ -161,11 +163,11 @@ class SettingPopper extends React.Component {
               {
                 style: { display: "flex", flexDirection: "column", gap: 6 }
               },
-              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Length"),
+              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, t(LangKey.SETTING_LENGTH)),
               /* @__PURE__ */ React.createElement(
                 ChipGroup,
                 {
-                  options: LENGTH_OPTIONS,
+                  options: getLengthOptions(),
                   selected: length,
                   onSelect: (opt) => setLength(opt),
                   iconMap: LENGTH_ICONS,

package/dist/components/ChatAIDraft/constants.d.ts

@@ -1,4 +1,4 @@
 import { LabelValue } from '../../types';
 
-export declare const TONE_OPTIONS: LabelValue[];
-export declare const LENGTH_OPTIONS: LabelValue[];
+export declare const getToneOptions: () => LabelValue[];
+export declare const getLengthOptions: () => LabelValue[];

package/dist/components/ChatAIDraft/constants.js

@@ -1,18 +1,20 @@
-const TONE_OPTIONS = [
-  { label: "Formal", value: "formal" },
-  { label: "Polite", value: "polite" },
-  { label: "Neutral", value: "neutral" },
-  { label: "Friendly", value: "friendly" },
-  { label: "Firm", value: "firm" },
-  { label: "Apology", value: "apologetic" }
+import { t } from "../../lang/index.js";
+import { LangKey } from "../../lang/keyLang.js";
+const getToneOptions = () => [
+  { label: t(LangKey.TONE_FORMAL), value: "formal" },
+  { label: t(LangKey.TONE_POLITE), value: "polite" },
+  { label: t(LangKey.TONE_NEUTRAL), value: "neutral" },
+  { label: t(LangKey.TONE_FRIENDLY), value: "friendly" },
+  { label: t(LangKey.TONE_FIRM), value: "firm" },
+  { label: t(LangKey.TONE_APOLOGY), value: "apologetic" }
 ];
-const LENGTH_OPTIONS = [
-  { label: "Short", value: "short" },
-  { label: "Medium", value: "medium" },
-  { label: "Long", value: "long" },
-  { label: "1-liner", value: "one_liner" }
+const getLengthOptions = () => [
+  { label: t(LangKey.LENGTH_SHORT), value: "short" },
+  { label: t(LangKey.LENGTH_MEDIUM), value: "medium" },
+  { label: t(LangKey.LENGTH_LONG), value: "long" },
+  { label: t(LangKey.LENGTH_ONE_LINER), value: "one_liner" }
 ];
 export {
-  LENGTH_OPTIONS,
-  TONE_OPTIONS
+  getLengthOptions,
+  getToneOptions
 };

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

@@ -4,6 +4,7 @@ export interface ChatAIDraftProps {
     type?: ChatType;
     sourceMid?: string;
     defaultLang?: string;
+    userLang?: string;
     getEditorContent?: () => string;
     onApply: (params: {
         html: string;

package/dist/components/ChatAIDraft/index.js

@@ -29,8 +29,14 @@ var __objRest = (source, exclude) => {
 import * as React from "react";
 import CreatePanel from "./CreatePanel/index.js";
 import ReplyPanel from "./ReplyPanel/index.js";
+import { SDKConfig } from "../../utils/url.js";
 const ChatAIDraft = (props) => {
-  const _a = props, { type = "new", sourceMid } = _a, rest = __objRest(_a, ["type", "sourceMid"]);
+  const _a = props, { type = "new", sourceMid, userLang } = _a, rest = __objRest(_a, ["type", "sourceMid", "userLang"]);
+  React.useEffect(() => {
+    if (userLang) {
+      SDKConfig.lang = userLang;
+    }
+  }, [userLang]);
   if ((type === "reply" || type === "forward") && sourceMid) {
     return /* @__PURE__ */ React.createElement(ReplyPanel, __spreadValues({ type, sourceMid }, rest));
   }

package/dist/components/Pagination/index.js

@@ -2,6 +2,8 @@ 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 { t } from "../../lang/index.js";
+import { LangKey } from "../../lang/keyLang.js";
 import ChevronLeft from "../../node_modules/react-feather/dist/icons/chevron-left.js";
 import ChevronRight from "../../node_modules/react-feather/dist/icons/chevron-right.js";
 class Pagination extends React.Component {
@@ -51,7 +53,7 @@ class Pagination extends React.Component {
           borderTop: "1px solid var(--border-light)"
         }
       },
-      /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, color: "var(--text-secondary)" } }, "Total ", total, " | Page ", page, " / ", totalPages),
+      /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, color: "var(--text-secondary)" } }, t(LangKey.PAGINATION_TOTAL), " ", total, " | ", t(LangKey.PAGINATION_PAGE_OF), " ", page, " / ", totalPages),
       /* @__PURE__ */ React.createElement(
         "div",
         {
@@ -90,7 +92,7 @@ class Pagination extends React.Component {
               marginLeft: 4
             }
           },
-          "Page"
+          t(LangKey.PAGINATION_PAGE)
         ),
         /* @__PURE__ */ React.createElement(
           "input",

package/dist/components/SummaryAIEmails/FilterTabs.js

@@ -1,5 +1,7 @@
 import * as React from "react";
 import { FILTERS } from "./utils.js";
+import { t } from "../../lang/index.js";
+import { LangKey } from "../../lang/keyLang.js";
 const FilterTabs = ({
   mailtype,
   onChangeFilter
@@ -14,7 +16,7 @@ const FilterTabs = ({
       gap: 8
     }
   },
-  /* @__PURE__ */ React.createElement("span", { style: { fontSize: 13, color: "var(--text-secondary)" } }, "This is a summary compiled by AI · May contain some inaccuracies"),
+  /* @__PURE__ */ React.createElement("span", { style: { fontSize: 13, color: "var(--text-secondary)" } }, t(LangKey.SUMMARY_WARNING)),
   /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -47,7 +49,7 @@ const FilterTabs = ({
             transition: "background 0.15s ease-in-out"
           }
         },
-        f.label
+        t(f.label)
       );
     })
   )

package/dist/components/SummaryAIEmails/SummaryItem.js

@@ -1,7 +1,9 @@
 import * as React from "react";
 import { formatDate } from "./utils.js";
+import { t } from "../../lang/index.js";
 import ArrowUp from "../../node_modules/react-feather/dist/icons/arrow-up.js";
 import ArrowDown from "../../node_modules/react-feather/dist/icons/arrow-down.js";
+import { LangKey } from "../../lang/keyLang.js";
 const SummaryItem = ({ item }) => {
   const isSent = (item == null ? void 0 : item.direction) === "sent" || (item == null ? void 0 : item.sig) === "out";
   return /* @__PURE__ */ React.createElement(
@@ -41,7 +43,7 @@ const SummaryItem = ({ item }) => {
           }
         },
         isSent ? /* @__PURE__ */ React.createElement(ArrowUp, { size: 11 }) : /* @__PURE__ */ React.createElement(ArrowDown, { size: 11 }),
-        isSent ? "Sent" : "Received"
+        t(isSent ? LangKey.SENT : LangKey.RECEIVED)
       )
     ),
     /* @__PURE__ */ React.createElement(