@yushaw/sanqian-chat 0.2.25 → 0.2.30

package/dist/preload/factories.d.mts

@@ -72,7 +72,8 @@ interface ChatUiConfigSerializable {
     /** Font size scale: small (13px), normal (14px), large (16px), extra-large (18px) */
     fontSize?: ChatFontSize;
     accentColor?: string;
-    locale?: Locale;
+    /** Supports Locale plus BCP-47 variants (e.g. zh-CN, en-US) */
+    locale?: Locale | string;
     strings?: Partial<ChatUiStrings>;
     alwaysOnTop?: boolean;
 }

package/dist/preload/factories.d.ts

@@ -72,7 +72,8 @@ interface ChatUiConfigSerializable {
     /** Font size scale: small (13px), normal (14px), large (16px), extra-large (18px) */
     fontSize?: ChatFontSize;
     accentColor?: string;
-    locale?: Locale;
+    /** Supports Locale plus BCP-47 variants (e.g. zh-CN, en-US) */
+    locale?: Locale | string;
     strings?: Partial<ChatUiStrings>;
     alwaysOnTop?: boolean;
 }

package/dist/renderer/index.d.mts

@@ -77,7 +77,8 @@ interface ChatUiConfigSerializable {
     /** Font size scale: small (13px), normal (14px), large (16px), extra-large (18px) */
     fontSize?: ChatFontSize;
     accentColor?: string;
-    locale?: Locale;
+    /** Supports Locale plus BCP-47 variants (e.g. zh-CN, en-US) */
+    locale?: Locale | string;
     strings?: Partial<ChatUiStrings>;
     alwaysOnTop?: boolean;
 }
@@ -1231,7 +1232,7 @@ interface HistoryModalProps {
 }
 declare const HistoryModal: react.NamedExoticComponent<HistoryModalProps>;
 
