@yushaw/sanqian-chat 0.2.3 → 0.2.6

package/dist/renderer/index.mjs

@@ -861,7 +861,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...",
@@ -911,7 +918,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) {
@@ -955,6 +969,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 = createContext2(null);
@@ -992,7 +1012,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__ */ jsx2(I18nContext.Provider, { value: { locale, setLocale, t }, children });
@@ -1428,6 +1449,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
    ======================================== */
@@ -4969,6 +5027,136 @@ function useResolvedUiConfig(config) {
   }, [ipcConfig, config]);
 }
 
+// src/renderer/hooks/useChatPanel.ts
+import { useState as useState7, useEffect as useEffect8, useCallback as useCallback6 } from "react";
+var getChatPanelApi = () => {
+  return window.chatPanel;
+};
+function useChatPanel() {
+  const [mode, setModeState] = useState7("embedded");
+  const [visible, setVisible] = useState7(false);
+  const [width, setWidthState] = useState7(360);
+  useEffect8(() => {
+    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 = useCallback6(async (newMode) => {
+    const api = getChatPanelApi();
+    if (!api?.setMode) return;
+    await api.setMode(newMode);
+    setModeState(newMode);
+  }, []);
+  const toggleMode = useCallback6(async () => {
+    const api = getChatPanelApi();
+    if (!api?.toggleMode) return mode;
+    const newMode = await api.toggleMode();
+    setModeState(newMode);
+    return newMode;
+  }, [mode]);
+  const show = useCallback6(async () => {
+    const api = getChatPanelApi();
+    if (!api?.show) return;
+    await api.show();
+    setVisible(true);
+  }, []);
+  const hide = useCallback6(async () => {
+    const api = getChatPanelApi();
+    if (!api?.hide) return;
+    await api.hide();
+    setVisible(false);
+  }, []);
+  const toggle = useCallback6(async () => {
+    const api = getChatPanelApi();
+    if (!api?.toggle) return;
+    await api.toggle();
+    setVisible((v) => !v);
+  }, []);
+  const setWidth = useCallback6(async (newWidth, animate) => {
+    const api = getChatPanelApi();
+    if (!api?.setWidth) return;
+    await api.setWidth(newWidth, animate);
+    setWidthState(newWidth);
+  }, []);
+  const onResizeEnd = useCallback6(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
+import { useState as useState8, useEffect as useEffect9, useCallback as useCallback7 } from "react";
+var getChatPanelApi2 = () => {
+  return window.chatPanel;
+};
+function useAttachState() {
+  const [state, setState] = useState8("unavailable");
+  const [isLoading, setIsLoading] = useState8(true);
+  useEffect9(() => {
+    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 = useCallback7(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;
@@ -5728,7 +5916,7 @@ function createSdkAdapter(config) {
 import { SanqianSDK } from "@yushaw/sanqian-sdk/browser";
 
 // src/renderer/components/MessageList.tsx
-import { memo, useRef as useRef4, useEffect as useEffect8, useCallback as useCallback6 } from "react";
+import { memo, useRef as useRef4, useEffect as useEffect10, useCallback as useCallback8 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var SCROLL_THRESHOLD = 100;
 var MessageList = memo(function MessageList2({
@@ -5740,26 +5928,26 @@ var MessageList = memo(function MessageList2({
 }) {
   const containerRef = useRef4(null);
   const isNearBottomRef = useRef4(true);
-  const checkIfNearBottom = useCallback6(() => {
+  const checkIfNearBottom = useCallback8(() => {
     const container = containerRef.current;
     if (!container) return true;
     return container.scrollTop <= SCROLL_THRESHOLD;
   }, []);
-  const handleScroll = useCallback6(() => {
+  const handleScroll = useCallback8(() => {
     isNearBottomRef.current = checkIfNearBottom();
   }, [checkIfNearBottom]);
-  const scrollToBottom = useCallback6(
+  const scrollToBottom = useCallback8(
     (behavior = scrollBehavior) => {
       containerRef.current?.scrollTo({ top: 0, behavior });
     },
     [scrollBehavior]
   );
-  useEffect8(() => {
+  useEffect10(() => {
     if (autoScroll && isNearBottomRef.current) {
       scrollToBottom();
     }
   }, [messages, autoScroll, scrollToBottom]);
-  useEffect8(() => {
+  useEffect10(() => {
     scrollToBottom("instant");
     isNearBottomRef.current = true;
   }, [scrollToBottom]);
@@ -5796,20 +5984,20 @@ var MessageBubble = memo2(function MessageBubble2({
 });
 
 // src/renderer/components/SanqianChat.tsx
-import { memo as memo10, useEffect as useEffect15, useMemo as useMemo8, useRef as useRef10 } from "react";
+import { memo as memo10, useEffect as useEffect17, useMemo as useMemo8, useRef as useRef10 } from "react";
 
 // src/renderer/utils/chatConfig.ts
-import { useEffect as useEffect9, useMemo as useMemo3, useState as useState7 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo3, useState as useState9 } from "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] = useState7(() => {
+  const [resolvedTheme, setResolvedTheme] = useState9(() => {
     if (mode === "auto") return getSystemTheme();
     return mode === "dark" ? "dark" : "light";
   });
-  useEffect9(() => {
+  useEffect11(() => {
     if (mode !== "auto") {
       setResolvedTheme(mode === "dark" ? "dark" : "light");
       return;
@@ -5913,7 +6101,7 @@ function resolveOnPin(onPin) {
 }
 
 // src/renderer/utils/useChatHeader.tsx
-import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo4, useRef as useRef5, useState as useState8 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect12, useMemo as useMemo4, useRef as useRef5, useState as useState10 } from "react";
 
 // src/renderer/assets/sanqianLogo.ts
 var SANQIAN_LOGO_DATA_URI = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MTUuODcgNDI4LjIiPgogIDxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+CiAgICA8ZyBpZD0iQzhvaUxXIj4KICAgICAgPGc+CiAgICAgICAgPHBhdGggZD0iTTQwNC45LDE1OC4wM2wxLjk4LTEuMDFjLS4zMSw2LjM1LDEuMDQsMTIuNTYsMS43NCwxOC44Mi41Myw0LjcyLDEuNjIsOC41NywxLjI2LDE0LjY4LTEuMDcsMTguNDEtNy4wOCwzNS45Ni0xMS45OCw1My41bDcuOTUtMTYuNTRjMy43MS0xMi4wOCw2Ljc4LTI0LjI0LDguMDUtMzYuODdsMS45Ny0uMWMtMS43MSw0LjkxLTEuNDQsMTAuNjYtMi4yNiwxNS43NC00LjY3LDI5LjA1LTE3LjgzLDU4LjI3LTM1LjMxLDgxLjY5LTguNzYsMTEuNzMtMTkuNzgsMjEuMzUtMjguNDQsMzIuNTYtMi45OSwzLjg4LTEyLjM4LDcuOTktMTYuMjMsMTAuNTUtMi4wOCwxLjM4LTQuOTQsNS44Ny02LjQ4LDcuMDEtNiw0LjQ1LTE3LjE5LDUuNDMtMjIuMjYsMTEuNDcsMS4xLDEuMTksMy42OS0uNTQsNC45NS0xLjA1LDE1LjQ0LTYuMiwyOC45NC0xMy45Niw0Mi42MS0yMy40LDQuNjMsMS4wNi0uODQsMi4zMS0xLjg5LDMuMDgtNDEuOTYsMzAuNTUtOTAuNDYsNDYuMy0xNDEuOTQsMjcuNjQtMTkuMzEtNy0yNi4yMS0xOC45Ny00MC41NS0yNi40NS0xMy4xLTYuODMtMTUuOTktMTEuNTctMjUuMTgtMjIuNTQtMi45My0zLjUtMTAuNzEtMTEuNDctMTIuNDItMTQuODYtLjU2LTEuMTEtNi4yLTIwLjQ4LTYuMjEtMjEuNi0uMDQtNC4zNSwzLjE0LTkuOTcsMy42My0xNC44NC44LTcuOTMtMi45Ny0xOC45MSwzLTI0LjQ5LjY3LDMuMTQuNzgsNi41NSwxLjkxLDkuNjEuNTEsMS4zNy0uMzYsMS43LDIuMDksMS40LDEuOTQtNC4yNi0uMzYtOS45OS4xNy0xMy4yNSwxLjIxLTcuNDcsOC4zLTIxLjg0LDEzLjMzLTI3Ljc2LDUuMzUtNi4yOSwxNC4xMy0xNC4wOSwyMi41MS0xNC40OWwtMTAsOS40OSw2Ljk5LTEuNWMtMy4wNCw0LjgxLTcuNDUsOC43My0xMC40MSwxMy41OS01LjA2LDguMjktNS44NiwxNy44MS02LjU5LDI3LjQzbDQuMDIsMTkuNDljMi4wOC0uOTQuNTUtNS4wNSwxLjItNy4yOS4yNC0uODMsMi4yNi0zLjA5LDIuNzgtMi43LDMuMiwxNC4wNiwxMC40NSwyNC41NSwyMC40MiwzNC42MSwyNS4xLDI1LjM1LDY0LjA0LDMyLjc4LDk3LjI3LDE5LjU2LDguMDMtMy4xOSwxNS43LTguOTYsMjMuMzItMTIuMTdsLTIsMi45OGgxLjQ5YzE3LjE1LTEyLjY2LDMzLjYzLTI3LjExLDQyLjUzLTQ2Ljk5bDIsLjUxLS4wMyw1LjQ4LDguMy0xNi4yLDkuNy0yNy43OWMuNDUsNy41OS0yLjYxLDE0LjY3LTQuNDQsMjEuODYtLjkyLDMuNjItLjQ1LDUuNzgtMi4zOSwxMC44LTYuNTksMTcuMDgtMTkuMTgsMzMuMzEtMzIuMTYsNDUuODVsMy45OC0uNTFjLS4wMy40Ny4xNywxLjA1LDAsMS40OS0xLjg3LDQuNzItMjQuMzMsMjAuMTQtMjkuNzEsMjMuMy0xMC4zMSw2LjA1LTIxLjY3LDExLjEtMzMuMjcsMTQuMjMtLjE2LDEuODUsMy4yNi45OCw0LjM3Ljg2LDM2LjgtNC4wMiw3NS4yOC0yOS43NCw5NS40NS02MC41NSwxMS40MS0xNy40MywxNi42Ni0zMy4yNCwyMS44Ny01My4xMy44OC0zLjM2LDMuMzUtNi4wOSwyLjMyLTEwLjE5LDEuNjctLjI2LDEuMDcsMi40MSwxLjA0LDMuNTMtLjA5LDIuODUtLjkyLDUuMjMtMS4wOSw3LjkzLS4wNywxLjA4LS42NCwzLjc5LDEuMDMsMy41Mmw0Ljk2LTE5LjU0YzEuNTYtMTcuMzEsMy41NC0zMi4yOS43NS00OS42Ni0xLjAxLTYuMy00LjA2LTEzLjMyLTQuNzItMTkuMy0uMjQtMi4xNy40LTIuNjQsMS4yNS0uMjQuNzcsMi4xNywxLjE5LDQuNTIsMS43Nyw2Ljc1LDEuNzEuMjcsMS4wNy0yLjQuOTEtMy40LS42LTMuNTctMy4xLTEwLjk4LTQuNDQtMTQuNTctMy43OS0xMC4yMS0xMC4zMS0xOS42My0xMy40Ny0zMC4wMSwxLjU0Ljk1LDMuMTksMy43MSw0LjE5LDUuMywxMy4xMywyMC45OCwyMC42OSw0NC4zMiwyNC44Miw2OC43WiIvPgogICAgICAgIDxnPgogICAgICAgICAgPHBhdGggZD0iTTIyMC44OSw0MDYuMDJjLS4yNiwxLjMzLDEuODMsMS42LDIuNzQsMS43NSwzMi4xLDUuMjksNTguMjgsMS41MSw4OC4yNC0xMS4yNmwyOS4wMS0xNS40OGMtNC43Nyw1LjEyLTEyLjEyLDkuNjQtMTguMzMsMTMuMTYtNy4wNCwzLjk5LTE5LjI3LDcuNzItMjQuNjgsMTEuMzItLjQxLjI3LTEuMzIsMS4yNC0uOTksMS41aDUuOTljLTYuNjcsMS40Ny0xMy40OCw0LjgzLTE5Ljk3LDYuNTQtNS4xMywxLjM1LTE3LjY2LDIuMzctMjEuMDQsMy45Ni0uNDYuMjEtMS4yNiwxLjMtLjk4LDEuNTFsNC45OSwxYy0yOC4zLDUuNTktNTcuMTQtLjQ4LTg0LjQ4LTguMDEtMS42LDEuMDUuNzUsMS4xOCwxLjQ1LDEuNTMsMTMuMzMsNi42OSwyOS4yMiwxMC4wNyw0NC4wNCwxMS40OWwtMS4wMSwxLjk4LDUsLjAyYy4yNSwxLjcyLTIuMzcsMS4wNi0zLjQ4Ljk4LTMxLjc4LTIuNDEtNjcuMzktMTYuNTMtOTMuNDMtMzQuNTgtMTcuNDYtMTIuMS0zMS4xNS0yNy4wMy00NS41NC00MS40NWwtMjAuNTMtMzEuOTYtMSwzLjk5Yy0uMTItLjcxLTEuOTktOS4yNC00LjAxLTYuOTguNjksMi43NSwyLjYzLDUuNDQsMy41NCw3Ljk1LjM0Ljk0LDEuMzIsMy4yNS0uNTMsMy4wMy0xMC42OC0yMS44NS0xNy44My00NS45NS0xOS4wNS03MC40NS0uNDItOC40OSwzLjMtNDEuNCw4LjE2LTQ3LjQyLjE3LS4yMSwzLjA2LDEuMTgsMy44Ny0yLjY1bC0xLjk4LS40N2MtLjg1LTUuMDQsMy42NC02LjUyLDUuNjYtOS44MnM5LjM3LTE2LjcsMTAuMzEtMTkuNzFjLjE2LS41MS4yNy0xLjYzLS40OC0xLjQ4LTIuNzUsMi4xOC0zLjgzLDUuNTktNS42Niw4LjM0LS42OCwxLjAyLTIuMDIsMy4xMi0xLjgzLjE4LDExLjc1LTI0LjQ3LDI4LjEzLTQyLjQxLDUwLjY1LTU3LjM1LDUuOTYtMy45NSwxMi44Mi02LjUsMTguMzMtMTEuMTYtOS43My41LTIyLjE4LDQuMzItMzAuOTksOC41LTMuMywxLjU3LTguNTIsNi4wOC0xMS4wNyw2Ljk2LTEuNjQuNTctMy4wOC0uNi01LjIxLjUtMS44LjkzLTEwLjY0LDguNi0xMi43NCwxMC41MS0yNC43OSwyMi41Ni00MS4yNiw1Ny41MS00Niw5MC41MS0xLjYxLjA1LTIuMDUtMy41My0yLjA0LTQuNTMuMDUtNC4wOSwxLjMtMTAuMjksMi4wNS0xNC40NmwtMy44OS4xYy0yLjIsMTEuOTYtNS43OSwyMy41OC01LjEyLDM1Ljg4bC0yLTYuOTljLTEuNDctLjA5LTEuNzYsMy41OS0xLjg3LDQuNjEtMi40NywyMy44NSw2LjI4LDU4LjIxLDE1LjQsODAuMzYsMS4wMiwyLjQ5LDkuMTQsMTcuMjEsOC40OCwxOC4wMS0xLjU5LDEuOTItMi4xNC0xLjQ5LTIuNDctMS45OS0xMy4zNC0yMC4yMi0yMS42Mi00My4xLTI1LjU0LTY3LjAxbC0xLjk4LDEuMDFjLTIuMzYtMTUuMTEtNC45NS0yOS4wNy00LjA1LTQ0LjU0LjMyLTUuNDQsMi42Mi0xMC44NywyLjAzLTE2LjQ2bC0zLjk4LDE2LjUxYy0uOTUsMTAuMzEtLjU5LDIwLjY4LTEuMDEsMzEtLjA1LDEuMjEuNzYsMy43Mi0uOTksMy40OC0yLjAxLTE4LjI0LS41NC0zNi4zMSwzLjI4LTU0LjIsNS42OS0yNi42LDE4LjI4LTU0LjI3LDM2LjE5LTc0LjgxLDEyLjUzLTE0LjM3LDI4LjEyLTI3Ljk5LDQyLjg4LTM4LjY4LDIuMDktMS41MSw1LjA0LTMuOCw3LjMxLTUuMTMsOC4xLTQuNzIsMTcuODQtNS45OSwyNS4zMS0xMS42OC0uNTgtMS4xMS0zLjA2LS4zNi00LjA2LS4wNi00LjkzLDEuNDUtMTIuMTUsNC4wNy0xNi45Miw2LjA4LTUuOTIsMi41LTExLjU0LDUuNzEtMTcsOS4wNmwtMy4wMS0xLjU2YzcuMzEtMy4yNywxMy41My03LjI4LDIxLjAzLTEwLjQ4LDQxLjYzLTE3LjcyLDEwNS4zMi0yMCwxMzcuMzYsMTYuNTMsNy40NSw4LjQ5LDE5LjI1LDIyLjU4LDI1LjA1LDMwLjk5LDEuODgsMi43MiwyLjc5LDUuNzQsMS41NSw4Ljk0aDMuMDJjLS41OC45NC0uOTksNi41Ni0uOCw2Ljg0LjQ0LjY1LDIuOTcuNjQsMy4zOCwyLjY0LjI5LDEuNDMsMS40OSwxNC43LDEuNDMsMTUuOTUtLjAzLjYtMS44MS40Ny0yLjAxLDEuMjUtLjg0LDMuMjcuNDcsMTIuNTEtLjA3LDE2LjY4LS45NSw3LjM0LTYuMTksMTAuMTItOS44MywxNS4yNy0xLjI4LDEuODEtMS45OCw2LjU3LTQuMTUsNy44NC0xLjc3LDEuMDQtNC45NS42NC03LjE4LDEuNjEtMi4zNCwxLjAyLTMuNTEsNi42Ni03Ljc4LDQuOTNsMi45OS0xMWMtMy4zOSw0LjA2LTEzLjU2LDEwLjAzLTEwLjIxLjI4LDEuMzEtMy44MS44NC0zLjI4LDEuNTEtNi41NC44MS0zLjkyLDMuNzktMTIuOTIsMy43MS0xNi4xNi0uMDEtLjQyLTEuOTktLjk4LTIuNy0yLjM2LTQuMDItNy44Mi02LjM1LTE1LjE3LTEyLjY2LTIxLjg3LTExLjMtMTItNDIuMzMtMTguMi01Ny44OS0xNC4xLTE2Ljg4LDQuNDUtNDQuNjUsMjYuNDQtNTEuMyw0Mi43LTgsMTkuNTgtMTUuMTcsMzkuNjctMTIuMyw2MS4zOCw0LjA5LDMwLjg2LDE2LjE2LDUzLjYsMzMuNCw3OC42LDEuNTMsMi4yMiw0LjIxLDMuNTksNS40NCw2LjA1LTMuNzktMS4zNy03Ljc1LTUuOTQtMTAuNTEtOC45OC0xMC45My0xMS45OS0xOS44OS0yNi4yNS0yNi41LTQxLjAxLTMuMDMsMS40LDMuMjksNi43Mi0uOTcsNy45OWwtNy4wMy0xNy45OS0xLjk4LDEuOTljLS40Mi0yLjYtMS4wOC04LjIzLTQuMDItOC40OCw0LjMsMjguMjgsMTIuOTgsNTIuNjYsMzEuMDQsNzQuOTYsMjcuNDgsMzMuOTQsNzIuOTMsNjEuMzIsMTE3LjM1LDYyLjY1bDguNjIsMS44OGgtMjFaIi8+CiAgICAgICAgICA8cGF0aCBkPSJNMjg4LjQ4LDQxLjQzYzE3LDEzLjA0LDI2LjQ2LDI0LjkxLDM2LjU4LDQzLjkyLDE1Ljc5LDI5LjY4LDIyLjc5LDYyLjM3LDE1LjgyLDk1LjY3LTEuNjcuMjYtMS4wOS0yLjQzLTEuMDMtMy41My4yLTMuNDksMS42NC02Ljg3LDEuMDMtMTAuNDdsLTEuNTEuOThjLTIuOCwyMS43Mi0xMC41OSw0NS44NC0yMy4wNSw2My45NS01LjY4LDguMjYtOS44NSwxMC41NS0xNi45NSwxNi4wNS0yLjk1LDIuMjktNi4xOSw4LjE3LTkuNDgsNy41MiwxLjA3LTEuODMsNS44NS0zLjk1LDQuNDktNi41MWwtMTAuNDksNyw4Ljk5LTguNS0xLjQ4LS40OWMtMTguNjIsMTcuMTktNDguNjUsMjkuNDYtNzMuNTEsMTkuNDQtMS42LS42NS0yLjQ1LjEtMS45OS0yLjQ1LDEzLjc2LDYuMTcsMjcuODEsMi4wMyw0MC45Ny0zLjUyLDM2LjAyLTE1LjE5LDU3LjE2LTUzLjQ4LDU2LjkyLTkyLjA5LS4wMi0zLjE5LS41Mi0xMS43LTIuODktMTMuMzksMS44OSwxMC0uMywyMi40Ny0zLjMxLDMyLjIxLS4zMiwxLjA1LS4yNiwzLjAzLTEuNjksMi43OSw5Ljc1LTUxLjA4LTIwLjUyLTEwMC41NC02My43MS0xMjUuOC02LjQ1LTMuNzctMTQuMzUtNS42Ni0xOS41Ni0xMC40OWwtMTguNzQtNi43YzIuMDktLjA3LDQuMTgtLjE0LDYuMjYuMjMsMjAuOTcsMy43NywzOS44NCwxNC4zNiw1OC40NCwyMy41NSwxLjczLjg1LDMuNDUsMS44Myw1LjA0LDIuOSwyLjgyLDEuODgsOC42OSw5LjgxLDkuNzcsMTAuMy40My4yLDEuNjQuMjUsMS40OC0uNDktMzEuNzMtMzkuNzgtODMuNTMtNTguNjMtMTMzLjk5LTUzLjUybDcuOTktMi45OGMtMTguMjUuMjEtMzcuNDcsNC40MS01NC41MiwxMC45Ny0yLjg2LjI4LS44Ny0xLjI5LjE2LTEuODUsMS4yMS0uNjUsMTQuNzItNS4xMiwxMy4zNy02LjEyLTE2LjY3LDMuNjUtMzMuMTIsMTEuNy00Ny41MiwyMC45Ny05LjE1LDUuODktMTUuODIsMTIuMTMtMjMuOTcsMTkuMDItMS4xMi45NS0xLjYzLDIuNDItMy41LDEuOTksMy42My0zLjQyLDQuMzEtNy41Myw3LjgyLTEwLjksNS40Mi01LjIyLDE2LjA3LTEzLjEzLDIyLjQ0LTE3LjM5LDMyLjA3LTIxLjQ1LDY5LjEzLTMxLjM4LDEwNy43NC0zMC43MS0uNTMtMS41NS01LjAxLTEuNzktNi41MS0xLjk4LTMuOTEtLjQ5LTEyLjY5LjQ4LTE0LjgyLjAxLS43My0uMTYtLjYtMS45Mi0xLjMzLTIuMDYtMi45OC0uNTMtMTAuNzgsMS43LTE0LjMzLDEuMDItLjI0LTEuMzcsMS43OC0xLjUxLDIuNzUtMS43Miw2LjU5LTEuNDQsMTMuOTgtMS4xLDIwLjcyLTIuMzEsMS43Ny0uMzIsMi45OSwxLjEsMi41Mi0xLjk1bC0zOC45OSwzLjk4LDE2Ljk5LTQtNC45OS0xLjk4YzUyLjEyLTcuOTIsMTA0LjI4LDcuNzMsMTQ1LjU5LDM5LjRaIi8+CiAgICAgICAgICA8cGF0aCBkPSJNODAuODksMzQ2LjAxYy00LjUyLjUxLTMuNDQtMi45NC00LjEtMy44Ni0uMTItLjE2LTEuNDMuNTMtMS45MS4yNC0zLjE0LTEuODktMy4yMi02LjEzLTMuMDEtOS4zN2wtMS45OCwxLjk5LTIuMDItMy41MWMxLjk1LS44LDIuMjktMS4yMSwyLjAxLTMuNDhsMTAuOTksMTcuOThaIi8+CiAgICAgICAgPC9nPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=";
@@ -5958,9 +6146,9 @@ var resolveLogoNode = (logo, size, alt = SANQIAN_LOGO_ALT) => {
 var useChatHeader = (config) => {
   const resolvedOnClose = useMemo4(() => resolveOnClose(config?.onClose), [config?.onClose]);
   const resolvedOnPin = useMemo4(() => resolveOnPin(config?.onPin), [config?.onPin]);
-  const [isPinned, setIsPinned] = useState8(config?.alwaysOnTop ?? false);
+  const [isPinned, setIsPinned] = useState10(config?.alwaysOnTop ?? false);
   const isFirstRender = useRef5(true);
-  useEffect10(() => {
+  useEffect12(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
@@ -5973,7 +6161,7 @@ var useChatHeader = (config) => {
   const showPin = !!resolvedOnPin || typeof config?.alwaysOnTop === "boolean";
   const showClose = !!resolvedOnClose;
   const logoNode = useMemo4(() => resolveLogoNode(config?.logo, "header"), [config?.logo]);
-  const togglePin = useCallback7(() => {
+  const togglePin = useCallback9(() => {
     setIsPinned((prev) => {
       const nextPinned = !prev;
       resolvedOnPin?.(nextPinned);
@@ -5993,9 +6181,9 @@ var useChatHeader = (config) => {
 // src/renderer/components/SanqianMessageList.tsx
 import {
   useRef as useRef7,
-  useEffect as useEffect12,
-  useCallback as useCallback9,
-  useState as useState10,
+  useEffect as useEffect14,
+  useCallback as useCallback11,
+  useState as useState12,
   useMemo as useMemo7,
   useImperativeHandle,
   forwardRef
@@ -6093,7 +6281,7 @@ var MarkdownRenderer = memo3(function MarkdownRenderer2({
 });
 
 // src/renderer/components/IntermediateSteps.tsx
-import { memo as memo5, useState as useState9, useRef as useRef6, useEffect as useEffect11, useCallback as useCallback8, useMemo as useMemo6 } from "react";
+import { memo as memo5, useState as useState11, useRef as useRef6, useEffect as useEffect13, useCallback as useCallback10, useMemo as useMemo6 } from "react";
 
 // src/renderer/renderers/ToolArgumentsDisplay.tsx
 import { memo as memo4 } from "react";
@@ -6222,7 +6410,7 @@ function ExpandableText({
   style,
   maxLines = 3
 }) {
-  const [isExpanded, setIsExpanded] = useState9(false);
+  const [isExpanded, setIsExpanded] = useState11(false);
   const trimmed = content.trim();
   const lines = trimmed.split("\n");
   const needsExpand = lines.length > maxLines;
@@ -6243,7 +6431,7 @@ function ExpandableText({
   );
 }
 function ToolCallItem({ toolCall, toolResult }) {
-  const [expanded, setExpanded] = useState9(false);
+  const [expanded, setExpanded] = useState11(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";
@@ -6281,7 +6469,7 @@ function StreamingToolCallItem({
   isActive,
   strings
 }) {
-  const [expanded, setExpanded] = useState9(false);
+  const [expanded, setExpanded] = useState11(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";
@@ -6360,14 +6548,14 @@ var ThinkingSection = memo5(function ThinkingSection2({
 }) {
   const contentRef = useRef6(null);
   const isUserScrollingRef = useRef6(false);
-  const [loadingSymbolIndex, setLoadingSymbolIndex] = useState9(0);
-  const [manualExpanded, setManualExpanded] = useState9(false);
+  const [loadingSymbolIndex, setLoadingSymbolIndex] = useState11(0);
+  const [manualExpanded, setManualExpanded] = useState11(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;
-  useEffect11(() => {
+  useEffect13(() => {
     if (effectiveIsStreaming) {
       const interval = setInterval(() => {
         setLoadingSymbolIndex((prev) => (prev + 1) % LOADING_SYMBOLS.length);
@@ -6375,13 +6563,13 @@ var ThinkingSection = memo5(function ThinkingSection2({
       return () => clearInterval(interval);
     }
   }, [effectiveIsStreaming]);
-  useEffect11(() => {
+  useEffect13(() => {
     if (effectiveIsStreaming && isExpanded && contentRef.current && !isUserScrollingRef.current) {
       contentRef.current.scrollTop = contentRef.current.scrollHeight;
     }
   }, [displayContent, effectiveIsStreaming, isExpanded]);
   const prevManualExpandedRef = useRef6(manualExpanded);
-  useEffect11(() => {
+  useEffect13(() => {
     const wasCollapsed = !prevManualExpandedRef.current;
     const isNowExpanded = manualExpanded;
     if (wasCollapsed && isNowExpanded && !effectiveIsStreaming && contentRef.current) {
@@ -6389,13 +6577,13 @@ var ThinkingSection = memo5(function ThinkingSection2({
     }
     prevManualExpandedRef.current = manualExpanded;
   }, [manualExpanded, effectiveIsStreaming]);
-  const handleScroll = useCallback8(() => {
+  const handleScroll = useCallback10(() => {
     if (!contentRef.current || !effectiveIsStreaming) return;
     const { scrollTop, scrollHeight, clientHeight } = contentRef.current;
     const isAtBottom = scrollHeight - scrollTop - clientHeight < 20;
     isUserScrollingRef.current = !isAtBottom;
   }, [effectiveIsStreaming]);
-  useEffect11(() => {
+  useEffect13(() => {
     if (!effectiveIsStreaming) {
       isUserScrollingRef.current = false;
     }
@@ -6440,7 +6628,7 @@ var IntermediateSteps = memo5(function IntermediateSteps2({
   defaultExpanded = false,
   strings = {}
 }) {
-  const [isExpanded, setIsExpanded] = useState9(defaultExpanded);
+  const [isExpanded, setIsExpanded] = useState11(defaultExpanded);
   const rounds = useMemo6(() => groupBlocksIntoRounds(blocks), [blocks]);
   if (rounds.length === 0) return null;
   const stepCount = rounds.filter((round) => round.toolCalls.length > 0).length;
@@ -6532,7 +6720,7 @@ var StreamingTimeline = memo5(function StreamingTimeline2({
   className = "",
   strings = {}
 }) {
-  const [isExpanded, setIsExpanded] = useState9(true);
+  const [isExpanded, setIsExpanded] = useState11(true);
   const isUserScrollingRef = useRef6(false);
   const timelineRef = useRef6(null);
   const isThinkingActive = isThinkingStreaming;
@@ -6601,18 +6789,18 @@ var StreamingTimeline = memo5(function StreamingTimeline2({
   }, [rounds, activeThinking, isThinkingActive, isToolsActive]);
   const stepCount = rounds.filter((round) => round.toolCalls.length > 0).length;
   const summary = `${stepCount} ${strings.steps || "\u6B65"}`;
-  const handleScroll = useCallback8(() => {
+  const handleScroll = useCallback10(() => {
     if (!timelineRef.current) return;
     const { scrollTop, scrollHeight, clientHeight } = timelineRef.current;
     const isAtBottom = scrollHeight - scrollTop - clientHeight < 20;
     isUserScrollingRef.current = !isAtBottom;
   }, []);
-  useEffect11(() => {
+  useEffect13(() => {
     if (isExpanded && timelineRef.current && !isUserScrollingRef.current) {
       timelineRef.current.scrollTop = timelineRef.current.scrollHeight;
     }
   }, [displayRounds, isExpanded]);
-  useEffect11(() => {
+  useEffect13(() => {
     if (!isThinkingActive && !isToolsActive) {
       isUserScrollingRef.current = false;
     }
@@ -6762,7 +6950,7 @@ var INCREASE_VIEWPORT_BY = { top: 1500, bottom: 1500 };
 function ResizeAwareMessage({ message, onHeightChange }) {
   const containerRef = useRef7(null);
   const prevHeightRef = useRef7(0);
-  useEffect12(() => {
+  useEffect14(() => {
     const container = containerRef.current;
     if (!container || !onHeightChange) return;
     let rafId = null;
@@ -6787,13 +6975,13 @@ function ResizeAwareMessage({ message, onHeightChange }) {
 var SanqianMessageList = forwardRef(
   function SanqianMessageList2({ messages, isLoading, className = "", emptyState, onClickEmpty, onAtBottomChange }, ref) {
     const virtuosoRef = useRef7(null);
-    const [, setAtBottomState] = useState10(true);
+    const [, setAtBottomState] = useState12(true);
     const atBottomRef = useRef7(true);
     const isManualScrollingRef = useRef7(false);
     const manualScrollTimeoutRef = useRef7(null);
     const isFollowOutputScrollingRef = useRef7(false);
     const followOutputScrollTimeoutRef = useRef7(null);
-    const setAtBottom = useCallback9(
+    const setAtBottom = useCallback11(
       (value) => {
         if (isManualScrollingRef.current) return;
         if (isFollowOutputScrollingRef.current && !value) return;
@@ -6814,7 +7002,7 @@ var SanqianMessageList = forwardRef(
       items.push({ id: "footer-spacer", type: "footer" });
       return items;
     }, [visibleMessages]);
-    const scrollToBottom = useCallback9(
+    const scrollToBottom = useCallback11(
       (behavior = "smooth", source) => {
         if (!virtuosoRef.current || allItems.length === 0) return;
         const isManualScroll = source === "scroll-button";
@@ -6847,7 +7035,7 @@ var SanqianMessageList = forwardRef(
       }),
       [scrollToBottom]
     );
-    useEffect12(() => {
+    useEffect14(() => {
       return () => {
         if (manualScrollTimeoutRef.current) {
           clearTimeout(manualScrollTimeoutRef.current);
@@ -6857,13 +7045,13 @@ var SanqianMessageList = forwardRef(
         }
       };
     }, []);
-    const handleMessageHeightChange = useCallback9(() => {
+    const handleMessageHeightChange = useCallback11(() => {
       if (isManualScrollingRef.current) return;
       if (atBottomRef.current && hasStreamingActivity) {
         scrollToBottom("auto", "height-change");
       }
     }, [scrollToBottom, hasStreamingActivity]);
-    const handleClick = useCallback9(
+    const handleClick = useCallback11(
       (e) => {
         const selection = window.getSelection();
         if (!selection || selection.isCollapsed) {
@@ -6874,7 +7062,7 @@ var SanqianMessageList = forwardRef(
       },
       [onClickEmpty]
     );
-    const handleFollowOutput = useCallback9((isAtBottom) => {
+    const handleFollowOutput = useCallback11((isAtBottom) => {
       if (isAtBottom) {
         if (followOutputScrollTimeoutRef.current) {
           clearTimeout(followOutputScrollTimeoutRef.current);
@@ -6888,7 +7076,7 @@ var SanqianMessageList = forwardRef(
       }
       return false;
     }, []);
-    const itemContent = useCallback9(
+    const itemContent = useCallback11(
       (_index, item) => {
         if ("type" in item && item.type === "footer") {
           return /* @__PURE__ */ jsx10("div", { className: "h-28" });
@@ -6924,10 +7112,10 @@ var SanqianMessageList = forwardRef(
 // src/renderer/components/ChatInput.tsx
 import {
   memo as memo7,
-  useState as useState11,
+  useState as useState13,
   useRef as useRef8,
-  useCallback as useCallback10,
-  useEffect as useEffect13,
+  useCallback as useCallback12,
+  useEffect as useEffect15,
   forwardRef as forwardRef2,
   useImperativeHandle as useImperativeHandle2
 } from "react";
@@ -6948,7 +7136,7 @@ var ChatInput = memo7(
     className = "",
     style
   }, ref) {
-    const [text, setText] = useState11("");
+    const [text, setText] = useState13("");
     const textareaRef = useRef8(null);
     const canSend = text.trim().length > 0 && !disabled && !isLoading;
     const showStopButton = isStreaming && !!onStop;
@@ -6963,13 +7151,13 @@ var ChatInput = memo7(
       }),
       [text]
     );
-    useEffect13(() => {
+    useEffect15(() => {
       if (autoFocus) {
         const timer = setTimeout(() => textareaRef.current?.focus(), 100);
         return () => clearTimeout(timer);
       }
     }, [autoFocus]);
-    const handleSubmit = useCallback10(
+    const handleSubmit = useCallback12(
       (e) => {
         e?.preventDefault();
         if (!canSend) return;
@@ -6978,7 +7166,7 @@ var ChatInput = memo7(
       },
       [text, canSend, onSend]
     );
-    const handleKeyDown = useCallback10(
+    const handleKeyDown = useCallback12(
       (e) => {
         if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
           e.preventDefault();
@@ -7046,7 +7234,7 @@ var ChatInput = memo7(
 );
 
 // src/renderer/components/HitlCard.tsx
-import { memo as memo8, useState as useState12, useEffect as useEffect14, useRef as useRef9 } from "react";
+import { memo as memo8, useState as useState14, useEffect as useEffect16, useRef as useRef9 } from "react";
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var defaultStrings = {
   approve: "Approve",
@@ -7097,16 +7285,16 @@ var HitlCard = memo8(function HitlCard2({
   const t = { ...defaultStrings, ...strings };
   const isApproval = interrupt.type === "approval_request";
   const isUserInput = interrupt.type === "user_input_request";
-  const [answer, setAnswer] = useState12(interrupt.default || "");
-  const [selectedIndices, setSelectedIndices] = useState12([]);
-  const [isComposing, setIsComposing] = useState12(false);
-  const [timeLeft, setTimeLeft] = useState12(interrupt.timeout ?? null);
-  const [rememberChoice, setRememberChoice] = useState12(false);
+  const [answer, setAnswer] = useState14(interrupt.default || "");
+  const [selectedIndices, setSelectedIndices] = useState14([]);
+  const [isComposing, setIsComposing] = useState14(false);
+  const [timeLeft, setTimeLeft] = useState14(interrupt.timeout ?? null);
+  const [rememberChoice, setRememberChoice] = useState14(false);
   const inputRef = useRef9(null);
   const textareaRef = useRef9(null);
   const riskLevel = interrupt.risk_level || "medium";
   const riskStyle = riskColors[riskLevel];
-  useEffect14(() => {
+  useEffect16(() => {
     if (isUserInput) {
       if (!interrupt.options || interrupt.options.length === 0) {
         inputRef.current?.focus();
@@ -7114,7 +7302,7 @@ var HitlCard = memo8(function HitlCard2({
       }
     }
   }, [isUserInput, interrupt.options]);
-  useEffect14(() => {
+  useEffect16(() => {
     if (timeLeft === null || timeLeft <= 0) return;
     const timer = setInterval(() => {
       setTimeLeft((prev) => {
@@ -7312,7 +7500,7 @@ var HitlCard = memo8(function HitlCard2({
 });
 
 // src/renderer/primitives/AlertBanner.tsx
-import { memo as memo9, useState as useState13 } from "react";
+import { memo as memo9, useState as useState15 } from "react";
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var AlertBanner = memo9(function AlertBanner2({
   type,
@@ -7324,7 +7512,7 @@ var AlertBanner = memo9(function AlertBanner2({
   maxLines = 3,
   strings
 }) {
-  const [isExpanded, setIsExpanded] = useState13(false);
+  const [isExpanded, setIsExpanded] = useState15(false);
   const defaultIcon = type === "error" ? (
     // Error icon (circle with X)
     /* @__PURE__ */ jsxs8("svg", { className: "size-4 shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
@@ -7449,7 +7637,7 @@ var SanqianChat = memo10(function SanqianChat2({
       chat.submitHitlInput({ cancelled: true });
     }
   };
-  useEffect15(() => {
+  useEffect17(() => {
     onStateChangeRef.current?.({
       messages: chat.messages,
       conversationId: chat.conversationId
@@ -7568,10 +7756,187 @@ var SanqianChat = memo10(function SanqianChat2({
 });
 
 // src/renderer/components/FloatingChat.tsx
-import { memo as memo11, useCallback as useCallback12, useMemo as useMemo9, useRef as useRef11 } from "react";
+import { memo as memo11, useCallback as useCallback15, useMemo as useMemo11, useRef as useRef12 } from "react";
+
+// src/renderer/components/ModeToggleButton.tsx
+import { useMemo as useMemo9 } from "react";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+function ModeToggleButton({ className, locale = "en" }) {
+  const { isEmbedded, toggleMode } = useChatPanel();
+  const strings = useMemo9(() => resolveChatStrings(locale), [locale]);
+  const handleClick = async () => {
+    await toggleMode();
+  };
+  const tooltipText = isEmbedded ? strings.floatWindow : strings.embedWindow;
+  return /* @__PURE__ */ jsxs10("div", { className: `chat-tooltip-wrapper ${className || ""}`, children: [
+    /* @__PURE__ */ jsx15(
+      "button",
+      {
+        onClick: handleClick,
+        className: headerIconButtonClass,
+        "aria-label": tooltipText,
+        children: isEmbedded ? (
+          // Float out icon - two overlapping panels (macOS style)
+          /* @__PURE__ */ jsxs10("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+            /* @__PURE__ */ jsx15("rect", { x: "8", y: "3", width: "13", height: "13", rx: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+            /* @__PURE__ */ jsx15("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__ */ jsxs10("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+            /* @__PURE__ */ jsx15("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+            /* @__PURE__ */ jsx15("path", { d: "M15 4v16", strokeLinecap: "round" })
+          ] })
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx15("div", { className: "chat-tooltip", children: tooltipText })
+  ] });
+}
+
+// src/renderer/components/AttachButton.tsx
+import { useMemo as useMemo10 } from "react";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+function AttachButton({ className, locale = "en" }) {
+  const { isAttached, isAvailable, toggle } = useAttachState();
+  const { isFloating } = useChatPanel();
+  const strings = useMemo10(() => resolveChatStrings(locale), [locale]);
+  if (!isFloating || !isAvailable) return null;
+  const handleClick = async () => {
+    await toggle();
+  };
+  const tooltipText = isAttached ? strings.detachWindow : strings.attachWindow;
+  return /* @__PURE__ */ jsxs11("div", { className: `chat-tooltip-wrapper ${className || ""}`, children: [
+    /* @__PURE__ */ jsx16(
+      "button",
+      {
+        onClick: handleClick,
+        className: headerIconButtonClass,
+        "aria-label": tooltipText,
+        children: isAttached ? (
+          // Attached state: filled icon
+          /* @__PURE__ */ jsxs11("svg", { className: headerIconClass, viewBox: "0 0 16 16", fill: "currentColor", children: [
+            /* @__PURE__ */ jsx16("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__ */ jsx16("path", { d: "M9.5 6.5h3v1h-3v-1z", fill: "var(--bg-color, #fff)" })
+          ] })
+        ) : (
+          // Detached state: outline icon
+          /* @__PURE__ */ jsxs11("svg", { className: headerIconClass, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+            /* @__PURE__ */ jsx16("rect", { x: "2.5", y: "2.5", width: "11", height: "11", rx: "2" }),
+            /* @__PURE__ */ jsx16("path", { d: "M9.5 6.5h3", strokeLinecap: "round" })
+          ] })
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx16("div", { className: "chat-tooltip", children: tooltipText })
+  ] });
+}
+
+// src/renderer/components/Resizer.tsx
+import { useCallback as useCallback14, useRef as useRef11, useEffect as useEffect18, useState as useState16 } from "react";
+import { jsx as jsx17, jsxs as jsxs12 } from "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] = useState16(false);
+  const [isDragging, setIsDragging] = useState16(false);
+  const startX = useRef11(0);
+  const startWidth = useRef11(0);
+  const handleDoubleClick = useCallback14(() => {
+    setWidth(defaultWidth, true);
+  }, [defaultWidth, setWidth]);
+  const handleMouseDown = useCallback14((e) => {
+    e.preventDefault();
+    setIsDragging(true);
+    startX.current = e.clientX;
+    startWidth.current = width;
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  }, [width]);
+  useEffect18(() => {
+    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__ */ jsxs12(
+    "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__ */ jsx17(
+          "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__ */ jsx17(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: -2,
+              right: -2
+            }
+          }
+        )
+      ]
+    }
+  );
+}
 
 // src/renderer/hooks/useWindowBackgroundSync.ts
-import { useEffect as useEffect16 } from "react";
+import { useEffect as useEffect19 } from "react";
 var cachedPlatform = null;
 var getPlatform = () => {
   if (cachedPlatform !== null) return cachedPlatform;
@@ -7589,7 +7954,7 @@ var setBackgroundColor = (color) => {
   }
 };
 function useWindowBackgroundSync(isDarkMode) {
-  useEffect16(() => {
+  useEffect19(() => {
     if (getPlatform() !== "win32") return;
     const colors = getBaseColors(isDarkMode);
     setBackgroundColor(colors.bg);
@@ -7597,7 +7962,7 @@ function useWindowBackgroundSync(isDarkMode) {
 }
 
 // src/renderer/components/FloatingChat.tsx
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var FloatingChat = memo11(function FloatingChat2({
   messages,
   isLoading,
@@ -7619,8 +7984,8 @@ var FloatingChat = memo11(function FloatingChat2({
   header,
   footer
 }) {
-  const chatContainerRef = useRef11(null);
-  const chatInputRef = useRef11(null);
+  const chatContainerRef = useRef12(null);
+  const chatInputRef = useRef12(null);
   useChatStyles();
   useFocusPersistence({
     containerRef: chatContainerRef,
@@ -7632,18 +7997,18 @@ var FloatingChat = memo11(function FloatingChat2({
   const { themeClass, isDarkMode } = useResolvedTheme(themeMode);
   const accentStyle = useAccentStyle(resolvedConfig?.accentColor);
   useWindowBackgroundSync(isDarkMode);
-  const rootStyle = useMemo9(() => ({
+  const rootStyle = useMemo11(() => ({
     ...accentStyle || {},
     minHeight: "100vh",
     minWidth: "100vw"
   }), [accentStyle]);
   const resolvedLogo = logo ?? resolvedConfig?.logo;
   const resolvedLocale = resolvedConfig?.locale ?? locale;
-  const resolvedStrings = useMemo9(
+  const resolvedStrings = useMemo11(
     () => resolveChatStrings(resolvedLocale, resolvedConfig?.strings),
     [resolvedLocale, resolvedConfig?.strings]
   );
-  const headerConfig = useMemo9(
+  const headerConfig = useMemo11(
     () => {
       if (!resolvedConfig) {
         return resolvedLogo ? { logo: resolvedLogo } : void 0;
@@ -7656,71 +8021,77 @@ var FloatingChat = memo11(function FloatingChat2({
     [resolvedConfig, resolvedLogo]
   );
   const { logoNode, showPin, showClose, isPinned, togglePin, resolvedOnClose } = useChatHeader(headerConfig);
-  const emptyLogoNode = useMemo9(() => resolveLogoNode(resolvedLogo, "empty"), [resolvedLogo]);
+  const emptyLogoNode = useMemo11(() => resolveLogoNode(resolvedLogo, "empty"), [resolvedLogo]);
   const inputPlaceholder = placeholder ?? resolvedStrings.inputPlaceholder;
   const showHeader = !!(header || logoNode || showPin || showClose);
-  const defaultHeader = /* @__PURE__ */ jsxs10("header", { className: "flex h-9 flex-shrink-0 items-center px-2 border-b chat-divider-border", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+  const defaultHeader = /* @__PURE__ */ jsxs13("header", { className: "flex h-9 flex-shrink-0 items-center px-2 border-b chat-divider-border", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
       logoNode,
-      /* @__PURE__ */ jsx15("span", { className: "text-sm font-medium text-[var(--chat-text)]", children: resolvedStrings.chat })
+      /* @__PURE__ */ jsx18("span", { className: "text-sm font-medium text-[var(--chat-text)]", children: resolvedStrings.chat })
     ] }),
-    /* @__PURE__ */ jsx15("div", { className: "flex-1" }),
-    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1", children: [
-      showPin && /* @__PURE__ */ jsx15(
-        "button",
-        {
-          onClick: togglePin,
-          className: headerIconButtonClass,
-          title: isPinned ? resolvedStrings.unpin : resolvedStrings.pin,
-          children: /* @__PURE__ */ jsx15("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: isPinned ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
-            /* @__PURE__ */ jsx15("path", { d: "M12 17v5" }),
-            /* @__PURE__ */ jsx15("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__ */ jsxs10(Fragment3, { children: [
-            /* @__PURE__ */ jsx15("path", { d: "M12 17v5" }),
-            /* @__PURE__ */ jsx15("path", { d: "M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" }),
-            /* @__PURE__ */ jsx15("path", { d: "m2 2 20 20" }),
-            /* @__PURE__ */ jsx15("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__ */ jsx15(
-        "button",
-        {
-          onClick: resolvedOnClose,
-          className: headerIconButtonClass,
-          title: resolvedStrings.close,
-          children: /* @__PURE__ */ jsx15("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx15("path", { d: "M6 6l12 12M18 6l-12 12", strokeLinecap: "round", strokeLinejoin: "round" }) })
-        }
-      )
+    /* @__PURE__ */ jsx18("div", { className: "flex-1" }),
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx18(ModeToggleButton, { locale: resolvedLocale }),
+      /* @__PURE__ */ jsx18(AttachButton, { locale: resolvedLocale }),
+      showPin && /* @__PURE__ */ jsxs13("div", { className: "chat-tooltip-wrapper", children: [
+        /* @__PURE__ */ jsx18(
+          "button",
+          {
+            onClick: togglePin,
+            className: headerIconButtonClass,
+            children: /* @__PURE__ */ jsx18("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: isPinned ? /* @__PURE__ */ jsxs13(Fragment3, { children: [
+              /* @__PURE__ */ jsx18("path", { d: "M12 17v5" }),
+              /* @__PURE__ */ jsx18("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__ */ jsxs13(Fragment3, { children: [
+              /* @__PURE__ */ jsx18("path", { d: "M12 17v5" }),
+              /* @__PURE__ */ jsx18("path", { d: "M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" }),
+              /* @__PURE__ */ jsx18("path", { d: "m2 2 20 20" }),
+              /* @__PURE__ */ jsx18("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__ */ jsx18("div", { className: "chat-tooltip", children: isPinned ? resolvedStrings.unpin : resolvedStrings.pin })
+      ] }),
+      showClose && /* @__PURE__ */ jsxs13("div", { className: "chat-tooltip-wrapper", children: [
+        /* @__PURE__ */ jsx18(
+          "button",
+          {
+            onClick: resolvedOnClose,
+            className: headerIconButtonClass,
+            children: /* @__PURE__ */ jsx18("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx18("path", { d: "M6 6l12 12M18 6l-12 12", strokeLinecap: "round", strokeLinejoin: "round" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx18("div", { className: "chat-tooltip", children: resolvedStrings.close })
+      ] })
     ] })
   ] });
   const resolvedHeader = header ?? (showHeader ? defaultHeader : null);
-  const defaultRenderMessage = useCallback12(
+  const defaultRenderMessage = useCallback15(
     (message) => {
       if (message.role === "tool") return null;
       const isUser = message.role === "user";
-      return /* @__PURE__ */ jsx15("div", { className: `flex ${isUser ? "justify-end" : "justify-start"} mb-4`, children: /* @__PURE__ */ jsx15("div", { className: `text-left ${isUser ? "max-w-[80%]" : "w-full"}`, children: /* @__PURE__ */ jsx15("div", { className: `relative group ${isUser ? "inline-block max-w-full" : "block w-full"}`, children: /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx18("div", { className: `flex ${isUser ? "justify-end" : "justify-start"} mb-4`, children: /* @__PURE__ */ jsx18("div", { className: `text-left ${isUser ? "max-w-[80%]" : "w-full"}`, children: /* @__PURE__ */ jsx18("div", { className: `relative group ${isUser ? "inline-block max-w-full" : "block w-full"}`, children: /* @__PURE__ */ jsx18(
         "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__ */ jsx15("span", { className: "whitespace-pre-wrap", children: message.content }) : message.content && (renderContent ? /* @__PURE__ */ jsx15("div", { className: "prose prose-chat dark:prose-invert max-w-none px-3", children: renderContent(message.content, message.isStreaming ?? false) }) : /* @__PURE__ */ jsx15(MarkdownRenderer, { content: message.content, isStreaming: message.isStreaming, className: "px-3" }))
+          children: isUser ? /* @__PURE__ */ jsx18("span", { className: "whitespace-pre-wrap", children: message.content }) : message.content && (renderContent ? /* @__PURE__ */ jsx18("div", { className: "prose prose-chat dark:prose-invert max-w-none px-3", children: renderContent(message.content, message.isStreaming ?? false) }) : /* @__PURE__ */ jsx18(MarkdownRenderer, { content: message.content, isStreaming: message.isStreaming, className: "px-3" }))
         }
       ) }) }) });
     },
     [renderContent]
   );
-  const defaultRenderHitl = useCallback12(
-    (interrupt, onApprove, onReject) => /* @__PURE__ */ jsxs10("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__ */ jsx15("p", { className: "font-medium mb-2", children: interrupt.type === "approval_request" ? resolvedStrings.hitlApprovalRequired : resolvedStrings.hitlInputRequired }),
-      interrupt.tool && /* @__PURE__ */ jsxs10("p", { className: "text-sm mb-2", children: [
+  const defaultRenderHitl = useCallback15(
+    (interrupt, onApprove, onReject) => /* @__PURE__ */ jsxs13("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__ */ jsx18("p", { className: "font-medium mb-2", children: interrupt.type === "approval_request" ? resolvedStrings.hitlApprovalRequired : resolvedStrings.hitlInputRequired }),
+      interrupt.tool && /* @__PURE__ */ jsxs13("p", { className: "text-sm mb-2", children: [
         resolvedStrings.hitlToolLabel,
         ": ",
         interrupt.tool
       ] }),
-      interrupt.reason && /* @__PURE__ */ jsx15("p", { className: "text-sm mb-2", children: interrupt.reason }),
-      interrupt.question && /* @__PURE__ */ jsx15("p", { className: "text-sm mb-2", children: interrupt.question }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex gap-2 mt-3", children: [
-        /* @__PURE__ */ jsx15(
+      interrupt.reason && /* @__PURE__ */ jsx18("p", { className: "text-sm mb-2", children: interrupt.reason }),
+      interrupt.question && /* @__PURE__ */ jsx18("p", { className: "text-sm mb-2", children: interrupt.question }),
+      /* @__PURE__ */ jsxs13("div", { className: "flex gap-2 mt-3", children: [
+        /* @__PURE__ */ jsx18(
           "button",
           {
             onClick: onApprove,
@@ -7728,7 +8099,7 @@ var FloatingChat = memo11(function FloatingChat2({
             children: resolvedStrings.hitlApprove
           }
         ),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx18(
           "button",
           {
             onClick: onReject,
@@ -7740,9 +8111,10 @@ var FloatingChat = memo11(function FloatingChat2({
     ] }),
     [resolvedStrings]
   );
-  return /* @__PURE__ */ jsxs10("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__ */ jsx15("div", { className: "flex-shrink-0", children: resolvedHeader }),
-    messages.length === 0 ? /* @__PURE__ */ jsx15("div", { className: "flex flex-1 items-center justify-center p-4", children: /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center", children: emptyLogoNode }) }) : /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs13("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__ */ jsx18(Resizer, { position: "left", minWidth: 240, maxWidth: 600 }),
+    resolvedHeader && /* @__PURE__ */ jsx18("div", { className: "flex-shrink-0", children: resolvedHeader }),
+    messages.length === 0 ? /* @__PURE__ */ jsx18("div", { className: "flex flex-1 items-center justify-center p-4", children: /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center", children: emptyLogoNode }) }) : /* @__PURE__ */ jsx18(
       MessageList,
       {
         messages,
@@ -7750,12 +8122,12 @@ var FloatingChat = memo11(function FloatingChat2({
         renderMessage: renderMessage || defaultRenderMessage
       }
     ),
-    pendingInterrupt && /* @__PURE__ */ jsx15("div", { className: "flex-shrink-0", children: (renderHitl || defaultRenderHitl)(
+    pendingInterrupt && /* @__PURE__ */ jsx18("div", { className: "flex-shrink-0", children: (renderHitl || defaultRenderHitl)(
       pendingInterrupt,
       () => onApproveHitl?.(),
       () => onRejectHitl?.()
     ) }),
-    error && /* @__PURE__ */ jsx15("div", { className: "flex-shrink-0 px-3 pt-2", children: /* @__PURE__ */ jsx15(
+    error && /* @__PURE__ */ jsx18("div", { className: "flex-shrink-0 px-3 pt-2", children: /* @__PURE__ */ jsx18(
       AlertBanner,
       {
         type: "error",
@@ -7763,7 +8135,7 @@ var FloatingChat = memo11(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__ */ jsx15("div", { className: "flex-shrink-0 px-3 pb-3 pt-1 border-t chat-divider-border", children: /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx18("div", { className: "flex-shrink-0 px-3 pb-3 pt-1 border-t chat-divider-border", children: /* @__PURE__ */ jsx18(
       ChatInput,
       {
         ref: chatInputRef,
@@ -7778,16 +8150,16 @@ var FloatingChat = memo11(function FloatingChat2({
         autoFocus: true
       }
     ) }),
-    footer && /* @__PURE__ */ jsx15("div", { className: "flex-shrink-0", children: footer })
+    footer && /* @__PURE__ */ jsx18("div", { className: "flex-shrink-0", children: footer })
   ] });
 });
 
 // src/renderer/components/HistoryList.tsx
-import { memo as memo12, useState as useState14, useEffect as useEffect17, useRef as useRef12 } from "react";
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { memo as memo12, useState as useState17, useEffect as useEffect20, useRef as useRef13 } from "react";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 function DeleteButton({ onClick, title, colors }) {
-  const [isHovered, setIsHovered] = useState14(false);
-  return /* @__PURE__ */ jsx16(
+  const [isHovered, setIsHovered] = useState17(false);
+  return /* @__PURE__ */ jsx19(
     "button",
     {
       onClick,
@@ -7808,7 +8180,7 @@ function DeleteButton({ onClick, title, colors }) {
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ jsx16(
+      children: /* @__PURE__ */ jsx19(
         "svg",
         {
           style: { width: "0.875rem", height: "0.875rem" },
@@ -7816,7 +8188,7 @@ function DeleteButton({ onClick, title, colors }) {
           fill: "none",
           stroke: "currentColor",
           strokeWidth: "1.5",
-          children: /* @__PURE__ */ jsx16(
+          children: /* @__PURE__ */ jsx19(
             "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",
@@ -7830,8 +8202,8 @@ function DeleteButton({ onClick, title, colors }) {
   );
 }
 function LoadMoreButton({ onClick, colors, children }) {
-  const [isHovered, setIsHovered] = useState14(false);
-  return /* @__PURE__ */ jsx16(
+  const [isHovered, setIsHovered] = useState17(false);
+  return /* @__PURE__ */ jsx19(
     "button",
     {
       onClick,
@@ -7892,11 +8264,11 @@ var HistoryList = memo12(function HistoryList2({
   isDarkMode = false,
   strings = {}
 }) {
-  const [hoveredId, setHoveredId] = useState14(null);
-  const loadMoreRef = useRef12(null);
-  const isLoadingRef = useRef12(isLoading);
+  const [hoveredId, setHoveredId] = useState17(null);
+  const loadMoreRef = useRef13(null);
+  const isLoadingRef = useRef13(isLoading);
   isLoadingRef.current = isLoading;
-  useEffect17(() => {
+  useEffect20(() => {
     if (!hasMore || loadError || !onLoadMore) return;
     const sentinel = loadMoreRef.current;
     if (!sentinel) return;
@@ -7920,7 +8292,7 @@ var HistoryList = memo12(function HistoryList2({
     deleteText: "#ef4444",
     loadingDot: isDarkMode ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.2)"
   };
-  const loadingDots = /* @__PURE__ */ jsx16("div", { style: { display: "flex", justifyContent: "center", padding: "1.5rem 0" }, children: /* @__PURE__ */ jsx16("div", { style: { display: "flex", gap: "0.25rem" }, children: [0, 150, 300].map((delay) => /* @__PURE__ */ jsx16(
+  const loadingDots = /* @__PURE__ */ jsx19("div", { style: { display: "flex", justifyContent: "center", padding: "1.5rem 0" }, children: /* @__PURE__ */ jsx19("div", { style: { display: "flex", gap: "0.25rem" }, children: [0, 150, 300].map((delay) => /* @__PURE__ */ jsx19(
     "span",
     {
       style: {
@@ -7938,13 +8310,13 @@ var HistoryList = memo12(function HistoryList2({
     return loadingDots;
   }
   if (conversations.length === 0) {
-    return /* @__PURE__ */ jsx16("div", { style: { textAlign: "center", color: colors.muted, padding: "1.5rem 0", fontSize: "0.875rem" }, children: strings.noHistory || "No conversations yet" });
+    return /* @__PURE__ */ jsx19("div", { style: { textAlign: "center", color: colors.muted, padding: "1.5rem 0", fontSize: "0.875rem" }, children: strings.noHistory || "No conversations yet" });
   }
-  return /* @__PURE__ */ jsxs11("div", { style: { padding: "0.25rem 0.75rem 0" }, children: [
+  return /* @__PURE__ */ jsxs14("div", { style: { padding: "0.25rem 0.75rem 0" }, children: [
     conversations.map((conv) => {
       const isSelected = conv.id === selectedId;
       const isHovered = conv.id === hoveredId;
-      return /* @__PURE__ */ jsxs11(
+      return /* @__PURE__ */ jsxs14(
         "div",
         {
           style: {
@@ -7962,17 +8334,17 @@ var HistoryList = memo12(function HistoryList2({
           onMouseEnter: () => setHoveredId(conv.id),
           onMouseLeave: () => setHoveredId(null),
           children: [
-            /* @__PURE__ */ jsxs11("div", { style: { minWidth: 0, flex: 1 }, children: [
-              /* @__PURE__ */ jsx16("div", { style: {
+            /* @__PURE__ */ jsxs14("div", { style: { minWidth: 0, flex: 1 }, children: [
+              /* @__PURE__ */ jsx19("div", { style: {
                 fontSize: "0.875rem",
                 color: colors.text,
                 overflow: "hidden",
                 textOverflow: "ellipsis",
                 whiteSpace: "nowrap"
               }, children: conv.title || "Untitled" }),
-              /* @__PURE__ */ jsx16("div", { style: { fontSize: "0.75rem", color: colors.muted }, children: formatRelativeTime(conv.updatedAt, strings) })
+              /* @__PURE__ */ jsx19("div", { style: { fontSize: "0.75rem", color: colors.muted }, children: formatRelativeTime(conv.updatedAt, strings) })
             ] }),
-            isHovered && /* @__PURE__ */ jsx16(
+            isHovered && /* @__PURE__ */ jsx19(
               DeleteButton,
               {
                 onClick: (e) => {
@@ -7988,15 +8360,234 @@ var HistoryList = memo12(function HistoryList2({
         conv.id
       );
     }),
-    hasMore && /* @__PURE__ */ jsx16("div", { ref: loadMoreRef, style: { paddingTop: "0.5rem", textAlign: "center", minHeight: "2rem" }, children: isLoading ? loadingDots : loadError ? /* @__PURE__ */ jsx16(LoadMoreButton, { onClick: onLoadMore, colors, children: strings.loadMore || "Load more" }) : null })
+    hasMore && /* @__PURE__ */ jsx19("div", { ref: loadMoreRef, style: { paddingTop: "0.5rem", textAlign: "center", minHeight: "2rem" }, children: isLoading ? loadingDots : loadError ? /* @__PURE__ */ jsx19(LoadMoreButton, { onClick: onLoadMore, colors, children: strings.loadMore || "Load more" }) : null })
   ] });
 });
 
+// src/renderer/components/HistoryModal.tsx
+import { memo as memo13, useEffect as useEffect21, useCallback as useCallback17, useRef as useRef14, useState as useState18 } from "react";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+var ANIMATION_DURATION = 120;
+var HistoryModal = memo13(function HistoryModal2({
+  isOpen,
+  onClose,
+  title,
+  closeLabel = "Close",
+  children,
+  isDarkMode = false
+}) {
+  const modalRef = useRef14(null);
+  const [isClosing, setIsClosing] = useState18(false);
+  const [shouldRender, setShouldRender] = useState18(isOpen);
+  useEffect21(() => {
+    if (isOpen) {
+      setShouldRender(true);
+      setIsClosing(false);
+    }
+  }, [isOpen]);
+  const handleClose = useCallback17(() => {
+    setIsClosing(true);
+    setTimeout(() => {
+      setShouldRender(false);
+      setIsClosing(false);
+      onClose();
+    }, ANIMATION_DURATION);
+  }, [onClose]);
+  useEffect21(() => {
+    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]);
+  useEffect21(() => {
+    if (!isOpen || !modalRef.current) return;
+    modalRef.current.focus();
+  }, [isOpen]);
+  const handleBackdropClick = useCallback17(
+    (e) => {
+      if (e.target === e.currentTarget && !isClosing) {
+        handleClose();
+      }
+    },
+    [handleClose, isClosing]
+  );
+  if (!shouldRender) return null;
+  const closingClass = isClosing ? " chat-modal-closing" : "";
+  return /* @__PURE__ */ jsx20(
+    "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__ */ jsxs15(
+        "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__ */ jsxs15(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "8px 12px",
+                  borderBottom: "1px solid var(--chat-border)",
+                  flexShrink: 0
+                },
+                children: [
+                  /* @__PURE__ */ jsx20(
+                    "span",
+                    {
+                      id: "history-modal-title",
+                      style: {
+                        fontSize: "0.8125rem",
+                        fontWeight: 500,
+                        color: "var(--chat-text)"
+                      },
+                      children: title
+                    }
+                  ),
+                  /* @__PURE__ */ jsx20(
+                    "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__ */ jsx20(
+                        "svg",
+                        {
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          children: /* @__PURE__ */ jsx20("path", { d: "M18 6L6 18M6 6l12 12" })
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx20(
+              "div",
+              {
+                style: {
+                  flex: 1,
+                  overflow: "auto",
+                  minHeight: 0
+                },
+                className: "chat-scrollbar",
+                children
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+
 // src/renderer/components/CompactChat.tsx
-import { memo as memo13, useRef as useRef13, useState as useState15, useEffect as useEffect18, useCallback as useCallback14, useMemo as useMemo10 } from "react";
+import { memo as memo14, useRef as useRef15, useState as useState19, useEffect as useEffect22, useCallback as useCallback18, useMemo as useMemo12 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
-var CompactChat = memo13(function CompactChat2({
+
+// src/renderer/components/PanelControls.tsx
+import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+function PanelHeaderButtons({
+  showModeToggle = true,
+  showAttachToggle = true,
+  locale = "en"
+}) {
+  return /* @__PURE__ */ jsxs16(Fragment4, { children: [
+    showModeToggle && /* @__PURE__ */ jsx21(ModeToggleButton, { locale }),
+    showAttachToggle && /* @__PURE__ */ jsx21(AttachButton, { locale })
+  ] });
+}
+function PanelResizer({
+  showResizer = true,
+  resizerPosition = "left",
+  resizerMinWidth = 280,
+  resizerMaxWidth = 600
+}) {
+  if (!showResizer) return null;
+  return /* @__PURE__ */ jsx21(
+    Resizer,
+    {
+      position: resizerPosition,
+      minWidth: resizerMinWidth,
+      maxWidth: resizerMaxWidth
+    }
+  );
+}
+var PanelControls = {
+  HeaderButtons: PanelHeaderButtons,
+  Resizer: PanelResizer,
+  ModeToggleButton,
+  AttachButton
+};
+
+// src/renderer/components/CompactChat.tsx
+import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+var CompactChat = memo14(function CompactChat2({
   adapter,
   config,
   logo,
@@ -8031,12 +8622,12 @@ var CompactChat = memo13(function CompactChat2({
   const { themeClass, isDarkMode: resolvedIsDarkMode } = useResolvedTheme(themeMode);
   const accentStyle = useAccentStyle(resolvedConfig?.accentColor);
   const resolvedLogo = logo ?? resolvedConfig?.logo;
-  const baseStrings = useMemo10(
+  const baseStrings = useMemo12(
     () => resolveChatStrings(resolvedConfig?.locale, resolvedConfig?.strings),
     [resolvedConfig?.locale, resolvedConfig?.strings]
   );
-  const mergedStrings = useMemo10(() => ({ ...baseStrings, ...strings }), [baseStrings, strings]);
-  const headerConfig = useMemo10(
+  const mergedStrings = useMemo12(() => ({ ...baseStrings, ...strings }), [baseStrings, strings]);
+  const headerConfig = useMemo12(
     () => {
       if (!resolvedConfig) {
         return resolvedLogo ? { logo: resolvedLogo } : void 0;
@@ -8049,16 +8640,17 @@ var CompactChat = memo13(function CompactChat2({
     [resolvedConfig, resolvedLogo]
   );
   const { logoNode, showPin, showClose, isPinned, togglePin, resolvedOnClose } = useChatHeader(headerConfig);
-  const emptyLogoNode = useMemo10(() => resolveLogoNode(resolvedLogo, "empty"), [resolvedLogo]);
-  const chatContainerRef = useRef13(null);
-  const chatInputRef = useRef13(null);
-  const [showHistory, setShowHistory] = useState15(false);
-  const [connectionAlert, setConnectionAlert] = useState15(null);
-  const portalContainerRef = useRef13(inputPortalContainer ?? null);
+  const emptyLogoNode = useMemo12(() => resolveLogoNode(resolvedLogo, "empty"), [resolvedLogo]);
+  const { isEmbedded, toggleMode, hide: hidePanel } = useChatPanel();
+  const chatContainerRef = useRef15(null);
+  const chatInputRef = useRef15(null);
+  const [showHistory, setShowHistory] = useState19(false);
+  const [connectionAlert, setConnectionAlert] = useState19(null);
+  const portalContainerRef = useRef15(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,
@@ -8092,27 +8684,27 @@ var CompactChat = memo13(function CompactChat2({
     adapter,
     onError
   });
-  useEffect18(() => {
+  useEffect22(() => {
     if (sendMessageRef) {
       sendMessageRef.current = chat.sendMessage;
     }
   }, [sendMessageRef, chat.sendMessage]);
-  useEffect18(() => {
+  useEffect22(() => {
     if (newConversationRef) {
       newConversationRef.current = chat.newConversation;
     }
   }, [newConversationRef, chat.newConversation]);
-  useEffect18(() => {
+  useEffect22(() => {
     if (parentFocusInputRef) {
       parentFocusInputRef.current = () => chatInputRef.current?.focus();
     }
   }, [parentFocusInputRef]);
-  useEffect18(() => {
+  useEffect22(() => {
     if (parentSetTextRef) {
       parentSetTextRef.current = (text) => chatInputRef.current?.setValue(text);
     }
   }, [parentSetTextRef]);
-  useEffect18(() => {
+  useEffect22(() => {
     if (onMessageReceived && chat.messages.length > 0) {
       const lastMessage = chat.messages[chat.messages.length - 1];
       if (lastMessage.role === "assistant" && !lastMessage.isStreaming) {
@@ -8120,12 +8712,12 @@ var CompactChat = memo13(function CompactChat2({
       }
     }
   }, [chat.messages, onMessageReceived]);
-  useEffect18(() => {
+  useEffect22(() => {
     if (onLoadingChange) {
       onLoadingChange(chat.isLoading);
     }
   }, [chat.isLoading, onLoadingChange]);
-  useEffect18(() => {
+  useEffect22(() => {
     if (onStateChange) {
       onStateChange({
         messages: chat.messages,
@@ -8133,19 +8725,19 @@ var CompactChat = memo13(function CompactChat2({
       });
     }
   }, [chat.messages, chat.conversationId, onStateChange]);
-  useEffect18(() => {
+  useEffect22(() => {
     if (showHistory && connection.isConnected) {
       conversations.loadConversations();
     }
   }, [showHistory, connection.isConnected]);
-  const handleSelectConversation = useCallback14(
+  const handleSelectConversation = useCallback18(
     async (id) => {
       await chat.loadConversation(id);
       setShowHistory(false);
     },
     [chat]
   );
-  const handleDeleteConversation = useCallback14(
+  const handleDeleteConversation = useCallback18(
     async (id) => {
       await conversations.deleteConversation(id);
       if (id === chat.conversationId) {
@@ -8154,14 +8746,14 @@ var CompactChat = memo13(function CompactChat2({
     },
     [conversations, chat]
   );
-  const handleNewChat = useCallback14(() => {
+  const handleNewChat = useCallback18(() => {
     chat.newConversation();
     setShowHistory(false);
     setTimeout(() => {
       chatInputRef.current?.focus();
     }, 0);
   }, [chat]);
-  useEffect18(() => {
+  useEffect22(() => {
     const handleKeyDown = (e) => {
       const isMac2 = navigator.platform.includes("Mac");
       const modifierKey = isMac2 ? e.metaKey : e.ctrlKey;
@@ -8175,7 +8767,7 @@ var CompactChat = memo13(function CompactChat2({
   }, [handleNewChat]);
   const isMac = typeof navigator !== "undefined" && navigator.platform.includes("Mac");
   const shortcutKey = isMac ? "\u2318N" : "Ctrl+N";
-  const defaultRenderMessage = useCallback14((message) => {
+  const defaultRenderMessage = useCallback18((message) => {
     if (message.role === "tool") return null;
     const isUser = message.role === "user";
     const hasToolCalls = message.toolCalls && message.toolCalls.length > 0;
@@ -8187,9 +8779,9 @@ var CompactChat = memo13(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__ */ jsx17("div", { className: `flex ${isUser ? "justify-end" : "justify-start"} mb-4`, children: /* @__PURE__ */ jsxs12("div", { className: `text-left ${isUser ? "max-w-[80%]" : "w-full"}`, children: [
-      !isUser && showIntermediateSteps && message.blocks && /* @__PURE__ */ jsx17(IntermediateSteps, { blocks: message.blocks, strings: mergedStrings }),
-      showThinkingSection && /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx22("div", { className: `flex ${isUser ? "justify-end" : "justify-start"} mb-4`, children: /* @__PURE__ */ jsxs17("div", { className: `text-left ${isUser ? "max-w-[80%]" : "w-full"}`, children: [
+      !isUser && showIntermediateSteps && message.blocks && /* @__PURE__ */ jsx22(IntermediateSteps, { blocks: message.blocks, strings: mergedStrings }),
+      showThinkingSection && /* @__PURE__ */ jsx22(
         ThinkingSection,
         {
           thinking: message.thinking || "",
@@ -8200,7 +8792,7 @@ var CompactChat = memo13(function CompactChat2({
           strings: mergedStrings
         }
       ),
-      showStreamingTimeline && message.blocks && /* @__PURE__ */ jsx17(
+      showStreamingTimeline && message.blocks && /* @__PURE__ */ jsx22(
         StreamingTimeline,
         {
           blocks: message.blocks,
@@ -8211,23 +8803,22 @@ var CompactChat = memo13(function CompactChat2({
           strings: mergedStrings
         }
       ),
-      /* @__PURE__ */ jsx17("div", { className: `relative group ${isUser ? "inline-block max-w-full" : "block w-full"}`, style: { fontSize: "0.875rem" }, children: /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx22("div", { className: `relative group ${isUser ? "inline-block max-w-full" : "block w-full"}`, style: { fontSize: "0.875rem" }, children: /* @__PURE__ */ jsx22(
         "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__ */ jsx17("span", { className: "whitespace-pre-wrap", children: message.content }) : message.content && /* @__PURE__ */ jsx17(MarkdownRenderer, { content: message.content, isStreaming: message.isStreaming, className: "px-3" })
+          children: isUser ? /* @__PURE__ */ jsx22("span", { className: "whitespace-pre-wrap", children: message.content }) : message.content && /* @__PURE__ */ jsx22(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 = useMemo10(() => {
+  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 = useMemo12(() => {
     if (!floating) return null;
     return getBaseColors(resolvedIsDarkMode);
   }, [floating, resolvedIsDarkMode]);
-  const containerStyle = useMemo10(() => {
-    if (!floating || !baseColors) return accentStyle;
-    return {
+  const containerStyle = useMemo12(() => {
+    const baseStyle = floating && baseColors ? {
       ...accentStyle,
       // Override CSS variables with tinted colors for consistency with app
       "--chat-bg": baseColors.bg,
@@ -8235,9 +8826,17 @@ var CompactChat = memo13(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__ */ jsxs12(
+    } : accentStyle;
+    if (isEmbedded) {
+      return {
+        ...baseStyle,
+        borderRadius: 0,
+        boxShadow: "none"
+      };
+    }
+    return baseStyle;
+  }, [floating, baseColors, accentStyle, resolvedIsDarkMode, isEmbedded]);
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       ref: chatContainerRef,
@@ -8245,103 +8844,172 @@ var CompactChat = memo13(function CompactChat2({
       style: containerStyle,
       "data-chat-font-size": resolvedConfig?.fontSize || "normal",
       children: [
-        !hideHeader && /* @__PURE__ */ jsxs12("header", { className: "flex h-9 flex-shrink-0 items-center px-2 border-b chat-divider-border", style: { WebkitAppRegion: "drag" }, children: [
-          /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", style: { WebkitAppRegion: "no-drag" }, children: [
-            showHistory && /* @__PURE__ */ jsx17(
-              "button",
-              {
-                onClick: () => setShowHistory(false),
-                className: headerIconButtonClass,
-                title: "Back",
-                children: /* @__PURE__ */ jsx17("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx17("path", { d: "M15 19l-7-7 7-7", strokeLinecap: "round", strokeLinejoin: "round" }) })
-              }
-            ),
-            headerLeft || /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
-              logoNode,
-              /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium text-[var(--chat-text)]", children: headerTitle })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx17("div", { className: "flex-1" }),
-          /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-0.5", style: { WebkitAppRegion: "no-drag" }, children: [
-            /* @__PURE__ */ jsxs12("div", { className: "chat-tooltip-wrapper", children: [
-              /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx22(PanelResizer, {}),
+        !hideHeader && /* @__PURE__ */ jsx22("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__ */ jsxs17("div", { className: "flex items-center gap-0.5", style: { WebkitAppRegion: "no-drag" }, children: [
+            /* @__PURE__ */ jsxs17("div", { className: "chat-tooltip-wrapper", children: [
+              /* @__PURE__ */ jsx22(
+                "button",
+                {
+                  onClick: hidePanel,
+                  className: headerIconButtonClass,
+                  children: /* @__PURE__ */ jsxs17("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+                    /* @__PURE__ */ jsx22("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+                    /* @__PURE__ */ jsx22("path", { d: "M15 4v16", strokeLinecap: "round" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx22("div", { className: "chat-tooltip", children: mergedStrings.collapseSidebar })
+            ] }),
+            /* @__PURE__ */ jsxs17("div", { className: "chat-tooltip-wrapper", children: [
+              /* @__PURE__ */ jsx22(
+                "button",
+                {
+                  onClick: toggleMode,
+                  className: headerIconButtonClass,
+                  children: /* @__PURE__ */ jsxs17("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+                    /* @__PURE__ */ jsx22("rect", { x: "8", y: "3", width: "13", height: "13", rx: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+                    /* @__PURE__ */ jsx22("path", { d: "M5 8H4a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-1", strokeLinecap: "round", strokeLinejoin: "round" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx22("div", { className: "chat-tooltip", children: mergedStrings.floatWindow })
+            ] }),
+            /* @__PURE__ */ jsxs17("div", { className: "chat-tooltip-wrapper", children: [
+              /* @__PURE__ */ jsx22(
+                "button",
+                {
+                  onClick: () => setShowHistory(true),
+                  className: headerIconButtonClass,
+                  children: /* @__PURE__ */ jsx22("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx22("path", { d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              ),
+              /* @__PURE__ */ jsx22("div", { className: "chat-tooltip", children: mergedStrings.history || mergedStrings.recentChats })
+            ] }),
+            /* @__PURE__ */ jsxs17("div", { className: "chat-tooltip-wrapper", children: [
+              /* @__PURE__ */ jsx22(
                 "button",
                 {
                   onClick: handleNewChat,
                   className: headerIconButtonClass,
-                  children: /* @__PURE__ */ jsx17("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx17("path", { d: "M12 5v14m-7-7h14", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  children: /* @__PURE__ */ jsx22("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx22("path", { d: "M12 5v14m-7-7h14", strokeLinecap: "round", strokeLinejoin: "round" }) })
                 }
               ),
-              /* @__PURE__ */ jsxs12("div", { className: "chat-tooltip", children: [
-                /* @__PURE__ */ jsx17("div", { children: mergedStrings.newChat || "New Chat" }),
-                /* @__PURE__ */ jsx17("div", { className: "chat-tooltip-shortcut", children: shortcutKey })
+              /* @__PURE__ */ jsxs17("div", { className: "chat-tooltip", children: [
+                /* @__PURE__ */ jsx22("div", { children: mergedStrings.newChat || "New Chat" }),
+                /* @__PURE__ */ jsx22("div", { className: "chat-tooltip-shortcut", children: shortcutKey })
               ] })
             ] }),
-            !showHistory && /* @__PURE__ */ jsx17(
-              "button",
-              {
-                onClick: () => setShowHistory(true),
-                className: headerIconButtonClass,
-                title: mergedStrings.recentChats || "Recent Chats",
-                children: /* @__PURE__ */ jsx17("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx17("path", { d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z", strokeLinecap: "round", strokeLinejoin: "round" }) })
-              }
-            ),
-            showPin && /* @__PURE__ */ jsx17(
-              "button",
-              {
-                onClick: togglePin,
-                className: headerIconButtonClass,
-                title: isPinned ? mergedStrings.unpin : mergedStrings.pin,
-                children: /* @__PURE__ */ jsx17("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__ */ jsxs12(Fragment4, { children: [
-                    /* @__PURE__ */ jsx17("path", { d: "M12 17v5" }),
-                    /* @__PURE__ */ jsx17("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__ */ jsxs12(Fragment4, { children: [
-                    /* @__PURE__ */ jsx17("path", { d: "M12 17v5" }),
-                    /* @__PURE__ */ jsx17("path", { d: "M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" }),
-                    /* @__PURE__ */ jsx17("path", { d: "m2 2 20 20" }),
-                    /* @__PURE__ */ jsx17("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__ */ jsx17(
-              "button",
-              {
-                onClick: resolvedOnClose,
-                className: headerIconButtonClass,
-                title: mergedStrings.close,
-                children: /* @__PURE__ */ jsx17("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx17("path", { d: "M6 6l12 12M18 6l-12 12", strokeLinecap: "round", strokeLinejoin: "round" }) })
-              }
-            ),
             headerRight
           ] })
-        ] }),
-        showHistory ? /* @__PURE__ */ jsx17("div", { className: "flex-1 overflow-y-auto chat-scrollbar pt-2", children: /* @__PURE__ */ jsx17(
-          HistoryList,
+        ) : (
+          // Floating mode: original layout with logo, title, and right-aligned buttons
+          /* @__PURE__ */ jsxs17(Fragment5, { children: [
+            /* @__PURE__ */ jsx22("div", { className: "flex items-center gap-1", style: { WebkitAppRegion: "no-drag" }, children: headerLeft || /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
+              logoNode,
+              /* @__PURE__ */ jsx22("span", { className: "text-sm font-medium text-[var(--chat-text)]", children: headerTitle })
+            ] }) }),
+            /* @__PURE__ */ jsx22("div", { className: "flex-1" }),
+            /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-0.5", style: { WebkitAppRegion: "no-drag" }, children: [
+              /* @__PURE__ */ jsx22(PanelHeaderButtons, { locale: resolvedConfig?.locale }),
+              /* @__PURE__ */ jsxs17("div", { className: "chat-tooltip-wrapper", children: [
+                /* @__PURE__ */ jsx22(
+                  "button",
+                  {
+                    onClick: handleNewChat,
+                    className: headerIconButtonClass,
+                    children: /* @__PURE__ */ jsx22("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx22("path", { d: "M12 5v14m-7-7h14", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsxs17("div", { className: "chat-tooltip", children: [
+                  /* @__PURE__ */ jsx22("div", { children: mergedStrings.newChat || "New Chat" }),
+                  /* @__PURE__ */ jsx22("div", { className: "chat-tooltip-shortcut", children: shortcutKey })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs17("div", { className: "chat-tooltip-wrapper", children: [
+                /* @__PURE__ */ jsx22(
+                  "button",
+                  {
+                    onClick: () => setShowHistory(true),
+                    className: headerIconButtonClass,
+                    children: /* @__PURE__ */ jsx22("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx22("path", { d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx22("div", { className: "chat-tooltip", children: mergedStrings.recentChats || "Recent Chats" })
+              ] }),
+              showPin && /* @__PURE__ */ jsxs17("div", { className: "chat-tooltip-wrapper", children: [
+                /* @__PURE__ */ jsx22(
+                  "button",
+                  {
+                    onClick: togglePin,
+                    className: headerIconButtonClass,
+                    children: /* @__PURE__ */ jsx22("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__ */ jsxs17(Fragment5, { children: [
+                        /* @__PURE__ */ jsx22("path", { d: "M12 17v5" }),
+                        /* @__PURE__ */ jsx22("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__ */ jsxs17(Fragment5, { children: [
+                        /* @__PURE__ */ jsx22("path", { d: "M12 17v5" }),
+                        /* @__PURE__ */ jsx22("path", { d: "M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" }),
+                        /* @__PURE__ */ jsx22("path", { d: "m2 2 20 20" }),
+                        /* @__PURE__ */ jsx22("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__ */ jsx22("div", { className: "chat-tooltip", children: isPinned ? mergedStrings.unpin : mergedStrings.pin })
+              ] }),
+              showClose && /* @__PURE__ */ jsxs17("div", { className: "chat-tooltip-wrapper", children: [
+                /* @__PURE__ */ jsx22(
+                  "button",
+                  {
+                    onClick: resolvedOnClose,
+                    className: headerIconButtonClass,
+                    children: /* @__PURE__ */ jsx22("svg", { className: headerIconClass, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx22("path", { d: "M6 6l12 12M18 6l-12 12", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx22("div", { className: "chat-tooltip", children: mergedStrings.close })
+              ] }),
+              headerRight
+            ] })
+          ] })
+        ) }),
+        /* @__PURE__ */ jsx22(
+          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__ */ jsx22(
+              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__ */ jsx17("div", { className: "flex flex-1 items-center justify-center p-4", children: emptyState ?? /* @__PURE__ */ jsx17("div", { className: "flex items-center justify-center", children: emptyLogoNode }) }) : /* @__PURE__ */ jsx17(
+        ),
+        chat.messages.length === 0 ? /* @__PURE__ */ jsx22("div", { className: "flex flex-1 items-center justify-center p-4", children: emptyState ?? /* @__PURE__ */ jsx22("div", { className: "flex items-center justify-center", children: emptyLogoNode }) }) : /* @__PURE__ */ jsx22(
           MessageList,
           {
             messages: chat.messages,
@@ -8351,83 +9019,80 @@ var CompactChat = memo13(function CompactChat2({
         ),
         (() => {
           if (hideInput && !shouldRenderInputExternally) return null;
-          const disableInput = showHistory || !!chat.pendingInterrupt || chat.isLoading && !chat.isStreaming;
-          const inputElement = /* @__PURE__ */ jsx17(
+          const disableInput = !!chat.pendingInterrupt || chat.isLoading && !chat.isStreaming;
+          const inputElement = /* @__PURE__ */ jsx22(
             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 createPortal(inputElement, portalContainerRef.current);
           }
-          return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-2 px-3 pb-3 pt-1", children: [
-            !showHistory && /* @__PURE__ */ jsxs12(Fragment4, { children: [
-              alert ? /* @__PURE__ */ jsx17(
-                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__ */ jsx17(
-                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__ */ jsx17(
-                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__ */ jsx17(
-                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__ */ jsxs17("div", { className: "flex flex-col gap-2 px-3 pb-3 pt-1", children: [
+            alert ? /* @__PURE__ */ jsx22(
+              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__ */ jsx22(
+              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__ */ jsx22(
+              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__ */ jsx22(
+              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
           ] });
         })()
@@ -8437,16 +9102,23 @@ var CompactChat = memo13(function CompactChat2({
 });
 export {
   AlertBanner,
+  AttachButton,
   ChatInput,
   CompactChat,
   FloatingChat,
   HistoryList,
+  HistoryModal,
   HitlCard,
   I18nProvider,
   IntermediateSteps,
   MarkdownRenderer,
   MessageBubble,
   MessageList,
+  ModeToggleButton,
+  PanelControls,
+  PanelHeaderButtons,
+  PanelResizer,
+  Resizer,
   SanqianChat,
   SanqianChatMessage,
   SanqianMessageList,
@@ -8462,7 +9134,9 @@ export {
   ensureFullChatStyles,
   getTranslations,
   resolveChatStrings,
+  useAttachState,
   useChat,
+  useChatPanel,
   useChatStyles,
   useConnection,
   useConversations,