@burtson-labs/bandit-engine 2.0.8 → 2.0.10

package/dist/chunk-L7UOQ2Y2.mjs

@@ -0,0 +1,2810 @@
+import {
+  FeedbackButton,
+  ai_response_text_field_default,
+  banditDarkTheme,
+  memory_modal_default,
+  speakStream,
+  themeMap_default,
+  useNotificationService,
+  useTTS,
+  useVoiceStore
+} from "./chunk-XEG45Q6V.mjs";
+import {
+  brandingService_default,
+  toTitleCase,
+  useAIQueryStore,
+  useConversationStore,
+  useMemoryStore
+} from "./chunk-UMPVXYVC.mjs";
+import {
+  indexedDBService_default,
+  useModelStore,
+  usePackageSettingsStore,
+  usePreferencesStore
+} from "./chunk-XUBYA5I7.mjs";
+import {
+  useAIProviderStore
+} from "./chunk-IHJPVIGB.mjs";
+import {
+  debugLogger
+} from "./chunk-KCI46M23.mjs";
+
+// src/modals/chat-modal/chat-modal.tsx
+import { useEffect as useEffect5, useLayoutEffect, useRef as useRef3, useState as useState6 } from "react";
+import {
+  Modal,
+  InputAdornment as InputAdornment3,
+  Tooltip as Tooltip4,
+  IconButton as IconButton4,
+  Box as Box6,
+  Avatar as Avatar2,
+  Menu,
+  MenuItem as MenuItem2,
+  ThemeProvider,
+  Typography as Typography3
+} from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import CloseIcon3 from "@mui/icons-material/Close";
+import SendIcon from "@mui/icons-material/Send";
+import RecordVoiceOverIcon2 from "@mui/icons-material/RecordVoiceOver";
+
+// src/modals/chat-modal/draggable-box.tsx
+import React, { useEffect, useState } from "react";
+import { Box, useTheme, Fade } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var SCROLLABLE_THRESHOLD = 200;
+var DraggableBox = React.forwardRef(
+  ({ children, fullScreen, position, setPosition, onDrag, onScrollThresholdExceeded }, ref) => {
+    const theme = useTheme();
+    const [transitionProps, setTransitionProps] = useState("all");
+    const [isDragging, setIsDragging] = useState(false);
+    const [isHovering, setIsHovering] = useState(false);
+    useEffect(() => {
+      if (ref && typeof ref !== "function" && ref.current && !fullScreen) {
+        const modal = ref.current;
+        const contentHeight = modal.scrollHeight;
+        const modalHeight = modal.clientHeight;
+        const hasOverflow = contentHeight > modalHeight + SCROLLABLE_THRESHOLD;
+        if (hasOverflow) {
+          onScrollThresholdExceeded?.();
+        }
+      }
+    }, [children, fullScreen, onScrollThresholdExceeded, ref]);
+    return /* @__PURE__ */ jsx(Fade, { in: true, timeout: 300, children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        tabIndex: -1,
+        onMouseDown: (e) => {
+          setTransitionProps("none");
+          setIsDragging(true);
+        },
+        onMouseUp: (e) => {
+          setTransitionProps("all");
+          setIsDragging(false);
+        },
+        onMouseEnter: () => setIsHovering(true),
+        onMouseLeave: () => setIsHovering(false),
+        sx: {
+          transitionProperty: transitionProps,
+          transitionDuration: fullScreen ? "0.4s" : "0.3s",
+          transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+          position: "absolute",
+          top: fullScreen ? 0 : position.y,
+          left: fullScreen ? 0 : position.x,
+          width: fullScreen ? "calc(100vw)" : "90vw",
+          maxWidth: fullScreen ? "100vw" : 600,
+          height: fullScreen ? "100vh" : "auto",
+          minHeight: fullScreen ? "100vh" : "fit-content",
+          maxHeight: fullScreen ? "100vh" : "85vh",
+          // Add max height for scrolling
+          overflow: "hidden",
+          // Prevent modal itself from scrolling
+          bgcolor: theme.palette.background.paper,
+          borderRadius: fullScreen ? 0 : "20px",
+          boxShadow: fullScreen ? "none" : isDragging ? `0 25px 50px ${theme.palette.mode === "dark" ? "rgba(0,0,0,0.7)" : "rgba(0,0,0,0.4)"}` : isHovering ? `0 16px 32px ${theme.palette.mode === "dark" ? "rgba(0,0,0,0.5)" : "rgba(0,0,0,0.25)"}` : `0 12px 24px ${theme.palette.mode === "dark" ? "rgba(0,0,0,0.4)" : "rgba(0,0,0,0.2)"}`,
+          p: fullScreen ? 2 : 3,
+          display: "flex",
+          flexDirection: "column",
+          outline: "none",
+          backdropFilter: fullScreen ? "none" : "blur(20px)",
+          border: fullScreen ? "none" : `1px solid ${theme.palette.mode === "dark" ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
+          // Removed transform to prevent jitter and layout shifts
+          "&:focus": {
+            outline: `2px solid ${theme.palette.primary.main}40`,
+            outlineOffset: "2px"
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              position: "relative",
+              width: "100%",
+              height: "100%",
+              display: "flex",
+              flexDirection: "column"
+            },
+            children
+          }
+        )
+      }
+    ) });
+  }
+);
+var draggable_box_default = DraggableBox;
+
+// src/modals/chat-modal/modal-header.tsx
+import { useState as useState2 } from "react";
+import {
+  Avatar,
+  Box as Box2,
+  IconButton,
+  Tooltip,
+  useMediaQuery,
+  useTheme as useTheme2,
+  Typography,
+  Chip,
+  Fade as Fade2
+} from "@mui/material";
+import MinimizeIcon from "@mui/icons-material/Minimize";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
+import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
+import CloseIcon from "@mui/icons-material/Close";
+import HistoryIcon from "@mui/icons-material/History";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var banditaiLogo = "https://cdn.burtson.ai/logos/bandit-ai-logo.png";
+var banditHead = "https://cdn.burtson.ai/images/bandit-head.png";
+var ModalHeader = ({
+  fullScreen,
+  setFullScreen,
+  onClose,
+  onDrawerOpen,
+  onMouseDown,
+  logo,
+  historyCount = 0,
+  onManualFullscreenToggle,
+  onExitFullscreen
+}) => {
+  const theme = useTheme2();
+  const isMobile = useMediaQuery((theme2) => theme2.breakpoints.down("sm"));
+  const displayLogo = logo && logo !== banditaiLogo ? logo : banditHead;
+  const [isHovering, setIsHovering] = useState2(false);
+  const buttonStyles = {
+    transition: "all 0.15s ease-out",
+    borderRadius: "8px",
+    minWidth: "36px",
+    minHeight: "36px",
+    "&:hover": {
+      bgcolor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)"
+      // Removed transform to prevent jitter
+    },
+    "&:active": {
+      bgcolor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.08)"
+    }
+  };
+  const handleMinimize = (e) => {
+    e.stopPropagation();
+    onClose();
+  };
+  const handleToggleFullScreen = (e) => {
+    e.stopPropagation();
+    const wasFullScreen = fullScreen;
+    setFullScreen((prev) => !prev);
+    if (wasFullScreen && onExitFullscreen) {
+      setTimeout(() => {
+        onExitFullscreen();
+      }, 100);
+    }
+    if (onManualFullscreenToggle) {
+      onManualFullscreenToggle();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Box2,
+    {
+      onMouseDown,
+      onMouseEnter: () => setIsHovering(true),
+      onMouseLeave: () => setIsHovering(false),
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        cursor: "grab",
+        userSelect: "none",
+        mb: 2,
+        p: 1.5,
+        borderRadius: "16px",
+        bgcolor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)",
+        border: `1px solid ${theme.palette.mode === "dark" ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.12)"}`,
+        backdropFilter: "blur(12px)",
+        transition: "all 0.2s ease-out",
+        "&:hover": {
+          bgcolor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)",
+          borderColor: theme.palette.primary.main + "50",
+          boxShadow: `0 8px 32px ${theme.palette.mode === "dark" ? "rgba(0,0,0,0.4)" : "rgba(0,0,0,0.15)"}`
+          // Removed transform to prevent layout shifts
+        },
+        "&:active": {
+          cursor: "grabbing"
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: 2, flex: 1 }, children: [
+          /* @__PURE__ */ jsx2(
+            Avatar,
+            {
+              src: displayLogo,
+              alt: "AI Assistant",
+              sx: {
+                width: fullScreen ? 72 : 60,
+                height: fullScreen ? 72 : 60,
+                bgcolor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)",
+                border: "2px solid #a78bfa",
+                boxShadow: "0 0 8px rgba(167, 139, 250, 0.3)",
+                filter: "brightness(1.05)",
+                color: "#fff",
+                transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+                "&:hover": {
+                  backgroundColor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.05)",
+                  transform: "scale(1.02)"
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx2(Fade2, { in: isHovering && !fullScreen, children: /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsx2(
+              DragIndicatorIcon,
+              {
+                sx: {
+                  color: theme.palette.text.secondary,
+                  fontSize: "1.2rem",
+                  opacity: 0.6
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              Typography,
+              {
+                variant: "caption",
+                sx: {
+                  color: theme.palette.text.secondary,
+                  fontWeight: 500
+                },
+                children: "Drag to move"
+              }
+            )
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+          /* @__PURE__ */ jsx2(Tooltip, { title: "Chat History", arrow: true, children: /* @__PURE__ */ jsxs(
+            IconButton,
+            {
+              "aria-label": "Open chat history",
+              onClick: (e) => {
+                e.stopPropagation();
+                onDrawerOpen();
+              },
+              sx: {
+                ...buttonStyles,
+                position: "relative",
+                color: theme.palette.text.primary
+              },
+              children: [
+                /* @__PURE__ */ jsx2(HistoryIcon, {}),
+                historyCount > 0 && /* @__PURE__ */ jsx2(
+                  Chip,
+                  {
+                    label: historyCount > 99 ? "99+" : historyCount,
+                    size: "small",
+                    sx: {
+                      position: "absolute",
+                      top: -8,
+                      right: -8,
+                      height: 18,
+                      fontSize: "0.65rem",
+                      bgcolor: theme.palette.primary.main,
+                      color: "white",
+                      "& .MuiChip-label": {
+                        px: 0.5
+                      }
+                    }
+                  }
+                )
+              ]
+            }
+          ) }),
+          !isMobile && /* @__PURE__ */ jsx2(Tooltip, { title: fullScreen ? "Exit Fullscreen" : "Enter Fullscreen", arrow: true, children: /* @__PURE__ */ jsx2(
+            IconButton,
+            {
+              "aria-label": fullScreen ? "exit fullscreen" : "enter fullscreen",
+              onClick: handleToggleFullScreen,
+              sx: {
+                ...buttonStyles,
+                color: theme.palette.text.primary,
+                bgcolor: fullScreen ? theme.palette.primary.main + "20" : "transparent"
+              },
+              children: fullScreen ? /* @__PURE__ */ jsx2(FullscreenExitIcon, {}) : /* @__PURE__ */ jsx2(FullscreenIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx2(Tooltip, { title: "Minimize", arrow: true, children: /* @__PURE__ */ jsx2(
+            IconButton,
+            {
+              "aria-label": "minimize window",
+              onClick: handleMinimize,
+              sx: {
+                ...buttonStyles,
+                color: theme.palette.warning.main
+              },
+              children: /* @__PURE__ */ jsx2(MinimizeIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx2(Tooltip, { title: "Close", arrow: true, children: /* @__PURE__ */ jsx2(
+            IconButton,
+            {
+              "aria-label": "close window",
+              onClick: (e) => {
+                e.stopPropagation();
+                onClose();
+              },
+              sx: {
+                ...buttonStyles,
+                color: theme.palette.error.main,
+                "&:hover": {
+                  bgcolor: theme.palette.error.main + "15",
+                  color: theme.palette.error.main
+                  // Removed transform to prevent jitter
+                }
+              },
+              children: /* @__PURE__ */ jsx2(CloseIcon, {})
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+};
+var modal_header_default = ModalHeader;
+
+// src/modals/chat-modal/query-input.tsx
+import { useRef } from "react";
+import { Box as Box3, TextField, IconButton as IconButton2, Tooltip as Tooltip2, InputAdornment, useTheme as useTheme3 } from "@mui/material";
+import CheckIcon from "@mui/icons-material/Check";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var QueryInput = ({
+  inputValue,
+  onChange,
+  onSend,
+  apiKey,
+  setApiKey,
+  showSettings,
+  setShowSettings,
+  startAdornment,
+  // Destructure startAdornment
+  endAdornment
+  // Destructure endAdornment
+}) => {
+  const theme = useTheme3();
+  const inputRef = useRef(null);
+  const handleSend = (e, payload) => {
+    onSend(e, payload);
+  };
+  const handleKeyPress = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      if (inputValue.trim() !== "") {
+        handleSend(e, inputValue);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx3(Box3, { onMouseDown: (e) => e.stopPropagation(), sx: { padding: 2 }, children: showSettings ? /* @__PURE__ */ jsx3(
+    TextField,
+    {
+      fullWidth: true,
+      variant: "outlined",
+      label: "API Key",
+      value: apiKey,
+      onChange: (e) => setApiKey(e.target.value),
+      InputProps: {
+        sx: { color: theme.palette.text.primary, borderColor: theme.palette.divider },
+        startAdornment: /* @__PURE__ */ jsx3(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx3(Tooltip2, { title: "Toggle Settings", children: /* @__PURE__ */ jsx3(
+          IconButton2,
+          {
+            "aria-label": "settings",
+            onClick: () => setShowSettings(!showSettings),
+            children: /* @__PURE__ */ jsx3(CheckIcon, { sx: { color: showSettings ? theme.palette.primary.main : theme.palette.text.primary } })
+          }
+        ) }) })
+      },
+      sx: { bgcolor: theme.palette.background.paper, borderRadius: 1 }
+    }
+  ) : /* @__PURE__ */ jsx3(
+    TextField,
+    {
+      fullWidth: true,
+      variant: "outlined",
+      placeholder: "Ask me anything...",
+      value: inputValue,
+      inputRef,
+      onChange: (e) => onChange(e.target.value),
+      onKeyDown: handleKeyPress,
+      multiline: true,
+      maxRows: 4,
+      InputProps: {
+        sx: { color: theme.palette.text.primary, borderColor: theme.palette.divider },
+        startAdornment,
+        // Use startAdornment prop
+        endAdornment
+        // Use endAdornment prop
+      },
+      sx: {
+        bgcolor: theme.palette.background.paper,
+        borderRadius: 1,
+        "& .MuiOutlinedInput-root": { padding: "10px" }
+      }
+    }
+  ) });
+};
+var query_input_default = QueryInput;
+
+// src/modals/chat-modal/chat-drawer.tsx
+import React4, { useState as useState3, useEffect as useEffect2, useMemo } from "react";
+import {
+  Drawer,
+  Box as Box4,
+  Typography as Typography2,
+  List,
+  ListItem,
+  useMediaQuery as useMediaQuery2,
+  useTheme as useTheme4,
+  Chip as Chip2,
+  IconButton as IconButton3,
+  Tooltip as Tooltip3,
+  Collapse,
+  TextField as TextField2,
+  InputAdornment as InputAdornment2,
+  Divider,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  DialogContentText,
+  Button,
+  MenuItem
+} from "@mui/material";
+import CloseIcon2 from "@mui/icons-material/Close";
+import SearchIcon from "@mui/icons-material/Search";
+import DeleteIcon from "@mui/icons-material/Delete";
+import HistoryIcon2 from "@mui/icons-material/History";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import RecordVoiceOverIcon from "@mui/icons-material/RecordVoiceOver";
+import MemoryIcon from "@mui/icons-material/Memory";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import { Subscription } from "rxjs";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var AIQueriesDrawer = ({ drawerOpen, onClose, onClearComplete, onNavigateToMain }) => {
+  const theme = useTheme4();
+  const isMobile = useMediaQuery2(
+    (theme2) => theme2.breakpoints.down("sm")
+  );
+  const history = useAIQueryStore((state) => state.history);
+  const clearHistory = useAIQueryStore((state) => state.clearHistory);
+  const setResponse = useAIQueryStore((state) => state.setResponse);
+  const setPreviousQuestion = useAIQueryStore((state) => state.setPreviousQuestion);
+  const setInputValue = useAIQueryStore((state) => state.setInputValue);
+  const { conversations, currentId, switchConversation, _hasHydrated, hydrate } = useConversationStore();
+  const { availableVoices, selectedVoice, setSelectedVoice, isServiceAvailable, refreshVoices } = useVoiceStore();
+  const { entries: memoryEntries } = useMemoryStore();
+  const { preferences } = usePreferencesStore();
+  const { settings: packageSettings } = usePackageSettingsStore();
+  const provider = useAIProviderStore((state) => state.provider);
+  const { selectedModel, availableModels } = useModelStore();
+  const [searchTerm, setSearchTerm] = useState3("");
+  const [expandedItems, setExpandedItems] = useState3(/* @__PURE__ */ new Set());
+  const [expandedConversations, setExpandedConversations] = useState3(/* @__PURE__ */ new Set());
+  const [confirmClearOpen, setConfirmClearOpen] = useState3(false);
+  const [infoDialogOpen, setInfoDialogOpen] = useState3(false);
+  const [memoryModalOpen, setMemoryModalOpen] = useState3(false);
+  const [contextMode, setContextMode] = useState3("local");
+  const [expandedSections, setExpandedSections] = useState3(/* @__PURE__ */ new Set(["history", "voice"]));
+  const [audioSub, setAudioSub] = useState3(new Subscription());
+  const [isContextSwitching, setIsContextSwitching] = useState3(false);
+  const [isDrawerLoading, setIsDrawerLoading] = useState3(false);
+  useEffect2(() => {
+    if (drawerOpen && !_hasHydrated) {
+      hydrate();
+    }
+  }, [drawerOpen, _hasHydrated, hydrate]);
+  useEffect2(() => {
+    if (!drawerOpen) {
+      setIsDrawerLoading(false);
+      const cleanupTimer = setTimeout(() => {
+        setSearchTerm("");
+        setExpandedItems(/* @__PURE__ */ new Set());
+        setExpandedConversations(/* @__PURE__ */ new Set());
+      }, 225);
+      return () => clearTimeout(cleanupTimer);
+    }
+  }, [drawerOpen]);
+  useEffect2(() => {
+    return () => {
+      audioSub.unsubscribe();
+    };
+  }, [audioSub]);
+  const toggleSection = (section) => {
+    setExpandedSections((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(section)) {
+        newSet.delete(section);
+      } else {
+        newSet.add(section);
+      }
+      return newSet;
+    });
+  };
+  const handleContextSwitch = async (newMode) => {
+    if (newMode === contextMode) return;
+    setIsContextSwitching(true);
+    try {
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+      if (newMode === "main" && !_hasHydrated) {
+        debugLogger.debug("Context switch triggering hydration", { newMode, hasHydrated: _hasHydrated });
+        await new Promise((resolve) => {
+          setTimeout(async () => {
+            await hydrate();
+            resolve(void 0);
+          }, 50);
+        });
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+      setContextMode(newMode);
+      setExpandedItems(/* @__PURE__ */ new Set());
+      setExpandedConversations(/* @__PURE__ */ new Set());
+      debugLogger.debug("Context switch completed", { newMode, conversationCount: conversations.length });
+    } catch (error) {
+      debugLogger.error("Error during context switch", { error: String(error) });
+    } finally {
+      setTimeout(() => setIsContextSwitching(false), 300);
+    }
+  };
+  const isVoiceAvailable = isServiceAvailable && preferences.ttsEnabled && !!packageSettings?.gatewayApiUrl;
+  const isMemoryAvailable = preferences.memoryEnabled;
+  const currentConversation = conversations.find((c) => c.id === currentId);
+  const isInitialLoading = !_hasHydrated && contextMode === "main";
+  const isContentLoading = isContextSwitching || isInitialLoading;
+  useEffect2(() => {
+    if (drawerOpen) {
+      const debugTimer = setTimeout(() => {
+        debugLogger.debug("Chat drawer loading states", {
+          drawerOpen,
+          _hasHydrated,
+          isDrawerLoading,
+          isContentLoading,
+          contextMode,
+          storeState: "modal-chat-drawer-loading"
+        });
+      }, 400);
+      return () => clearTimeout(debugTimer);
+    }
+  }, [drawerOpen, _hasHydrated, isDrawerLoading, isContentLoading, contextMode]);
+  useEffect2(() => {
+    debugLogger.debug("Chat drawer voice availability check", {
+      isServiceAvailable,
+      ttsEnabled: preferences.ttsEnabled,
+      gatewayApiUrl: !!packageSettings?.gatewayApiUrl,
+      isVoiceAvailable,
+      availableVoicesCount: availableVoices.length,
+      selectedVoice,
+      storeState: "modal-chat-drawer-voice"
+    });
+  }, [isServiceAvailable, preferences.ttsEnabled, packageSettings?.gatewayApiUrl, isVoiceAvailable, availableVoices.length, selectedVoice]);
+  const activeHistory = useMemo(() => {
+    if (contextMode === "local") {
+      return history;
+    }
+    return currentConversation?.history ?? [];
+  }, [contextMode, history, currentConversation]);
+  const effectiveContextMode = contextMode === "main" && (!currentConversation || currentConversation.history.length === 0) ? "local" : contextMode;
+  useEffect2(() => {
+    debugLogger.debug("Chat drawer context state", {
+      contextMode,
+      effectiveContextMode,
+      conversationCount: conversations.length,
+      currentConversationId: currentId,
+      currentConversationName: currentConversation?.name,
+      currentConversationHistoryLength: currentConversation?.history.length || 0,
+      localHistoryLength: history.length,
+      hasHydrated: _hasHydrated,
+      storeState: "modal-chat-drawer"
+    });
+  }, [contextMode, effectiveContextMode, conversations.length, currentId, currentConversation, history.length, _hasHydrated]);
+  const filteredHistory = useMemo(() => {
+    const filtered = activeHistory.filter(
+      (entry) => entry.question.toLowerCase().includes(searchTerm.toLowerCase()) || entry.answer.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+    return filtered.slice(-20);
+  }, [activeHistory, searchTerm]);
+  const filteredConversations = useMemo(() => {
+    const filtered = conversations.filter(
+      (conversation) => conversation.name.toLowerCase().includes(searchTerm.toLowerCase()) || conversation.history.some(
+        (entry) => entry.question.toLowerCase().includes(searchTerm.toLowerCase()) || entry.answer.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    );
+    return filtered.slice(0, 20);
+  }, [conversations, searchTerm]);
+  const toggleExpanded = (index) => {
+    const newExpanded = new Set(expandedItems);
+    if (newExpanded.has(index)) {
+      newExpanded.delete(index);
+    } else {
+      newExpanded.add(index);
+    }
+    setExpandedItems(newExpanded);
+  };
+  const toggleConversationExpanded = (conversationId) => {
+    const newExpanded = new Set(expandedConversations);
+    if (newExpanded.has(conversationId)) {
+      newExpanded.delete(conversationId);
+    } else {
+      newExpanded.add(conversationId);
+    }
+    setExpandedConversations(newExpanded);
+  };
+  const handleVoiceChange = (newVoice) => {
+    debugLogger.debug("Chat drawer voice change initiated", {
+      oldVoice: selectedVoice,
+      newVoice,
+      storeState: "modal-chat-drawer-voice-change"
+    });
+    setSelectedVoice(newVoice);
+    const voiceName = newVoice.split("-")[1];
+    const defaultModel = packageSettings?.defaultModel;
+    const currentModelConfig = availableModels.find((m) => m.name === selectedModel);
+    const personalityName = currentModelConfig ? currentModelConfig.name.replace("Bandit-", "Bandit ") : selectedModel || defaultModel || "Bandit";
+    const isTTSAvailable = !!packageSettings?.gatewayApiUrl && preferences.ttsEnabled;
+    if (isTTSAvailable) {
+      debugLogger.debug("Playing voice greeting", { voiceName, personalityName });
+      const greetingText = `Hi, I'm ${personalityName} speaking with ${voiceName}'s voice.`;
+      const spoken = speakStream(greetingText, newVoice);
+      audioSub.unsubscribe();
+      setAudioSub(
+        spoken.subscribe({
+          next: () => debugLogger.debug("Voice greeting played successfully"),
+          error: (err) => {
+            debugLogger.error(`Error changing voices: ${err}`);
+          }
+        })
+      );
+    } else {
+      debugLogger.debug("Voice greeting skipped", {
+        hasProvider: !!provider,
+        isTTSAvailable,
+        hasDefaultModel: !!defaultModel
+      });
+    }
+  };
+  const handleClearHistory = () => {
+    setConfirmClearOpen(true);
+  };
+  const handleConfirmClear = () => {
+    clearHistory();
+    setResponse("");
+    setPreviousQuestion("");
+    setInputValue("");
+    setExpandedItems(/* @__PURE__ */ new Set());
+    setSearchTerm("");
+    setConfirmClearOpen(false);
+    onClose();
+    if (onClearComplete) {
+      onClearComplete();
+    }
+  };
+  const handleCancelClear = () => {
+    setConfirmClearOpen(false);
+  };
+  return /* @__PURE__ */ jsxs2(
+    Drawer,
+    {
+      anchor: "right",
+      open: drawerOpen,
+      onClose,
+      keepMounted: false,
+      disablePortal: false,
+      sx: {
+        zIndex: 1400,
+        "& .MuiDrawer-paper": {
+          width: isMobile ? "100vw" : "50vw",
+          maxWidth: isMobile ? "100vw" : "600px",
+          bgcolor: theme.palette.background.paper,
+          borderLeft: `1px solid ${theme.palette.divider}`,
+          backdropFilter: "blur(20px)",
+          boxShadow: theme.palette.mode === "dark" ? "0 8px 32px rgba(0,0,0,0.5)" : "0 8px 32px rgba(0,0,0,0.2)",
+          // Optimize animations
+          transition: "transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms"
+        }
+      },
+      transitionDuration: 225,
+      SlideProps: {
+        timeout: 225
+        // Consistent timing
+      },
+      children: [
+        /* @__PURE__ */ jsxs2(
+          Box4,
+          {
+            sx: {
+              height: "100%",
+              bgcolor: theme.palette.background.paper,
+              color: theme.palette.text.primary,
+              display: "flex",
+              flexDirection: "column",
+              position: "relative"
+            },
+            role: "presentation",
+            children: [
+              /* @__PURE__ */ jsxs2(
+                Box4,
+                {
+                  sx: {
+                    p: 3,
+                    borderBottom: `1px solid ${theme.palette.divider}`,
+                    bgcolor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.02)" : "rgba(0,0,0,0.02)",
+                    backdropFilter: "blur(10px)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs2(Box4, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 }, children: [
+                      /* @__PURE__ */ jsxs2(Box4, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                        /* @__PURE__ */ jsx4(HistoryIcon2, { sx: { color: theme.palette.primary.main } }),
+                        /* @__PURE__ */ jsx4(Typography2, { variant: "h6", sx: { fontWeight: 600, color: "text.primary" }, children: "Chat Control Center" }),
+                        /* @__PURE__ */ jsx4(Tooltip3, { title: "About Chat History", arrow: true, children: /* @__PURE__ */ jsx4(
+                          IconButton3,
+                          {
+                            onClick: () => setInfoDialogOpen(true),
+                            size: "small",
+                            sx: {
+                              color: theme.palette.info.main,
+                              "&:hover": {
+                                bgcolor: theme.palette.info.main + "20"
+                              }
+                            },
+                            children: /* @__PURE__ */ jsx4(InfoOutlinedIcon, { fontSize: "small" })
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx4(Tooltip3, { title: "Refresh Conversations", arrow: true, children: /* @__PURE__ */ jsx4(
+                          IconButton3,
+                          {
+                            onClick: () => {
+                              debugLogger.info("Manual conversation refresh triggered", {
+                                currentConversationCount: conversations.length,
+                                hasHydrated: _hasHydrated,
+                                currentId
+                              });
+                              hydrate();
+                              if (availableVoices.length === 0) {
+                                refreshVoices();
+                              }
+                            },
+                            size: "small",
+                            sx: {
+                              color: theme.palette.primary.main,
+                              "&:hover": {
+                                bgcolor: theme.palette.primary.main + "20"
+                              }
+                            },
+                            children: /* @__PURE__ */ jsx4(RefreshIcon, { fontSize: "small" })
+                          }
+                        ) })
+                      ] }),
+                      /* @__PURE__ */ jsx4(Tooltip3, { title: "Close", arrow: true, children: /* @__PURE__ */ jsx4(
+                        IconButton3,
+                        {
+                          onClick: onClose,
+                          size: "small",
+                          sx: {
+                            color: theme.palette.text.secondary,
+                            "&:hover": {
+                              bgcolor: theme.palette.action.hover,
+                              color: theme.palette.text.primary
+                            }
+                          },
+                          children: /* @__PURE__ */ jsx4(CloseIcon2, {})
+                        }
+                      ) })
+                    ] }),
+                    /* @__PURE__ */ jsx4(Box4, { sx: { mb: 2 }, children: /* @__PURE__ */ jsxs2(
+                      Box4,
+                      {
+                        sx: {
+                          display: "flex",
+                          bgcolor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)",
+                          borderRadius: "12px",
+                          p: 0.5,
+                          border: `1px solid ${theme.palette.divider}`
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx4(
+                            Button,
+                            {
+                              onClick: () => handleContextSwitch("local"),
+                              variant: contextMode === "local" ? "contained" : "text",
+                              disabled: isContextSwitching,
+                              sx: {
+                                flex: 1,
+                                textTransform: "none",
+                                borderRadius: "8px",
+                                fontWeight: 600,
+                                fontSize: "0.8rem",
+                                position: "relative",
+                                ...contextMode === "local" && {
+                                  bgcolor: theme.palette.primary.main,
+                                  color: theme.palette.primary.contrastText,
+                                  "&:hover": {
+                                    bgcolor: theme.palette.primary.dark
+                                  }
+                                }
+                              },
+                              children: isContextSwitching && contextMode !== "local" ? /* @__PURE__ */ jsxs2(Box4, { sx: {
+                                display: "flex",
+                                alignItems: "center",
+                                gap: 1,
+                                opacity: 0.7
+                              }, children: [
+                                /* @__PURE__ */ jsx4(Box4, { sx: {
+                                  width: 12,
+                                  height: 12,
+                                  border: "2px solid currentColor",
+                                  borderTop: "2px solid transparent",
+                                  borderRadius: "50%",
+                                  animation: "spin 1s linear infinite",
+                                  "@keyframes spin": {
+                                    "0%": { transform: "rotate(0deg)" },
+                                    "100%": { transform: "rotate(360deg)" }
+                                  }
+                                } }),
+                                "Loading..."
+                              ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+                                "Session Context",
+                                /* @__PURE__ */ jsx4(
+                                  Chip2,
+                                  {
+                                    label: history.length,
+                                    size: "small",
+                                    sx: {
+                                      ml: 1,
+                                      height: "18px",
+                                      fontSize: "0.6rem",
+                                      bgcolor: contextMode === "local" ? theme.palette.primary.contrastText + "20" : theme.palette.primary.main + "20",
+                                      color: contextMode === "local" ? theme.palette.primary.contrastText : theme.palette.primary.main
+                                    }
+                                  }
+                                )
+                              ] })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx4(Tooltip3, { title: "Switch to conversation history", arrow: true, children: /* @__PURE__ */ jsx4(
+                            Button,
+                            {
+                              onClick: () => handleContextSwitch("main"),
+                              variant: contextMode === "main" ? "contained" : "text",
+                              disabled: conversations.length === 0 || isContextSwitching,
+                              sx: {
+                                flex: 1,
+                                textTransform: "none",
+                                borderRadius: "8px",
+                                fontWeight: 600,
+                                fontSize: "0.8rem",
+                                position: "relative",
+                                ...contextMode === "main" && {
+                                  bgcolor: theme.palette.secondary.main,
+                                  color: theme.palette.secondary.contrastText,
+                                  "&:hover": {
+                                    bgcolor: theme.palette.secondary.dark
+                                  }
+                                }
+                              },
+                              children: isContextSwitching && contextMode !== "main" ? /* @__PURE__ */ jsxs2(Box4, { sx: {
+                                display: "flex",
+                                alignItems: "center",
+                                gap: 1,
+                                opacity: 0.7
+                              }, children: [
+                                /* @__PURE__ */ jsx4(Box4, { sx: {
+                                  width: 12,
+                                  height: 12,
+                                  border: "2px solid currentColor",
+                                  borderTop: "2px solid transparent",
+                                  borderRadius: "50%",
+                                  animation: "spin 1s linear infinite",
+                                  "@keyframes spin": {
+                                    "0%": { transform: "rotate(0deg)" },
+                                    "100%": { transform: "rotate(360deg)" }
+                                  }
+                                } }),
+                                "Loading..."
+                              ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+                                "Main Conversation",
+                                /* @__PURE__ */ jsx4(
+                                  Chip2,
+                                  {
+                                    label: conversations.length,
+                                    size: "small",
+                                    sx: {
+                                      ml: 1,
+                                      height: "18px",
+                                      fontSize: "0.6rem",
+                                      bgcolor: contextMode === "main" ? theme.palette.secondary.contrastText + "20" : theme.palette.secondary.main + "20",
+                                      color: contextMode === "main" ? theme.palette.secondary.contrastText : theme.palette.secondary.main
+                                    }
+                                  }
+                                )
+                              ] })
+                            }
+                          ) })
+                        ]
+                      }
+                    ) }),
+                    isVoiceAvailable ? /* @__PURE__ */ jsxs2(Box4, { sx: { mb: 2 }, children: [
+                      /* @__PURE__ */ jsxs2(
+                        Box4,
+                        {
+                          onClick: () => toggleSection("voice"),
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            cursor: "pointer",
+                            p: 1,
+                            borderRadius: "8px",
+                            "&:hover": {
+                              bgcolor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)"
+                            }
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxs2(Box4, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                              /* @__PURE__ */ jsx4(RecordVoiceOverIcon, { sx: { color: theme.palette.success.main, fontSize: "1.2rem" } }),
+                              /* @__PURE__ */ jsx4(Typography2, { variant: "subtitle2", sx: { fontWeight: 600, color: "text.primary" }, children: "Voice Model" }),
+                              /* @__PURE__ */ jsx4(
+                                Chip2,
+                                {
+                                  label: selectedVoice ? toTitleCase(selectedVoice.split("-")[1]) : "Default",
+                                  size: "small",
+                                  sx: {
+                                    height: "18px",
+                                    fontSize: "0.6rem",
+                                    bgcolor: theme.palette.success.main + "20",
+                                    color: theme.palette.success.main
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ jsx4(Tooltip3, { title: "Refresh Voices", arrow: true, children: /* @__PURE__ */ jsx4(
+                                IconButton3,
+                                {
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                    debugLogger.debug("Manual voice refresh triggered from chat drawer");
+                                    refreshVoices();
+                                  },
+                                  size: "small",
+                                  sx: {
+                                    color: theme.palette.text.secondary,
+                                    "&:hover": {
+                                      bgcolor: theme.palette.success.main + "20",
+                                      color: theme.palette.success.main
+                                    }
+                                  },
+                                  children: /* @__PURE__ */ jsx4(RefreshIcon, { fontSize: "small" })
+                                }
+                              ) })
+                            ] }),
+                            expandedSections.has("voice") ? /* @__PURE__ */ jsx4(ExpandLessIcon, {}) : /* @__PURE__ */ jsx4(ExpandMoreIcon, {})
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx4(Collapse, { in: expandedSections.has("voice"), children: /* @__PURE__ */ jsx4(Box4, { sx: { pl: 2, pt: 1 }, children: availableVoices.length > 0 ? /* @__PURE__ */ jsx4(
+                        TextField2,
+                        {
+                          select: true,
+                          fullWidth: true,
+                          size: "small",
+                          label: "Voice Model",
+                          value: selectedVoice,
+                          onChange: (e) => {
+                            const newVoice = e.target.value;
+                            handleVoiceChange(newVoice);
+                          },
+                          sx: {
+                            "& .MuiOutlinedInput-root": {
+                              borderRadius: "8px"
+                            }
+                          },
+                          children: availableVoices.map((voice) => /* @__PURE__ */ jsx4(MenuItem, { value: voice, children: /* @__PURE__ */ jsxs2(Box4, { sx: { display: "flex", alignItems: "center", gap: 1, width: "100%" }, children: [
+                            /* @__PURE__ */ jsx4(RecordVoiceOverIcon, { fontSize: "small", sx: { color: theme.palette.text.secondary } }),
+                            /* @__PURE__ */ jsxs2(Box4, { sx: { flex: 1 }, children: [
+                              /* @__PURE__ */ jsx4(Typography2, { variant: "body2", children: toTitleCase(voice.split("-")[1]) }),
+                              /* @__PURE__ */ jsx4(Typography2, { variant: "caption", sx: { color: theme.palette.text.secondary }, children: voice === selectedVoice ? "Currently active" : "Switch to this voice" })
+                            ] }),
+                            voice === selectedVoice && /* @__PURE__ */ jsx4(
+                              Box4,
+                              {
+                                sx: {
+                                  width: 8,
+                                  height: 8,
+                                  borderRadius: "50%",
+                                  bgcolor: theme.palette.success.main
+                                }
+                              }
+                            )
+                          ] }) }, voice))
+                        }
+                      ) : /* @__PURE__ */ jsxs2(Box4, { sx: { textAlign: "center", py: 2 }, children: [
+                        /* @__PURE__ */ jsx4(Typography2, { variant: "body2", color: "text.secondary", children: "No voices available" }),
+                        /* @__PURE__ */ jsxs2(Typography2, { variant: "caption", color: "text.secondary", sx: { display: "block", mt: 1 }, children: [
+                          "Service: ",
+                          isServiceAvailable ? "\u2713" : "\u2717",
+                          " | TTS: ",
+                          preferences.ttsEnabled ? "\u2713" : "\u2717",
+                          " | Gateway: ",
+                          !!packageSettings?.gatewayApiUrl ? "\u2713" : "\u2717"
+                        ] })
+                      ] }) }) })
+                    ] }) : /* @__PURE__ */ jsx4(Box4, { sx: { mb: 2 }, children: /* @__PURE__ */ jsxs2(Box4, { sx: { p: 1, borderRadius: "8px", bgcolor: theme.palette.warning.main + "10" }, children: [
+                      /* @__PURE__ */ jsxs2(Box4, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                        /* @__PURE__ */ jsx4(RecordVoiceOverIcon, { sx: { color: theme.palette.warning.main, fontSize: "1.2rem" } }),
+                        /* @__PURE__ */ jsx4(Typography2, { variant: "subtitle2", sx: { fontWeight: 600, color: theme.palette.warning.main }, children: "Voice Not Available" })
+                      ] }),
+                      /* @__PURE__ */ jsxs2(Typography2, { variant: "caption", color: "text.secondary", sx: { display: "block", mt: 1, pl: 4 }, children: [
+                        "Service: ",
+                        isServiceAvailable ? "\u2713" : "\u2717",
+                        " | TTS: ",
+                        preferences.ttsEnabled ? "\u2713" : "\u2717",
+                        " | Gateway: ",
+                        !!packageSettings?.gatewayApiUrl ? "\u2713" : "\u2717"
+                      ] })
+                    ] }) }),
+                    isMemoryAvailable && /* @__PURE__ */ jsxs2(Box4, { sx: { mb: 2 }, children: [
+                      /* @__PURE__ */ jsxs2(
+                        Box4,
+                        {
+                          onClick: () => toggleSection("memory"),
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            cursor: "pointer",
+                            p: 1,
+                            borderRadius: "8px",
+                            "&:hover": {
+                              bgcolor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)"
+                            }
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxs2(Box4, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                              /* @__PURE__ */ jsx4(MemoryIcon, { sx: { color: theme.palette.warning.main, fontSize: "1.2rem" } }),
+                              /* @__PURE__ */ jsx4(Typography2, { variant: "subtitle2", sx: { fontWeight: 600, color: "text.primary" }, children: "Personal Memory" }),
+                              /* @__PURE__ */ jsx4(
+                                Chip2,
+                                {
+                                  label: memoryEntries.length,
+                                  size: "small",
+                                  sx: {
+                                    height: "18px",
+                                    fontSize: "0.6rem",
+                                    bgcolor: theme.palette.warning.main + "20",
+                                    color: theme.palette.warning.main
+                                  }
+                                }
+                              )
+                            ] }),
+                            expandedSections.has("memory") ? /* @__PURE__ */ jsx4(ExpandLessIcon, {}) : /* @__PURE__ */ jsx4(ExpandMoreIcon, {})
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx4(Collapse, { in: expandedSections.has("memory"), children: /* @__PURE__ */ jsx4(Box4, { sx: { pl: 2, pt: 1 }, children: /* @__PURE__ */ jsx4(
+                        Button,
+                        {
+                          fullWidth: true,
+                          variant: "outlined",
+                          onClick: () => setMemoryModalOpen(true),
+                          startIcon: /* @__PURE__ */ jsx4(MemoryIcon, {}),
+                          sx: {
+                            textTransform: "none",
+                            borderRadius: "8px",
+                            fontWeight: 600,
+                            fontSize: "0.8rem"
+                          },
+                          children: "Manage Memories"
+                        }
+                      ) }) })
+                    ] }),
+                    /* @__PURE__ */ jsxs2(
+                      Box4,
+                      {
+                        onClick: () => toggleSection("history"),
+                        sx: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          cursor: "pointer",
+                          p: 1,
+                          borderRadius: "8px",
+                          mb: 1,
+                          "&:hover": {
+                            bgcolor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)"
+                          }
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs2(Box4, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                            /* @__PURE__ */ jsx4(HistoryIcon2, { sx: { color: theme.palette.primary.main, fontSize: "1.2rem" } }),
+                            /* @__PURE__ */ jsx4(Typography2, { variant: "subtitle2", sx: { fontWeight: 600, color: "text.primary" }, children: contextMode === "local" ? "Session History" : "Conversation History" }),
+                            /* @__PURE__ */ jsx4(
+                              Chip2,
+                              {
+                                label: activeHistory.length,
+                                size: "small",
+                                sx: {
+                                  height: "18px",
+                                  fontSize: "0.6rem",
+                                  bgcolor: theme.palette.primary.main + "20",
+                                  color: theme.palette.primary.main
+                                }
+                              }
+                            ),
+                            activeHistory.length > 0 && contextMode === "local" && /* @__PURE__ */ jsx4(Tooltip3, { title: "Clear Session History", arrow: true, children: /* @__PURE__ */ jsx4(
+                              IconButton3,
+                              {
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  handleClearHistory();
+                                },
+                                size: "small",
+                                sx: {
+                                  color: theme.palette.error.main,
+                                  "&:hover": {
+                                    bgcolor: theme.palette.error.main + "20"
+                                  }
+                                },
+                                children: /* @__PURE__ */ jsx4(DeleteIcon, { fontSize: "small" })
+                              }
+                            ) })
+                          ] }),
+                          expandedSections.has("history") ? /* @__PURE__ */ jsx4(ExpandLessIcon, {}) : /* @__PURE__ */ jsx4(ExpandMoreIcon, {})
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx4(Collapse, { in: expandedSections.has("history"), children: /* @__PURE__ */ jsx4(Box4, { sx: { mb: 1 }, children: activeHistory.length > 0 && /* @__PURE__ */ jsx4(
+                      TextField2,
+                      {
+                        fullWidth: true,
+                        size: "small",
+                        placeholder: `Search ${contextMode === "local" ? "session" : "conversation"} history...`,
+                        value: searchTerm,
+                        onChange: (e) => setSearchTerm(e.target.value),
+                        InputProps: {
+                          startAdornment: /* @__PURE__ */ jsx4(InputAdornment2, { position: "start", children: /* @__PURE__ */ jsx4(SearchIcon, { sx: { color: theme.palette.text.secondary } }) }),
+                          sx: {
+                            borderRadius: "12px",
+                            bgcolor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)",
+                            "& .MuiOutlinedInput-notchedOutline": {
+                              border: `1px solid ${theme.palette.divider}`
+                            },
+                            "&:hover .MuiOutlinedInput-notchedOutline": {
+                              borderColor: theme.palette.primary.main + "60"
+                            },
+                            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                              borderColor: theme.palette.primary.main
+                            }
+                          }
+                        }
+                      }
+                    ) }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx4(Collapse, { in: expandedSections.has("history"), children: /* @__PURE__ */ jsxs2(
+                Box4,
+                {
+                  sx: {
+                    flex: 1,
+                    overflowY: "auto",
+                    p: 2,
+                    minHeight: "200px",
+                    // Reduced minimum height
+                    maxHeight: "400px",
+                    // Reduced max height for better performance
+                    position: "relative",
+                    // For loading overlay positioning
+                    // Custom scrollbar
+                    "&::-webkit-scrollbar": {
+                      width: "8px"
+                    },
+                    "&::-webkit-scrollbar-track": {
+                      background: theme.palette.mode === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)",
+                      borderRadius: "4px"
+                    },
+                    "&::-webkit-scrollbar-thumb": {
+                      background: theme.palette.mode === "dark" ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)",
+                      borderRadius: "4px",
+                      "&:hover": {
+                        background: theme.palette.mode === "dark" ? "rgba(255,255,255,0.3)" : "rgba(0,0,0,0.3)"
+                      }
+                    },
+                    // Firefox scrollbar
+                    scrollbarWidth: "thin",
+                    scrollbarColor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.2) rgba(255,255,255,0.1)" : "rgba(0,0,0,0.2) rgba(0,0,0,0.1)"
+                  },
+                  children: [
+                    isContentLoading && /* @__PURE__ */ jsxs2(
+                      Box4,
+                      {
+                        sx: {
+                          position: "absolute",
+                          top: 0,
+                          left: 0,
+                          right: 0,
+                          bottom: 0,
+                          bgcolor: theme.palette.mode === "dark" ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.8)",
+                          backdropFilter: "blur(4px)",
+                          zIndex: 10,
+                          display: "flex",
+                          flexDirection: "column",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          gap: 2
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx4(Box4, { sx: {
+                            width: 40,
+                            height: 40,
+                            border: "3px solid currentColor",
+                            borderTop: "3px solid transparent",
+                            borderRadius: "50%",
+                            animation: "spin 1s linear infinite",
+                            color: theme.palette.primary.main,
+                            "@keyframes spin": {
+                              "0%": { transform: "rotate(0deg)" },
+                              "100%": { transform: "rotate(360deg)" }
+                            }
+                          } }),
+                          /* @__PURE__ */ jsx4(
+                            Typography2,
+                            {
+                              variant: "body2",
+                              sx: {
+                                color: theme.palette.text.primary,
+                                fontWeight: 500
+                              },
+                              children: isInitialLoading ? "Loading conversations..." : "Switching context..."
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    !isContentLoading && (contextMode === "main" ? (
+                      // Show conversation list when in main context
+                      filteredConversations.length === 0 ? /* @__PURE__ */ jsxs2(
+                        Box4,
+                        {
+                          sx: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            height: "200px",
+                            textAlign: "center",
+                            color: theme.palette.text.secondary
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx4(HistoryIcon2, { sx: { fontSize: "3rem", mb: 2, opacity: 0.5 } }),
+                            /* @__PURE__ */ jsx4(Typography2, { variant: "h6", sx: { mb: 1, fontWeight: 500, color: "text.primary" }, children: searchTerm ? "No Matching Conversations" : "No Conversations Yet" }),
+                            /* @__PURE__ */ jsx4(Typography2, { variant: "body2", children: searchTerm ? "Try adjusting your search terms" : "Create your first conversation to get started" })
+                          ]
+                        }
+                      ) : /* @__PURE__ */ jsx4(List, { sx: { p: 0 }, children: filteredConversations.map((conversation, index) => {
+                        const isCurrent = conversation.id === currentId;
+                        const isExpanded = expandedConversations.has(conversation.id);
+                        const conversationHistory = conversation.history || [];
+                        return /* @__PURE__ */ jsx4(
+                          ListItem,
+                          {
+                            sx: {
+                              display: "block",
+                              p: 0,
+                              mb: 1
+                            },
+                            children: /* @__PURE__ */ jsxs2(
+                              Box4,
+                              {
+                                sx: {
+                                  bgcolor: isCurrent ? theme.palette.primary.main + "20" : theme.palette.background.default,
+                                  borderRadius: "8px",
+                                  border: `1px solid ${isCurrent ? theme.palette.primary.main + "40" : theme.palette.divider}`,
+                                  overflow: "hidden",
+                                  transition: "all 0.2s ease-in-out"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsxs2(
+                                    Box4,
+                                    {
+                                      onClick: () => {
+                                        toggleConversationExpanded(conversation.id);
+                                        switchConversation(conversation.id);
+                                      },
+                                      sx: {
+                                        p: 2,
+                                        cursor: "pointer",
+                                        "&:hover": {
+                                          bgcolor: isCurrent ? theme.palette.primary.main + "30" : theme.palette.primary.main + "10"
+                                        }
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ jsxs2(Box4, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1 }, children: [
+                                          /* @__PURE__ */ jsx4(
+                                            Typography2,
+                                            {
+                                              variant: "subtitle2",
+                                              sx: {
+                                                fontWeight: 600,
+                                                color: isCurrent ? theme.palette.primary.main : theme.palette.text.primary,
+                                                flex: 1,
+                                                overflow: "hidden",
+                                                textOverflow: "ellipsis",
+                                                whiteSpace: "nowrap"
+                                              },
+                                              children: conversation.name
+                                            }
+                                          ),
+                                          /* @__PURE__ */ jsxs2(Box4, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                                            isCurrent && /* @__PURE__ */ jsx4(
+                                              Chip2,
+                                              {
+                                                label: "Current",
+                                                size: "small",
+                                                sx: {
+                                                  height: "18px",
+                                                  fontSize: "0.6rem",
+                                                  bgcolor: theme.palette.primary.main,
+                                                  color: theme.palette.primary.contrastText
+                                                }
+                                              }
+                                            ),
+                                            isExpanded ? /* @__PURE__ */ jsx4(ExpandLessIcon, {}) : /* @__PURE__ */ jsx4(ExpandMoreIcon, {})
+                                          ] })
+                                        ] }),
+                                        /* @__PURE__ */ jsxs2(Box4, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                                          /* @__PURE__ */ jsxs2(
+                                            Typography2,
+                                            {
+                                              variant: "caption",
+                                              sx: {
+                                                color: theme.palette.text.secondary
+                                              },
+                                              children: [
+                                                conversationHistory.length,
+                                                " messages"
+                                              ]
+                                            }
+                                          ),
+                                          /* @__PURE__ */ jsxs2(
+                                            Typography2,
+                                            {
+                                              variant: "caption",
+                                              sx: {
+                                                color: theme.palette.text.secondary
+                                              },
+                                              children: [
+                                                "\u2022 Model: ",
+                                                conversation.model
+                                              ]
+                                            }
+                                          )
+                                        ] })
+                                      ]
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx4(Collapse, { in: isExpanded, children: conversationHistory.length > 0 ? /* @__PURE__ */ jsx4(Box4, { sx: { borderTop: `1px solid ${theme.palette.divider}`, bgcolor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.02)" : "rgba(0,0,0,0.02)" }, children: conversationHistory.filter(
+                                    (entry) => !searchTerm || entry.question.toLowerCase().includes(searchTerm.toLowerCase()) || entry.answer.toLowerCase().includes(searchTerm.toLowerCase())
+                                  ).slice().reverse().map((entry, messageIndex) => {
+                                    const isMessageExpanded = expandedItems.has(messageIndex);
+                                    return /* @__PURE__ */ jsxs2(Box4, { sx: { borderBottom: `1px solid ${theme.palette.divider}` }, children: [
+                                      /* @__PURE__ */ jsxs2(
+                                        Box4,
+                                        {
+                                          onClick: (e) => {
+                                            e.stopPropagation();
+                                            toggleExpanded(messageIndex);
+                                          },
+                                          sx: {
+                                            p: 2,
+                                            cursor: "pointer",
+                                            "&:hover": {
+                                              bgcolor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)"
+                                            }
+                                          },
+                                          children: [
+                                            /* @__PURE__ */ jsx4(
+                                              Typography2,
+                                              {
+                                                variant: "body2",
+                                                sx: {
+                                                  fontWeight: 500,
+                                                  color: theme.palette.text.primary,
+                                                  mb: 1,
+                                                  display: "-webkit-box",
+                                                  WebkitLineClamp: 2,
+                                                  WebkitBoxOrient: "vertical",
+                                                  overflow: "hidden"
+                                                },
+                                                children: entry.question
+                                              }
+                                            ),
+                                            /* @__PURE__ */ jsx4(
+                                              Typography2,
+                                              {
+                                                variant: "caption",
+                                                sx: {
+                                                  color: theme.palette.text.secondary,
+                                                  display: "-webkit-box",
+                                                  WebkitLineClamp: 1,
+                                                  WebkitBoxOrient: "vertical",
+                                                  overflow: "hidden"
+                                                },
+                                                children: entry.answer
+                                              }
+                                            )
+                                          ]
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx4(Collapse, { in: isMessageExpanded, children: /* @__PURE__ */ jsx4(Box4, { sx: { p: 2, pt: 0, bgcolor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.02)" : "rgba(0,0,0,0.02)" }, children: /* @__PURE__ */ jsx4(
+                                        ai_response_text_field_default,
+                                        {
+                                          question: entry.question,
+                                          response: entry.answer
+                                        }
+                                      ) }) })
+                                    ] }, messageIndex);
+                                  }) }) : /* @__PURE__ */ jsx4(Box4, { sx: { p: 2, textAlign: "center", color: theme.palette.text.secondary, borderTop: `1px solid ${theme.palette.divider}` }, children: /* @__PURE__ */ jsx4(Typography2, { variant: "body2", children: "No messages in this conversation yet" }) }) })
+                                ]
+                              }
+                            )
+                          },
+                          conversation.id
+                        );
+                      }) })
+                    ) : (
+                      // Show message history when in local context
+                      activeHistory.length === 0 ? /* @__PURE__ */ jsxs2(
+                        Box4,
+                        {
+                          sx: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            height: "200px",
+                            textAlign: "center",
+                            color: theme.palette.text.secondary
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx4(HistoryIcon2, { sx: { fontSize: "3rem", mb: 2, opacity: 0.5 } }),
+                            /* @__PURE__ */ jsx4(Typography2, { variant: "h6", sx: { mb: 1, fontWeight: 500, color: "text.primary" }, children: "No Session History Yet" }),
+                            /* @__PURE__ */ jsx4(Typography2, { variant: "body2", children: "Start a conversation to see your session history here" })
+                          ]
+                        }
+                      ) : filteredHistory.length === 0 ? /* @__PURE__ */ jsxs2(
+                        Box4,
+                        {
+                          sx: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            height: "200px",
+                            textAlign: "center",
+                            color: theme.palette.text.secondary
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx4(SearchIcon, { sx: { fontSize: "3rem", mb: 2, opacity: 0.5 } }),
+                            /* @__PURE__ */ jsx4(Typography2, { variant: "h6", sx: { mb: 1, fontWeight: 500, color: "text.primary" }, children: "No Results Found" }),
+                            /* @__PURE__ */ jsx4(Typography2, { variant: "body2", children: "Try adjusting your search terms" })
+                          ]
+                        }
+                      ) : /* @__PURE__ */ jsx4(List, { sx: { p: 0 }, children: [...filteredHistory].reverse().map((entry, index) => {
+                        const isExpanded = expandedItems.has(index);
+                        return /* @__PURE__ */ jsx4(React4.Fragment, { children: /* @__PURE__ */ jsx4(
+                          ListItem,
+                          {
+                            sx: {
+                              display: "block",
+                              p: 0,
+                              mb: 2
+                            },
+                            children: /* @__PURE__ */ jsxs2(
+                              Box4,
+                              {
+                                onClick: () => toggleExpanded(index),
+                                sx: {
+                                  bgcolor: theme.palette.background.default,
+                                  borderRadius: "12px",
+                                  border: `1px solid ${theme.palette.divider}`,
+                                  overflow: "hidden",
+                                  cursor: "pointer",
+                                  transition: "all 0.2s ease-in-out",
+                                  "&:hover": {
+                                    borderColor: theme.palette.primary.main + "60",
+                                    boxShadow: `0 4px 12px ${theme.palette.mode === "dark" ? "rgba(0,0,0,0.3)" : "rgba(0,0,0,0.1)"}`,
+                                    transform: "translateY(-1px)"
+                                  }
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsxs2(Box4, { sx: { p: 2 }, children: [
+                                    /* @__PURE__ */ jsx4(
+                                      Typography2,
+                                      {
+                                        variant: "body2",
+                                        sx: {
+                                          fontWeight: 500,
+                                          color: theme.palette.text.primary,
+                                          mb: 1,
+                                          display: "-webkit-box",
+                                          WebkitLineClamp: 2,
+                                          WebkitBoxOrient: "vertical",
+                                          overflow: "hidden"
+                                        },
+                                        children: entry.question
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx4(
+                                      Typography2,
+                                      {
+                                        variant: "caption",
+                                        sx: {
+                                          color: theme.palette.text.secondary,
+                                          display: "-webkit-box",
+                                          WebkitLineClamp: 1,
+                                          WebkitBoxOrient: "vertical",
+                                          overflow: "hidden"
+                                        },
+                                        children: entry.answer
+                                      }
+                                    )
+                                  ] }),
+                                  /* @__PURE__ */ jsxs2(Collapse, { in: isExpanded, children: [
+                                    /* @__PURE__ */ jsx4(Divider, {}),
+                                    /* @__PURE__ */ jsx4(Box4, { sx: { p: 2 }, children: /* @__PURE__ */ jsx4(
+                                      ai_response_text_field_default,
+                                      {
+                                        question: entry.question,
+                                        response: entry.answer
+                                      }
+                                    ) })
+                                  ] })
+                                ]
+                              }
+                            )
+                          }
+                        ) }, index);
+                      }) })
+                    ))
+                  ]
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          Dialog,
+          {
+            open: confirmClearOpen,
+            onClose: handleCancelClear,
+            maxWidth: "sm",
+            fullWidth: true,
+            sx: {
+              zIndex: 1500
+              // Higher than drawer (1400)
+            },
+            PaperProps: {
+              sx: {
+                borderRadius: "16px",
+                bgcolor: theme.palette.mode === "dark" ? "rgba(30, 30, 30, 0.95)" : "rgba(255, 255, 255, 0.95)",
+                backdropFilter: "blur(20px)",
+                border: `1px solid ${theme.palette.mode === "dark" ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.12)"}`,
+                boxShadow: `0 24px 48px ${theme.palette.mode === "dark" ? "rgba(0,0,0,0.5)" : "rgba(0,0,0,0.15)"}`
+              }
+            },
+            BackdropProps: {
+              sx: {
+                bgcolor: "rgba(0, 0, 0, 0.4)",
+                backdropFilter: "blur(8px)"
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsxs2(
+                DialogTitle,
+                {
+                  sx: {
+                    pb: 1,
+                    fontSize: "1.5rem",
+                    fontWeight: 600,
+                    color: theme.palette.error.main,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx4(DeleteIcon, { sx: { fontSize: "1.75rem" } }),
+                    "Clear Chat History"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs2(DialogContent, { sx: { pb: 2 }, children: [
+                /* @__PURE__ */ jsx4(
+                  DialogContentText,
+                  {
+                    sx: {
+                      fontSize: "1rem",
+                      color: theme.palette.text.primary,
+                      mb: 2
+                    },
+                    children: "Are you sure you want to clear all chat history?"
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  DialogContentText,
+                  {
+                    sx: {
+                      fontSize: "0.9rem",
+                      color: theme.palette.text.secondary,
+                      fontStyle: "italic"
+                    },
+                    children: "This action cannot be undone. All your conversation history will be permanently deleted."
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs2(
+                DialogActions,
+                {
+                  sx: {
+                    p: 3,
+                    pt: 1,
+                    gap: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx4(
+                      Button,
+                      {
+                        onClick: handleCancelClear,
+                        variant: "outlined",
+                        sx: {
+                          borderRadius: "12px",
+                          textTransform: "none",
+                          fontWeight: 600,
+                          minWidth: "100px",
+                          border: `2px solid ${theme.palette.text.secondary}`,
+                          color: theme.palette.text.primary,
+                          "&:hover": {
+                            border: `2px solid ${theme.palette.text.primary}`,
+                            bgcolor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)"
+                          }
+                        },
+                        children: "Cancel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx4(
+                      Button,
+                      {
+                        onClick: handleConfirmClear,
+                        variant: "contained",
+                        color: "error",
+                        sx: {
+                          borderRadius: "12px",
+                          textTransform: "none",
+                          fontWeight: 600,
+                          minWidth: "100px",
+                          bgcolor: theme.palette.error.main,
+                          "&:hover": {
+                            bgcolor: theme.palette.error.dark,
+                            transform: "translateY(-1px)",
+                            boxShadow: `0 6px 20px ${theme.palette.error.main}40`
+                          },
+                          transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
+                        },
+                        children: "Clear All"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          Dialog,
+          {
+            open: infoDialogOpen,
+            onClose: () => setInfoDialogOpen(false),
+            maxWidth: "sm",
+            fullWidth: true,
+            sx: {
+              zIndex: 1500
+              // Higher than drawer (1400)
+            },
+            PaperProps: {
+              sx: {
+                borderRadius: "16px",
+                bgcolor: theme.palette.mode === "dark" ? "rgba(30, 30, 30, 0.95)" : "rgba(255, 255, 255, 0.95)",
+                backdropFilter: "blur(20px)",
+                border: `1px solid ${theme.palette.mode === "dark" ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.12)"}`,
+                boxShadow: `0 24px 48px ${theme.palette.mode === "dark" ? "rgba(0,0,0,0.5)" : "rgba(0,0,0,0.15)"}`
+              }
+            },
+            BackdropProps: {
+              sx: {
+                bgcolor: "rgba(0, 0, 0, 0.4)",
+                backdropFilter: "blur(8px)"
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsxs2(
+                DialogTitle,
+                {
+                  sx: {
+                    pb: 2,
+                    fontSize: "1.5rem",
+                    fontWeight: 600,
+                    color: theme.palette.info.main,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx4(InfoOutlinedIcon, { sx: { fontSize: "1.75rem" } }),
+                    "About Chat Control Center"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs2(DialogContent, { sx: { pb: 2 }, children: [
+                /* @__PURE__ */ jsx4(
+                  DialogContentText,
+                  {
+                    sx: {
+                      fontSize: "1rem",
+                      color: theme.palette.text.primary,
+                      mb: 2,
+                      lineHeight: 1.6
+                    },
+                    children: "This control center gives you full access to your chat experience and AI capabilities."
+                  }
+                ),
+                /* @__PURE__ */ jsxs2(
+                  DialogContentText,
+                  {
+                    sx: {
+                      fontSize: "0.95rem",
+                      color: theme.palette.text.secondary,
+                      mb: 2,
+                      lineHeight: 1.6
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx4("strong", { children: "Context Modes:" }),
+                      /* @__PURE__ */ jsx4("br", {}),
+                      "\u2022 ",
+                      /* @__PURE__ */ jsx4("strong", { children: "Session Context" }),
+                      ": Local conversation for this modal session only",
+                      /* @__PURE__ */ jsx4("br", {}),
+                      "\u2022 ",
+                      /* @__PURE__ */ jsx4("strong", { children: "Main Conversation" }),
+                      ": Your persistent account conversations",
+                      /* @__PURE__ */ jsx4("br", {}),
+                      "\u2022 Switch between them to access different conversation histories",
+                      /* @__PURE__ */ jsx4("br", {}),
+                      /* @__PURE__ */ jsx4("br", {}),
+                      /* @__PURE__ */ jsx4("strong", { children: "Additional Features:" }),
+                      /* @__PURE__ */ jsx4("br", {}),
+                      "\u2022 ",
+                      /* @__PURE__ */ jsx4("strong", { children: "Voice Models" }),
+                      ": Change AI voice when TTS is enabled",
+                      /* @__PURE__ */ jsx4("br", {}),
+                      "\u2022 ",
+                      /* @__PURE__ */ jsx4("strong", { children: "Personal Memory" }),
+                      ": Manage what the AI remembers about you",
+                      /* @__PURE__ */ jsx4("br", {}),
+                      "\u2022 ",
+                      /* @__PURE__ */ jsx4("strong", { children: "Search & Organization" }),
+                      ": Find specific conversations quickly"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs2(
+                  DialogContentText,
+                  {
+                    sx: {
+                      fontSize: "0.9rem",
+                      color: theme.palette.info.main,
+                      fontStyle: "italic",
+                      bgcolor: theme.palette.mode === "dark" ? "rgba(33, 150, 243, 0.1)" : "rgba(33, 150, 243, 0.05)",
+                      p: 2,
+                      borderRadius: "8px",
+                      border: `1px solid ${theme.palette.info.main}30`
+                    },
+                    children: [
+                      "\u{1F4A1} ",
+                      /* @__PURE__ */ jsx4("strong", { children: "Pro Tip:" }),
+                      " Use Session Context for quick experiments and Main Conversation for important discussions you want to keep. All features respect your privacy settings!"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx4(
+                DialogActions,
+                {
+                  sx: {
+                    p: 3,
+                    pt: 1
+                  },
+                  children: /* @__PURE__ */ jsx4(
+                    Button,
+                    {
+                      onClick: () => setInfoDialogOpen(false),
+                      variant: "contained",
+                      sx: {
+                        borderRadius: "12px",
+                        textTransform: "none",
+                        fontWeight: 600,
+                        minWidth: "100px",
+                        bgcolor: theme.palette.info.main,
+                        "&:hover": {
+                          bgcolor: theme.palette.info.dark,
+                          transform: "translateY(-1px)",
+                          boxShadow: `0 6px 20px ${theme.palette.info.main}40`
+                        },
+                        transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
+                      },
+                      children: "Got it!"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          memory_modal_default,
+          {
+            open: memoryModalOpen,
+            onClose: () => setMemoryModalOpen(false)
+          }
+        )
+      ]
+    }
+  );
+};
+var chat_drawer_default = AIQueriesDrawer;
+
+// src/shared/generic-loader.tsx
+import { Box as Box5, CircularProgress, useTheme as useTheme5 } from "@mui/material";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var GenericLoader = ({
+  size = 40,
+  color,
+  variant = "spinner"
+}) => {
+  const theme = useTheme5();
+  const loaderColor = color || theme.palette.primary.main;
+  if (variant === "dots") {
+    return /* @__PURE__ */ jsx5(
+      Box5,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: 1,
+          py: 2,
+          "@keyframes bounce": {
+            "0%, 80%, 100%": {
+              transform: "scale(0)"
+            },
+            "40%": {
+              transform: "scale(1.0)"
+            }
+          }
+        },
+        children: [0, 0.15, 0.3].map((delay, index) => /* @__PURE__ */ jsx5(
+          Box5,
+          {
+            sx: {
+              width: 8,
+              height: 8,
+              backgroundColor: loaderColor,
+              borderRadius: "50%",
+              animation: "bounce 1.4s infinite ease-in-out both",
+              animationDelay: `${delay}s`
+            }
+          },
+          index
+        ))
+      }
+    );
+  }
+  if (variant === "pulse") {
+    return /* @__PURE__ */ jsx5(
+      Box5,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          py: 2,
+          "@keyframes pulse": {
+            "0%": {
+              transform: "scale(0.9)",
+              opacity: 1
+            },
+            "50%": {
+              transform: "scale(1.1)",
+              opacity: 0.7
+            },
+            "100%": {
+              transform: "scale(0.9)",
+              opacity: 1
+            }
+          }
+        },
+        children: /* @__PURE__ */ jsx5(
+          Box5,
+          {
+            sx: {
+              width: size,
+              height: size,
+              borderRadius: "50%",
+              backgroundColor: loaderColor,
+              animation: "pulse 1.5s infinite ease-in-out"
+            }
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx5(
+    Box5,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        py: 2
+      },
+      children: /* @__PURE__ */ jsx5(
+        CircularProgress,
+        {
+          size,
+          sx: { color: loaderColor }
+        }
+      )
+    }
+  );
+};
+var generic_loader_default = GenericLoader;
+
+// src/hooks/useAiChat.ts
+import { useState as useState4, useEffect as useEffect3 } from "react";
+import { useMediaQuery as useMediaQuery3 } from "@mui/material";
+var useAIChat = () => {
+  const isMobile = useMediaQuery3((theme) => theme.breakpoints.down("sm"));
+  const provider = useAIProviderStore((state) => state.provider);
+  const SYSTEM_PROMPT = useModelStore((state) => state.systemPrompt);
+  const OLLAMA_MODEL = usePackageSettingsStore((state) => state.settings?.defaultModel || "");
+  const [fullScreen, setFullScreen] = useState4(isMobile);
+  const [drawerOpen, setDrawerOpen] = useState4(false);
+  const [showSettings, setShowSettings] = useState4(false);
+  const [, setAutoFullscreenTriggered] = useState4(false);
+  const {
+    apiKey,
+    inputValue,
+    setApiKey,
+    setInputValue,
+    setResponse,
+    setPreviousQuestion,
+    setComponentStatus,
+    addHistory
+  } = useAIQueryStore();
+  const sendWithAIProvider = () => {
+    if (!provider) {
+      debugLogger.error("No AI provider available for chat");
+      setComponentStatus("Error");
+      return;
+    }
+    let message = "";
+    setComponentStatus("Loading");
+    const stream = provider.chat({
+      model: OLLAMA_MODEL,
+      stream: true,
+      messages: [
+        { role: "system", content: SYSTEM_PROMPT },
+        { role: "user", content: inputValue }
+      ]
+    });
+    stream.subscribe({
+      next: (data) => {
+        message += data.message.content;
+        setResponse(message);
+      },
+      error: (err) => {
+        debugLogger.error("Stream error in AI chat", { error: err });
+        setComponentStatus("Idle");
+      },
+      complete: () => {
+        setComponentStatus("Idle");
+        setPreviousQuestion(inputValue);
+        setResponse(message);
+        addHistory({ question: inputValue, answer: message });
+        setInputValue("");
+      }
+    });
+  };
+  const sendWithOpenAI = async () => {
+    setComponentStatus("Loading");
+    setResponse("");
+    setAutoFullscreenTriggered(false);
+    const history = useAIQueryStore.getState().history;
+    const contextMessages = history.slice(-5).flatMap((entry) => [
+      { role: "user", content: entry.question },
+      { role: "assistant", content: entry.answer }
+    ]);
+    const payload = {
+      model: "gpt-3.5-turbo",
+      messages: [...contextMessages, { role: "user", content: inputValue }],
+      temperature: 0.7
+    };
+    try {
+      const res = await fetch("https://api.openai.com/v1/chat/completions", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${apiKey}`
+        },
+        body: JSON.stringify(payload)
+      });
+      const data = await res.json();
+      const stubbedAnswer = data.choices[0].message.content;
+      setComponentStatus("Idle");
+      setPreviousQuestion(inputValue);
+      setResponse(stubbedAnswer);
+      addHistory({ question: inputValue, answer: stubbedAnswer });
+      setInputValue("");
+    } catch (err) {
+      debugLogger.error("Failed to handle AI chat query", { error: err });
+      setComponentStatus("Idle");
+    }
+  };
+  const handleSend = () => {
+    if (inputValue.trim() === "") return;
+    if (apiKey) {
+      void sendWithOpenAI();
+      return;
+    }
+    sendWithAIProvider();
+  };
+  useEffect3(() => {
+    setFullScreen(isMobile);
+  }, [isMobile]);
+  return {
+    fullScreen,
+    setFullScreen,
+    drawerOpen,
+    setDrawerOpen,
+    showSettings,
+    setShowSettings,
+    handleSend
+  };
+};
+var useAiChat_default = useAIChat;
+
+// src/hooks/useDraggable.ts
+import { useCallback, useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
+var useDraggable = () => {
+  const modalRef = useRef2(null);
+  const [dragging, setDragging] = useState5(false);
+  const [offset, setOffset] = useState5({ x: 0, y: 0 });
+  const [position, setPosition] = useState5({ x: 0, y: 0 });
+  const handleHeaderMouseDown = (e) => {
+    const rect = modalRef.current?.getBoundingClientRect();
+    if (rect) {
+      setOffset({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+      setDragging(true);
+    }
+  };
+  const handleHeaderMouseMove = useCallback(
+    (e) => {
+      if (dragging) {
+        setPosition({ x: e.clientX - offset.x, y: e.clientY - offset.y });
+      }
+    },
+    [dragging, offset]
+  );
+  const handleHeaderMouseUp = () => {
+    setDragging(false);
+  };
+  useEffect4(() => {
+    if (dragging) {
+      document.addEventListener("mousemove", handleHeaderMouseMove);
+      document.addEventListener("mouseup", handleHeaderMouseUp);
+    } else {
+      document.removeEventListener("mousemove", handleHeaderMouseMove);
+      document.removeEventListener("mouseup", handleHeaderMouseUp);
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleHeaderMouseMove);
+      document.removeEventListener("mouseup", handleHeaderMouseUp);
+    };
+  }, [dragging, handleHeaderMouseMove]);
+  return {
+    modalRef,
+    position,
+    setPosition,
+    handleDrag: handleHeaderMouseMove,
+    handleHeaderMouseDown
+  };
+};
+var useDraggable_default = useDraggable;
+
+// src/modals/chat-modal/chat-modal.tsx
+import { Subscription as Subscription2 } from "rxjs";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var FULL_SCREEN_THRESHOLD = 100;
+var MIN_WINDOWED_HEIGHT = 400;
+var MAX_WINDOWED_HEIGHT = 600;
+var CDN_BASE = "https://cdn.burtson.ai/";
+var banditHead2 = `${CDN_BASE}/images/bandit-head.png`;
+var modelAvatars = {
+  "Bandit-Core": `${CDN_BASE}/avatars/core-avatar.png`,
+  "Bandit-Muse": `${CDN_BASE}/avatars/muse-avatar.png`,
+  "Bandit-Logic": `${CDN_BASE}/avatars/logic-avatar.png`,
+  "Bandit-D1VA": `${CDN_BASE}/avatars/d1va-avatar.png`,
+  "Bandit-Exec": `${CDN_BASE}/avatars/exec-avatar.png`
+};
+var useOptionalNavigate = () => {
+  const hasLoggedRef = useRef3(false);
+  try {
+    return useNavigate();
+  } catch (error) {
+    if (!hasLoggedRef.current) {
+      debugLogger.debug("Navigation not available in ChatModal context", { error });
+      hasLoggedRef.current = true;
+    }
+    return null;
+  }
+};
+var ChatModal = ({
+  open,
+  onClose
+}) => {
+  const navigate = useOptionalNavigate();
+  const getOptimalLogo = async () => {
+    const banditAiLogo = "https://cdn.burtson.ai/logos/bandit-ai-logo.png";
+    try {
+      const branding = await brandingService_default.getBranding();
+      if (branding?.logoBase64) {
+        return branding.logoBase64;
+      }
+      return banditAiLogo;
+    } catch (error) {
+      debugLogger.error("Failed to get optimal logo", { error });
+      return banditAiLogo;
+    }
+  };
+  const {
+    inputValue,
+    response,
+    previousQuestion,
+    componentStatus,
+    apiKey,
+    history,
+    setInputValue,
+    setApiKey
+  } = useAIQueryStore();
+  const {
+    fullScreen,
+    setFullScreen,
+    drawerOpen,
+    setDrawerOpen,
+    showSettings,
+    setShowSettings,
+    handleSend
+  } = useAiChat_default();
+  const { modalRef, position, setPosition, handleDrag, handleHeaderMouseDown } = useDraggable_default();
+  const [pastedImages, setPastedImages] = useState6([]);
+  const [responseStarted, setResponseStarted] = useState6(false);
+  const [modalLogo, setModalLogo] = useState6("https://cdn.burtson.ai/logos/bandit-ai-logo.png");
+  const [modelAnchorEl, setModelAnchorEl] = useState6(null);
+  const [voiceAnchorEl, setVoiceAnchorEl] = useState6(null);
+  const [audioSub, setAudioSub] = useState6(new Subscription2());
+  const [selectedTheme, setSelectedTheme] = useState6(null);
+  const [themeLoading, setThemeLoading] = useState6(true);
+  const [autoFullscreenTriggered, setAutoFullscreenTriggered] = useState6(false);
+  const [userHasDragged, setUserHasDragged] = useState6(false);
+  const [manualFullscreenToggleTime, setManualFullscreenToggleTime] = useState6(0);
+  const handleExitFullscreen = () => {
+    setPosition({
+      x: Math.max(0, window.innerWidth / 2 - 300),
+      y: Math.max(0, window.innerHeight / 2 - 300)
+    });
+    setUserHasDragged(false);
+  };
+  const handleCustomDrag = (e) => {
+    handleDrag(e);
+    setUserHasDragged(true);
+  };
+  const activeTheme = themeMap_default[selectedTheme ?? "bandit-dark"] || banditDarkTheme;
+  const { availableModels, selectedModel, setSelectedModel } = useModelStore();
+  const SYSTEM_PROMPT = useModelStore((state) => state.systemPrompt);
+  const { availableVoices, selectedVoice, setSelectedVoice } = useVoiceStore();
+  const { speak: ttsSpeak, stop: ttsStop, isAvailable: isTTSAvailable } = useTTS();
+  const { preferences } = usePreferencesStore();
+  const { settings: packageSettings } = usePackageSettingsStore();
+  const provider = useAIProviderStore((state) => state.provider);
+  const notificationService = useNotificationService();
+  const currentModel = availableModels.find((m) => m.name === selectedModel);
+  const currentAvatar = currentModel?.avatarBase64 || modelAvatars[selectedModel] || banditHead2;
+  const removeImage = (index) => {
+    setPastedImages((prev) => prev.filter((_, i) => i !== index));
+  };
+  const handleVoiceChange = async (newVoice) => {
+    ttsStop();
+    setSelectedVoice(newVoice);
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    const voiceName = newVoice.split("-")[1];
+    const defaultModel = packageSettings?.defaultModel;
+    const currentModelConfig = availableModels.find((m) => m.name === selectedModel);
+    const personalityName = currentModelConfig ? currentModelConfig.name.replace("Bandit-", "Bandit ") : selectedModel || defaultModel || "Bandit";
+    if (isTTSAvailable) {
+      try {
+        const greetingText = `Hi, I'm ${personalityName} speaking with ${voiceName}'s voice.`;
+        await ttsSpeak(greetingText, { useStreaming: true });
+      } catch (ttsError) {
+        debugLogger.error("TTS failed for voice greeting:", { error: ttsError instanceof Error ? ttsError.message : String(ttsError) });
+      }
+    }
+  };
+  const toTitleCase2 = (str) => {
+    return str.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
+  };
+  useEffect5(() => {
+    if (!SYSTEM_PROMPT) {
+      const defaultModel = availableModels.length > 0 ? availableModels[0] : null;
+      if (defaultModel) {
+        setSelectedModel(defaultModel.name);
+      }
+    }
+  }, [SYSTEM_PROMPT, availableModels, setSelectedModel]);
+  useEffect5(() => {
+    return () => {
+      audioSub.unsubscribe();
+    };
+  }, [audioSub]);
+  useEffect5(() => {
+    if (open) {
+      setPosition({
+        x: Math.max(0, window.innerWidth / 2 - 300),
+        y: Math.max(0, window.innerHeight / 2 - 300)
+      });
+      setAutoFullscreenTriggered(false);
+      setUserHasDragged(false);
+      setManualFullscreenToggleTime(0);
+      getOptimalLogo().then(setModalLogo);
+    }
+  }, [open, setPosition]);
+  useEffect5(() => {
+    if (!open) return;
+    const fetchTheme = async () => {
+      try {
+        const config = await indexedDBService_default.get(
+          "banditConfig",
+          1,
+          "config",
+          "main",
+          [{ name: "config", keyPath: "id" }]
+        );
+        if (config?.branding?.theme) {
+          setSelectedTheme(config.branding.theme);
+        } else {
+          setSelectedTheme("bandit-dark");
+        }
+      } catch (err) {
+        debugLogger.error("Failed to load theme from IndexedDB:", { error: err });
+        setSelectedTheme("bandit-dark");
+      } finally {
+        setThemeLoading(false);
+      }
+    };
+    fetchTheme();
+    const handleThemeChange = () => {
+      if (open) {
+        fetchTheme();
+      }
+    };
+    window.addEventListener("bandit-theme-changed", handleThemeChange);
+    return () => {
+      window.removeEventListener("bandit-theme-changed", handleThemeChange);
+    };
+  }, [open]);
+  useLayoutEffect(() => {
+    const timeSinceManualToggle = Date.now() - manualFullscreenToggleTime;
+    const manualToggleRecentlyUsed = timeSinceManualToggle < 5e3;
+    if (modalRef.current && response && !fullScreen && !autoFullscreenTriggered && !manualToggleRecentlyUsed) {
+      const modal = modalRef.current;
+      requestAnimationFrame(() => {
+        if (!modal) return;
+        const modalHeight = modal.scrollHeight;
+        const viewportHeight = window.innerHeight;
+        const maxAllowedHeight = viewportHeight * 0.75;
+        if (modalHeight > maxAllowedHeight + FULL_SCREEN_THRESHOLD) {
+          setFullScreen(true);
+          setAutoFullscreenTriggered(true);
+        }
+      });
+    }
+  }, [
+    response,
+    fullScreen,
+    autoFullscreenTriggered,
+    manualFullscreenToggleTime,
+    modalRef,
+    setFullScreen,
+    setAutoFullscreenTriggered
+  ]);
+  useEffect5(() => {
+    const handlePaste = (e) => {
+      const items = e.clipboardData?.items;
+      if (items) {
+        for (const item of items) {
+          if (item.type.startsWith("image/")) {
+            const file = item.getAsFile();
+            if (file) {
+              const reader = new FileReader();
+              reader.onload = (event) => {
+                if (event.target?.result) {
+                  setPastedImages((prev) => [...prev, event.target.result]);
+                }
+              };
+              reader.readAsDataURL(file);
+            }
+          }
+        }
+      }
+    };
+    document.addEventListener("paste", handlePaste);
+    return () => {
+      document.removeEventListener("paste", handlePaste);
+    };
+  }, []);
+  useEffect5(() => {
+    if (response && !responseStarted) {
+      setResponseStarted(true);
+    }
+  }, [response, responseStarted]);
+  const handleDrawerClose = () => setDrawerOpen(false);
+  const handleClose = () => {
+    const isMobile = window.innerWidth < 600;
+    if (!isMobile) {
+      setFullScreen(false);
+    }
+    setAutoFullscreenTriggered(false);
+    setThemeLoading(true);
+    onClose();
+  };
+  const onSend = (e, value) => {
+    setResponseStarted(false);
+    handleSend();
+  };
+  if (themeLoading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx6(ThemeProvider, { theme: activeTheme, children: /* @__PURE__ */ jsx6(Modal, { open, onClose: handleClose, children: /* @__PURE__ */ jsxs3(
+    draggable_box_default,
+    {
+      ref: modalRef,
+      position,
+      setPosition,
+      fullScreen,
+      onDrag: handleCustomDrag,
+      children: [
+        /* @__PURE__ */ jsx6(
+          modal_header_default,
+          {
+            fullScreen,
+            setFullScreen,
+            onClose: handleClose,
+            onDrawerOpen: () => setDrawerOpen(true),
+            onMouseDown: handleHeaderMouseDown,
+            logo: modalLogo,
+            historyCount: history.length,
+            onManualFullscreenToggle: () => {
+              setAutoFullscreenTriggered(false);
+              setManualFullscreenToggleTime(Date.now());
+            },
+            onExitFullscreen: handleExitFullscreen
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          Box6,
+          {
+            sx: {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden",
+              // Let child handle scrolling
+              minHeight: 0
+              // Important for flex scrolling
+            },
+            children: /* @__PURE__ */ jsxs3(
+              Box6,
+              {
+                sx: {
+                  flex: 1,
+                  overflow: "auto",
+                  // Enable scrolling here
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 2,
+                  // Ensure proper height calculation for both fullscreen and windowed
+                  height: fullScreen ? "auto" : "100%",
+                  maxHeight: fullScreen ? "none" : "100%",
+                  // Custom scrollbar styling
+                  "&::-webkit-scrollbar": {
+                    width: "8px"
+                  },
+                  "&::-webkit-scrollbar-track": {
+                    background: activeTheme.palette.mode === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)",
+                    borderRadius: "4px"
+                  },
+                  "&::-webkit-scrollbar-thumb": {
+                    background: activeTheme.palette.mode === "dark" ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)",
+                    borderRadius: "4px",
+                    "&:hover": {
+                      background: activeTheme.palette.mode === "dark" ? "rgba(255,255,255,0.3)" : "rgba(0,0,0,0.3)"
+                    }
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx6(
+                    query_input_default,
+                    {
+                      inputValue,
+                      onChange: setInputValue,
+                      onSend,
+                      apiKey,
+                      showSettings,
+                      setShowSettings,
+                      setApiKey,
+                      startAdornment: /* @__PURE__ */ jsxs3(InputAdornment3, { position: "start", sx: { gap: 1 }, children: [
+                        /* @__PURE__ */ jsx6(Tooltip4, { title: `Current AI: ${selectedModel.replace("Bandit-", "")}`, arrow: true, children: /* @__PURE__ */ jsx6(
+                          IconButton4,
+                          {
+                            onClick: (e) => setModelAnchorEl(e.currentTarget),
+                            sx: {
+                              p: 0.5,
+                              borderRadius: "8px",
+                              transition: "all 0.2s ease-in-out",
+                              "&:hover": {
+                                backgroundColor: activeTheme.palette.action.hover,
+                                transform: "scale(1.05)"
+                              }
+                            },
+                            children: /* @__PURE__ */ jsx6(
+                              Avatar2,
+                              {
+                                src: currentAvatar,
+                                alt: selectedModel,
+                                sx: {
+                                  width: 32,
+                                  height: 32,
+                                  filter: "brightness(1.7)",
+                                  border: `2px solid ${activeTheme.palette.primary.main}30`,
+                                  transition: "all 0.2s ease-in-out"
+                                }
+                              }
+                            )
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx6(
+                          Menu,
+                          {
+                            anchorEl: modelAnchorEl,
+                            open: Boolean(modelAnchorEl),
+                            onClose: () => setModelAnchorEl(null),
+                            transformOrigin: { horizontal: "left", vertical: "top" },
+                            anchorOrigin: { horizontal: "left", vertical: "bottom" },
+                            PaperProps: {
+                              sx: {
+                                bgcolor: activeTheme.palette.background.paper,
+                                color: activeTheme.palette.text.primary,
+                                fontSize: "0.875rem",
+                                zIndex: 2e4,
+                                maxHeight: 300,
+                                minWidth: 200,
+                                border: `1px solid ${activeTheme.palette.divider}`,
+                                borderRadius: "12px",
+                                boxShadow: activeTheme.palette.mode === "dark" ? "0 8px 32px rgba(0,0,0,0.5)" : "0 8px 32px rgba(0,0,0,0.2)",
+                                "& .MuiMenuItem-root": {
+                                  borderRadius: "8px",
+                                  margin: "4px 8px",
+                                  transition: "all 0.15s ease-in-out",
+                                  "&:hover": {
+                                    bgcolor: activeTheme.palette.mode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.04)",
+                                    transform: "translateX(2px)"
+                                  },
+                                  "&.Mui-selected": {
+                                    bgcolor: activeTheme.palette.primary.main + "20",
+                                    color: activeTheme.palette.primary.main,
+                                    "&:hover": {
+                                      bgcolor: activeTheme.palette.primary.main + "30"
+                                    }
+                                  }
+                                }
+                              }
+                            },
+                            children: availableModels.map((model) => /* @__PURE__ */ jsxs3(
+                              MenuItem2,
+                              {
+                                selected: model.name === selectedModel,
+                                onClick: () => {
+                                  setSelectedModel(model.name);
+                                  useModelStore.getState().setSelectedModel(model.name);
+                                  setModelAnchorEl(null);
+                                },
+                                sx: {
+                                  display: "flex",
+                                  alignItems: "center",
+                                  gap: 1.5,
+                                  minHeight: 48,
+                                  px: 2
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx6(
+                                    Avatar2,
+                                    {
+                                      src: model.avatarBase64 || modelAvatars[model.name] || banditHead2,
+                                      alt: model.name,
+                                      sx: {
+                                        width: 28,
+                                        height: 28,
+                                        filter: "brightness(1.7)",
+                                        transition: "all 0.2s ease-in-out"
+                                      }
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxs3(Box6, { sx: { flex: 1 }, children: [
+                                    /* @__PURE__ */ jsx6(Typography3, { variant: "body2", sx: { fontWeight: 500 }, children: model.name.replace("Bandit-", "") }),
+                                    /* @__PURE__ */ jsx6(Typography3, { variant: "caption", sx: { color: activeTheme.palette.text.secondary }, children: model.name === selectedModel ? "Currently active" : "Switch to this AI" })
+                                  ] }),
+                                  model.name === selectedModel && /* @__PURE__ */ jsx6(
+                                    Box6,
+                                    {
+                                      sx: {
+                                        width: 8,
+                                        height: 8,
+                                        borderRadius: "50%",
+                                        bgcolor: activeTheme.palette.primary.main
+                                      }
+                                    }
+                                  )
+                                ]
+                              },
+                              model.name
+                            ))
+                          }
+                        ),
+                        isTTSAvailable && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+                          /* @__PURE__ */ jsx6(Tooltip4, { title: `Voice: ${selectedVoice ? toTitleCase2(selectedVoice.split("-")[1]) : "Default"}`, arrow: true, children: /* @__PURE__ */ jsx6(
+                            IconButton4,
+                            {
+                              onClick: (e) => setVoiceAnchorEl(e.currentTarget),
+                              sx: {
+                                p: 0.5,
+                                borderRadius: "8px",
+                                bgcolor: activeTheme.palette.info.main + "20",
+                                color: activeTheme.palette.info.main,
+                                transition: "all 0.2s ease-in-out",
+                                "&:hover": {
+                                  backgroundColor: activeTheme.palette.info.main + "30",
+                                  transform: "scale(1.05)"
+                                }
+                              },
+                              "aria-label": `Change voice. Currently using ${selectedVoice ? toTitleCase2(selectedVoice.split("-")[1]) : "default"}`,
+                              children: /* @__PURE__ */ jsx6(RecordVoiceOverIcon2, { fontSize: "small" })
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx6(
+                            Menu,
+                            {
+                              anchorEl: voiceAnchorEl,
+                              open: Boolean(voiceAnchorEl),
+                              onClose: () => setVoiceAnchorEl(null),
+                              transformOrigin: { horizontal: "left", vertical: "top" },
+                              anchorOrigin: { horizontal: "left", vertical: "bottom" },
+                              PaperProps: {
+                                sx: {
+                                  bgcolor: activeTheme.palette.background.paper,
+                                  color: activeTheme.palette.text.primary,
+                                  fontSize: "0.875rem",
+                                  zIndex: 2e4,
+                                  borderRadius: 2,
+                                  border: `1px solid ${activeTheme.palette.divider}`,
+                                  boxShadow: activeTheme.palette.mode === "dark" ? "0 8px 32px rgba(0,0,0,0.5)" : "0 8px 32px rgba(0,0,0,0.2)",
+                                  "& .MuiMenuItem-root": {
+                                    borderRadius: "8px",
+                                    margin: "4px 8px",
+                                    transition: "all 0.15s ease-in-out",
+                                    "&:hover": {
+                                      bgcolor: activeTheme.palette.mode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.04)"
+                                    },
+                                    "&.Mui-selected": {
+                                      bgcolor: activeTheme.palette.info.main + "20",
+                                      color: activeTheme.palette.info.main,
+                                      "&:hover": {
+                                        bgcolor: activeTheme.palette.info.main + "30"
+                                      }
+                                    }
+                                  }
+                                }
+                              },
+                              children: availableVoices.length > 0 ? availableVoices.map((voice) => /* @__PURE__ */ jsx6(
+                                MenuItem2,
+                                {
+                                  selected: voice === selectedVoice,
+                                  onClick: () => {
+                                    handleVoiceChange(voice);
+                                    setVoiceAnchorEl(null);
+                                  },
+                                  children: /* @__PURE__ */ jsxs3(Box6, { sx: { display: "flex", alignItems: "center", gap: 1, width: "100%" }, children: [
+                                    /* @__PURE__ */ jsx6(RecordVoiceOverIcon2, { fontSize: "small", sx: { color: activeTheme.palette.text.secondary } }),
+                                    /* @__PURE__ */ jsxs3(Box6, { sx: { flex: 1 }, children: [
+                                      /* @__PURE__ */ jsx6(Typography3, { variant: "body2", children: toTitleCase2(voice.split("-")[1]) }),
+                                      /* @__PURE__ */ jsx6(Typography3, { variant: "caption", sx: { color: activeTheme.palette.text.secondary }, children: voice === selectedVoice ? "Currently active" : "Switch to this voice" })
+                                    ] }),
+                                    voice === selectedVoice && /* @__PURE__ */ jsx6(
+                                      Box6,
+                                      {
+                                        sx: {
+                                          width: 8,
+                                          height: 8,
+                                          borderRadius: "50%",
+                                          bgcolor: activeTheme.palette.info.main
+                                        }
+                                      }
+                                    )
+                                  ] })
+                                },
+                                voice
+                              )) : /* @__PURE__ */ jsx6(MenuItem2, { disabled: true, children: /* @__PURE__ */ jsx6(Typography3, { variant: "body2", color: "text.secondary", children: "No voices available" }) })
+                            }
+                          )
+                        ] }),
+                        pastedImages.map((img, idx) => /* @__PURE__ */ jsxs3(
+                          Box6,
+                          {
+                            sx: {
+                              position: "relative",
+                              transition: "all 0.15s ease-out",
+                              "&:hover": {
+                                // Removed transform to prevent jitter
+                              }
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx6(
+                                Avatar2,
+                                {
+                                  src: img,
+                                  variant: "rounded",
+                                  sx: {
+                                    width: 32,
+                                    height: 32,
+                                    borderRadius: "8px",
+                                    border: `2px solid ${activeTheme.palette.primary.main}30`,
+                                    cursor: "pointer"
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ jsx6(Tooltip4, { title: "Remove image", arrow: true, children: /* @__PURE__ */ jsx6(
+                                IconButton4,
+                                {
+                                  size: "small",
+                                  onClick: () => removeImage(idx),
+                                  sx: {
+                                    position: "absolute",
+                                    top: -8,
+                                    right: -8,
+                                    width: 20,
+                                    height: 20,
+                                    bgcolor: activeTheme.palette.error.main,
+                                    color: "white",
+                                    border: `2px solid ${activeTheme.palette.background.paper}`,
+                                    transition: "all 0.15s ease-out",
+                                    "&:hover": {
+                                      bgcolor: activeTheme.palette.error.dark
+                                      // Removed transform to prevent jitter
+                                    }
+                                  },
+                                  children: /* @__PURE__ */ jsx6(CloseIcon3, { sx: { fontSize: 12 } })
+                                }
+                              ) })
+                            ]
+                          },
+                          idx
+                        ))
+                      ] }),
+                      endAdornment: /* @__PURE__ */ jsxs3(InputAdornment3, { position: "end", sx: { gap: 1 }, children: [
+                        preferences.feedbackEnabled && /* @__PURE__ */ jsx6(
+                          FeedbackButton,
+                          {
+                            inline: true,
+                            size: "small",
+                            buttonText: ""
+                          }
+                        ),
+                        /* @__PURE__ */ jsx6(Tooltip4, { title: inputValue.trim() === "" ? "Type a message first" : "Send Message", arrow: true, children: /* @__PURE__ */ jsx6("span", { children: /* @__PURE__ */ jsx6(
+                          IconButton4,
+                          {
+                            onClick: handleSend,
+                            disabled: inputValue.trim() === "",
+                            sx: {
+                              color: inputValue.trim() !== "" ? activeTheme.palette.primary.main : activeTheme.palette.action.disabled,
+                              transition: "all 0.15s ease-out",
+                              borderRadius: "8px",
+                              minWidth: "40px",
+                              minHeight: "40px",
+                              "&:hover": {
+                                bgcolor: inputValue.trim() !== "" ? activeTheme.palette.primary.main + "15" : "transparent"
+                                // Removed transform to prevent jitter
+                              },
+                              "&:active": {
+                                bgcolor: inputValue.trim() !== "" ? activeTheme.palette.primary.main + "25" : "transparent"
+                              },
+                              "&:disabled": {
+                                color: activeTheme.palette.action.disabled
+                              }
+                            },
+                            children: /* @__PURE__ */ jsx6(SendIcon, {})
+                          }
+                        ) }) })
+                      ] })
+                    }
+                  ),
+                  !responseStarted && componentStatus === "Loading" && /* @__PURE__ */ jsx6(generic_loader_default, { variant: "dots" }),
+                  responseStarted && response && !showSettings && /* @__PURE__ */ jsx6(ai_response_text_field_default, { question: previousQuestion, response })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          chat_drawer_default,
+          {
+            drawerOpen,
+            onClose: handleDrawerClose,
+            onClearComplete: handleClose,
+            onNavigateToMain: navigate ? () => {
+              onClose();
+              navigate("/chat");
+            } : void 0
+          }
+        )
+      ]
+    }
+  ) }) });
+};
+var chat_modal_default = ChatModal;
+
+export {
+  FULL_SCREEN_THRESHOLD,
+  MIN_WINDOWED_HEIGHT,
+  MAX_WINDOWED_HEIGHT,
+  chat_modal_default
+};
+//# sourceMappingURL=chunk-L7UOQ2Y2.mjs.map