-declare function resolveChatStrings(locale?: Locale, overrides?: Partial<ChatUiStrings>): ChatUiStrings;
+declare function resolveChatStrings(locale?: Locale | string, overrides?: Partial<ChatUiStrings>): ChatUiStrings;
 
 type AlertType = 'warning' | 'error';
 interface AlertAction {

package/dist/renderer/index.d.ts

@@ -77,7 +77,8 @@ interface ChatUiConfigSerializable {
     /** Font size scale: small (13px), normal (14px), large (16px), extra-large (18px) */
     fontSize?: ChatFontSize;
     accentColor?: string;
-    locale?: Locale;
+    /** Supports Locale plus BCP-47 variants (e.g. zh-CN, en-US) */
+    locale?: Locale | string;
     strings?: Partial<ChatUiStrings>;
     alwaysOnTop?: boolean;
 }
@@ -1231,7 +1232,7 @@ interface HistoryModalProps {
 }
 declare const HistoryModal: react.NamedExoticComponent<HistoryModalProps>;
 
-declare function resolveChatStrings(locale?: Locale, overrides?: Partial<ChatUiStrings>): ChatUiStrings;
+declare function resolveChatStrings(locale?: Locale | string, overrides?: Partial<ChatUiStrings>): ChatUiStrings;
 
 type AlertType = 'warning' | 'error';
 interface AlertAction {

package/dist/renderer/index.js

@@ -125,7 +125,6 @@ function useChat(options) {
   const pendingInterruptStreamIdRef = (0, import_react.useRef)(null);
   const currentAgentIdRef = (0, import_react.useRef)(null);
   const pendingCancelRef = (0, import_react.useRef)(false);
-  const pendingCancelTimeoutRef = (0, import_react.useRef)(null);
   const pendingCancelFnRef = (0, import_react.useRef)(null);
   const suppressStreamRef = (0, import_react.useRef)(false);
   const currentBlocksRef = (0, import_react.useRef)([]);
@@ -152,7 +151,6 @@ function useChat(options) {
       isMountedRef.current = false;
       cancelRef.current?.();
       if (typewriterIntervalRef.current) clearTimeout(typewriterIntervalRef.current);
-      if (pendingCancelTimeoutRef.current) clearTimeout(pendingCancelTimeoutRef.current);
     };
   }, []);
   (0, import_react.useEffect)(() => {
@@ -215,10 +213,6 @@ function useChat(options) {
   const clearPendingCancel = (0, import_react.useCallback)(() => {
     pendingCancelRef.current = false;
     pendingCancelFnRef.current = null;
-    if (pendingCancelTimeoutRef.current) {
-      clearTimeout(pendingCancelTimeoutRef.current);
-      pendingCancelTimeoutRef.current = null;
-    }
   }, []);
   const handleStreamEvent = (0, import_react.useCallback)((event, assistantMessageId) => {
     if (!isMountedRef.current) return;
@@ -723,9 +717,12 @@ function useChat(options) {
       );
       cancelRef.current = cancel;
       if (pendingCancelRef.current) {
-        clearPendingCancel();
+        pendingCancelFnRef.current = cancel;
         cancel();
-        cancelRef.current = null;
+        if (currentRunIdRef.current) {
+          clearPendingCancel();
+          cancelRef.current = null;
+        }
       }
       return true;
     } catch (err) {
@@ -751,23 +748,15 @@ function useChat(options) {
     await trySendMessage(content, sendOptions);
   }, [trySendMessage]);
   const stopStreaming = (0, import_react.useCallback)(() => {
-    const shouldDelayCancel = !currentRunIdRef.current;
-    if (shouldDelayCancel) {
-      pendingCancelRef.current = true;
-      pendingCancelFnRef.current = cancelRef.current;
-      suppressStreamRef.current = true;
-      if (pendingCancelTimeoutRef.current) {
-        clearTimeout(pendingCancelTimeoutRef.current);
+    pendingCancelRef.current = true;
+    pendingCancelFnRef.current = cancelRef.current;
+    suppressStreamRef.current = true;
+    if (cancelRef.current) {
+      cancelRef.current();
+      if (currentRunIdRef.current) {
+        clearPendingCancel();
+        cancelRef.current = null;
       }
-      pendingCancelTimeoutRef.current = setTimeout(() => {
-        pendingCancelRef.current = false;
-        pendingCancelFnRef.current = null;
-        pendingCancelTimeoutRef.current = null;
-        suppressStreamRef.current = false;
-      }, 1500);
-    } else {
-      cancelRef.current?.();
-      cancelRef.current = null;
     }
     flushTypewriter();
     setMessages((prev) => {
@@ -795,10 +784,6 @@ function useChat(options) {
     resetStreamBuffers();
     currentRunIdRef.current = null;
     pendingInterruptStreamIdRef.current = null;
-    if (!shouldDelayCancel) {
-      clearPendingCancel();
-      suppressStreamRef.current = false;
-    }
     setIsStreaming(false);
     setIsLoading(false);
   }, [clearPendingCancel, flushTypewriter, resetStreamBuffers]);
@@ -853,11 +838,13 @@ function useChat(options) {
     clearPendingCancel();
   }, [clearPendingCancel, resetStreamBuffers]);
   const sendHitlResponse = (0, import_react.useCallback)((response) => {
-    adapter.sendHitlResponse?.(
-      response,
-      currentRunIdRef.current ?? void 0,
-      pendingInterruptStreamIdRef.current ?? void 0
-    );
+    const runId = currentRunIdRef.current ?? void 0;
+    const streamId = pendingInterruptStreamIdRef.current ?? void 0;
+    if (streamId) {
+      adapter.sendHitlResponse?.(response, runId, streamId);
+      return;
+    }
+    adapter.sendHitlResponse?.(response, runId);
   }, [adapter]);
   const approveHitl = (0, import_react.useCallback)((remember = false) => {
     sendHitlResponse({ approved: true, remember });
@@ -1041,7 +1028,7 @@ var CHAT_UI_STRINGS = {
     hitlSubmit: "Submit",
     hitlCancel: "Cancel",
     hitlRememberChoice: "Remember this choice",
-    hitlRequiredField: "This field is required",
+    hitlRequiredField: "Please enter a response before submitting",
     hitlTimeoutIn: "Timeout in",
     hitlSeconds: "s",
     hitlExecuteTool: "Execute",
@@ -1100,7 +1087,7 @@ var CHAT_UI_STRINGS = {
     hitlSubmit: "\u63D0\u4EA4",
     hitlCancel: "\u53D6\u6D88",
     hitlRememberChoice: "\u8BB0\u4F4F\u672C\u6B21\u9009\u62E9",
-    hitlRequiredField: "\u6B64\u9879\u5FC5\u586B",
+    hitlRequiredField: "\u8BF7\u8F93\u5165\u56DE\u590D\u540E\u518D\u63D0\u4EA4",
     hitlTimeoutIn: "\u8D85\u65F6\u5269\u4F59",
     hitlSeconds: "\u79D2",
     hitlExecuteTool: "\u6267\u884C",
@@ -1123,9 +1110,15 @@ var CHAT_UI_STRINGS = {
     remove: "\u79FB\u9664"
   }
 };
+function normalizeLocale(locale) {
+  const normalized = (locale || "en").toLowerCase();
+  if (normalized.startsWith("zh")) return "zh";
+  return "en";
+}
 function resolveChatStrings(locale = "en", overrides) {
+  const normalizedLocale = normalizeLocale(locale);
   return {
-    ...CHAT_UI_STRINGS[locale],
+    ...CHAT_UI_STRINGS[normalizedLocale],
     ...overrides
   };
 }
@@ -8039,7 +8032,7 @@ var defaultStrings = {
   submit: "Submit",
   cancel: "Cancel",
   rememberChoice: "Remember this choice",
-  requiredField: "This field is required",
+  requiredField: "Please enter a response before submitting",
   timeoutIn: "Timeout in",
   seconds: "s",
   executeTool: "Execute",
@@ -8050,23 +8043,6 @@ var defaultStrings = {
   approvalRequest: "Approval Request",
   inputRequest: "Input Request"
 };
-var defaultZhStrings = {
-  approve: "\u6279\u51C6",
-  reject: "\u62D2\u7EDD",
-  submit: "\u63D0\u4EA4",
-  cancel: "\u53D6\u6D88",
-  rememberChoice: "\u8BB0\u4F4F\u672C\u6B21\u9009\u62E9",
-  requiredField: "\u6B64\u9879\u5FC5\u586B",
-  timeoutIn: "\u8D85\u65F6\u5269\u4F59",
-  seconds: "\u79D2",
-  executeTool: "\u6267\u884C",
-  toolLabel: "\u5DE5\u5177",
-  argsLabel: "\u53C2\u6570",
-  defaultPrefix: "\u9ED8\u8BA4",
-  enterResponse: "\u8BF7\u8F93\u5165\u4F60\u7684\u56DE\u590D...",
-  approvalRequest: "\u9700\u8981\u5BA1\u6279",
-  inputRequest: "\u9700\u8981\u8F93\u5165"
-};
 var riskColors = {
   low: {
     bg: "bg-blue-500/10",
@@ -8096,42 +8072,15 @@ var HitlCard = (0, import_react24.memo)(function HitlCard2({
   isDarkMode = false,
   strings = {}
 }) {
-  const mergedStrings = { ...defaultStrings, ...strings };
+  const t = { ...defaultStrings, ...strings };
   const isApproval = interrupt.type === "approval_request";
   const isUserInput = interrupt.type === "user_input_request";
-  const cjkRegex = /[\u3400-\u9fff]/;
-  const hasCjkContent = cjkRegex.test(
-    [
-      interrupt.question || "",
-      interrupt.context || "",
-      interrupt.reason || "",
-      interrupt.tool || "",
-      ...interrupt.options || []
-    ].join(" ")
-  );
-  const t = hasCjkContent ? {
-    ...mergedStrings,
-    approve: mergedStrings.approve === defaultStrings.approve ? defaultZhStrings.approve : mergedStrings.approve,
-    reject: mergedStrings.reject === defaultStrings.reject ? defaultZhStrings.reject : mergedStrings.reject,
-    submit: mergedStrings.submit === defaultStrings.submit ? defaultZhStrings.submit : mergedStrings.submit,
-    cancel: mergedStrings.cancel === defaultStrings.cancel ? defaultZhStrings.cancel : mergedStrings.cancel,
-    rememberChoice: mergedStrings.rememberChoice === defaultStrings.rememberChoice ? defaultZhStrings.rememberChoice : mergedStrings.rememberChoice,
-    requiredField: mergedStrings.requiredField === defaultStrings.requiredField ? defaultZhStrings.requiredField : mergedStrings.requiredField,
-    timeoutIn: mergedStrings.timeoutIn === defaultStrings.timeoutIn ? defaultZhStrings.timeoutIn : mergedStrings.timeoutIn,
-    seconds: mergedStrings.seconds === defaultStrings.seconds ? defaultZhStrings.seconds : mergedStrings.seconds,
-    executeTool: mergedStrings.executeTool === defaultStrings.executeTool ? defaultZhStrings.executeTool : mergedStrings.executeTool,
-    toolLabel: mergedStrings.toolLabel === defaultStrings.toolLabel ? defaultZhStrings.toolLabel : mergedStrings.toolLabel,
-    argsLabel: mergedStrings.argsLabel === defaultStrings.argsLabel ? defaultZhStrings.argsLabel : mergedStrings.argsLabel,
-    defaultPrefix: mergedStrings.defaultPrefix === defaultStrings.defaultPrefix ? defaultZhStrings.defaultPrefix : mergedStrings.defaultPrefix,
-    enterResponse: mergedStrings.enterResponse === defaultStrings.enterResponse ? defaultZhStrings.enterResponse : mergedStrings.enterResponse,
-    approvalRequest: mergedStrings.approvalRequest === defaultStrings.approvalRequest ? defaultZhStrings.approvalRequest : mergedStrings.approvalRequest,
-    inputRequest: mergedStrings.inputRequest === defaultStrings.inputRequest ? defaultZhStrings.inputRequest : mergedStrings.inputRequest
-  } : mergedStrings;
   const [answer, setAnswer] = (0, import_react24.useState)(interrupt.default || "");
   const [selectedIndices, setSelectedIndices] = (0, import_react24.useState)([]);
   const [isComposing, setIsComposing] = (0, import_react24.useState)(false);
   const [timeLeft, setTimeLeft] = (0, import_react24.useState)(interrupt.timeout ?? null);
   const [rememberChoice, setRememberChoice] = (0, import_react24.useState)(false);
+  const [hasAttemptedSubmit, setHasAttemptedSubmit] = (0, import_react24.useState)(false);
   const inputRef = (0, import_react24.useRef)(null);
   const textareaRef = (0, import_react24.useRef)(null);
   const riskLevel = interrupt.risk_level || "medium";
@@ -8162,18 +8111,37 @@ var HitlCard = (0, import_react24.memo)(function HitlCard2({
     }, 1e3);
     return () => clearInterval(timer);
   }, [timeLeft, isUserInput, onSubmit, onCancel]);
+  const hasOptions = Boolean(interrupt.options && interrupt.options.length > 0);
+  const isRequiredMissing = isUserInput && !!interrupt.required && (hasOptions ? selectedIndices.length === 0 : !answer.trim());
+  const showRequiredError = hasAttemptedSubmit && isRequiredMissing;
   const handleOptionToggle = (index) => {
+    if (hasAttemptedSubmit) {
+      setHasAttemptedSubmit(false);
+    }
     if (interrupt.multi_select) {
       setSelectedIndices((prev) => prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]);
     } else {
       setSelectedIndices([index]);
     }
   };
+  const handleAnswerChange = (value) => {
+    if (hasAttemptedSubmit) {
+      setHasAttemptedSubmit(false);
+    }
+    setAnswer(value);
+  };
   const handleSubmit = () => {
     if (isApproval) {
       onApprove?.(rememberChoice);
     } else if (isUserInput) {
-      const hasOptions = interrupt.options && interrupt.options.length > 0;
+      if (isRequiredMissing) {
+        setHasAttemptedSubmit(true);
+        if (!hasOptions) {
+          inputRef.current?.focus();
+          textareaRef.current?.focus();
+        }
+        return;
+      }
       if (hasOptions) {
         const selectedAnswers = selectedIndices.map((i) => interrupt.options[i]).join(", ");
         onSubmit?.({
@@ -8181,11 +8149,6 @@ var HitlCard = (0, import_react24.memo)(function HitlCard2({
           selected_indices: selectedIndices
         });
       } else {
-        if (interrupt.required && !answer.trim()) {
-          inputRef.current?.focus();
-          textareaRef.current?.focus();
-          return;
-        }
         onSubmit?.({ answer: answer || interrupt.default || "" });
       }
     }
@@ -8229,13 +8192,10 @@ var HitlCard = (0, import_react24.memo)(function HitlCard2({
     lineHeight: 1.55,
     letterSpacing: "0.01em"
   };
-  const questionIconStyle = {
-    background: isDarkMode ? "rgba(59, 130, 246, 0.26)" : "rgba(59, 130, 246, 0.16)",
-    color: isDarkMode ? "#dbeafe" : "#1d4ed8"
-  };
+  const showHeaderRow = isApproval || timeLeft !== null && timeLeft > 0;
   const cancelButtonClass = isDarkMode ? "flex-1 rounded-lg border border-zinc-500 bg-zinc-700/80 px-3 py-2 text-sm font-semibold text-zinc-100 transition-colors hover:bg-zinc-600" : "flex-1 rounded-lg border border-zinc-300 bg-zinc-100 px-3 py-2 text-sm font-semibold text-zinc-900 transition-colors hover:bg-zinc-200";
-  const isSubmitDisabled = isUserInput && interrupt.required && !answer.trim() && (!interrupt.options || selectedIndices.length === 0);
-  const submitButtonClass = `flex-1 rounded-lg border px-3 py-2 text-sm font-semibold transition-colors ${isSubmitDisabled ? "cursor-not-allowed" : "hover:brightness-105"}`;
+  const isSubmitBlocked = isRequiredMissing;
+  const submitButtonClass = `flex-1 rounded-lg border px-3 py-2 text-sm font-semibold transition-colors ${isSubmitBlocked ? "cursor-pointer" : "hover:brightness-105"}`;
   const cancelButtonStyle = isDarkMode ? {
     background: "rgba(63, 63, 70, 0.82)",
     color: "#f4f4f5",
@@ -8245,7 +8205,7 @@ var HitlCard = (0, import_react24.memo)(function HitlCard2({
     color: "#18181b",
     borderColor: "rgba(113, 113, 122, 0.45)"
   };
-  const submitButtonStyle = isSubmitDisabled ? isDarkMode ? {
+  const submitButtonStyle = isSubmitBlocked ? isDarkMode ? {
     background: "rgba(82, 82, 91, 0.72)",
     color: "#d4d4d8",
     borderColor: "rgba(161, 161, 170, 0.35)",
@@ -8266,6 +8226,14 @@ var HitlCard = (0, import_react24.memo)(function HitlCard2({
     borderColor: "transparent",
     boxShadow: "0 2px 10px rgba(37, 99, 235, 0.3)"
   };
+  const inputValidationStyle = showRequiredError ? isDarkMode ? {
+    borderColor: "rgba(248, 113, 113, 0.62)",
+    boxShadow: "0 0 0 2px rgba(248, 113, 113, 0.2)"
+  } : {
+    borderColor: "rgba(220, 38, 38, 0.45)",
+    boxShadow: "0 0 0 2px rgba(220, 38, 38, 0.11)"
+  } : void 0;
+  const requiredHintStyle = isDarkMode ? { color: "rgba(252, 165, 165, 0.92)" } : { color: "rgba(185, 28, 28, 0.84)" };
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
@@ -8275,8 +8243,8 @@ var HitlCard = (0, import_react24.memo)(function HitlCard2({
       "aria-modal": "true",
       "aria-label": isApproval ? t.approvalRequest : t.inputRequest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mb-2 flex items-start justify-between gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex min-w-0 items-center gap-2", children: isApproval ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        showHeaderRow && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `mb-2 flex items-start gap-2 ${isApproval ? "justify-between" : "justify-end"}`, children: [
+          isApproval && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             "span",
             {
               className: `inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${riskStyle.bg} ${riskStyle.border} ${riskStyle.text} border`,
@@ -8285,7 +8253,7 @@ var HitlCard = (0, import_react24.memo)(function HitlCard2({
                 /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "capitalize", children: riskLevel })
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "inline-flex h-7 w-7 items-center justify-center rounded-full text-base font-semibold", style: questionIconStyle, children: "?" }) }),
+          ) }),
           timeLeft !== null && timeLeft > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: `text-xs ${textSecondary} whitespace-nowrap`, children: [
             t.timeoutIn,
             " ",
@@ -8314,31 +8282,45 @@ var HitlCard = (0, import_react24.memo)(function HitlCard2({
               /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("code", { className: "text-[10px]", children: JSON.stringify(interrupt.args, null, 0) })
             ] })
           ] }),
-          isUserInput && interrupt.options && interrupt.options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-1.5", children: interrupt.options.map((option, index) => {
-            const isSelected = selectedIndices.includes(index);
-            const optionStyle = isSelected ? isDarkMode ? { borderColor: "rgba(96, 165, 250, 0.75)", background: "rgba(59, 130, 246, 0.24)" } : { borderColor: "rgba(37, 99, 235, 0.36)", background: "rgba(239, 246, 255, 0.98)" } : isDarkMode ? { borderColor: "rgba(113, 113, 122, 0.6)", background: "rgba(9, 9, 11, 0.84)" } : { borderColor: "rgba(113, 113, 122, 0.34)", background: "rgba(250, 250, 250, 0.96)" };
-            return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-              "label",
+          isUserInput && interrupt.options && interrupt.options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1.5", children: [
+            interrupt.options.map((option, index) => {
+              const isSelected = selectedIndices.includes(index);
+              const optionStyle = isSelected ? isDarkMode ? { borderColor: "rgba(96, 165, 250, 0.75)", background: "rgba(59, 130, 246, 0.24)" } : { borderColor: "rgba(37, 99, 235, 0.36)", background: "rgba(239, 246, 255, 0.98)" } : isDarkMode ? { borderColor: "rgba(113, 113, 122, 0.6)", background: "rgba(9, 9, 11, 0.84)" } : { borderColor: "rgba(113, 113, 122, 0.34)", background: "rgba(250, 250, 250, 0.96)" };
+              return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                "label",
+                {
+                  className: `flex cursor-pointer items-center gap-2 rounded p-2 transition-colors ${isSelected ? isDarkMode ? "border-blue-500/50 bg-blue-500/20" : "border-blue-200 bg-blue-50" : `${inputBg} border-transparent hover:border-zinc-300`} border`,
+                  style: optionStyle,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      "input",
+                      {
+                        type: interrupt.multi_select ? "checkbox" : "radio",
+                        name: "hitl-options",
+                        checked: isSelected,
+                        onChange: () => handleOptionToggle(index),
+                        style: optionControlStyle
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `text-sm ${textPrimary} break-words ${isSelected ? "font-semibold" : "font-medium"}`, children: option })
+                  ]
+                },
+                index
+              );
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "min-h-[18px]", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              "div",
               {
-                className: `flex cursor-pointer items-center gap-2 rounded p-2 transition-colors ${isSelected ? isDarkMode ? "border-blue-500/50 bg-blue-500/20" : "border-blue-200 bg-blue-50" : `${inputBg} border-transparent hover:border-zinc-300`} border`,
-                style: optionStyle,
+                className: `flex items-center gap-1 text-xs transition-all duration-150 ${showRequiredError ? "translate-y-0 opacity-100" : "-translate-y-1 opacity-0"}`,
+                style: requiredHintStyle,
+                "aria-live": "polite",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                    "input",
-                    {
-                      type: interrupt.multi_select ? "checkbox" : "radio",
-                      name: "hitl-options",
-                      checked: isSelected,
-                      onChange: () => handleOptionToggle(index),
-                      style: optionControlStyle
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `text-sm ${textPrimary} break-words ${isSelected ? "font-semibold" : "font-medium"}`, children: option })
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "inline-block h-1.5 w-1.5 rounded-full bg-current opacity-75" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: t.requiredField })
                 ]
-              },
-              index
-            );
-          }) }),
+              }
+            ) })
+          ] }),
           isUserInput && (!interrupt.options || interrupt.options.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "input",
@@ -8346,15 +8328,27 @@ var HitlCard = (0, import_react24.memo)(function HitlCard2({
                 ref: inputRef,
                 type: "text",
                 value: answer,
-                onChange: (e) => setAnswer(e.target.value),
+                onChange: (e) => handleAnswerChange(e.target.value),
                 onKeyDown: handleKeyDown,
                 onCompositionStart: () => setIsComposing(true),
                 onCompositionEnd: () => setIsComposing(false),
                 placeholder: interrupt.default ? `${t.defaultPrefix}: ${interrupt.default}` : t.enterResponse,
-                className: `w-full rounded-lg border px-3 py-2 text-sm ${inputBorder} ${inputBg} ${textPrimary} placeholder:${textSecondary} focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/40`
+                className: `w-full rounded-lg border px-3 py-2 text-sm ${inputBorder} ${inputBg} ${textPrimary} placeholder:${textSecondary} ${showRequiredError ? "focus:border-red-400 focus:ring-red-400/25" : "focus:border-blue-500 focus:ring-blue-500/40"} focus:outline-none focus:ring-2`,
+                style: inputValidationStyle
               }
             ),
-            interrupt.required && !answer.trim() && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-1 text-xs text-red-500", children: t.requiredField })
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mt-1 min-h-[18px]", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              "div",
+              {
+                className: `flex items-center gap-1 text-xs transition-all duration-150 ${showRequiredError ? "translate-y-0 opacity-100" : "-translate-y-1 opacity-0"}`,
+                style: requiredHintStyle,
+                "aria-live": "polite",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "inline-block h-1.5 w-1.5 rounded-full bg-current opacity-75" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: t.requiredField })
+                ]
+              }
+            ) })
           ] }),
           isApproval && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             "label",
