@yushaw/sanqian-chat 0.2.3 → 0.2.6

package/dist/renderer/index.js

@@ -31,16 +31,23 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var renderer_exports = {};
 __export(renderer_exports, {
   AlertBanner: () => AlertBanner,
+  AttachButton: () => AttachButton,
   ChatInput: () => ChatInput,
   CompactChat: () => CompactChat,
   FloatingChat: () => FloatingChat,
   HistoryList: () => HistoryList,
+  HistoryModal: () => HistoryModal,
   HitlCard: () => HitlCard,
   I18nProvider: () => I18nProvider,
   IntermediateSteps: () => IntermediateSteps,
   MarkdownRenderer: () => MarkdownRenderer,
   MessageBubble: () => MessageBubble,
   MessageList: () => MessageList,
+  ModeToggleButton: () => ModeToggleButton,
+  PanelControls: () => PanelControls,
+  PanelHeaderButtons: () => PanelHeaderButtons,
+  PanelResizer: () => PanelResizer,
+  Resizer: () => Resizer,
   SanqianChat: () => SanqianChat,
   SanqianChatMessage: () => SanqianChatMessage,
   SanqianMessageList: () => SanqianMessageList,
@@ -56,7 +63,9 @@ __export(renderer_exports, {
   ensureFullChatStyles: () => ensureFullChatStyles,
   getTranslations: () => getTranslations,
   resolveChatStrings: () => resolveChatStrings,
+  useAttachState: () => useAttachState,
   useChat: () => useChat,
+  useChatPanel: () => useChatPanel,
   useChatStyles: () => useChatStyles,
   useConnection: () => useConnection,
   useConversations: () => useConversations,
@@ -933,7 +942,14 @@ var CHAT_UI_STRINGS = {
     hitlApprovalRequest: "Approval Request",
     hitlInputRequest: "Input Request",
     hitlApprovalRequired: "Approval Required",
-    hitlInputRequired: "Input Required"
+    hitlInputRequired: "Input Required",
+    // ChatPanel strings
+    attachWindow: "Dock",
+    detachWindow: "Undock",
+    floatWindow: "Float",
+    embedWindow: "Embed",
+    collapseSidebar: "Collapse",
+    history: "History"
   },
   zh: {
     inputPlaceholder: "\u8F93\u5165\u6D88\u606F...",
@@ -983,7 +999,14 @@ var CHAT_UI_STRINGS = {
     hitlApprovalRequest: "\u9700\u8981\u5BA1\u6279",
     hitlInputRequest: "\u9700\u8981\u8F93\u5165",
     hitlApprovalRequired: "\u9700\u8981\u5BA1\u6279",
-    hitlInputRequired: "\u9700\u8981\u8F93\u5165"
+    hitlInputRequired: "\u9700\u8981\u8F93\u5165",
+    // ChatPanel strings
+    attachWindow: "\u5438\u9644",
+    detachWindow: "\u5206\u79BB",
+    floatWindow: "\u6D6E\u52A8",
+    embedWindow: "\u5D4C\u5165",
+    collapseSidebar: "\u6536\u8D77",
+    history: "\u5386\u53F2"
   }
 };
 function resolveChatStrings(locale = "en", overrides) {
@@ -1027,6 +1050,12 @@ var toTranslations = (flat) => ({
     untitled: flat.conversationUntitled,
     delete: flat.delete,
     deleteConfirm: flat.conversationDeleteConfirm
+  },
+  panel: {
+    attachWindow: flat.attachWindow,
+    detachWindow: flat.detachWindow,
+    floatWindow: flat.floatWindow,
+    embedWindow: flat.embedWindow
   }
 });
 var I18nContext = (0, import_react3.createContext)(null);
@@ -1064,7 +1093,8 @@ function I18nProvider({
       input: { ...base.input, ...custom.input },
       message: { ...base.message, ...custom.message },
       connection: { ...base.connection, ...custom.connection },
-      conversation: { ...base.conversation, ...custom.conversation }
+      conversation: { ...base.conversation, ...custom.conversation },
+      panel: { ...base.panel, ...custom.panel }
     };
   }, [locale, customTranslations]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(I18nContext.Provider, { value: { locale, setLocale, t }, children });
@@ -1500,6 +1530,43 @@ code {
   animation: chat-fade-in 0.2s ease-out;
 }
 
+/* Modal animations */
+@keyframes chat-modal-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes chat-modal-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes chat-modal-slide-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes chat-modal-slide-out {
+  from { opacity: 1; transform: scale(1); }
+  to { opacity: 0; transform: scale(0.95); }
+}
+
+.chat-modal-backdrop {
+  animation: chat-modal-fade-in 0.15s ease-out forwards;
+}
+
+.chat-modal-backdrop.chat-modal-closing {
+  animation: chat-modal-fade-out 0.12s ease-in forwards;
+}
+
+.chat-modal-content {
+  animation: chat-modal-slide-in 0.15s ease-out forwards;
+}
+
+.chat-modal-content.chat-modal-closing {
+  animation: chat-modal-slide-out 0.12s ease-in forwards;
+}
+
 /* ========================================
    Prose Overrides
    ======================================== */
@@ -5041,6 +5108,136 @@ function useResolvedUiConfig(config) {
   }, [ipcConfig, config]);
 }
 
+// src/renderer/hooks/useChatPanel.ts
+var import_react10 = require("react");
+var getChatPanelApi = () => {
+  return window.chatPanel;
+};
+function useChatPanel() {
+  const [mode, setModeState] = (0, import_react10.useState)("embedded");
+  const [visible, setVisible] = (0, import_react10.useState)(false);
+  const [width, setWidthState] = (0, import_react10.useState)(360);
+  (0, import_react10.useEffect)(() => {
+    const api = getChatPanelApi();
+    if (!api) {
+      console.warn("[useChatPanel] chatPanel API not available");
+      return;
+    }
+    api.getMode?.().then(setModeState).catch(() => {
+    });
+    api.isVisible?.().then(setVisible).catch(() => {
+    });
+    api.getWidth?.().then(setWidthState).catch(() => {
+    });
+    const unsubMode = api.onModeChanged?.(setModeState);
+    const unsubVisible = api.onVisibilityChanged?.(setVisible);
+    return () => {
+      unsubMode?.();
+      unsubVisible?.();
+    };
+  }, []);
+  const setMode = (0, import_react10.useCallback)(async (newMode) => {
+    const api = getChatPanelApi();
+    if (!api?.setMode) return;
+    await api.setMode(newMode);
+    setModeState(newMode);
+  }, []);
+  const toggleMode = (0, import_react10.useCallback)(async () => {
+    const api = getChatPanelApi();
+    if (!api?.toggleMode) return mode;
+    const newMode = await api.toggleMode();
+    setModeState(newMode);
+    return newMode;
+  }, [mode]);
+  const show = (0, import_react10.useCallback)(async () => {
+    const api = getChatPanelApi();
+    if (!api?.show) return;
+    await api.show();
+    setVisible(true);
+  }, []);
+  const hide = (0, import_react10.useCallback)(async () => {
+    const api = getChatPanelApi();
+    if (!api?.hide) return;
+    await api.hide();
+    setVisible(false);
+  }, []);
+  const toggle = (0, import_react10.useCallback)(async () => {
+    const api = getChatPanelApi();
+    if (!api?.toggle) return;
+    await api.toggle();
+    setVisible((v) => !v);
+  }, []);
+  const setWidth = (0, import_react10.useCallback)(async (newWidth, animate) => {
+    const api = getChatPanelApi();
+    if (!api?.setWidth) return;
+    await api.setWidth(newWidth, animate);
+    setWidthState(newWidth);
+  }, []);
+  const onResizeEnd = (0, import_react10.useCallback)(async () => {
+    const api = getChatPanelApi();
+    if (!api?.onResizeEnd) return;
+    await api.onResizeEnd();
+  }, []);
+  return {
+    mode,
+    visible,
+    width,
+    isEmbedded: mode === "embedded",
+    isFloating: mode === "floating",
+    setMode,
+    toggleMode,
+    show,
+    hide,
+    toggle,
+    setWidth,
+    onResizeEnd
+  };
+}
+
+// src/renderer/hooks/useAttachState.ts
+var import_react11 = require("react");
+var getChatPanelApi2 = () => {
+  return window.chatPanel;
+};
+function useAttachState() {
+  const [state, setState] = (0, import_react11.useState)("unavailable");
+  const [isLoading, setIsLoading] = (0, import_react11.useState)(true);
+  (0, import_react11.useEffect)(() => {
+    const api = getChatPanelApi2();
+    if (!api) {
+      setIsLoading(false);
+      return;
+    }
+    api.getAttachState?.().then((result) => {
+      if (result.success) {
+        setState(result.data);
+      }
+    }).catch(() => {
+    }).finally(() => setIsLoading(false));
+    const unsubscribe = api.onAttachStateChanged?.(setState);
+    return () => {
+      unsubscribe?.();
+    };
+  }, []);
+  const toggle = (0, import_react11.useCallback)(async () => {
+    const api = getChatPanelApi2();
+    if (!api?.toggleAttach) return state;
+    const result = await api.toggleAttach();
+    if (result.success) {
+      setState(result.data);
+      return result.data;
+    }
+    return state;
+  }, [state]);
+  return {
+    state,
+    isAttached: state === "attached",
+    isAvailable: state !== "unavailable",
+    isLoading,
+    toggle
+  };
+}
+
 // src/core/history.ts
 function safeParseArgs(value) {
   if (!value) return void 0;
@@ -5800,38 +5997,38 @@ function createSdkAdapter(config) {
 var import_browser = require("@yushaw/sanqian-sdk/browser");
 
 // src/renderer/components/MessageList.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var SCROLL_THRESHOLD = 100;
-var MessageList = (0, import_react10.memo)(function MessageList2({
+var MessageList = (0, import_react12.memo)(function MessageList2({
   messages,
   className = "",
   renderMessage,
   autoScroll = true,
   scrollBehavior = "smooth"
 }) {
-  const containerRef = (0, import_react10.useRef)(null);
-  const isNearBottomRef = (0, import_react10.useRef)(true);
-  const checkIfNearBottom = (0, import_react10.useCallback)(() => {
+  const containerRef = (0, import_react12.useRef)(null);
+  const isNearBottomRef = (0, import_react12.useRef)(true);
+  const checkIfNearBottom = (0, import_react12.useCallback)(() => {
     const container = containerRef.current;
     if (!container) return true;
     return container.scrollTop <= SCROLL_THRESHOLD;
   }, []);
-  const handleScroll = (0, import_react10.useCallback)(() => {
+  const handleScroll = (0, import_react12.useCallback)(() => {
     isNearBottomRef.current = checkIfNearBottom();
   }, [checkIfNearBottom]);
-  const scrollToBottom = (0, import_react10.useCallback)(
+  const scrollToBottom = (0, import_react12.useCallback)(
     (behavior = scrollBehavior) => {
       containerRef.current?.scrollTo({ top: 0, behavior });
     },
     [scrollBehavior]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (autoScroll && isNearBottomRef.current) {
       scrollToBottom();
     }
   }, [messages, autoScroll, scrollToBottom]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     scrollToBottom("instant");
     isNearBottomRef.current = true;
   }, [scrollToBottom]);
@@ -5849,9 +6046,9 @@ var MessageList = (0, import_react10.memo)(function MessageList2({
 });
 
 // src/renderer/components/MessageBubble.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var MessageBubble = (0, import_react11.memo)(function MessageBubble2({
+var MessageBubble = (0, import_react13.memo)(function MessageBubble2({
   message,
   className = "",
   children,
@@ -5868,20 +6065,20 @@ var MessageBubble = (0, import_react11.memo)(function MessageBubble2({
 });
 
 // src/renderer/components/SanqianChat.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 
 // src/renderer/utils/chatConfig.ts
-var import_react12 = require("react");
+var import_react14 = require("react");
 var getSystemTheme = () => {
   if (typeof window === "undefined") return "light";
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 };
 function useResolvedTheme(mode = "auto") {
-  const [resolvedTheme, setResolvedTheme] = (0, import_react12.useState)(() => {
+  const [resolvedTheme, setResolvedTheme] = (0, import_react14.useState)(() => {
     if (mode === "auto") return getSystemTheme();
     return mode === "dark" ? "dark" : "light";
   });
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (mode !== "auto") {
       setResolvedTheme(mode === "dark" ? "dark" : "light");
       return;
@@ -5943,7 +6140,7 @@ function getBaseColors(isDark) {
   };
 }
 function useAccentStyle(accentColor) {
-  return (0, import_react12.useMemo)(() => {
+  return (0, import_react14.useMemo)(() => {
     if (!accentColor) return void 0;
     const rgb = parseColorToRgb(accentColor);
     if (!rgb) {
@@ -5985,7 +6182,7 @@ function resolveOnPin(onPin) {
 }
 
 // src/renderer/utils/useChatHeader.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 
 // src/renderer/assets/sanqianLogo.ts
 var SANQIAN_LOGO_DATA_URI = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MTUuODcgNDI4LjIiPgogIDxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+CiAgICA8ZyBpZD0iQzhvaUxXIj4KICAgICAgPGc+CiAgICAgICAgPHBhdGggZD0iTTQwNC45LDE1OC4wM2wxLjk4LTEuMDFjLS4zMSw2LjM1LDEuMDQsMTIuNTYsMS43NCwxOC44Mi41Myw0LjcyLDEuNjIsOC41NywxLjI2LDE0LjY4LTEuMDcsMTguNDEtNy4wOCwzNS45Ni0xMS45OCw1My41bDcuOTUtMTYuNTRjMy43MS0xMi4wOCw2Ljc4LTI0LjI0LDguMDUtMzYuODdsMS45Ny0uMWMtMS43MSw0LjkxLTEuNDQsMTAuNjYtMi4yNiwxNS43NC00LjY3LDI5LjA1LTE3LjgzLDU4LjI3LTM1LjMxLDgxLjY5LTguNzYsMTEuNzMtMTkuNzgsMjEuMzUtMjguNDQsMzIuNTYtMi45OSwzLjg4LTEyLjM4LDcuOTktMTYuMjMsMTAuNTUtMi4wOCwxLjM4LTQuOTQsNS44Ny02LjQ4LDcuMDEtNiw0LjQ1LTE3LjE5LDUuNDMtMjIuMjYsMTEuNDcsMS4xLDEuMTksMy42OS0uNTQsNC45NS0xLjA1LDE1LjQ0LTYuMiwyOC45NC0xMy45Niw0Mi42MS0yMy40LDQuNjMsMS4wNi0uODQsMi4zMS0xLjg5LDMuMDgtNDEuOTYsMzAuNTUtOTAuNDYsNDYuMy0xNDEuOTQsMjcuNjQtMTkuMzEtNy0yNi4yMS0xOC45Ny00MC41NS0yNi40NS0xMy4xLTYuODMtMTUuOTktMTEuNTctMjUuMTgtMjIuNTQtMi45My0zLjUtMTAuNzEtMTEuNDctMTIuNDItMTQuODYtLjU2LTEuMTEtNi4yLTIwLjQ4LTYuMjEtMjEuNi0uMDQtNC4zNSwzLjE0LTkuOTcsMy42My0xNC44NC44LTcuOTMtMi45Ny0xOC45MSwzLTI0LjQ5LjY3LDMuMTQuNzgsNi41NSwxLjkxLDkuNjEuNTEsMS4zNy0uMzYsMS43LDIuMDksMS40LDEuOTQtNC4yNi0uMzYtOS45OS4xNy0xMy4yNSwxLjIxLTcuNDcsOC4zLTIxLjg0LDEzLjMzLTI3Ljc2LDUuMzUtNi4yOSwxNC4xMy0xNC4wOSwyMi41MS0xNC40OWwtMTAsOS40OSw2Ljk5LTEuNWMtMy4wNCw0LjgxLTcuNDUsOC43My0xMC40MSwxMy41OS01LjA2LDguMjktNS44NiwxNy44MS02LjU5LDI3LjQzbDQuMDIsMTkuNDljMi4wOC0uOTQuNTUtNS4wNSwxLjItNy4yOS4yNC0uODMsMi4yNi0zLjA5LDIuNzgtMi43LDMuMiwxNC4wNiwxMC40NSwyNC41NSwyMC40MiwzNC42MSwyNS4xLDI1LjM1LDY0LjA0LDMyLjc4LDk3LjI3LDE5LjU2LDguMDMtMy4xOSwxNS43LTguOTYsMjMuMzItMTIuMTdsLTIsMi45OGgxLjQ5YzE3LjE1LTEyLjY2LDMzLjYzLTI3LjExLDQyLjUzLTQ2Ljk5bDIsLjUxLS4wMyw1LjQ4LDguMy0xNi4yLDkuNy0yNy43OWMuNDUsNy41OS0yLjYxLDE0LjY3LTQuNDQsMjEuODYtLjkyLDMuNjItLjQ1LDUuNzgtMi4zOSwxMC44LTYuNTksMTcuMDgtMTkuMTgsMzMuMzEtMzIuMTYsNDUuODVsMy45OC0uNTFjLS4wMy40Ny4xNywxLjA1LDAsMS40OS0xLjg3LDQuNzItMjQuMzMsMjAuMTQtMjkuNzEsMjMuMy0xMC4zMSw2LjA1LTIxLjY3LDExLjEtMzMuMjcsMTQuMjMtLjE2LDEuODUsMy4yNi45OCw0LjM3Ljg2LDM2LjgtNC4wMiw3NS4yOC0yOS43NCw5NS40NS02MC41NSwxMS40MS0xNy40MywxNi42Ni0zMy4yNCwyMS44Ny01My4xMy44OC0zLjM2LDMuMzUtNi4wOSwyLjMyLTEwLjE5LDEuNjctLjI2LDEuMDcsMi40MSwxLjA0LDMuNTMtLjA5LDIuODUtLjkyLDUuMjMtMS4wOSw3LjkzLS4wNywxLjA4LS42NCwzLjc5LDEuMDMsMy41Mmw0Ljk2LTE5LjU0YzEuNTYtMTcuMzEsMy41NC0zMi4yOS43NS00OS42Ni0xLjAxLTYuMy00LjA2LTEzLjMyLTQuNzItMTkuMy0uMjQtMi4xNy40LTIuNjQsMS4yNS0uMjQuNzcsMi4xNywxLjE5LDQuNTIsMS43Nyw2Ljc1LDEuNzEuMjcsMS4wNy0yLjQuOTEtMy40LS42LTMuNTctMy4xLTEwLjk4LTQuNDQtMTQuNTctMy43OS0xMC4yMS0xMC4zMS0xOS42My0xMy40Ny0zMC4wMSwxLjU0Ljk1LDMuMTksMy43MSw0LjE5LDUuMywxMy4xMywyMC45OCwyMC42OSw0NC4zMiwyNC44Miw2OC43WiIvPgogICAgICAgIDxnPgogICAgICAgICAgPHBhdGggZD0iTTIyMC44OSw0MDYuMDJjLS4yNiwxLjMzLDEuODMsMS42LDIuNzQsMS43NSwzMi4xLDUuMjksNTguMjgsMS41MSw4OC4yNC0xMS4yNmwyOS4wMS0xNS40OGMtNC43Nyw1LjEyLTEyLjEyLDkuNjQtMTguMzMsMTMuMTYtNy4wNCwzLjk5LTE5LjI3LDcuNzItMjQuNjgsMTEuMzItLjQxLjI3LTEuMzIsMS4yNC0uOTksMS41aDUuOTljLTYuNjcsMS40Ny0xMy40OCw0LjgzLTE5Ljk3LDYuNTQtNS4xMywxLjM1LTE3LjY2LDIuMzctMjEuMDQsMy45Ni0uNDYuMjEtMS4yNiwxLjMtLjk4LDEuNTFsNC45OSwxYy0yOC4zLDUuNTktNTcuMTQtLjQ4LTg0LjQ4LTguMDEtMS42LDEuMDUuNzUsMS4xOCwxLjQ1LDEuNTMsMTMuMzMsNi42OSwyOS4yMiwxMC4wNyw0NC4wNCwxMS40OWwtMS4wMSwxLjk4LDUsLjAyYy4yNSwxLjcyLTIuMzcsMS4wNi0zLjQ4Ljk4LTMxLjc4LTIuNDEtNjcuMzktMTYuNTMtOTMuNDMtMzQuNTgtMTcuNDYtMTIuMS0zMS4xNS0yNy4wMy00NS41NC00MS40NWwtMjAuNTMtMzEuOTYtMSwzLjk5Yy0uMTItLjcxLTEuOTktOS4yNC00LjAxLTYuOTguNjksMi43NSwyLjYzLDUuNDQsMy41NCw3Ljk1LjM0Ljk0LDEuMzIsMy4yNS0uNTMsMy4wMy0xMC42OC0yMS44NS0xNy44My00NS45NS0xOS4wNS03MC40NS0uNDItOC40OSwzLjMtNDEuNCw4LjE2LTQ3LjQyLjE3LS4yMSwzLjA2LDEuMTgsMy44Ny0yLjY1bC0xLjk4LS40N2MtLjg1LTUuMDQsMy42NC02LjUyLDUuNjYtOS44MnM5LjM3LTE2LjcsMTAuMzEtMTkuNzFjLjE2LS41MS4yNy0xLjYzLS40OC0xLjQ4LTIuNzUsMi4xOC0zLjgzLDUuNTktNS42Niw4LjM0LS42OCwxLjAyLTIuMDIsMy4xMi0xLjgzLjE4LDExLjc1LTI0LjQ3LDI4LjEzLTQyLjQxLDUwLjY1LTU3LjM1LDUuOTYtMy45NSwxMi44Mi02LjUsMTguMzMtMTEuMTYtOS43My41LTIyLjE4LDQuMzItMzAuOTksOC41LTMuMywxLjU3LTguNTIsNi4wOC0xMS4wNyw2Ljk2LTEuNjQuNTctMy4wOC0uNi01LjIxLjUtMS44LjkzLTEwLjY0LDguNi0xMi43NCwxMC41MS0yNC43OSwyMi41Ni00MS4yNiw1Ny41MS00Niw5MC41MS0xLjYxLjA1LTIuMDUtMy41My0yLjA0LTQuNTMuMDUtNC4wOSwxLjMtMTAuMjksMi4wNS0xNC40NmwtMy44OS4xYy0yLjIsMTEuOTYtNS43OSwyMy41OC01LjEyLDM1Ljg4bC0yLTYuOTljLTEuNDctLjA5LTEuNzYsMy41OS0xLjg3LDQuNjEtMi40NywyMy44NSw2LjI4LDU4LjIxLDE1LjQsODAuMzYsMS4wMiwyLjQ5LDkuMTQsMTcuMjEsOC40OCwxOC4wMS0xLjU5LDEuOTItMi4xNC0xLjQ5LTIuNDctMS45OS0xMy4zNC0yMC4yMi0yMS42Mi00My4xLTI1LjU0LTY3LjAxbC0xLjk4LDEuMDFjLTIuMzYtMTUuMTEtNC45NS0yOS4wNy00LjA1LTQ0LjU0LjMyLTUuNDQsMi42Mi0xMC44NywyLjAzLTE2LjQ2bC0zLjk4LDE2LjUxYy0uOTUsMTAuMzEtLjU5LDIwLjY4LTEuMDEsMzEtLjA1LDEuMjEuNzYsMy43Mi0uOTksMy40OC0yLjAxLTE4LjI0LS41NC0zNi4zMSwzLjI4LTU0LjIsNS42OS0yNi42LDE4LjI4LTU0LjI3LDM2LjE5LTc0LjgxLDEyLjUzLTE0LjM3LDI4LjEyLTI3Ljk5LDQyLjg4LTM4LjY4LDIuMDktMS41MSw1LjA0LTMuOCw3LjMxLTUuMTMsOC4xLTQuNzIsMTcuODQtNS45OSwyNS4zMS0xMS42OC0uNTgtMS4xMS0zLjA2LS4zNi00LjA2LS4wNi00LjkzLDEuNDUtMTIuMTUsNC4wNy0xNi45Miw2LjA4LTUuOTIsMi41LTExLjU0LDUuNzEtMTcsOS4wNmwtMy4wMS0xLjU2YzcuMzEtMy4yNywxMy41My03LjI4LDIxLjAzLTEwLjQ4LDQxLjYzLTE3LjcyLDEwNS4zMi0yMCwxMzcuMzYsMTYuNTMsNy40NSw4LjQ5LDE5LjI1LDIyLjU4LDI1LjA1LDMwLjk5LDEuODgsMi43MiwyLjc5LDUuNzQsMS41NSw4Ljk0aDMuMDJjLS41OC45NC0uOTksNi41Ni0uOCw2Ljg0LjQ0LjY1LDIuOTcuNjQsMy4zOCwyLjY0LjI5LDEuNDMsMS40OSwxNC43LDEuNDMsMTUuOTUtLjAzLjYtMS44MS40Ny0yLjAxLDEuMjUtLjg0LDMuMjcuNDcsMTIuNTEtLjA3LDE2LjY4LS45NSw3LjM0LTYuMTksMTAuMTItOS44MywxNS4yNy0xLjI4LDEuODEtMS45OCw2LjU3LTQuMTUsNy44NC0xLjc3LDEuMDQtNC45NS42NC03LjE4LDEuNjEtMi4zNCwxLjAyLTMuNTEsNi42Ni03Ljc4LDQuOTNsMi45OS0xMWMtMy4zOSw0LjA2LTEzLjU2LDEwLjAzLTEwLjIxLjI4LDEuMzEtMy44MS44NC0zLjI4LDEuNTEtNi41NC44MS0zLjkyLDMuNzktMTIuOTIsMy43MS0xNi4xNi0uMDEtLjQyLTEuOTktLjk4LTIuNy0yLjM2LTQuMDItNy44Mi02LjM1LTE1LjE3LTEyLjY2LTIxLjg3LTExLjMtMTItNDIuMzMtMTguMi01Ny44OS0xNC4xLTE2Ljg4LDQuNDUtNDQuNjUsMjYuNDQtNTEuMyw0Mi43LTgsMTkuNTgtMTUuMTcsMzkuNjctMTIuMyw2MS4zOCw0LjA5LDMwLjg2LDE2LjE2LDUzLjYsMzMuNCw3OC42LDEuNTMsMi4yMiw0LjIxLDMuNTksNS40NCw2LjA1LTMuNzktMS4zNy03Ljc1LTUuOTQtMTAuNTEtOC45OC0xMC45My0xMS45OS0xOS44OS0yNi4yNS0yNi41LTQxLjAxLTMuMDMsMS40LDMuMjksNi43Mi0uOTcsNy45OWwtNy4wMy0xNy45OS0xLjk4LDEuOTljLS40Mi0yLjYtMS4wOC04LjIzLTQuMDItOC40OCw0LjMsMjguMjgsMTIuOTgsNTIuNjYsMzEuMDQsNzQuOTYsMjcuNDgsMzMuOTQsNzIuOTMsNjEuMzIsMTE3LjM1LDYyLjY1bDguNjIsMS44OGgtMjFaIi8+CiAgICAgICAgICA8cGF0aCBkPSJNMjg4LjQ4LDQxLjQzYzE3LDEzLjA0LDI2LjQ2LDI0LjkxLDM2LjU4LDQzLjkyLDE1Ljc5LDI5LjY4LDIyLjc5LDYyLjM3LDE1LjgyLDk1LjY3LTEuNjcuMjYtMS4wOS0yLjQzLTEuMDMtMy41My4yLTMuNDksMS42NC02Ljg3LDEuMDMtMTAuNDdsLTEuNTEuOThjLTIuOCwyMS43Mi0xMC41OSw0NS44NC0yMy4wNSw2My45NS01LjY4LDguMjYtOS44NSwxMC41NS0xNi45NSwxNi4wNS0yLjk1LDIuMjktNi4xOSw4LjE3LTkuNDgsNy41MiwxLjA3LTEuODMsNS44NS0zLjk1LDQuNDktNi41MWwtMTAuNDksNyw4Ljk5LTguNS0xLjQ4LS40OWMtMTguNjIsMTcuMTktNDguNjUsMjkuNDYtNzMuNTEsMTkuNDQtMS42LS42NS0yLjQ1LjEtMS45OS0yLjQ1LDEzLjc2LDYuMTcsMjcuODEsMi4wMyw0MC45Ny0zLjUyLDM2LjAyLTE1LjE5LDU3LjE2LTUzLjQ4LDU2LjkyLTkyLjA5LS4wMi0zLjE5LS41Mi0xMS43LTIuODktMTMuMzksMS44OSwxMC0uMywyMi40Ny0zLjMxLDMyLjIxLS4zMiwxLjA1LS4yNiwzLjAzLTEuNjksMi43OSw5Ljc1LTUxLjA4LTIwLjUyLTEwMC41NC02My43MS0xMjUuOC02LjQ1LTMuNzctMTQuMzUtNS42Ni0xOS41Ni0xMC40OWwtMTguNzQtNi43YzIuMDktLjA3LDQuMTgtLjE0LDYuMjYuMjMsMjAuOTcsMy43NywzOS44NCwxNC4zNiw1OC40NCwyMy41NSwxLjczLjg1LDMuNDUsMS44Myw1LjA0LDIuOSwyLjgyLDEuODgsOC42OSw5LjgxLDkuNzcsMTAuMy40My4yLDEuNjQuMjUsMS40OC0uNDktMzEuNzMtMzkuNzgtODMuNTMtNTguNjMtMTMzLjk5LTUzLjUybDcuOTktMi45OGMtMTguMjUuMjEtMzcuNDcsNC40MS01NC41MiwxMC45Ny0yLjg2LjI4LS44Ny0xLjI5LjE2LTEuODUsMS4yMS0uNjUsMTQuNzItNS4xMiwxMy4zNy02LjEyLTE2LjY3LDMuNjUtMzMuMTIsMTEuNy00Ny41MiwyMC45Ny05LjE1LDUuODktMTUuODIsMTIuMTMtMjMuOTcsMTkuMDItMS4xMi45NS0xLjYzLDIuNDItMy41LDEuOTksMy42My0zLjQyLDQuMzEtNy41Myw3LjgyLTEwLjksNS40Mi01LjIyLDE2LjA3LTEzLjEzLDIyLjQ0LTE3LjM5LDMyLjA3LTIxLjQ1LDY5LjEzLTMxLjM4LDEwNy43NC0zMC43MS0uNTMtMS41NS01LjAxLTEuNzktNi41MS0xLjk4LTMuOTEtLjQ5LTEyLjY5LjQ4LTE0LjgyLjAxLS43My0uMTYtLjYtMS45Mi0xLjMzLTIuMDYtMi45OC0uNTMtMTAuNzgsMS43LTE0LjMzLDEuMDItLjI0LTEuMzcsMS43OC0xLjUxLDIuNzUtMS43Miw2LjU5LTEuNDQsMTMuOTgtMS4xLDIwLjcyLTIuMzEsMS43Ny0uMzIsMi45OSwxLjEsMi41Mi0xLjk1bC0zOC45OSwzLjk4LDE2Ljk5LTQtNC45OS0xLjk4YzUyLjEyLTcuOTIsMTA0LjI4LDcuNzMsMTQ1LjU5LDM5LjRaIi8+CiAgICAgICAgICA8cGF0aCBkPSJNODAuODksMzQ2LjAxYy00LjUyLjUxLTMuNDQtMi45NC00LjEtMy44Ni0uMTItLjE2LTEuNDMuNTMtMS45MS4yNC0zLjE0LTEuODktMy4yMi02LjEzLTMuMDEtOS4zN2wtMS45OCwxLjk5LTIuMDItMy41MWMxLjk1LS44LDIuMjktMS4yMSwyLjAxLTMuNDhsMTAuOTksMTcuOThaIi8+CiAgICAgICAgPC9nPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=";
@@ -6028,11 +6225,11 @@ var resolveLogoNode = (logo, size, alt = SANQIAN_LOGO_ALT) => {
 
 // src/renderer/utils/useChatHeader.tsx
 var useChatHeader = (config) => {
-  const resolvedOnClose = (0, import_react13.useMemo)(() => resolveOnClose(config?.onClose), [config?.onClose]);
-  const resolvedOnPin = (0, import_react13.useMemo)(() => resolveOnPin(config?.onPin), [config?.onPin]);
-  const [isPinned, setIsPinned] = (0, import_react13.useState)(config?.alwaysOnTop ?? false);
-  const isFirstRender = (0, import_react13.useRef)(true);
-  (0, import_react13.useEffect)(() => {
+  const resolvedOnClose = (0, import_react15.useMemo)(() => resolveOnClose(config?.onClose), [config?.onClose]);
+  const resolvedOnPin = (0, import_react15.useMemo)(() => resolveOnPin(config?.onPin), [config?.onPin]);
+  const [isPinned, setIsPinned] = (0, import_react15.useState)(config?.alwaysOnTop ?? false);
+  const isFirstRender = (0, import_react15.useRef)(true);
+  (0, import_react15.useEffect)(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
@@ -6044,8 +6241,8 @@ var useChatHeader = (config) => {
   }, [config?.alwaysOnTop, resolvedOnPin]);
   const showPin = !!resolvedOnPin || typeof config?.alwaysOnTop === "boolean";
   const showClose = !!resolvedOnClose;
-  const logoNode = (0, import_react13.useMemo)(() => resolveLogoNode(config?.logo, "header"), [config?.logo]);
-  const togglePin = (0, import_react13.useCallback)(() => {
+  const logoNode = (0, import_react15.useMemo)(() => resolveLogoNode(config?.logo, "header"), [config?.logo]);
+  const togglePin = (0, import_react15.useCallback)(() => {
     setIsPinned((prev) => {
       const nextPinned = !prev;
       resolvedOnPin?.(nextPinned);
@@ -6063,27 +6260,27 @@ var useChatHeader = (config) => {
 };
 
 // src/renderer/components/SanqianMessageList.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 var import_react_virtuoso = require("react-virtuoso");
 
 // src/renderer/components/SanqianChatMessage.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 
 // src/renderer/renderers/MarkdownRenderer.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 var import_streamdown = require("streamdown");
 var import_rehype_harden = require("rehype-harden");
 var import_remark_gfm = __toESM(require("remark-gfm"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var PROSE_CLASSES = "prose prose-chat max-w-none";
-var MarkdownRenderer = (0, import_react14.memo)(function MarkdownRenderer2({
+var MarkdownRenderer = (0, import_react16.memo)(function MarkdownRenderer2({
   content,
   isStreaming = false,
   className = "",
   components,
   onLinkClick
 }) {
-  const rehypePlugins = (0, import_react14.useMemo)(() => {
+  const rehypePlugins = (0, import_react16.useMemo)(() => {
     const origin = typeof window !== "undefined" ? window.location.origin : "http://localhost";
     return [
       [import_rehype_harden.harden, {
@@ -6097,10 +6294,10 @@ var MarkdownRenderer = (0, import_react14.memo)(function MarkdownRenderer2({
       import_streamdown.defaultRehypePlugins.katex
     ];
   }, []);
-  const remarkPlugins = (0, import_react14.useMemo)(() => {
+  const remarkPlugins = (0, import_react16.useMemo)(() => {
     return [import_remark_gfm.default];
   }, []);
-  const customComponents = (0, import_react14.useMemo)(() => {
+  const customComponents = (0, import_react16.useMemo)(() => {
     const comps = {};
     comps.p = ({ children }) => {
       if (isStreaming && children && typeof children === "string" && children.endsWith("\u258C")) {
@@ -6157,10 +6354,10 @@ var MarkdownRenderer = (0, import_react14.memo)(function MarkdownRenderer2({
 });
 
 // src/renderer/components/IntermediateSteps.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 
 // src/renderer/renderers/ToolArgumentsDisplay.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function formatValue(value, indent = 0) {
   const indentStr = "  ".repeat(indent);
@@ -6220,7 +6417,7 @@ function formatValue(value, indent = 0) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[var(--chat-text)]", children: String(value) });
 }
-var ToolArgumentsDisplay = (0, import_react15.memo)(function ToolArgumentsDisplay2({
+var ToolArgumentsDisplay = (0, import_react17.memo)(function ToolArgumentsDisplay2({
   args,
   className = ""
 }) {
@@ -6286,7 +6483,7 @@ function ExpandableText({
   style,
   maxLines = 3
 }) {
-  const [isExpanded, setIsExpanded] = (0, import_react16.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react18.useState)(false);
   const trimmed = content.trim();
   const lines = trimmed.split("\n");
   const needsExpand = lines.length > maxLines;
@@ -6307,7 +6504,7 @@ function ExpandableText({
   );
 }
 function ToolCallItem({ toolCall, toolResult }) {
-  const [expanded, setExpanded] = (0, import_react16.useState)(false);
+  const [expanded, setExpanded] = (0, import_react18.useState)(false);
   const hasArgs = toolCall.toolArgs && Object.keys(toolCall.toolArgs).length > 0;
   const rawName = cleanToolName(toolCall.toolName);
   const displayName = rawName && !/^[{\[]/.test(rawName.trim()) ? rawName : toolCall.toolCallId || "tool";
@@ -6345,7 +6542,7 @@ function StreamingToolCallItem({
   isActive,
   strings
 }) {
-  const [expanded, setExpanded] = (0, import_react16.useState)(false);
+  const [expanded, setExpanded] = (0, import_react18.useState)(false);
   const hasArgs = toolCall.toolArgs && Object.keys(toolCall.toolArgs).length > 0;
   const rawName = cleanToolName(toolCall.toolName);
   const displayName = rawName && !/^[{\[]/.test(rawName.trim()) ? rawName : toolCall.toolCallId || "tool";
@@ -6413,7 +6610,7 @@ function groupBlocksImpl(blocks) {
   }
   return rounds;
 }
-var ThinkingSection = (0, import_react16.memo)(function ThinkingSection2({
+var ThinkingSection = (0, import_react18.memo)(function ThinkingSection2({
   thinking,
   currentThinking,
   isStreaming,
@@ -6422,16 +6619,16 @@ var ThinkingSection = (0, import_react16.memo)(function ThinkingSection2({
   className = "",
   strings = {}
 }) {
-  const contentRef = (0, import_react16.useRef)(null);
-  const isUserScrollingRef = (0, import_react16.useRef)(false);
-  const [loadingSymbolIndex, setLoadingSymbolIndex] = (0, import_react16.useState)(0);
-  const [manualExpanded, setManualExpanded] = (0, import_react16.useState)(false);
+  const contentRef = (0, import_react18.useRef)(null);
+  const isUserScrollingRef = (0, import_react18.useRef)(false);
+  const [loadingSymbolIndex, setLoadingSymbolIndex] = (0, import_react18.useState)(0);
+  const [manualExpanded, setManualExpanded] = (0, import_react18.useState)(false);
   const effectiveIsStreaming = isComplete ? false : isStreaming;
   const effectiveIsPaused = isComplete ? false : isPaused;
   const isExpanded = effectiveIsStreaming || effectiveIsPaused || manualExpanded;
   const displayContent = effectiveIsStreaming || effectiveIsPaused ? currentThinking || thinking : thinking;
   const hasContent = displayContent && displayContent.split("\n").filter((line) => line.trim() && !line.trim().match(/^─+$/)).length > 0;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (effectiveIsStreaming) {
       const interval = setInterval(() => {
         setLoadingSymbolIndex((prev) => (prev + 1) % LOADING_SYMBOLS.length);
@@ -6439,13 +6636,13 @@ var ThinkingSection = (0, import_react16.memo)(function ThinkingSection2({
       return () => clearInterval(interval);
     }
   }, [effectiveIsStreaming]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (effectiveIsStreaming && isExpanded && contentRef.current && !isUserScrollingRef.current) {
       contentRef.current.scrollTop = contentRef.current.scrollHeight;
     }
   }, [displayContent, effectiveIsStreaming, isExpanded]);
-  const prevManualExpandedRef = (0, import_react16.useRef)(manualExpanded);
-  (0, import_react16.useEffect)(() => {
+  const prevManualExpandedRef = (0, import_react18.useRef)(manualExpanded);
+  (0, import_react18.useEffect)(() => {
     const wasCollapsed = !prevManualExpandedRef.current;
     const isNowExpanded = manualExpanded;
     if (wasCollapsed && isNowExpanded && !effectiveIsStreaming && contentRef.current) {
@@ -6453,13 +6650,13 @@ var ThinkingSection = (0, import_react16.memo)(function ThinkingSection2({
     }
     prevManualExpandedRef.current = manualExpanded;
   }, [manualExpanded, effectiveIsStreaming]);
-  const handleScroll = (0, import_react16.useCallback)(() => {
+  const handleScroll = (0, import_react18.useCallback)(() => {
     if (!contentRef.current || !effectiveIsStreaming) return;
     const { scrollTop, scrollHeight, clientHeight } = contentRef.current;
     const isAtBottom = scrollHeight - scrollTop - clientHeight < 20;
     isUserScrollingRef.current = !isAtBottom;
   }, [effectiveIsStreaming]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!effectiveIsStreaming) {
       isUserScrollingRef.current = false;
     }
@@ -6498,14 +6695,14 @@ var ThinkingSection = (0, import_react16.memo)(function ThinkingSection2({
     isExpanded && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: contentRef, onScroll: handleScroll, className: "mt-1.5 ml-2 max-h-60 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { className: "whitespace-pre-wrap m-0 font-sans italic", style: { color: "var(--chat-text)", opacity: 0.7, fontSize: "0.8125rem", lineHeight: "1.3" }, children: displayContent?.trim() }) })
   ] });
 });
-var IntermediateSteps = (0, import_react16.memo)(function IntermediateSteps2({
+var IntermediateSteps = (0, import_react18.memo)(function IntermediateSteps2({
   blocks,
   className = "",
   defaultExpanded = false,
   strings = {}
 }) {
-  const [isExpanded, setIsExpanded] = (0, import_react16.useState)(defaultExpanded);
-  const rounds = (0, import_react16.useMemo)(() => groupBlocksIntoRounds(blocks), [blocks]);
+  const [isExpanded, setIsExpanded] = (0, import_react18.useState)(defaultExpanded);
+  const rounds = (0, import_react18.useMemo)(() => groupBlocksIntoRounds(blocks), [blocks]);
   if (rounds.length === 0) return null;
   const stepCount = rounds.filter((round) => round.toolCalls.length > 0).length;
   if (stepCount === 0) return null;
@@ -6587,7 +6784,7 @@ var IntermediateSteps = (0, import_react16.memo)(function IntermediateSteps2({
     }) })
   ] });
 });
-var StreamingTimeline = (0, import_react16.memo)(function StreamingTimeline2({
+var StreamingTimeline = (0, import_react18.memo)(function StreamingTimeline2({
   blocks,
   currentThinking = "",
   isThinkingStreaming = false,
@@ -6596,14 +6793,14 @@ var StreamingTimeline = (0, import_react16.memo)(function StreamingTimeline2({
   className = "",
   strings = {}
 }) {
-  const [isExpanded, setIsExpanded] = (0, import_react16.useState)(true);
-  const isUserScrollingRef = (0, import_react16.useRef)(false);
-  const timelineRef = (0, import_react16.useRef)(null);
+  const [isExpanded, setIsExpanded] = (0, import_react18.useState)(true);
+  const isUserScrollingRef = (0, import_react18.useRef)(false);
+  const timelineRef = (0, import_react18.useRef)(null);
   const isThinkingActive = isThinkingStreaming;
   const isToolsActive = isToolCallsStreaming;
-  const rounds = (0, import_react16.useMemo)(() => groupAllBlocksIntoRounds(blocks), [blocks]);
+  const rounds = (0, import_react18.useMemo)(() => groupAllBlocksIntoRounds(blocks), [blocks]);
   const activeThinking = currentThinking;
-  const displayRounds = (0, import_react16.useMemo)(() => {
+  const displayRounds = (0, import_react18.useMemo)(() => {
     const result = [];
     for (let roundIdx = 0; roundIdx < rounds.length; roundIdx++) {
       const round = rounds[roundIdx];
@@ -6665,18 +6862,18 @@ var StreamingTimeline = (0, import_react16.memo)(function StreamingTimeline2({
   }, [rounds, activeThinking, isThinkingActive, isToolsActive]);
   const stepCount = rounds.filter((round) => round.toolCalls.length > 0).length;
   const summary = `${stepCount} ${strings.steps || "\u6B65"}`;
-  const handleScroll = (0, import_react16.useCallback)(() => {
+  const handleScroll = (0, import_react18.useCallback)(() => {
     if (!timelineRef.current) return;
     const { scrollTop, scrollHeight, clientHeight } = timelineRef.current;
     const isAtBottom = scrollHeight - scrollTop - clientHeight < 20;
     isUserScrollingRef.current = !isAtBottom;
   }, []);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (isExpanded && timelineRef.current && !isUserScrollingRef.current) {
       timelineRef.current.scrollTop = timelineRef.current.scrollHeight;
     }
   }, [displayRounds, isExpanded]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!isThinkingActive && !isToolsActive) {
       isUserScrollingRef.current = false;
     }
@@ -6764,7 +6961,7 @@ var StreamingTimeline = (0, import_react16.memo)(function StreamingTimeline2({
 
 // src/renderer/components/SanqianChatMessage.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var SanqianChatMessage = (0, import_react17.memo)(function SanqianChatMessage2({ message }) {
+var SanqianChatMessage = (0, import_react19.memo)(function SanqianChatMessage2({ message }) {
   if (message.role === "tool") return null;
   const isUser = message.role === "user";
   const hasToolCalls = (message.toolCalls?.length ?? 0) > 0;
@@ -6824,9 +7021,9 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 var AT_BOTTOM_THRESHOLD = 50;
 var INCREASE_VIEWPORT_BY = { top: 1500, bottom: 1500 };
 function ResizeAwareMessage({ message, onHeightChange }) {
-  const containerRef = (0, import_react18.useRef)(null);
-  const prevHeightRef = (0, import_react18.useRef)(0);
-  (0, import_react18.useEffect)(() => {
+  const containerRef = (0, import_react20.useRef)(null);
+  const prevHeightRef = (0, import_react20.useRef)(0);
+  (0, import_react20.useEffect)(() => {
     const container = containerRef.current;
     if (!container || !onHeightChange) return;
     let rafId = null;
@@ -6848,16 +7045,16 @@ function ResizeAwareMessage({ message, onHeightChange }) {
   }, [onHeightChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SanqianChatMessage, { message }) });
 }
-var SanqianMessageList = (0, import_react18.forwardRef)(
+var SanqianMessageList = (0, import_react20.forwardRef)(
   function SanqianMessageList2({ messages, isLoading, className = "", emptyState, onClickEmpty, onAtBottomChange }, ref) {
-    const virtuosoRef = (0, import_react18.useRef)(null);
-    const [, setAtBottomState] = (0, import_react18.useState)(true);
-    const atBottomRef = (0, import_react18.useRef)(true);
-    const isManualScrollingRef = (0, import_react18.useRef)(false);
-    const manualScrollTimeoutRef = (0, import_react18.useRef)(null);
-    const isFollowOutputScrollingRef = (0, import_react18.useRef)(false);
-    const followOutputScrollTimeoutRef = (0, import_react18.useRef)(null);
-    const setAtBottom = (0, import_react18.useCallback)(
+    const virtuosoRef = (0, import_react20.useRef)(null);
+    const [, setAtBottomState] = (0, import_react20.useState)(true);
+    const atBottomRef = (0, import_react20.useRef)(true);
+    const isManualScrollingRef = (0, import_react20.useRef)(false);
+    const manualScrollTimeoutRef = (0, import_react20.useRef)(null);
+    const isFollowOutputScrollingRef = (0, import_react20.useRef)(false);
+    const followOutputScrollTimeoutRef = (0, import_react20.useRef)(null);
+    const setAtBottom = (0, import_react20.useCallback)(
       (value) => {
         if (isManualScrollingRef.current) return;
         if (isFollowOutputScrollingRef.current && !value) return;
@@ -6867,18 +7064,18 @@ var SanqianMessageList = (0, import_react18.forwardRef)(
       },
       [onAtBottomChange]
     );
-    const visibleMessages = (0, import_react18.useMemo)(
+    const visibleMessages = (0, import_react20.useMemo)(
       () => messages.filter((message) => message.role !== "tool"),
       [messages]
     );
     const lastMessage = visibleMessages.length > 0 ? visibleMessages[visibleMessages.length - 1] : null;
     const hasStreamingActivity = isLoading || (lastMessage?.isStreaming ?? false);
-    const allItems = (0, import_react18.useMemo)(() => {
+    const allItems = (0, import_react20.useMemo)(() => {
       const items = [...visibleMessages];
       items.push({ id: "footer-spacer", type: "footer" });
       return items;
     }, [visibleMessages]);
-    const scrollToBottom = (0, import_react18.useCallback)(
+    const scrollToBottom = (0, import_react20.useCallback)(
       (behavior = "smooth", source) => {
         if (!virtuosoRef.current || allItems.length === 0) return;
         const isManualScroll = source === "scroll-button";
@@ -6904,14 +7101,14 @@ var SanqianMessageList = (0, import_react18.forwardRef)(
       },
       [allItems.length, onAtBottomChange]
     );
-    (0, import_react18.useImperativeHandle)(
+    (0, import_react20.useImperativeHandle)(
       ref,
       () => ({
         scrollToBottom
       }),
       [scrollToBottom]
     );
-    (0, import_react18.useEffect)(() => {
+    (0, import_react20.useEffect)(() => {
       return () => {
         if (manualScrollTimeoutRef.current) {
           clearTimeout(manualScrollTimeoutRef.current);
@@ -6921,13 +7118,13 @@ var SanqianMessageList = (0, import_react18.forwardRef)(
         }
       };
     }, []);
-    const handleMessageHeightChange = (0, import_react18.useCallback)(() => {
+    const handleMessageHeightChange = (0, import_react20.useCallback)(() => {
       if (isManualScrollingRef.current) return;
       if (atBottomRef.current && hasStreamingActivity) {
         scrollToBottom("auto", "height-change");
       }
     }, [scrollToBottom, hasStreamingActivity]);
-    const handleClick = (0, import_react18.useCallback)(
+    const handleClick = (0, import_react20.useCallback)(
       (e) => {
         const selection = window.getSelection();
         if (!selection || selection.isCollapsed) {
@@ -6938,7 +7135,7 @@ var SanqianMessageList = (0, import_react18.forwardRef)(
       },
       [onClickEmpty]
     );
-    const handleFollowOutput = (0, import_react18.useCallback)((isAtBottom) => {
+    const handleFollowOutput = (0, import_react20.useCallback)((isAtBottom) => {
       if (isAtBottom) {
         if (followOutputScrollTimeoutRef.current) {
           clearTimeout(followOutputScrollTimeoutRef.current);
@@ -6952,7 +7149,7 @@ var SanqianMessageList = (0, import_react18.forwardRef)(
       }
       return false;
     }, []);
-    const itemContent = (0, import_react18.useCallback)(
+    const itemContent = (0, import_react20.useCallback)(
       (_index, item) => {
         if ("type" in item && item.type === "footer") {
           return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-28" });
@@ -6986,10 +7183,10 @@ var SanqianMessageList = (0, import_react18.forwardRef)(
 );
 
 // src/renderer/components/ChatInput.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var ChatInput = (0, import_react19.memo)(
-  (0, import_react19.forwardRef)(function ChatInput2({
+var ChatInput = (0, import_react21.memo)(
+  (0, import_react21.forwardRef)(function ChatInput2({
     onSend,
     onStop,
     placeholder = "Type a message...",
@@ -7004,12 +7201,12 @@ var ChatInput = (0, import_react19.memo)(
     className = "",
     style
   }, ref) {
-    const [text, setText] = (0, import_react19.useState)("");
-    const textareaRef = (0, import_react19.useRef)(null);
+    const [text, setText] = (0, import_react21.useState)("");
+    const textareaRef = (0, import_react21.useRef)(null);
     const canSend = text.trim().length > 0 && !disabled && !isLoading;
     const showStopButton = isStreaming && !!onStop;
     const showSpinner = isLoading && !showStopButton;
-    (0, import_react19.useImperativeHandle)(
+    (0, import_react21.useImperativeHandle)(
       ref,
       () => ({
         focus: () => textareaRef.current?.focus(),
@@ -7019,13 +7216,13 @@ var ChatInput = (0, import_react19.memo)(
       }),
       [text]
     );
-    (0, import_react19.useEffect)(() => {
+    (0, import_react21.useEffect)(() => {
       if (autoFocus) {
         const timer = setTimeout(() => textareaRef.current?.focus(), 100);
         return () => clearTimeout(timer);
       }
     }, [autoFocus]);
-    const handleSubmit = (0, import_react19.useCallback)(
+    const handleSubmit = (0, import_react21.useCallback)(
       (e) => {
         e?.preventDefault();
         if (!canSend) return;
@@ -7034,7 +7231,7 @@ var ChatInput = (0, import_react19.memo)(
       },
       [text, canSend, onSend]
     );
-    const handleKeyDown = (0, import_react19.useCallback)(
+    const handleKeyDown = (0, import_react21.useCallback)(
       (e) => {
         if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
           e.preventDefault();
@@ -7102,7 +7299,7 @@ var ChatInput = (0, import_react19.memo)(
 );
 
 // src/renderer/components/HitlCard.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var defaultStrings = {
   approve: "Approve",
@@ -7141,7 +7338,7 @@ var riskColors = {
     icon: "!!"
   }
 };
-var HitlCard = (0, import_react20.memo)(function HitlCard2({
+var HitlCard = (0, import_react22.memo)(function HitlCard2({
   interrupt,
   onApprove,
   onReject,
@@ -7153,16 +7350,16 @@ var HitlCard = (0, import_react20.memo)(function HitlCard2({
   const t = { ...defaultStrings, ...strings };
   const isApproval = interrupt.type === "approval_request";
   const isUserInput = interrupt.type === "user_input_request";
-  const [answer, setAnswer] = (0, import_react20.useState)(interrupt.default || "");
-  const [selectedIndices, setSelectedIndices] = (0, import_react20.useState)([]);
-  const [isComposing, setIsComposing] = (0, import_react20.useState)(false);
-  const [timeLeft, setTimeLeft] = (0, import_react20.useState)(interrupt.timeout ?? null);
-  const [rememberChoice, setRememberChoice] = (0, import_react20.useState)(false);
-  const inputRef = (0, import_react20.useRef)(null);
-  const textareaRef = (0, import_react20.useRef)(null);
+  const [answer, setAnswer] = (0, import_react22.useState)(interrupt.default || "");
+  const [selectedIndices, setSelectedIndices] = (0, import_react22.useState)([]);
+  const [isComposing, setIsComposing] = (0, import_react22.useState)(false);
+  const [timeLeft, setTimeLeft] = (0, import_react22.useState)(interrupt.timeout ?? null);
+  const [rememberChoice, setRememberChoice] = (0, import_react22.useState)(false);
+  const inputRef = (0, import_react22.useRef)(null);
+  const textareaRef = (0, import_react22.useRef)(null);
   const riskLevel = interrupt.risk_level || "medium";
   const riskStyle = riskColors[riskLevel];
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (isUserInput) {
       if (!interrupt.options || interrupt.options.length === 0) {
         inputRef.current?.focus();
@@ -7170,7 +7367,7 @@ var HitlCard = (0, import_react20.memo)(function HitlCard2({
       }
     }
   }, [isUserInput, interrupt.options]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (timeLeft === null || timeLeft <= 0) return;
     const timer = setInterval(() => {
       setTimeLeft((prev) => {
@@ -7368,12 +7565,12 @@ var HitlCard = (0, import_react20.memo)(function HitlCard2({
 });
 
 // src/renderer/primitives/AlertBanner.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime13 = (
   // Error icon (circle with X)
   require("react/jsx-runtime")
 );
-var AlertBanner = (0, import_react21.memo)(function AlertBanner2({
+var AlertBanner = (0, import_react23.memo)(function AlertBanner2({
   type,
   message,
   action,
@@ -7383,7 +7580,7 @@ var AlertBanner = (0, import_react21.memo)(function AlertBanner2({
   maxLines = 3,
   strings
 }) {
-  const [isExpanded, setIsExpanded] = (0, import_react21.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react23.useState)(false);
   const defaultIcon = type === "error" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { className: "size-4 shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M15 9l-6 6M9 9l6 6", strokeLinecap: "round" })
@@ -7446,7 +7643,7 @@ var AlertBanner = (0, import_react21.memo)(function AlertBanner2({
 
 // src/renderer/components/SanqianChat.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var SanqianChat = (0, import_react22.memo)(function SanqianChat2({
+var SanqianChat = (0, import_react24.memo)(function SanqianChat2({
   adapter,
   placeholder,
   autoConnect = true,
@@ -7458,20 +7655,20 @@ var SanqianChat = (0, import_react22.memo)(function SanqianChat2({
   config,
   logo
 }) {
-  const chatContainerRef = (0, import_react22.useRef)(null);
-  const chatInputRef = (0, import_react22.useRef)(null);
-  const messageListRef = (0, import_react22.useRef)(null);
-  const onStateChangeRef = (0, import_react22.useRef)(onStateChange);
+  const chatContainerRef = (0, import_react24.useRef)(null);
+  const chatInputRef = (0, import_react24.useRef)(null);
+  const messageListRef = (0, import_react24.useRef)(null);
+  const onStateChangeRef = (0, import_react24.useRef)(onStateChange);
   onStateChangeRef.current = onStateChange;
   const resolvedConfig = useResolvedUiConfig(config);
   const { themeClass, isDarkMode } = useResolvedTheme(resolvedConfig?.theme ?? "auto");
   const accentStyle = useAccentStyle(resolvedConfig?.accentColor);
   const resolvedLogo = logo ?? resolvedConfig?.logo;
-  const strings = (0, import_react22.useMemo)(
+  const strings = (0, import_react24.useMemo)(
     () => resolveChatStrings(resolvedConfig?.locale, resolvedConfig?.strings),
     [resolvedConfig?.locale, resolvedConfig?.strings]
   );
-  const headerConfig = (0, import_react22.useMemo)(
+  const headerConfig = (0, import_react24.useMemo)(
     () => {
       if (!resolvedConfig) {
         return resolvedLogo ? { logo: resolvedLogo } : void 0;
@@ -7484,7 +7681,7 @@ var SanqianChat = (0, import_react22.memo)(function SanqianChat2({
     [resolvedConfig, resolvedLogo]
   );
   const { logoNode, showPin, showClose, isPinned, togglePin, resolvedOnClose } = useChatHeader(headerConfig);
-  const emptyLogoNode = (0, import_react22.useMemo)(() => resolveLogoNode(resolvedLogo, "empty"), [resolvedLogo]);
+  const emptyLogoNode = (0, import_react24.useMemo)(() => resolveLogoNode(resolvedLogo, "empty"), [resolvedLogo]);
   const showHeader = !!(logoNode || showClose || showPin);
   useChatStyles();
   useConnection({ adapter, autoConnect });
@@ -7505,7 +7702,7 @@ var SanqianChat = (0, import_react22.memo)(function SanqianChat2({
       chat.submitHitlInput({ cancelled: true });
     }
   };
-  (0, import_react22.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     onStateChangeRef.current?.({
       messages: chat.messages,
       conversationId: chat.conversationId
@@ -7624,10 +7821,187 @@ var SanqianChat = (0, import_react22.memo)(function SanqianChat2({
 });
 
 // src/renderer/components/FloatingChat.tsx
-var import_react24 = require("react");
+var import_react29 = require("react");
+
+// src/renderer/components/ModeToggleButton.tsx
+var import_react25 = require("react");
+var import_jsx_runtime15 = (
+  // Float out icon - two overlapping panels (macOS style)
+  require("react/jsx-runtime")
+);
+function ModeToggleButton({ className, locale = "en" }) {
+  const { isEmbedded, toggleMode } = useChatPanel();
+  const strings = (0, import_react25.useMemo)(() => resolveChatStrings(locale), [locale]);
+  const handleClick = async () => {
+    await toggleMode();
+  };
+  const tooltipText = isEmbedded ? strings.floatWindow : strings.embedWindow;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `chat-tooltip-wrapper ${className || ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "button",
+      {
+        onClick: handleClick,
+        className: headerIconButtonClass,
+        "aria-label": tooltipText,
+        children: isEmbedded ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { x: "8", y: "3", width: "13", height: "13", rx: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M5 8H4a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-1", strokeLinecap: "round", strokeLinejoin: "round" })
+        ] }) : (
+          // Embed icon - panel with sidebar (dock to sidebar)
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M15 4v16", strokeLinecap: "round" })
+          ] })
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "chat-tooltip", children: tooltipText })
+  ] });
+}
+
+// src/renderer/components/AttachButton.tsx
+var import_react26 = require("react");
+var import_jsx_runtime16 = (
+  // Attached state: filled icon
+  require("react/jsx-runtime")
+);
+function AttachButton({ className, locale = "en" }) {
+  const { isAttached, isAvailable, toggle } = useAttachState();
+  const { isFloating } = useChatPanel();
+  const strings = (0, import_react26.useMemo)(() => resolveChatStrings(locale), [locale]);
+  if (!isFloating || !isAvailable) return null;
+  const handleClick = async () => {
+    await toggle();
+  };
+  const tooltipText = isAttached ? strings.detachWindow : strings.attachWindow;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `chat-tooltip-wrapper ${className || ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "button",
+      {
+        onClick: handleClick,
+        className: headerIconButtonClass,
+        "aria-label": tooltipText,
+        children: isAttached ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { className: headerIconClass, viewBox: "0 0 16 16", fill: "currentColor", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M4.5 2A2.5 2.5 0 0 0 2 4.5v7A2.5 2.5 0 0 0 4.5 14h7a2.5 2.5 0 0 0 2.5-2.5v-7A2.5 2.5 0 0 0 11.5 2h-7z" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M9.5 6.5h3v1h-3v-1z", fill: "var(--bg-color, #fff)" })
+        ] }) : (
+          // Detached state: outline icon
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { className: headerIconClass, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("rect", { x: "2.5", y: "2.5", width: "11", height: "11", rx: "2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M9.5 6.5h3", strokeLinecap: "round" })
+          ] })
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "chat-tooltip", children: tooltipText })
+  ] });
+}
+
+// src/renderer/components/Resizer.tsx
+var import_react27 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var DEFAULT_WIDTH = 360;
+function Resizer({
+  position = "left",
+  minWidth = 240,
+  maxWidth = 600,
+  defaultWidth = DEFAULT_WIDTH,
+  className = ""
+}) {
+  const { isEmbedded, width, setWidth, onResizeEnd } = useChatPanel();
+  const [isHovered, setIsHovered] = (0, import_react27.useState)(false);
+  const [isDragging, setIsDragging] = (0, import_react27.useState)(false);
+  const startX = (0, import_react27.useRef)(0);
+  const startWidth = (0, import_react27.useRef)(0);
+  const handleDoubleClick = (0, import_react27.useCallback)(() => {
+    setWidth(defaultWidth, true);
+  }, [defaultWidth, setWidth]);
+  const handleMouseDown = (0, import_react27.useCallback)((e) => {
+    e.preventDefault();
+    setIsDragging(true);
+    startX.current = e.clientX;
+    startWidth.current = width;
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  }, [width]);
+  (0, import_react27.useEffect)(() => {
+    if (!isDragging) return;
+    const handleMouseMove = (e) => {
+      const deltaX = e.clientX - startX.current;
+      const newWidth = position === "left" ? startWidth.current - deltaX : startWidth.current + deltaX;
+      const clampedWidth = Math.min(maxWidth, Math.max(minWidth, newWidth));
+      setWidth(clampedWidth);
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      onResizeEnd();
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, position, minWidth, maxWidth, setWidth, onResizeEnd]);
+  if (!isEmbedded) return null;
+  const isActive = isHovered || isDragging;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      className: `chat-resizer ${className}`,
+      onMouseDown: handleMouseDown,
+      onDoubleClick: handleDoubleClick,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      style: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        [position]: 0,
+        width: 6,
+        cursor: "col-resize",
+        zIndex: 100,
+        // Ensure it's above other content and not affected by drag region
+        WebkitAppRegion: "no-drag"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: position === "left" ? 0 : "auto",
+              right: position === "right" ? 0 : "auto",
+              width: 2,
+              backgroundColor: isActive ? "var(--chat-accent, #2563EB)" : "transparent",
+              transition: "background-color 0.15s ease-out, opacity 0.15s ease-out",
+              opacity: isDragging ? 1 : isHovered ? 0.7 : 0
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: -2,
+              right: -2
+            }
+          }
+        )
+      ]
+    }
+  );
+}
 
 // src/renderer/hooks/useWindowBackgroundSync.ts
-var import_react23 = require("react");
+var import_react28 = require("react");
 var cachedPlatform = null;
 var getPlatform = () => {
   if (cachedPlatform !== null) return cachedPlatform;
@@ -7645,7 +8019,7 @@ var setBackgroundColor = (color) => {
   }
 };
 function useWindowBackgroundSync(isDarkMode) {
-  (0, import_react23.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (getPlatform() !== "win32") return;
     const colors = getBaseColors(isDarkMode);
     setBackgroundColor(colors.bg);
@@ -7653,8 +8027,8 @@ function useWindowBackgroundSync(isDarkMode) {
 }
 
 // src/renderer/components/FloatingChat.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var FloatingChat = (0, import_react24.memo)(function FloatingChat2({
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var FloatingChat = (0, import_react29.memo)(function FloatingChat2({
   messages,
   isLoading,
   isStreaming,
@@ -7675,8 +8049,8 @@ var FloatingChat = (0, import_react24.memo)(function FloatingChat2({
   header,
   footer
 }) {
-  const chatContainerRef = (0, import_react24.useRef)(null);
-  const chatInputRef = (0, import_react24.useRef)(null);
+  const chatContainerRef = (0, import_react29.useRef)(null);
+  const chatInputRef = (0, import_react29.useRef)(null);
   useChatStyles();
   useFocusPersistence({
     containerRef: chatContainerRef,
@@ -7688,18 +8062,18 @@ var FloatingChat = (0, import_react24.memo)(function FloatingChat2({
   const { themeClass, isDarkMode } = useResolvedTheme(themeMode);
   const accentStyle = useAccentStyle(resolvedConfig?.accentColor);
   useWindowBackgroundSync(isDarkMode);
-  const rootStyle = (0, import_react24.useMemo)(() => ({
+  const rootStyle = (0, import_react29.useMemo)(() => ({
     ...accentStyle || {},
     minHeight: "100vh",
     minWidth: "100vw"
   }), [accentStyle]);
   const resolvedLogo = logo ?? resolvedConfig?.logo;
   const resolvedLocale = resolvedConfig?.locale ?? locale;
-  const resolvedStrings = (0, import_react24.useMemo)(
+  const resolvedStrings = (0, import_react29.useMemo)(
     () => resolveChatStrings(resolvedLocale, resolvedConfig?.strings),
     [resolvedLocale, resolvedConfig?.strings]
   );
-  const headerConfig = (0, import_react24.useMemo)(
+  const headerConfig = (0, import_react29.useMemo)(
     () => {
       if (!resolvedConfig) {
         return resolvedLogo ? { logo: resolvedLogo } : void 0;
@@ -7712,71 +8086,77 @@ var FloatingChat = (0, import_react24.memo)(function FloatingChat2({
     [resolvedConfig, resolvedLogo]
   );
   const { logoNode, showPin, showClose, isPinned, togglePin, resolvedOnClose } = useChatHeader(headerConfig);
-  const emptyLogoNode = (0, import_react24.useMemo)(() => resolveLogoNode(resolvedLogo, "empty"), [resolvedLogo]);
+  const emptyLogoNode = (0, import_react29.useMemo)(() => resolveLogoNode(resolvedLogo, "empty"), [resolvedLogo]);
   const inputPlaceholder = placeholder ?? resolvedStrings.inputPlaceholder;
   const showHeader = !!(header || logoNode || showPin || showClose);
-  const defaultHeader = /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("header", { className: "flex h-9 flex-shrink-0 items-center px-2 border-b chat-divider-border", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
+  const defaultHeader = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("header", { className: "flex h-9 flex-shrink-0 items-center px-2 border-b chat-divider-border", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2", children: [
       logoNode,
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-sm font-medium text-[var(--chat-text)]", children: resolvedStrings.chat })
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-sm font-medium text-[var(--chat-text)]", children: resolvedStrings.chat })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex-1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-1", children: [
-      showPin && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        "button",
-        {
-          onClick: togglePin,
-          className: headerIconButtonClass,
-          title: isPinned ? resolvedStrings.unpin : resolvedStrings.pin,
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: isPinned ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M12 17v5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M12 17v5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "m2 2 20 20" }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11" })
-          ] }) })
-        }
-      ),
-      showClose && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        "button",
-        {
-          onClick: resolvedOnClose,
-          className: headerIconButtonClass,
-          title: resolvedStrings.close,
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M6 6l12 12M18 6l-12 12", strokeLinecap: "round", strokeLinejoin: "round" }) })
-        }
-      )
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ModeToggleButton, { locale: resolvedLocale }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AttachButton, { locale: resolvedLocale }),
+      showPin && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "chat-tooltip-wrapper", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "button",
+          {
+            onClick: togglePin,
+            className: headerIconButtonClass,
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: isPinned ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M12 17v5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M12 17v5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "m2 2 20 20" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11" })
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "chat-tooltip", children: isPinned ? resolvedStrings.unpin : resolvedStrings.pin })
+      ] }),
+      showClose && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "chat-tooltip-wrapper", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "button",
+          {
+            onClick: resolvedOnClose,
+            className: headerIconButtonClass,
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M6 6l12 12M18 6l-12 12", strokeLinecap: "round", strokeLinejoin: "round" }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "chat-tooltip", children: resolvedStrings.close })
+      ] })
     ] })
   ] });
   const resolvedHeader = header ?? (showHeader ? defaultHeader : null);
-  const defaultRenderMessage = (0, import_react24.useCallback)(
+  const defaultRenderMessage = (0, import_react29.useCallback)(
     (message) => {
       if (message.role === "tool") return null;
       const isUser = message.role === "user";
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `flex ${isUser ? "justify-end" : "justify-start"} mb-4`, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `text-left ${isUser ? "max-w-[80%]" : "w-full"}`, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `relative group ${isUser ? "inline-block max-w-full" : "block w-full"}`, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `flex ${isUser ? "justify-end" : "justify-start"} mb-4`, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `text-left ${isUser ? "max-w-[80%]" : "w-full"}`, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `relative group ${isUser ? "inline-block max-w-full" : "block w-full"}`, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "div",
         {
           className: `message-bubble-wrapper ${isUser ? "rounded-2xl shadow-sm bg-[var(--chat-accent)] text-white px-4 py-3 whitespace-pre-wrap break-words" : "text-[var(--chat-text)] break-words"}`,
-          children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "whitespace-pre-wrap", children: message.content }) : message.content && (renderContent ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "prose prose-chat dark:prose-invert max-w-none px-3", children: renderContent(message.content, message.isStreaming ?? false) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MarkdownRenderer, { content: message.content, isStreaming: message.isStreaming, className: "px-3" }))
+          children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "whitespace-pre-wrap", children: message.content }) : message.content && (renderContent ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "prose prose-chat dark:prose-invert max-w-none px-3", children: renderContent(message.content, message.isStreaming ?? false) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MarkdownRenderer, { content: message.content, isStreaming: message.isStreaming, className: "px-3" }))
         }
       ) }) }) });
     },
     [renderContent]
   );
-  const defaultRenderHitl = (0, import_react24.useCallback)(
-    (interrupt, onApprove, onReject) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg m-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "font-medium mb-2", children: interrupt.type === "approval_request" ? resolvedStrings.hitlApprovalRequired : resolvedStrings.hitlInputRequired }),
-      interrupt.tool && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "text-sm mb-2", children: [
+  const defaultRenderHitl = (0, import_react29.useCallback)(
+    (interrupt, onApprove, onReject) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg m-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "font-medium mb-2", children: interrupt.type === "approval_request" ? resolvedStrings.hitlApprovalRequired : resolvedStrings.hitlInputRequired }),
+      interrupt.tool && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("p", { className: "text-sm mb-2", children: [
         resolvedStrings.hitlToolLabel,
         ": ",
         interrupt.tool
       ] }),
-      interrupt.reason && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm mb-2", children: interrupt.reason }),
-      interrupt.question && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm mb-2", children: interrupt.question }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex gap-2 mt-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      interrupt.reason && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm mb-2", children: interrupt.reason }),
+      interrupt.question && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm mb-2", children: interrupt.question }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex gap-2 mt-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "button",
           {
             onClick: onApprove,
@@ -7784,7 +8164,7 @@ var FloatingChat = (0, import_react24.memo)(function FloatingChat2({
             children: resolvedStrings.hitlApprove
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "button",
           {
             onClick: onReject,
@@ -7796,9 +8176,10 @@ var FloatingChat = (0, import_react24.memo)(function FloatingChat2({
     ] }),
     [resolvedStrings]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: chatContainerRef, className: `flex flex-col h-full bg-[var(--chat-bg)] text-[var(--chat-text)] ${themeClass} ${className}`, style: rootStyle, "data-chat-font-size": resolvedConfig?.fontSize || "normal", children: [
-    resolvedHeader && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex-shrink-0", children: resolvedHeader }),
-    messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex flex-1 items-center justify-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center justify-center", children: emptyLogoNode }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { ref: chatContainerRef, className: `relative flex flex-col h-full bg-[var(--chat-bg)] text-[var(--chat-text)] ${themeClass} ${className}`, style: rootStyle, "data-chat-font-size": resolvedConfig?.fontSize || "normal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Resizer, { position: "left", minWidth: 240, maxWidth: 600 }),
+    resolvedHeader && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex-shrink-0", children: resolvedHeader }),
+    messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-1 items-center justify-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center justify-center", children: emptyLogoNode }) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       MessageList,
       {
         messages,
@@ -7806,12 +8187,12 @@ var FloatingChat = (0, import_react24.memo)(function FloatingChat2({
         renderMessage: renderMessage || defaultRenderMessage
       }
     ),
-    pendingInterrupt && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex-shrink-0", children: (renderHitl || defaultRenderHitl)(
+    pendingInterrupt && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex-shrink-0", children: (renderHitl || defaultRenderHitl)(
       pendingInterrupt,
       () => onApproveHitl?.(),
       () => onRejectHitl?.()
     ) }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex-shrink-0 px-3 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex-shrink-0 px-3 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       AlertBanner,
       {
         type: "error",
@@ -7819,7 +8200,7 @@ var FloatingChat = (0, import_react24.memo)(function FloatingChat2({
         className: `flex items-center gap-2 rounded-xl px-3 py-2 text-sm ${isDarkMode ? "bg-red-900/60 text-red-200" : "bg-red-100 text-red-800"}`
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex-shrink-0 px-3 pb-3 pt-1 border-t chat-divider-border", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex-shrink-0 px-3 pb-3 pt-1 border-t chat-divider-border", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       ChatInput,
       {
         ref: chatInputRef,
@@ -7834,16 +8215,16 @@ var FloatingChat = (0, import_react24.memo)(function FloatingChat2({
         autoFocus: true
       }
     ) }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex-shrink-0", children: footer })
+    footer && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex-shrink-0", children: footer })
   ] });
 });
 
 // src/renderer/components/HistoryList.tsx
-var import_react25 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react30 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function DeleteButton({ onClick, title, colors }) {
-  const [isHovered, setIsHovered] = (0, import_react25.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const [isHovered, setIsHovered] = (0, import_react30.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "button",
     {
       onClick,
@@ -7864,7 +8245,7 @@ function DeleteButton({ onClick, title, colors }) {
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "svg",
         {
           style: { width: "0.875rem", height: "0.875rem" },
@@ -7872,7 +8253,7 @@ function DeleteButton({ onClick, title, colors }) {
           fill: "none",
           stroke: "currentColor",
           strokeWidth: "1.5",
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "path",
             {
               d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16",
@@ -7886,8 +8267,8 @@ function DeleteButton({ onClick, title, colors }) {
   );
 }
 function LoadMoreButton({ onClick, colors, children }) {
-  const [isHovered, setIsHovered] = (0, import_react25.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const [isHovered, setIsHovered] = (0, import_react30.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "button",
     {
       onClick,
@@ -7936,7 +8317,7 @@ function formatRelativeTime(dateStr, strings) {
     return date.toLocaleDateString(void 0, { month: "short", day: "numeric" });
   }
 }
-var HistoryList = (0, import_react25.memo)(function HistoryList2({
+var HistoryList = (0, import_react30.memo)(function HistoryList2({
   conversations,
   selectedId,
   isLoading,
@@ -7948,11 +8329,11 @@ var HistoryList = (0, import_react25.memo)(function HistoryList2({
   isDarkMode = false,
   strings = {}
 }) {
-  const [hoveredId, setHoveredId] = (0, import_react25.useState)(null);
-  const loadMoreRef = (0, import_react25.useRef)(null);
-  const isLoadingRef = (0, import_react25.useRef)(isLoading);
+  const [hoveredId, setHoveredId] = (0, import_react30.useState)(null);
+  const loadMoreRef = (0, import_react30.useRef)(null);
+  const isLoadingRef = (0, import_react30.useRef)(isLoading);
   isLoadingRef.current = isLoading;
-  (0, import_react25.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!hasMore || loadError || !onLoadMore) return;
     const sentinel = loadMoreRef.current;
     if (!sentinel) return;
@@ -7976,7 +8357,7 @@ var HistoryList = (0, import_react25.memo)(function HistoryList2({
     deleteText: "#ef4444",
     loadingDot: isDarkMode ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.2)"
   };
-  const loadingDots = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "1.5rem 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { display: "flex", gap: "0.25rem" }, children: [0, 150, 300].map((delay) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const loadingDots = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "1.5rem 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { display: "flex", gap: "0.25rem" }, children: [0, 150, 300].map((delay) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "span",
     {
       style: {
@@ -7994,13 +8375,13 @@ var HistoryList = (0, import_react25.memo)(function HistoryList2({
     return loadingDots;
   }
   if (conversations.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { textAlign: "center", color: colors.muted, padding: "1.5rem 0", fontSize: "0.875rem" }, children: strings.noHistory || "No conversations yet" });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { textAlign: "center", color: colors.muted, padding: "1.5rem 0", fontSize: "0.875rem" }, children: strings.noHistory || "No conversations yet" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { padding: "0.25rem 0.75rem 0" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { padding: "0.25rem 0.75rem 0" }, children: [
     conversations.map((conv) => {
       const isSelected = conv.id === selectedId;
       const isHovered = conv.id === hoveredId;
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
         "div",
         {
           style: {
@@ -8018,17 +8399,17 @@ var HistoryList = (0, import_react25.memo)(function HistoryList2({
           onMouseEnter: () => setHoveredId(conv.id),
           onMouseLeave: () => setHoveredId(null),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { minWidth: 0, flex: 1 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: {
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { minWidth: 0, flex: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: {
                 fontSize: "0.875rem",
                 color: colors.text,
                 overflow: "hidden",
                 textOverflow: "ellipsis",
                 whiteSpace: "nowrap"
               }, children: conv.title || "Untitled" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontSize: "0.75rem", color: colors.muted }, children: formatRelativeTime(conv.updatedAt, strings) })
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { fontSize: "0.75rem", color: colors.muted }, children: formatRelativeTime(conv.updatedAt, strings) })
             ] }),
-            isHovered && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            isHovered && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               DeleteButton,
               {
                 onClick: (e) => {
@@ -8044,15 +8425,234 @@ var HistoryList = (0, import_react25.memo)(function HistoryList2({
         conv.id
       );
     }),
-    hasMore && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: loadMoreRef, style: { paddingTop: "0.5rem", textAlign: "center", minHeight: "2rem" }, children: isLoading ? loadingDots : loadError ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LoadMoreButton, { onClick: onLoadMore, colors, children: strings.loadMore || "Load more" }) : null })
+    hasMore && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref: loadMoreRef, style: { paddingTop: "0.5rem", textAlign: "center", minHeight: "2rem" }, children: isLoading ? loadingDots : loadError ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LoadMoreButton, { onClick: onLoadMore, colors, children: strings.loadMore || "Load more" }) : null })
   ] });
 });
 
+// src/renderer/components/HistoryModal.tsx
+var import_react31 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var ANIMATION_DURATION = 120;
+var HistoryModal = (0, import_react31.memo)(function HistoryModal2({
+  isOpen,
+  onClose,
+  title,
+  closeLabel = "Close",
+  children,
+  isDarkMode = false
+}) {
+  const modalRef = (0, import_react31.useRef)(null);
+  const [isClosing, setIsClosing] = (0, import_react31.useState)(false);
+  const [shouldRender, setShouldRender] = (0, import_react31.useState)(isOpen);
+  (0, import_react31.useEffect)(() => {
+    if (isOpen) {
+      setShouldRender(true);
+      setIsClosing(false);
+    }
+  }, [isOpen]);
+  const handleClose = (0, import_react31.useCallback)(() => {
+    setIsClosing(true);
+    setTimeout(() => {
+      setShouldRender(false);
+      setIsClosing(false);
+      onClose();
+    }, ANIMATION_DURATION);
+  }, [onClose]);
+  (0, import_react31.useEffect)(() => {
+    if (!shouldRender || isClosing) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [shouldRender, isClosing, handleClose]);
+  (0, import_react31.useEffect)(() => {
+    if (!isOpen || !modalRef.current) return;
+    modalRef.current.focus();
+  }, [isOpen]);
+  const handleBackdropClick = (0, import_react31.useCallback)(
+    (e) => {
+      if (e.target === e.currentTarget && !isClosing) {
+        handleClose();
+      }
+    },
+    [handleClose, isClosing]
+  );
+  if (!shouldRender) return null;
+  const closingClass = isClosing ? " chat-modal-closing" : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      className: `chat-modal-backdrop${closingClass}`,
+      style: {
+        position: "absolute",
+        inset: 0,
+        zIndex: 50,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(0, 0, 0, 0.5)"
+      },
+      onClick: handleBackdropClick,
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        "div",
+        {
+          ref: modalRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": "history-modal-title",
+          tabIndex: -1,
+          className: `chat-modal-content${closingClass}`,
+          style: {
+            width: "80%",
+            height: "70%",
+            maxWidth: "600px",
+            minHeight: "300px",
+            background: "var(--chat-bg)",
+            borderRadius: "12px",
+            border: "1px solid var(--chat-border)",
+            boxShadow: isDarkMode ? "0 25px 50px -12px rgba(0, 0, 0, 0.5)" : "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+            outline: "none"
+          },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "8px 12px",
+                  borderBottom: "1px solid var(--chat-border)",
+                  flexShrink: 0
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    "span",
+                    {
+                      id: "history-modal-title",
+                      style: {
+                        fontSize: "0.8125rem",
+                        fontWeight: 500,
+                        color: "var(--chat-text)"
+                      },
+                      children: title
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    "button",
+                    {
+                      onClick: handleClose,
+                      "aria-label": closeLabel,
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width: "22px",
+                        height: "22px",
+                        borderRadius: "4px",
+                        border: "none",
+                        background: "transparent",
+                        color: "var(--chat-muted)",
+                        cursor: "pointer",
+                        transition: "background 0.15s, color 0.15s"
+                      },
+                      onMouseEnter: (e) => {
+                        e.currentTarget.style.background = "var(--chat-hover)";
+                        e.currentTarget.style.color = "var(--chat-text)";
+                      },
+                      onMouseLeave: (e) => {
+                        e.currentTarget.style.background = "transparent";
+                        e.currentTarget.style.color = "var(--chat-muted)";
+                      },
+                      title: closeLabel,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                        "svg",
+                        {
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M18 6L6 18M6 6l12 12" })
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "div",
+              {
+                style: {
+                  flex: 1,
+                  overflow: "auto",
+                  minHeight: 0
+                },
+                className: "chat-scrollbar",
+                children
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+
 // src/renderer/components/CompactChat.tsx
-var import_react26 = require("react");
+var import_react32 = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var CompactChat = (0, import_react26.memo)(function CompactChat2({
+
+// src/renderer/components/PanelControls.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function PanelHeaderButtons({
+  showModeToggle = true,
+  showAttachToggle = true,
+  locale = "en"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    showModeToggle && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ModeToggleButton, { locale }),
+    showAttachToggle && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AttachButton, { locale })
+  ] });
+}
+function PanelResizer({
+  showResizer = true,
+  resizerPosition = "left",
+  resizerMinWidth = 280,
+  resizerMaxWidth = 600
+}) {
+  if (!showResizer) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    Resizer,
+    {
+      position: resizerPosition,
+      minWidth: resizerMinWidth,
+      maxWidth: resizerMaxWidth
+    }
+  );
+}
+var PanelControls = {
+  HeaderButtons: PanelHeaderButtons,
+  Resizer: PanelResizer,
+  ModeToggleButton,
+  AttachButton
+};
+
+// src/renderer/components/CompactChat.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var CompactChat = (0, import_react32.memo)(function CompactChat2({
   adapter,
   config,
   logo,
@@ -8087,12 +8687,12 @@ var CompactChat = (0, import_react26.memo)(function CompactChat2({
   const { themeClass, isDarkMode: resolvedIsDarkMode } = useResolvedTheme(themeMode);
   const accentStyle = useAccentStyle(resolvedConfig?.accentColor);
   const resolvedLogo = logo ?? resolvedConfig?.logo;
-  const baseStrings = (0, import_react26.useMemo)(
+  const baseStrings = (0, import_react32.useMemo)(
     () => resolveChatStrings(resolvedConfig?.locale, resolvedConfig?.strings),
     [resolvedConfig?.locale, resolvedConfig?.strings]
   );
-  const mergedStrings = (0, import_react26.useMemo)(() => ({ ...baseStrings, ...strings }), [baseStrings, strings]);
-  const headerConfig = (0, import_react26.useMemo)(
+  const mergedStrings = (0, import_react32.useMemo)(() => ({ ...baseStrings, ...strings }), [baseStrings, strings]);
+  const headerConfig = (0, import_react32.useMemo)(
     () => {
       if (!resolvedConfig) {
         return resolvedLogo ? { logo: resolvedLogo } : void 0;
@@ -8105,16 +8705,17 @@ var CompactChat = (0, import_react26.memo)(function CompactChat2({
     [resolvedConfig, resolvedLogo]
   );
   const { logoNode, showPin, showClose, isPinned, togglePin, resolvedOnClose } = useChatHeader(headerConfig);
-  const emptyLogoNode = (0, import_react26.useMemo)(() => resolveLogoNode(resolvedLogo, "empty"), [resolvedLogo]);
-  const chatContainerRef = (0, import_react26.useRef)(null);
-  const chatInputRef = (0, import_react26.useRef)(null);
-  const [showHistory, setShowHistory] = (0, import_react26.useState)(false);
-  const [connectionAlert, setConnectionAlert] = (0, import_react26.useState)(null);
-  const portalContainerRef = (0, import_react26.useRef)(inputPortalContainer ?? null);
+  const emptyLogoNode = (0, import_react32.useMemo)(() => resolveLogoNode(resolvedLogo, "empty"), [resolvedLogo]);
+  const { isEmbedded, toggleMode, hide: hidePanel } = useChatPanel();
+  const chatContainerRef = (0, import_react32.useRef)(null);
+  const chatInputRef = (0, import_react32.useRef)(null);
+  const [showHistory, setShowHistory] = (0, import_react32.useState)(false);
+  const [connectionAlert, setConnectionAlert] = (0, import_react32.useState)(null);
+  const portalContainerRef = (0, import_react32.useRef)(inputPortalContainer ?? null);
   portalContainerRef.current = inputPortalContainer ?? null;
   const shouldRenderInputExternally = !!inputPortalContainer;
   const inputPlaceholder = placeholder ?? mergedStrings.inputPlaceholder;
-  const headerTitle = showHistory ? mergedStrings.recentChats || "Recent Chats" : mergedStrings.chat || "Chat";
+  const headerTitle = mergedStrings.chat || "Chat";
   const connection = useConnection({
     adapter,
     autoConnect,
@@ -8148,27 +8749,27 @@ var CompactChat = (0, import_react26.memo)(function CompactChat2({
     adapter,
     onError
   });
-  (0, import_react26.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (sendMessageRef) {
       sendMessageRef.current = chat.sendMessage;
     }
   }, [sendMessageRef, chat.sendMessage]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (newConversationRef) {
       newConversationRef.current = chat.newConversation;
     }
   }, [newConversationRef, chat.newConversation]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (parentFocusInputRef) {
       parentFocusInputRef.current = () => chatInputRef.current?.focus();
     }
   }, [parentFocusInputRef]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (parentSetTextRef) {
       parentSetTextRef.current = (text) => chatInputRef.current?.setValue(text);
     }
   }, [parentSetTextRef]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (onMessageReceived && chat.messages.length > 0) {
       const lastMessage = chat.messages[chat.messages.length - 1];
       if (lastMessage.role === "assistant" && !lastMessage.isStreaming) {
@@ -8176,12 +8777,12 @@ var CompactChat = (0, import_react26.memo)(function CompactChat2({
       }
     }
   }, [chat.messages, onMessageReceived]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (onLoadingChange) {
       onLoadingChange(chat.isLoading);
     }
   }, [chat.isLoading, onLoadingChange]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (onStateChange) {
       onStateChange({
         messages: chat.messages,
@@ -8189,19 +8790,19 @@ var CompactChat = (0, import_react26.memo)(function CompactChat2({
       });
     }
   }, [chat.messages, chat.conversationId, onStateChange]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (showHistory && connection.isConnected) {
       conversations.loadConversations();
     }
   }, [showHistory, connection.isConnected]);
-  const handleSelectConversation = (0, import_react26.useCallback)(
+  const handleSelectConversation = (0, import_react32.useCallback)(
     async (id) => {
       await chat.loadConversation(id);
       setShowHistory(false);
     },
     [chat]
   );
-  const handleDeleteConversation = (0, import_react26.useCallback)(
+  const handleDeleteConversation = (0, import_react32.useCallback)(
     async (id) => {
       await conversations.deleteConversation(id);
       if (id === chat.conversationId) {
@@ -8210,14 +8811,14 @@ var CompactChat = (0, import_react26.memo)(function CompactChat2({
     },
     [conversations, chat]
   );
-  const handleNewChat = (0, import_react26.useCallback)(() => {
+  const handleNewChat = (0, import_react32.useCallback)(() => {
     chat.newConversation();
     setShowHistory(false);
     setTimeout(() => {
       chatInputRef.current?.focus();
     }, 0);
   }, [chat]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const handleKeyDown = (e) => {
       const isMac2 = navigator.platform.includes("Mac");
       const modifierKey = isMac2 ? e.metaKey : e.ctrlKey;
@@ -8231,7 +8832,7 @@ var CompactChat = (0, import_react26.memo)(function CompactChat2({
   }, [handleNewChat]);
   const isMac = typeof navigator !== "undefined" && navigator.platform.includes("Mac");
   const shortcutKey = isMac ? "\u2318N" : "Ctrl+N";
-  const defaultRenderMessage = (0, import_react26.useCallback)((message) => {
+  const defaultRenderMessage = (0, import_react32.useCallback)((message) => {
     if (message.role === "tool") return null;
     const isUser = message.role === "user";
     const hasToolCalls = message.toolCalls && message.toolCalls.length > 0;
@@ -8243,9 +8844,9 @@ var CompactChat = (0, import_react26.memo)(function CompactChat2({
     const hasThinking = message.thinking || message.isThinkingStreaming || message.currentThinking;
     const showThinkingSection = !isUser && !hasToolActivity && !showIntermediateSteps && hasThinking;
     const isToolCallsStreaming = message.isToolCallsStreaming ?? ((message.toolCalls?.some((tc) => tc.status === "running") ?? false) || (message.blocks?.some((b) => b.type === "tool_call" && b.toolStatus === "running") ?? false));
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `flex ${isUser ? "justify-end" : "justify-start"} mb-4`, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: `text-left ${isUser ? "max-w-[80%]" : "w-full"}`, children: [
-      !isUser && showIntermediateSteps && message.blocks && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IntermediateSteps, { blocks: message.blocks, strings: mergedStrings }),
-      showThinkingSection && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: `flex ${isUser ? "justify-end" : "justify-start"} mb-4`, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `text-left ${isUser ? "max-w-[80%]" : "w-full"}`, children: [
+      !isUser && showIntermediateSteps && message.blocks && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IntermediateSteps, { blocks: message.blocks, strings: mergedStrings }),
+      showThinkingSection && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         ThinkingSection,
         {
           thinking: message.thinking || "",
@@ -8256,7 +8857,7 @@ var CompactChat = (0, import_react26.memo)(function CompactChat2({
           strings: mergedStrings
         }
       ),
-      showStreamingTimeline && message.blocks && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      showStreamingTimeline && message.blocks && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         StreamingTimeline,
         {
           blocks: message.blocks,
@@ -8267,23 +8868,22 @@ var CompactChat = (0, import_react26.memo)(function CompactChat2({
           strings: mergedStrings
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `relative group ${isUser ? "inline-block max-w-full" : "block w-full"}`, style: { fontSize: "0.875rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: `relative group ${isUser ? "inline-block max-w-full" : "block w-full"}`, style: { fontSize: "0.875rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "div",
         {
           className: `message-bubble-wrapper ${isUser ? "rounded-2xl shadow-sm bg-[var(--chat-accent)] text-white px-4 py-3 whitespace-pre-wrap break-words" : "text-[var(--chat-text)] break-words"}`,
-          children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "whitespace-pre-wrap", children: message.content }) : message.content && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MarkdownRenderer, { content: message.content, isStreaming: message.isStreaming, className: "px-3" })
+          children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "whitespace-pre-wrap", children: message.content }) : message.content && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MarkdownRenderer, { content: message.content, isStreaming: message.isStreaming, className: "px-3" })
         }
       ) })
     ] }) });
   }, [mergedStrings]);
-  const containerClass = floating ? `chat-window-container ${themeClass} ${className}` : `flex h-full flex-col bg-[var(--chat-bg)] text-[var(--chat-text)] ${themeClass} ${className}`;
-  const baseColors = (0, import_react26.useMemo)(() => {
+  const containerClass = floating ? `relative chat-window-container ${themeClass} ${className}` : `relative flex h-full flex-col bg-[var(--chat-bg)] text-[var(--chat-text)] ${themeClass} ${className}`;
+  const baseColors = (0, import_react32.useMemo)(() => {
     if (!floating) return null;
     return getBaseColors(resolvedIsDarkMode);
   }, [floating, resolvedIsDarkMode]);
-  const containerStyle = (0, import_react26.useMemo)(() => {
-    if (!floating || !baseColors) return accentStyle;
-    return {
+  const containerStyle = (0, import_react32.useMemo)(() => {
+    const baseStyle = floating && baseColors ? {
       ...accentStyle,
       // Override CSS variables with tinted colors for consistency with app
       "--chat-bg": baseColors.bg,
@@ -8291,9 +8891,17 @@ var CompactChat = (0, import_react26.memo)(function CompactChat2({
       "--chat-card": baseColors.card,
       "--chat-window-bg": baseColors.bg,
       "--chat-window-border": resolvedIsDarkMode ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"
-    };
-  }, [floating, baseColors, accentStyle, resolvedIsDarkMode]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    } : accentStyle;
+    if (isEmbedded) {
+      return {
+        ...baseStyle,
+        borderRadius: 0,
+        boxShadow: "none"
+      };
+    }
+    return baseStyle;
+  }, [floating, baseColors, accentStyle, resolvedIsDarkMode, isEmbedded]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       ref: chatContainerRef,
@@ -8301,103 +8909,172 @@ var CompactChat = (0, import_react26.memo)(function CompactChat2({
       style: containerStyle,
       "data-chat-font-size": resolvedConfig?.fontSize || "normal",
       children: [
-        !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("header", { className: "flex h-9 flex-shrink-0 items-center px-2 border-b chat-divider-border", style: { WebkitAppRegion: "drag" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-1", style: { WebkitAppRegion: "no-drag" }, children: [
-            showHistory && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "button",
-              {
-                onClick: () => setShowHistory(false),
-                className: headerIconButtonClass,
-                title: "Back",
-                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M15 19l-7-7 7-7", strokeLinecap: "round", strokeLinejoin: "round" }) })
-              }
-            ),
-            headerLeft || /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2", children: [
-              logoNode,
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sm font-medium text-[var(--chat-text)]", children: headerTitle })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex-1" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-0.5", style: { WebkitAppRegion: "no-drag" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "chat-tooltip-wrapper", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PanelResizer, {}),
+        !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("header", { className: "flex h-9 flex-shrink-0 items-center px-2 border-b chat-divider-border", style: { WebkitAppRegion: "drag" }, children: isEmbedded ? (
+          // Embedded mode: left-aligned buttons (collapse, float, history, new chat)
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-0.5", style: { WebkitAppRegion: "no-drag" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "chat-tooltip-wrapper", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "button",
+                {
+                  onClick: hidePanel,
+                  className: headerIconButtonClass,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M15 4v16", strokeLinecap: "round" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "chat-tooltip", children: mergedStrings.collapseSidebar })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "chat-tooltip-wrapper", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "button",
+                {
+                  onClick: toggleMode,
+                  className: headerIconButtonClass,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("rect", { x: "8", y: "3", width: "13", height: "13", rx: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M5 8H4a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-1", strokeLinecap: "round", strokeLinejoin: "round" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "chat-tooltip", children: mergedStrings.floatWindow })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "chat-tooltip-wrapper", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "button",
+                {
+                  onClick: () => setShowHistory(true),
+                  className: headerIconButtonClass,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "chat-tooltip", children: mergedStrings.history || mergedStrings.recentChats })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "chat-tooltip-wrapper", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 "button",
                 {
                   onClick: handleNewChat,
                   className: headerIconButtonClass,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M12 5v14m-7-7h14", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M12 5v14m-7-7h14", strokeLinecap: "round", strokeLinejoin: "round" }) })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "chat-tooltip", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: mergedStrings.newChat || "New Chat" }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "chat-tooltip-shortcut", children: shortcutKey })
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "chat-tooltip", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: mergedStrings.newChat || "New Chat" }),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "chat-tooltip-shortcut", children: shortcutKey })
               ] })
             ] }),
-            !showHistory && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "button",
-              {
-                onClick: () => setShowHistory(true),
-                className: headerIconButtonClass,
-                title: mergedStrings.recentChats || "Recent Chats",
-                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z", strokeLinecap: "round", strokeLinejoin: "round" }) })
-              }
-            ),
-            showPin && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "button",
-              {
-                onClick: togglePin,
-                className: headerIconButtonClass,
-                title: isPinned ? mergedStrings.unpin : mergedStrings.pin,
-                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: isPinned ? (
-                  // Pin (active state) - lucide pin
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M12 17v5" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" })
-                  ] })
-                ) : (
-                  // PinOff (inactive state) - lucide pin-off
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M12 17v5" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "m2 2 20 20" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11" })
-                  ] })
-                ) })
-              }
-            ),
-            showClose && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "button",
-              {
-                onClick: resolvedOnClose,
-                className: headerIconButtonClass,
-                title: mergedStrings.close,
-                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 6l12 12M18 6l-12 12", strokeLinecap: "round", strokeLinejoin: "round" }) })
-              }
-            ),
             headerRight
           ] })
-        ] }),
-        showHistory ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex-1 overflow-y-auto chat-scrollbar pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          HistoryList,
+        ) : (
+          // Floating mode: original layout with logo, title, and right-aligned buttons
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center gap-1", style: { WebkitAppRegion: "no-drag" }, children: headerLeft || /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2", children: [
+              logoNode,
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-sm font-medium text-[var(--chat-text)]", children: headerTitle })
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-0.5", style: { WebkitAppRegion: "no-drag" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PanelHeaderButtons, { locale: resolvedConfig?.locale }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "chat-tooltip-wrapper", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  "button",
+                  {
+                    onClick: handleNewChat,
+                    className: headerIconButtonClass,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M12 5v14m-7-7h14", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "chat-tooltip", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: mergedStrings.newChat || "New Chat" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "chat-tooltip-shortcut", children: shortcutKey })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "chat-tooltip-wrapper", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  "button",
+                  {
+                    onClick: () => setShowHistory(true),
+                    className: headerIconButtonClass,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "chat-tooltip", children: mergedStrings.recentChats || "Recent Chats" })
+              ] }),
+              showPin && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "chat-tooltip-wrapper", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  "button",
+                  {
+                    onClick: togglePin,
+                    className: headerIconButtonClass,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: isPinned ? (
+                      // Pin (active state) - lucide pin
+                      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M12 17v5" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" })
+                      ] })
+                    ) : (
+                      // PinOff (inactive state) - lucide pin-off
+                      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M12 17v5" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "m2 2 20 20" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11" })
+                      ] })
+                    ) })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "chat-tooltip", children: isPinned ? mergedStrings.unpin : mergedStrings.pin })
+              ] }),
+              showClose && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "chat-tooltip-wrapper", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  "button",
+                  {
+                    onClick: resolvedOnClose,
+                    className: headerIconButtonClass,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M6 6l12 12M18 6l-12 12", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "chat-tooltip", children: mergedStrings.close })
+              ] }),
+              headerRight
+            ] })
+          ] })
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          HistoryModal,
           {
-            conversations: conversations.conversations,
-            selectedId: chat.conversationId,
-            isLoading: conversations.isLoading,
-            hasMore: conversations.hasMore,
-            loadError: conversations.loadError,
-            onSelect: handleSelectConversation,
-            onDelete: handleDeleteConversation,
-            onLoadMore: conversations.loadMore,
+            isOpen: showHistory,
+            onClose: () => setShowHistory(false),
+            title: mergedStrings.recentChats || "Recent Chats",
+            closeLabel: mergedStrings.close || "Close",
             isDarkMode: resolvedIsDarkMode,
-            strings: {
-              noHistory: mergedStrings.noHistory,
-              loadMore: mergedStrings.loadMore,
-              today: mergedStrings.today,
-              yesterday: mergedStrings.yesterday,
-              delete: mergedStrings.delete
-            }
+            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              HistoryList,
+              {
+                conversations: conversations.conversations,
+                selectedId: chat.conversationId,
+                isLoading: conversations.isLoading,
+                hasMore: conversations.hasMore,
+                loadError: conversations.loadError,
+                onSelect: handleSelectConversation,
+                onDelete: handleDeleteConversation,
+                onLoadMore: conversations.loadMore,
+                isDarkMode: resolvedIsDarkMode,
+                strings: {
+                  noHistory: mergedStrings.noHistory,
+                  loadMore: mergedStrings.loadMore,
+                  today: mergedStrings.today,
+                  yesterday: mergedStrings.yesterday,
+                  delete: mergedStrings.delete
+                }
+              }
+            )
           }
-        ) }) : chat.messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex flex-1 items-center justify-center p-4", children: emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex items-center justify-center", children: emptyLogoNode }) }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        ),
+        chat.messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex flex-1 items-center justify-center p-4", children: emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center justify-center", children: emptyLogoNode }) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           MessageList,
           {
             messages: chat.messages,
@@ -8407,83 +9084,80 @@ var CompactChat = (0, import_react26.memo)(function CompactChat2({
         ),
         (() => {
           if (hideInput && !shouldRenderInputExternally) return null;
-          const disableInput = showHistory || !!chat.pendingInterrupt || chat.isLoading && !chat.isStreaming;
-          const inputElement = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          const disableInput = !!chat.pendingInterrupt || chat.isLoading && !chat.isStreaming;
+          const inputElement = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             ChatInput,
             {
               ref: chatInputRef,
               onSend: chat.sendMessage,
               onStop: chat.stopStreaming,
-              placeholder: showHistory ? mergedStrings.selectConversation : inputPlaceholder,
+              placeholder: inputPlaceholder,
               sendLabel: mergedStrings.inputSend,
               stopLabel: mergedStrings.inputStop,
               disabled: disableInput,
               isStreaming: chat.isStreaming,
               isLoading: chat.isLoading,
-              autoFocus: !showHistory,
-              className: showHistory ? "opacity-50" : ""
+              autoFocus: true
             }
           );
           if (shouldRenderInputExternally && portalContainerRef.current) {
             return (0, import_react_dom.createPortal)(inputElement, portalContainerRef.current);
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col gap-2 px-3 pb-3 pt-1", children: [
-            !showHistory && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-              alert ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                AlertBanner,
-                {
-                  type: alert.type,
-                  message: alert.message,
-                  action: alert.action,
-                  onDismiss: alert.dismissible ? onAlertDismiss : void 0,
-                  className: `flex items-center gap-2 rounded-xl px-3 py-2 text-sm ${alert.type === "error" ? resolvedIsDarkMode ? "bg-red-900/60 text-red-200" : "bg-red-100 text-red-800" : resolvedIsDarkMode ? "bg-amber-900/60 text-amber-200" : "bg-amber-100 text-amber-800"}`
-                }
-              ) : connectionAlert ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                AlertBanner,
-                {
-                  type: connectionAlert.type,
-                  message: connectionAlert.message,
-                  action: connectionAlert.action,
-                  onDismiss: connectionAlert.dismissible ? () => setConnectionAlert(null) : void 0,
-                  className: `flex items-center gap-2 rounded-xl px-3 py-2 text-sm ${connectionAlert.type === "error" ? resolvedIsDarkMode ? "bg-red-900/60 text-red-200" : "bg-red-100 text-red-800" : resolvedIsDarkMode ? "bg-amber-900/60 text-amber-200" : "bg-amber-100 text-amber-800"}`
-                }
-              ) : chat.error && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                AlertBanner,
-                {
-                  type: "error",
-                  message: chat.error,
-                  onDismiss: () => chat.setError(null),
-                  className: `flex items-center gap-2 rounded-xl px-3 py-2 text-sm ${resolvedIsDarkMode ? "bg-red-900/60 text-red-200" : "bg-red-100 text-red-800"}`
-                }
-              ),
-              chat.pendingInterrupt && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                HitlCard,
-                {
-                  interrupt: chat.pendingInterrupt,
-                  onApprove: chat.approveHitl,
-                  onReject: chat.rejectHitl,
-                  onSubmit: chat.submitHitlInput,
-                  isDarkMode: resolvedIsDarkMode,
-                  strings: {
-                    approve: mergedStrings.hitlApprove,
-                    reject: mergedStrings.hitlReject,
-                    submit: mergedStrings.hitlSubmit,
-                    cancel: mergedStrings.hitlCancel,
-                    rememberChoice: mergedStrings.hitlRememberChoice,
-                    requiredField: mergedStrings.hitlRequiredField,
-                    timeoutIn: mergedStrings.hitlTimeoutIn,
-                    seconds: mergedStrings.hitlSeconds,
-                    executeTool: mergedStrings.hitlExecuteTool,
-                    toolLabel: mergedStrings.hitlToolLabel,
-                    argsLabel: mergedStrings.hitlArgsLabel,
-                    defaultPrefix: mergedStrings.hitlDefaultPrefix,
-                    enterResponse: mergedStrings.hitlEnterResponse,
-                    approvalRequest: mergedStrings.hitlApprovalRequest,
-                    inputRequest: mergedStrings.hitlInputRequest
-                  }
+          return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-2 px-3 pb-3 pt-1", children: [
+            alert ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              AlertBanner,
+              {
+                type: alert.type,
+                message: alert.message,
+                action: alert.action,
+                onDismiss: alert.dismissible ? onAlertDismiss : void 0,
+                className: `flex items-center gap-2 rounded-xl px-3 py-2 text-sm ${alert.type === "error" ? resolvedIsDarkMode ? "bg-red-900/60 text-red-200" : "bg-red-100 text-red-800" : resolvedIsDarkMode ? "bg-amber-900/60 text-amber-200" : "bg-amber-100 text-amber-800"}`
+              }
+            ) : connectionAlert ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              AlertBanner,
+              {
+                type: connectionAlert.type,
+                message: connectionAlert.message,
+                action: connectionAlert.action,
+                onDismiss: connectionAlert.dismissible ? () => setConnectionAlert(null) : void 0,
+                className: `flex items-center gap-2 rounded-xl px-3 py-2 text-sm ${connectionAlert.type === "error" ? resolvedIsDarkMode ? "bg-red-900/60 text-red-200" : "bg-red-100 text-red-800" : resolvedIsDarkMode ? "bg-amber-900/60 text-amber-200" : "bg-amber-100 text-amber-800"}`
+              }
+            ) : chat.error ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              AlertBanner,
+              {
+                type: "error",
+                message: chat.error,
+                onDismiss: () => chat.setError(null),
+                className: `flex items-center gap-2 rounded-xl px-3 py-2 text-sm ${resolvedIsDarkMode ? "bg-red-900/60 text-red-200" : "bg-red-100 text-red-800"}`
+              }
+            ) : null,
+            chat.pendingInterrupt && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              HitlCard,
+              {
+                interrupt: chat.pendingInterrupt,
+                onApprove: chat.approveHitl,
+                onReject: chat.rejectHitl,
+                onSubmit: chat.submitHitlInput,
+                isDarkMode: resolvedIsDarkMode,
+                strings: {
+                  approve: mergedStrings.hitlApprove,
+                  reject: mergedStrings.hitlReject,
+                  submit: mergedStrings.hitlSubmit,
+                  cancel: mergedStrings.hitlCancel,
+                  rememberChoice: mergedStrings.hitlRememberChoice,
+                  requiredField: mergedStrings.hitlRequiredField,
+                  timeoutIn: mergedStrings.hitlTimeoutIn,
+                  seconds: mergedStrings.hitlSeconds,
+                  executeTool: mergedStrings.hitlExecuteTool,
+                  toolLabel: mergedStrings.hitlToolLabel,
+                  argsLabel: mergedStrings.hitlArgsLabel,
+                  defaultPrefix: mergedStrings.hitlDefaultPrefix,
+                  enterResponse: mergedStrings.hitlEnterResponse,
+                  approvalRequest: mergedStrings.hitlApprovalRequest,
+                  inputRequest: mergedStrings.hitlInputRequest
                 }
-              )
-            ] }),
+              }
+            ),
             inputElement
           ] });
         })()
@@ -8494,16 +9168,23 @@ var CompactChat = (0, import_react26.memo)(function CompactChat2({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertBanner,
+  AttachButton,
   ChatInput,
   CompactChat,
   FloatingChat,
   HistoryList,
+  HistoryModal,
   HitlCard,
   I18nProvider,
   IntermediateSteps,
   MarkdownRenderer,
   MessageBubble,
   MessageList,
+  ModeToggleButton,
+  PanelControls,
+  PanelHeaderButtons,
+  PanelResizer,
+  Resizer,
   SanqianChat,
   SanqianChatMessage,
   SanqianMessageList,
@@ -8519,7 +9200,9 @@ var CompactChat = (0, import_react26.memo)(function CompactChat2({
   ensureFullChatStyles,
   getTranslations,
   resolveChatStrings,
+  useAttachState,
   useChat,
+  useChatPanel,
   useChatStyles,
   useConnection,
   useConversations,