@@ -8390,7 +8384,7 @@ var HitlCard = (0, import_react24.memo)(function HitlCard2({
             "button",
             {
               onClick: handleSubmit,
-              disabled: isSubmitDisabled,
+              "aria-disabled": isSubmitBlocked,
               className: submitButtonClass,
               style: submitButtonStyle,
               children: isApproval ? t.approve : t.submit
@@ -9221,9 +9215,10 @@ var SanqianChat = (0, import_react29.memo)(function SanqianChat2({
   const { themeClass, isDarkMode } = useResolvedTheme(resolvedConfig?.theme ?? "auto");
   const accentStyle = useAccentStyle(resolvedConfig?.accentColor);
   const resolvedLogo = logo ?? resolvedConfig?.logo;
+  const resolvedLocale = (0, import_react29.useMemo)(() => normalizeLocale(resolvedConfig?.locale), [resolvedConfig?.locale]);
   const strings = (0, import_react29.useMemo)(
-    () => resolveChatStrings(resolvedConfig?.locale, resolvedConfig?.strings),
-    [resolvedConfig?.locale, resolvedConfig?.strings]
+    () => resolveChatStrings(resolvedLocale, resolvedConfig?.strings),
+    [resolvedLocale, resolvedConfig?.strings]
   );
   const headerConfig = (0, import_react29.useMemo)(
     () => {
@@ -9409,7 +9404,7 @@ var SanqianChat = (0, import_react29.memo)(function SanqianChat2({
                   isResourceAttached: resourcePicker.isResourceAttached,
                   pickerError: resourcePicker.error,
                   disabled: !!chat.pendingInterrupt || chat.isLoading,
-                  locale: resolvedConfig?.locale
+                  locale: resolvedLocale
                 }
               ) : void 0
             }
@@ -9808,7 +9803,10 @@ var FloatingChat = (0, import_react35.memo)(function FloatingChat2({
     minWidth: "100vw"
   }), [accentStyle]);
   const resolvedLogo = logo ?? resolvedConfig?.logo;
-  const resolvedLocale = resolvedConfig?.locale ?? locale;
+  const resolvedLocale = (0, import_react35.useMemo)(
+    () => normalizeLocale(resolvedConfig?.locale ?? locale),
+    [resolvedConfig?.locale, locale]
+  );
   const resolvedStrings = (0, import_react35.useMemo)(
     () => resolveChatStrings(resolvedLocale, resolvedConfig?.strings),
     [resolvedLocale, resolvedConfig?.strings]
@@ -10452,9 +10450,10 @@ var CompactChat = (0, import_react38.memo)(function CompactChat2({
   const { themeClass, isDarkMode: resolvedIsDarkMode } = useResolvedTheme(themeMode);
   const accentStyle = useAccentStyle(resolvedConfig?.accentColor);
   const resolvedLogo = logo ?? resolvedConfig?.logo;
+  const resolvedLocale = (0, import_react38.useMemo)(() => normalizeLocale(resolvedConfig?.locale), [resolvedConfig?.locale]);
   const baseStrings = (0, import_react38.useMemo)(
-    () => resolveChatStrings(resolvedConfig?.locale, resolvedConfig?.strings),
-    [resolvedConfig?.locale, resolvedConfig?.strings]
+    () => resolveChatStrings(resolvedLocale, resolvedConfig?.strings),
+    [resolvedLocale, resolvedConfig?.strings]
   );
   const mergedStrings = (0, import_react38.useMemo)(() => ({ ...baseStrings, ...strings }), [baseStrings, strings]);
   const headerConfig = (0, import_react38.useMemo)(
@@ -10784,7 +10783,7 @@ var CompactChat = (0, import_react38.memo)(function CompactChat2({
             ] }) }),
             /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-1" }),
             /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-0.5", style: { WebkitAppRegion: "no-drag" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PanelHeaderButtons, { locale: resolvedConfig?.locale }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PanelHeaderButtons, { locale: resolvedLocale }),
               /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "chat-tooltip-wrapper", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   "button",
@@ -10910,7 +10909,7 @@ var CompactChat = (0, import_react38.memo)(function CompactChat2({
               isResourceAttached: resourcePicker.isResourceAttached,
               pickerError: resourcePicker.error,
               disabled: disableInput,
-              locale: resolvedConfig?.locale === "zh" ? "zh" : "en",
+              locale: resolvedLocale,
               themeClass
             }
           ) : null;