@supernal/interface-nextjs 1.0.8 → 1.0.10

package/dist/index.mjs

@@ -1,5 +1,8 @@
 "use client";
 
+// src/components/SupernalProvider.tsx
+import { useEffect as useEffect5 } from "react";
+
 // src/contexts/ChatInputContext.tsx
 import { createContext, useContext, useCallback, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -302,78 +305,416 @@ function ChatProvider({
 
 // src/components/ChatBubble.tsx
 import { useState as useState2, useRef as useRef2, useEffect as useEffect2 } from "react";
+
+// ../names/Components.ts
+var Components = {
+  // Chat components
+  ChatInput: "chat-message-input",
+  ChatSendButton: "chat-send-button",
+  ChatClearButton: "chat-clear-button",
+  ChatToggleButton: "chat-bubble-toggle",
+  ChatMessageList: "chat-message-list",
+  ChatTypingIndicator: "chat-typing-indicator",
+  // Demo widget components - buttons
+  OpenMenuButton: "open-main-menu",
+  CloseMenuButton: "close-main-menu",
+  // Demo widget components - checkboxes
+  FeatureToggle: "feature-toggle",
+  NotificationsToggle: "notification-toggle",
+  // Demo widget components - radios
+  PriorityHighRadio: "priority-high",
+  PriorityMediumRadio: "priority-medium",
+  PriorityLowRadio: "priority-low",
+  // Demo widget components - selects
+  StatusSelect: "status-dropdown",
+  ThemeSelect: "theme-toggle",
+  // Demo widget components - form
+  FormNameInput: "form-name",
+  DemoFormSubmitButton: "form-submit",
+  // Generic widget components
+  WidgetButton: "widget-button",
+  WidgetInput: "widget-input",
+  WidgetSelect: "widget-select",
+  WidgetCheckbox: "widget-checkbox",
+  WidgetRadio: "widget-radio",
+  WidgetTextarea: "widget-textarea",
+  // Tool command components
+  ToolCommandsList: "tool-commands-list",
+  ToolExecuteButton: "tool-execute-button",
+  ToolApprovalButton: "tool-approval-button",
+  ToolMetadataDisplay: "tool-metadata-display",
+  // Navigation components
+  NavMainMenu: "nav-main-menu",
+  NavHomeLink: "nav-home-link",
+  NavToolsLink: "nav-tools-link",
+  NavSettingsLink: "nav-settings-link",
+  NavBackButton: "nav-back-button",
+  // Form components
+  FormSubmitButton: "form-submit-button",
+  FormCancelButton: "form-cancel-button",
+  FormResetButton: "form-reset-button",
+  FormTextInput: "form-text-input",
+  FormEmailInput: "form-email-input",
+  FormPasswordInput: "form-password-input",
+  // Modal components
+  ModalCloseButton: "modal-close-button",
+  ModalConfirmButton: "modal-confirm-button",
+  ModalCancelButton: "modal-cancel-button",
+  ModalOverlay: "modal-overlay",
+  // Status/Feedback components
+  StatusSuccessMessage: "status-success-message",
+  StatusErrorMessage: "status-error-message",
+  StatusWarningMessage: "status-warning-message",
+  StatusLoadingSpinner: "status-loading-spinner",
+  StatusProgressBar: "status-progress-bar"
+};
+
+// src/components/ChatBubble.tsx
 import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 var ChatNames = {
-  bubble: "chat-bubble",
-  input: "chat-input",
-  sendButton: "chat-send-button",
-  clearButton: "chat-clear-button",
-  messages: "chat-messages"
+  bubble: Components.ChatToggleButton,
+  input: Components.ChatInput,
+  sendButton: Components.ChatSendButton,
+  clearButton: Components.ChatClearButton
+};
+var DOCK_POSITIONS = {
+  "bottom-right": {
+    container: "bottom-4 right-4 sm:bottom-6 sm:right-6",
+    panel: "bottom-0 right-0"
+  },
+  "bottom-left": {
+    container: "bottom-4 left-4 sm:bottom-6 sm:left-6",
+    panel: "bottom-0 left-0"
+  },
+  "top-right": {
+    container: "top-4 right-4 sm:top-6 sm:right-6",
+    panel: "top-0 right-0"
+  },
+  "top-left": {
+    container: "top-4 left-4 sm:top-6 sm:left-6",
+    panel: "top-0 left-0"
+  },
+  "left-center": {
+    container: "left-4 top-1/2 -translate-y-1/2",
+    panel: "left-0 top-0"
+  },
+  "right-center": {
+    container: "right-4 top-1/2 -translate-y-1/2",
+    panel: "right-0 top-0"
+  },
+  "bottom-center": {
+    container: "bottom-4 left-1/2 -translate-x-1/2",
+    panel: "bottom-0 left-1/2 -translate-x-1/2"
+  }
+};
+var INLINE_STYLES = {
+  // Input field
+  input: (isDark) => ({
+    color: isDark ? "#ffffff" : "#111827"
+    // Fallback for placeholder handled via ::placeholder CSS or separate element
+  }),
+  // Message bubbles
+  messageUser: () => ({
+    background: "linear-gradient(to bottom right, rgb(37, 99, 235), rgb(147, 51, 234))",
+    color: "#ffffff"
+  }),
+  messageAI: (isDark) => ({
+    backgroundColor: isDark ? "rgba(31, 41, 55, 1)" : "rgba(255, 255, 255, 1)",
+    color: isDark ? "#ffffff" : "#111827"
+  }),
+  messageSystem: (isDark) => ({
+    backgroundColor: isDark ? "rgba(31, 41, 55, 0.95)" : "rgba(255, 255, 255, 0.95)",
+    color: isDark ? "#e5e7eb" : "#374151"
+  }),
+  // Welcome message
+  welcomeTitle: (isDark) => ({
+    color: isDark ? "#ffffff" : "#111827",
+    fontWeight: "bold"
+  }),
+  welcomeContent: (isDark) => ({
+    color: isDark ? "#ffffff" : "#374151"
+  }),
+  commandText: (isDark) => ({
+    color: isDark ? "#93c5fd" : "#1d4ed8"
+  }),
+  commandDesc: (isDark) => ({
+    color: isDark ? "#ffffff" : "#6b7280"
+  }),
+  // Info popup
+  infoText: (isDark) => ({
+    color: isDark ? "#ffffff" : "#374151"
+  }),
+  // Minimized message
+  minimizedMessage: (isDark) => ({
+    color: isDark ? "#ffffff" : "#374151"
+  }),
+  minimizedPrompt: (isDark) => ({
+    color: isDark ? "#ffffff" : "#9ca3af"
+  })
+};
+var THEME_CLASSES = {
+  // Message bubbles
+  message: {
+    user: "bg-gradient-to-br from-blue-600 to-purple-600 text-white ml-auto",
+    ai: "bg-white dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-200 dark:border-gray-600",
+    system: "bg-white/70 dark:bg-gray-800/70 text-gray-700 dark:text-gray-200 border border-gray-200/40 dark:border-gray-600/40",
+    timestamp: {
+      user: "border-white/20 text-white/80",
+      other: "border-gray-300/30 dark:border-gray-500/30 text-gray-600 dark:text-gray-300"
+    }
+  },
+  // Header action buttons
+  button: {
+    theme: "p-2 text-yellow-600 dark:text-yellow-400 hover:text-yellow-700 dark:hover:text-yellow-300 transition-colors rounded-lg hover:bg-white/30",
+    home: "p-2 text-green-600 dark:text-green-400 hover:text-green-700 dark:hover:text-green-300 transition-colors rounded-lg hover:bg-white/30",
+    dock: "p-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors rounded-lg hover:bg-white/30",
+    info: "p-2 text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 transition-colors rounded-lg hover:bg-white/30",
+    more: "p-2 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition-colors rounded-lg hover:bg-white/30",
+    minimize: "p-2 text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 transition-colors rounded-lg hover:bg-white/30",
+    clear: "p-2 text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 transition-colors rounded-lg hover:bg-white/30",
+    close: "p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors rounded-lg hover:bg-white/30",
+    floatingClear: "p-1 text-gray-400 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
+  },
+  // Input field
+  input: {
+    field: "w-full pl-4 pr-12 py-3 text-sm text-gray-900 dark:text-white placeholder:text-gray-500 dark:placeholder:text-gray-300 rounded-3xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all shadow-sm",
+    sendButton: "absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-blue-600 text-white rounded-full hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-all hover:scale-110"
+  },
+  // Welcome message
+  welcome: {
+    container: "bg-gradient-to-br from-blue-500/20 to-purple-500/20 backdrop-blur-sm p-4 rounded-2xl border border-blue-200/30 dark:border-blue-500/30 shadow-lg",
+    title: "font-bold text-gray-900 dark:text-white mb-2 text-sm",
+    content: "text-sm text-gray-700 dark:text-white mb-3 leading-relaxed",
+    commandsContainer: "bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm p-3 rounded-xl border border-gray-200/30 dark:border-gray-600/30 shadow-sm",
+    commandsHeader: "text-xs font-medium text-gray-900 dark:text-white mb-2",
+    commandButton: "w-full text-left px-3 py-2 rounded-xl hover:bg-white/70 dark:hover:bg-gray-700/70 transition-all group border border-transparent hover:border-blue-200/50 dark:hover:border-blue-400/50 hover:shadow-md",
+    commandText: "text-sm font-medium text-blue-700 dark:text-blue-200 group-hover:text-blue-900 dark:group-hover:text-blue-100",
+    commandDesc: "text-xs text-gray-500 dark:text-gray-100 mt-0.5"
+  },
+  // Text colors for various elements
+  text: {
+    title: "font-bold text-gray-900 dark:text-white text-base truncate",
+    floatingTitle: "font-medium text-sm text-gray-900 dark:text-white",
+    minimizedMessage: "text-sm text-gray-700 dark:text-white line-clamp-2",
+    minimizedUser: "text-xs text-blue-600 dark:text-blue-200 line-clamp-1",
+    minimizedPrompt: "text-xs text-gray-400 dark:text-gray-100 text-center",
+    floatingTimestamp: "text-xs text-gray-400 dark:text-gray-100 mt-1 px-1 opacity-0 group-hover:opacity-100 transition-opacity",
+    infoPopup: "px-4 py-3 bg-blue-500/10 backdrop-blur-sm border-b border-blue-200/30 text-sm text-gray-700 dark:text-white"
+  },
+  // Backgrounds and containers
+  bg: {
+    header: "flex items-center justify-between p-4 border-b border-white/20",
+    headerGradient: "bg-gradient-to-r from-blue-500/20 to-purple-500/20",
+    headerLight: "bg-gradient-to-r from-blue-50 to-purple-50",
+    inputForm: "p-4",
+    inputFormLight: "bg-gray-50 dark:bg-gray-900",
+    bubble: "w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-xl hover:shadow-2xl transition-all duration-300 flex items-center justify-center relative hover:scale-110"
+  }
+};
+var DEFAULT_CONFIG = {
+  title: "Supernal Interface",
+  avatar: /* @__PURE__ */ jsx3("img", { src: "/logo.svg", alt: "Supernal", className: "w-6 h-6" }),
+  description: "I'm a TOOL system AI can use to control this site",
+  placeholder: "Try: toggle notifications",
+  sendButtonLabel: "Send",
+  glassMode: true,
+  welcome: {
+    enabled: true,
+    title: "Welcome - I'm NOT an AI",
+    content: "I'm a tool system that AI assistants (like Claude, GPT) can use to navigate and control this site. This enables agentic UX \u2014 instead of clicking around, you tell an AI what you want, and it uses me to do it.",
+    suggestedCommands: [
+      { text: "open the docs", desc: "Navigate to documentation" },
+      { text: "show me the story system", desc: "View story system guide" },
+      { text: "go to examples", desc: "Browse code examples" }
+    ]
+  },
+  theme: {
+    primary: "blue",
+    secondary: "purple",
+    background: "white"
+  }
+};
+var InputField = ({
+  compact = false,
+  inputValue,
+  onInputChange,
+  onSubmit,
+  placeholder,
+  glassClasses,
+  theme,
+  inputRef,
+  sendButtonLabel
+}) => /* @__PURE__ */ jsx3("form", { onSubmit, className: compact ? "flex space-x-2" : THEME_CLASSES.bg.inputForm + " bg-transparent", children: /* @__PURE__ */ jsxs("div", { className: compact ? "flex space-x-2 flex-1" : "relative", children: [
+  /* @__PURE__ */ jsx3(
+    "input",
+    {
+      ref: compact ? void 0 : inputRef,
+      type: "text",
+      value: inputValue,
+      onChange: (e) => onInputChange(e.target.value),
+      placeholder,
+      className: compact ? `flex-1 px-3 py-2 text-xs border rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all ${glassClasses}` : `${THEME_CLASSES.input.field} ${glassClasses}`,
+      style: INLINE_STYLES.input(theme === "dark"),
+      "data-testid": Components.ChatInput
+    }
+  ),
+  /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "submit",
+      disabled: !inputValue.trim(),
+      className: compact ? "px-3 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl hover:from-blue-600 hover:to-blue-700 disabled:from-gray-300 disabled:to-gray-400 disabled:cursor-not-allowed transition-all text-xs font-medium shadow-md hover:shadow-lg" : THEME_CLASSES.input.sendButton,
+      "data-testid": Components.ChatSendButton,
+      title: sendButtonLabel,
+      children: compact ? "\u2192" : /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7m0 0l-7 7m7-7H3" }) })
+    }
+  )
+] }) });
+var Avatar = ({ avatar, size = "normal" }) => {
+  if (!avatar) return null;
+  if (typeof avatar === "string") {
+    return size === "small" ? /* @__PURE__ */ jsx3("span", { className: "text-lg", children: avatar }) : /* @__PURE__ */ jsx3("div", { className: "w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center shadow-md", children: /* @__PURE__ */ jsx3("span", { className: "text-white text-sm font-bold", children: avatar }) });
+  }
+  return /* @__PURE__ */ jsx3(Fragment, { children: avatar });
 };
-var CHAT_EXPANDED_KEY = "supernal-chat-expanded";
 var ChatBubble = ({
-  theme = "auto",
+  messages,
+  onSendMessage,
+  onClearChat,
   position = "bottom-right",
-  welcomeMessage
+  variant = "full",
+  config: userConfig,
+  defaultExpanded = true,
+  storageKey = "chat-bubble-state"
 }) => {
-  const { messages, sendMessage, clearMessages } = useChatContext();
-  const [isExpanded, setIsExpanded] = useState2(false);
+  const config = { ...DEFAULT_CONFIG, ...userConfig };
+  const [isExpanded, setIsExpanded] = useState2(defaultExpanded);
+  const [isMinimized, setIsMinimized] = useState2(false);
   const [inputValue, setInputValue] = useState2("");
   const [lastReadMessageCount, setLastReadMessageCount] = useState2(0);
-  const [showWelcome, setShowWelcome] = useState2(true);
-  const [isClient, setIsClient] = useState2(false);
+  const [showWelcome, setShowWelcome] = useState2(
+    config.welcome?.enabled && messages.length === 0
+  );
+  const [showInfo, setShowInfo] = useState2(false);
+  const [isDragging, setIsDragging] = useState2(false);
+  const [isDocked, setIsDocked] = useState2(true);
+  const [panelPosition, setPanelPosition] = useState2({ x: 0, y: 0 });
+  const [theme, setTheme] = useState2("light");
+  const [showMoreMenu, setShowMoreMenu] = useState2(false);
+  const [, setTimestampTick] = useState2(0);
   const messagesEndRef = useRef2(null);
   const inputRef = useRef2(null);
+  const panelRef = useRef2(null);
+  const dragRef = useRef2(null);
+  const formatRelativeTime = (timestamp) => {
+    const now = /* @__PURE__ */ new Date();
+    const messageTime = new Date(timestamp);
+    const diffMs = now.getTime() - messageTime.getTime();
+    const diffSeconds = Math.floor(diffMs / 1e3);
+    const diffMinutes = Math.floor(diffSeconds / 60);
+    const diffHours = Math.floor(diffMinutes / 60);
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffSeconds < 60) return "just now";
+    if (diffMinutes < 60) return `${diffMinutes} ${diffMinutes === 1 ? "minute" : "minutes"} ago`;
+    if (diffHours < 24) return `${diffHours} ${diffHours === 1 ? "hour" : "hours"} ago`;
+    if (diffDays < 7) return `${diffDays} ${diffDays === 1 ? "day" : "days"} ago`;
+    return messageTime.toLocaleDateString();
+  };
   useEffect2(() => {
-    setIsClient(true);
-    if (messages.length > 0) {
-      setShowWelcome(false);
+    if (variant === "full") {
+      try {
+        const stored = localStorage.getItem(storageKey);
+        if (stored !== null) {
+          const state = JSON.parse(stored);
+          setIsExpanded(state.isExpanded ?? defaultExpanded);
+          setIsMinimized(state.isMinimized ?? false);
+          setIsDocked(state.isDocked ?? true);
+          setPanelPosition(state.panelPosition || { x: 0, y: 0 });
+          setTheme(state.theme || "light");
+        }
+      } catch {
+      }
     }
-  }, [messages.length]);
+  }, [storageKey, variant, defaultExpanded]);
   useEffect2(() => {
-    try {
-      const stored = localStorage.getItem(CHAT_EXPANDED_KEY);
-      if (stored !== null) {
-        setIsExpanded(JSON.parse(stored));
-      }
-    } catch {
+    if (typeof window !== "undefined") {
+      const isDark = document.documentElement.getAttribute("data-theme") === "dark";
+      setTheme(isDark ? "dark" : "light");
     }
   }, []);
+  useEffect2(() => {
+    const interval = setInterval(() => {
+      setTimestampTick((tick) => tick + 1);
+    }, 6e4);
+    return () => clearInterval(interval);
+  }, []);
+  useEffect2(() => {
+    if (variant === "full") {
+      try {
+        localStorage.setItem(
+          storageKey,
+          JSON.stringify({ isExpanded, isMinimized, isDocked, panelPosition, theme })
+        );
+      } catch (error) {
+        console.error("Failed to save chat state:", error);
+      }
+    }
+  }, [isExpanded, isMinimized, isDocked, panelPosition, theme, storageKey, variant]);
   const { registerInput } = useChatInput();
   useEffect2(() => {
     registerInput((text, submit = false) => {
       setInputValue(text);
-      if (!isExpanded) {
+      if (!isExpanded && variant === "full") {
         setIsExpanded(true);
       }
       setTimeout(() => {
         inputRef.current?.focus();
         if (submit) {
-          sendMessage(text);
+          onSendMessage(text);
           setInputValue("");
         }
       }, 100);
     });
-  }, [registerInput, sendMessage, isExpanded]);
+  }, [registerInput, onSendMessage]);
   const unreadCount = Math.max(0, messages.length - lastReadMessageCount);
-  const hasUnread = unreadCount > 0 && !isExpanded;
+  const hasUnread = unreadCount > 0 && !isExpanded && variant === "full";
   useEffect2(() => {
-    if (isExpanded) {
+    if (isExpanded || variant === "floating") {
       messagesEndRef.current?.scrollIntoView({ behavior: "auto" });
       setLastReadMessageCount(messages.length);
       if (messages.length > 0) {
         setShowWelcome(false);
       }
-      inputRef.current?.focus();
+      if (variant === "full") {
+        inputRef.current?.focus();
+      }
     }
-  }, [messages, isExpanded]);
+  }, [messages, isExpanded, variant]);
   useEffect2(() => {
-    if (isExpanded) {
+    if (isExpanded && variant === "full") {
       inputRef.current?.focus();
     }
-  }, [isExpanded]);
+  }, [isExpanded, variant]);
   useEffect2(() => {
     const handleKeyDown = (e) => {
+      if (variant !== "full") return;
+      if (e.key === "/" && !isExpanded) {
+        const target = e.target;
+        if (target.tagName !== "INPUT" && target.tagName !== "TEXTAREA") {
+          e.preventDefault();
+          setIsExpanded(true);
+          setTimeout(() => inputRef.current?.focus(), 0);
+        }
+      }
+      if (e.key === "Escape") {
+        if (showMoreMenu) {
+          setShowMoreMenu(false);
+        } else if (showInfo) {
+          setShowInfo(false);
+        } else if (isExpanded) {
+          setIsExpanded(false);
+        }
+      }
       if ((e.metaKey || e.ctrlKey) && e.key === "/") {
         e.preventDefault();
         if (!isExpanded) {
@@ -384,151 +725,456 @@ var ChatBubble = ({
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [isExpanded]);
+  }, [isExpanded, showInfo, showMoreMenu, variant]);
+  useEffect2(() => {
+    if (!showMoreMenu) return;
+    const handleClickOutside = (e) => {
+      const target = e.target;
+      if (!target.closest("[data-more-menu]")) {
+        setShowMoreMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showMoreMenu]);
+  const handlePanelMouseDown = (e) => {
+    if (variant !== "full" || !isExpanded) return;
+    const target = e.target;
+    if (!target.closest("[data-drag-handle]")) return;
+    if (target.closest("button") || target.closest("svg") || target.closest('[role="button"]')) {
+      return;
+    }
+    e.preventDefault();
+    setIsDragging(true);
+    const rect = panelRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const currentCenterX = rect.left + rect.width / 2;
+    const currentCenterY = rect.top + rect.height / 2;
+    const viewportCenterX = window.innerWidth / 2;
+    const viewportCenterY = window.innerHeight / 2;
+    const targetX = currentCenterX - viewportCenterX;
+    const targetY = currentCenterY - viewportCenterY;
+    setIsDocked(false);
+    setPanelPosition({ x: targetX, y: targetY });
+    dragRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      initialX: targetX,
+      initialY: targetY
+    };
+  };
+  useEffect2(() => {
+    if (!isDragging || !dragRef.current) return;
+    const handleMouseMove = (e) => {
+      if (!dragRef.current) return;
+      const deltaX = e.clientX - dragRef.current.startX;
+      const deltaY = e.clientY - dragRef.current.startY;
+      setPanelPosition({
+        x: dragRef.current.initialX + deltaX,
+        y: dragRef.current.initialY + deltaY
+      });
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      dragRef.current = null;
+      if (panelRef.current) {
+        const rect = panelRef.current.getBoundingClientRect();
+        const threshold = 50;
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        if (rect.right > windowWidth - threshold || rect.left < threshold || rect.top < threshold || rect.bottom > windowHeight - threshold) {
+          setIsDocked(true);
+          setPanelPosition({ x: 0, y: 0 });
+        }
+      }
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging]);
   const handleSend = (e) => {
     e.preventDefault();
     if (!inputValue.trim()) return;
-    sendMessage(inputValue.trim());
+    onSendMessage(inputValue.trim());
     setInputValue("");
-    setTimeout(() => inputRef.current?.focus(), 0);
+    if (variant === "full") {
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
   };
   const handleToggle = () => {
-    const newExpandedState = !isExpanded;
-    setIsExpanded(newExpandedState);
-    try {
-      localStorage.setItem(CHAT_EXPANDED_KEY, JSON.stringify(newExpandedState));
-    } catch {
+    setIsExpanded(!isExpanded);
+  };
+  const handleDock = () => {
+    setIsDocked(true);
+    setPanelPosition({ x: 0, y: 0 });
+  };
+  const handleHome = () => {
+    setIsDocked(true);
+    setPanelPosition({ x: 0, y: 0 });
+    setIsMinimized(false);
+  };
+  const handleClearChat = () => {
+    if (onClearChat) {
+      onClearChat();
+      setShowWelcome(true);
+    }
+  };
+  const handleToggleTheme = () => {
+    const newTheme = theme === "light" ? "dark" : "light";
+    setTheme(newTheme);
+    if (typeof window !== "undefined") {
+      document.documentElement.setAttribute("data-theme", newTheme);
     }
   };
-  return /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-[9999]", children: [
-    isExpanded && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-16 right-0 w-[calc(100vw-2rem)] sm:w-[500px] lg:w-[600px] h-[calc(100vh-10rem)] sm:h-[min(600px,calc(100vh-6rem))] lg:h-[min(700px,calc(100vh-6rem))] bg-white rounded-lg shadow-2xl border border-gray-200 flex flex-col", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3 sm:p-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-purple-50 rounded-t-lg", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 sm:space-x-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx3("div", { className: "w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx3("span", { className: "text-white text-base sm:text-lg", children: "\u{1F916}" }) }),
-            /* @__PURE__ */ jsx3("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 sm:w-4 sm:h-4 bg-green-500 rounded-full border-2 border-white" })
+  const dockClasses = DOCK_POSITIONS[position];
+  const primaryColor = config.theme?.primary || "blue";
+  const glassMode = config.glassMode ?? true;
+  const maxHeightVh = 80;
+  const dynamicHeight = `min(${maxHeightVh}vh, 700px)`;
+  const panelWidth = "min(650px, calc(100vw - 2rem))";
+  const glassClasses = glassMode ? "backdrop-blur-xl bg-white/70 dark:bg-gray-900/70 border border-white/20 dark:border-white/10" : "bg-white dark:bg-gray-900 border-gray-200";
+  const glassGradient = glassMode ? "bg-gradient-to-br from-white/90 via-white/70 to-white/50 dark:from-gray-900/80 dark:via-gray-900/70 dark:to-gray-900/60" : "bg-white dark:bg-gray-900";
+  if (variant === "floating") {
+    const recentMessage = messages[messages.length - 1];
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: `fixed z-50 ${isDragging ? "cursor-grabbing" : "cursor-grab"}`,
+        style: {
+          transform: `translate(${panelPosition.x}px, ${panelPosition.y}px)`,
+          ...!isDragging && { transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)" }
+        },
+        onMouseDown: handlePanelMouseDown,
+        children: /* @__PURE__ */ jsxs("div", { className: `${glassClasses} rounded-2xl shadow-2xl border p-3 max-w-xs`, children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ jsx3(Avatar, { avatar: config.avatar, size: "small" }),
+              config.title && /* @__PURE__ */ jsx3("span", { className: THEME_CLASSES.text.floatingTitle, children: config.title })
+            ] }),
+            onClearChat && /* @__PURE__ */ jsx3(
+              "button",
+              {
+                onClick: onClearChat,
+                className: THEME_CLASSES.button.floatingClear,
+                title: "Clear chat",
+                "data-testid": ChatNames.clearButton,
+                children: /* @__PURE__ */ jsx3("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] }),
+          recentMessage && /* @__PURE__ */ jsxs("div", { className: `mb-2 group flex items-center gap-2 ${recentMessage.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: `text-xs px-3 py-2 rounded-xl transition-all ${recentMessage.type === "user" ? "bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-lg" : recentMessage.type === "ai" ? "bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 text-gray-900 dark:text-white shadow-md" : "bg-gradient-to-br from-yellow-100 to-yellow-200 text-yellow-900 shadow-md"}`,
+                children: recentMessage.text.length > 60 ? `${recentMessage.text.slice(0, 60)}...` : recentMessage.text
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: `text-xs opacity-0 group-hover:opacity-70 transition-opacity whitespace-nowrap flex-shrink-0 ${recentMessage.type === "user" ? "text-gray-400 dark:text-gray-500 text-left" : "text-gray-600 dark:text-gray-400 text-right"}`,
+                title: typeof window !== "undefined" ? new Date(recentMessage.timestamp).toLocaleString() : "",
+                children: typeof window !== "undefined" ? formatRelativeTime(recentMessage.timestamp) : ""
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx3("h3", { className: "font-bold text-gray-900 text-sm sm:text-base", children: "Supernal Intelligence Interface" }),
-            /* @__PURE__ */ jsx3("p", { className: "text-xs text-gray-600 hidden sm:block", children: "I'm a TOOL system AI can use to control this site" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1", children: [
-          /* @__PURE__ */ jsx3(
-            "button",
-            {
-              onClick: clearMessages,
-              className: "p-1 text-gray-400 hover:text-gray-600 transition-colors",
-              title: "Clear chat",
-              "data-testid": ChatNames.clearButton,
-              children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) })
-            }
-          ),
           /* @__PURE__ */ jsx3(
-            "button",
+            InputField,
             {
-              onClick: handleToggle,
-              className: "p-1 text-gray-400 hover:text-gray-600 transition-colors",
-              title: "Minimize chat",
-              children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+              compact: true,
+              inputValue,
+              onInputChange: setInputValue,
+              onSubmit: handleSend,
+              placeholder: config.placeholder,
+              glassClasses,
+              theme,
+              sendButtonLabel: config.sendButtonLabel
             }
           )
         ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-3 sm:p-4 space-y-3", "data-testid": ChatNames.messages, children: [
-        showWelcome && messages.length === 0 && /* @__PURE__ */ jsxs("div", { className: "bg-gradient-to-br from-blue-50 to-purple-50 p-3 sm:p-4 rounded-lg border border-blue-200 mb-4", children: [
-          /* @__PURE__ */ jsx3("h4", { className: "font-bold text-gray-900 mb-2 text-xs sm:text-sm", children: "\u{1F44B} Welcome! I'm NOT an AI" }),
-          /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-700 mb-3", children: [
-            "I'm a ",
-            /* @__PURE__ */ jsx3("strong", { children: "tool system" }),
-            " that AI assistants (like Claude, GPT) can use to navigate and control this site. This enables ",
-            /* @__PURE__ */ jsx3("strong", { children: "agentic UX" }),
-            " \u2014 instead of clicking around, you tell an AI what you want, and it uses me to do it."
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "bg-white p-2 sm:p-3 rounded border border-gray-200 mb-3", children: [
-            /* @__PURE__ */ jsx3("p", { className: "text-xs font-medium text-gray-900 mb-2", children: "Try these commands:" }),
-            /* @__PURE__ */ jsx3("div", { className: "space-y-1", children: [
-              { text: "open the docs", desc: "Navigate to documentation" },
-              { text: "show me the story system", desc: "View story system guide" },
-              { text: "go to examples", desc: "Browse code examples" }
-            ].map((cmd) => /* @__PURE__ */ jsxs(
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: `fixed ${dockClasses.container} z-50`, children: [
+    isExpanded && isMinimized && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `fixed ${dockClasses.container} ${glassClasses} rounded-3xl shadow-2xl border p-4 transition-all duration-300`,
+        style: { width: panelWidth, maxWidth: "400px" },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ jsx3(Avatar, { avatar: config.avatar, size: "small" }),
+              config.title && /* @__PURE__ */ jsx3("span", { className: THEME_CLASSES.text.floatingTitle, children: config.title })
+            ] }),
+            /* @__PURE__ */ jsx3(
               "button",
               {
-                onClick: () => {
-                  setInputValue(cmd.text);
-                  setShowWelcome(false);
-                  setTimeout(() => inputRef.current?.focus(), 0);
-                },
-                className: "w-full text-left px-2 py-1.5 rounded hover:bg-blue-50 transition-colors group",
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: "text-xs font-mono text-blue-700 group-hover:text-blue-900", children: [
-                    '"',
-                    cmd.text,
-                    '"'
-                  ] }),
-                  /* @__PURE__ */ jsx3("div", { className: "text-xs text-gray-500 hidden sm:block", children: cmd.desc })
-                ]
-              },
-              cmd.text
-            )) })
+                onClick: () => setIsMinimized(false),
+                className: "p-1 text-gray-400 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-200 transition-colors",
+                title: "Expand chat",
+                children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsx3("p", { className: "text-xs text-gray-600 italic", children: "Type a command or click a suggestion above to start" })
-        ] }),
-        messages.map((message) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          (() => {
+            const lastAiMessage = [...messages].reverse().find((m) => m.type === "ai");
+            return lastAiMessage ? /* @__PURE__ */ jsx3("div", { className: "mb-3", children: /* @__PURE__ */ jsx3("div", { className: `text-xs px-3 py-2 rounded-xl ${THEME_CLASSES.message.ai}`, style: INLINE_STYLES.messageAI(theme === "dark"), children: lastAiMessage.text.length > 100 ? `${lastAiMessage.text.slice(0, 100)}...` : lastAiMessage.text }) }) : /* @__PURE__ */ jsx3("div", { className: "mb-3", children: /* @__PURE__ */ jsx3("div", { className: THEME_CLASSES.text.minimizedMessage, style: INLINE_STYLES.minimizedMessage(theme === "dark"), children: "No AI responses yet" }) });
+          })(),
           /* @__PURE__ */ jsx3(
-            "div",
+            InputField,
             {
-              className: `inline-block px-3 py-2 rounded-lg max-w-[85%] sm:max-w-xs text-xs sm:text-sm ${message.type === "user" ? "bg-blue-600 text-white ml-auto" : message.type === "ai" ? "bg-gray-200 text-gray-800" : "bg-yellow-100 text-yellow-800 text-xs"}`,
-              "data-testid": `chat-message-${message.type}`,
-              children: message.text
+              compact: true,
+              inputValue,
+              onInputChange: setInputValue,
+              onSubmit: handleSend,
+              placeholder: config.placeholder,
+              glassClasses,
+              theme,
+              sendButtonLabel: config.sendButtonLabel
             }
-          ),
-          /* @__PURE__ */ jsx3("div", { className: "text-xs text-gray-400 mt-1 px-1", children: new Date(message.timestamp).toLocaleTimeString() })
-        ] }, message.id)),
-        /* @__PURE__ */ jsx3("div", { ref: messagesEndRef })
-      ] }),
-      /* @__PURE__ */ jsxs("form", { onSubmit: handleSend, className: "p-3 sm:p-4 border-t border-gray-200", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex space-x-2", children: [
-          /* @__PURE__ */ jsx3(
-            "input",
+          )
+        ]
+      }
+    ),
+    isExpanded && !isMinimized && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        className: `${isDocked ? "fixed " + dockClasses.container : "fixed"} ${glassGradient} rounded-3xl shadow-2xl border border-white/20 dark:border-white/10 backdrop-blur-xl flex flex-col overflow-hidden transition-all duration-300`,
+        style: {
+          width: panelWidth,
+          height: dynamicHeight,
+          ...!isDocked && {
+            left: "50%",
+            top: "50%",
+            transform: `translate(calc(-50% + ${panelPosition.x}px), calc(-50% + ${panelPosition.y}px))`
+          },
+          ...isDragging && { cursor: "grabbing" }
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
             {
-              ref: inputRef,
-              type: "text",
-              value: inputValue,
-              onChange: (e) => setInputValue(e.target.value),
-              placeholder: "Try: toggle notifications",
-              className: "flex-1 px-3 py-2 text-xs sm:text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800",
-              "data-testid": ChatNames.input
+              "data-drag-handle": true,
+              className: `${THEME_CLASSES.bg.header} ${glassMode ? THEME_CLASSES.bg.headerGradient : THEME_CLASSES.bg.headerLight} cursor-move`,
+              onMouseDown: handlePanelMouseDown,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+                  config.avatar && /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
+                    /* @__PURE__ */ jsx3(Avatar, { avatar: config.avatar }),
+                    /* @__PURE__ */ jsx3("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
+                  ] }),
+                  config.title && /* @__PURE__ */ jsx3("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx3("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1 flex-shrink-0 relative", "data-more-menu": true, children: [
+                  /* @__PURE__ */ jsx3(
+                    "button",
+                    {
+                      onClick: () => setShowMoreMenu(!showMoreMenu),
+                      className: THEME_CLASSES.button.more,
+                      title: "More options",
+                      children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" }) })
+                    }
+                  ),
+                  showMoreMenu && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-10 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-600 p-2 z-[100] min-w-[160px]", "data-more-menu": true, children: [
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: () => {
+                          handleToggleTheme();
+                          setShowMoreMenu(false);
+                        },
+                        className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+                        children: [
+                          theme === "light" ? /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) }) : /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) }),
+                          /* @__PURE__ */ jsx3("span", { children: theme === "light" ? "Dark mode" : "Light mode" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: () => {
+                          handleHome();
+                          setShowMoreMenu(false);
+                        },
+                        className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+                        children: [
+                          /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }),
+                          /* @__PURE__ */ jsx3("span", { children: "Reset position" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: () => {
+                          setShowInfo(!showInfo);
+                          setShowMoreMenu(false);
+                        },
+                        className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+                        children: [
+                          /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+                          /* @__PURE__ */ jsx3("span", { children: "How to use" })
+                        ]
+                      }
+                    ),
+                    onClearChat && /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: () => {
+                          handleClearChat();
+                          setShowMoreMenu(false);
+                        },
+                        className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+                        children: [
+                          /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
+                          /* @__PURE__ */ jsx3("span", { children: "Clear chat" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx3(
+                    "button",
+                    {
+                      onClick: () => setIsMinimized(true),
+                      className: THEME_CLASSES.button.minimize,
+                      title: "Minimize",
+                      children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    "button",
+                    {
+                      onClick: handleToggle,
+                      className: THEME_CLASSES.button.close,
+                      title: "Close",
+                      children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                    }
+                  )
+                ] })
+              ]
             }
           ),
+          showInfo && /* @__PURE__ */ jsxs("div", { className: THEME_CLASSES.text.infoPopup, style: INLINE_STYLES.infoText(theme === "dark"), children: [
+            /* @__PURE__ */ jsx3("div", { className: "font-bold mb-2", children: "How to Use" }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-xs", style: INLINE_STYLES.infoText(theme === "dark"), children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                "\u2022 ",
+                /* @__PURE__ */ jsx3("strong", { children: "Theme:" }),
+                " Toggle between light and dark modes"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                "\u2022 ",
+                /* @__PURE__ */ jsx3("strong", { children: "Home:" }),
+                " Reset chat position to default"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                "\u2022 ",
+                /* @__PURE__ */ jsx3("strong", { children: "Minimize:" }),
+                " Compact view with last message"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                "\u2022 ",
+                /* @__PURE__ */ jsx3("strong", { children: "Clear:" }),
+                " Delete all messages and start fresh"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                "\u2022 ",
+                /* @__PURE__ */ jsx3("strong", { children: "Drag:" }),
+                " Click and drag header to reposition"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                "\u2022 ",
+                /* @__PURE__ */ jsx3("strong", { children: "Keyboard:" }),
+                ' Press "/" to open, Esc to close'
+              ] })
+            ] }),
+            config.description && /* @__PURE__ */ jsx3("div", { className: "mt-3 pt-3 border-t border-gray-300/30 dark:border-gray-600/30", children: config.description })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", children: [
+            showWelcome && messages.length === 0 && config.welcome?.enabled && /* @__PURE__ */ jsxs("div", { className: THEME_CLASSES.welcome.container, children: [
+              config.welcome.title && /* @__PURE__ */ jsx3("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
+              config.welcome.content && /* @__PURE__ */ jsx3("p", { className: THEME_CLASSES.welcome.content, style: INLINE_STYLES.welcomeContent(theme === "dark"), children: config.welcome.content }),
+              config.welcome.suggestedCommands && config.welcome.suggestedCommands.length > 0 && /* @__PURE__ */ jsxs("div", { className: THEME_CLASSES.welcome.commandsContainer, children: [
+                /* @__PURE__ */ jsx3("p", { className: THEME_CLASSES.welcome.commandsHeader, children: "Try these commands:" }),
+                /* @__PURE__ */ jsx3("div", { className: "space-y-1", children: config.welcome.suggestedCommands.map((cmd, idx) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => {
+                      setInputValue(cmd.text);
+                      setShowWelcome(false);
+                      setTimeout(() => inputRef.current?.focus(), 0);
+                    },
+                    className: THEME_CLASSES.welcome.commandButton,
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: THEME_CLASSES.welcome.commandText, style: INLINE_STYLES.commandText(theme === "dark"), children: [
+                        '"',
+                        cmd.text,
+                        '"'
+                      ] }),
+                      cmd.desc && /* @__PURE__ */ jsx3("div", { className: THEME_CLASSES.welcome.commandDesc, style: INLINE_STYLES.commandDesc(theme === "dark"), children: cmd.desc })
+                    ]
+                  },
+                  idx
+                )) })
+              ] })
+            ] }),
+            messages.map((message) => /* @__PURE__ */ jsxs("div", { className: `group flex items-center gap-2 mb-2 ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
+              /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  className: `inline-block px-4 py-2.5 rounded-2xl max-w-[80%] text-sm shadow-sm transition-all ${message.type === "user" ? THEME_CLASSES.message.user : message.type === "ai" ? THEME_CLASSES.message.ai : THEME_CLASSES.message.system}`,
+                  style: message.type === "user" ? INLINE_STYLES.messageUser() : message.type === "ai" ? INLINE_STYLES.messageAI(theme === "dark") : INLINE_STYLES.messageSystem(theme === "dark"),
+                  "data-testid": `chat-message-${message.type}`,
+                  children: /* @__PURE__ */ jsx3("div", { className: "break-words leading-relaxed", children: message.text })
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  className: `text-xs opacity-0 group-hover:opacity-70 transition-opacity whitespace-nowrap flex-shrink-0 ${message.type === "user" ? "text-gray-400 dark:text-gray-500 text-left" : "text-gray-600 dark:text-gray-400 text-right"}`,
+                  title: typeof window !== "undefined" ? new Date(message.timestamp).toLocaleString() : "",
+                  children: typeof window !== "undefined" ? formatRelativeTime(message.timestamp) : ""
+                }
+              )
+            ] }, message.id)),
+            /* @__PURE__ */ jsx3("div", { ref: messagesEndRef })
+          ] }),
           /* @__PURE__ */ jsx3(
-            "button",
+            InputField,
             {
-              type: "submit",
-              disabled: !inputValue.trim(),
-              className: "px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors text-xs sm:text-sm font-medium",
-              "data-testid": ChatNames.sendButton,
-              children: "Execute"
+              inputValue,
+              onInputChange: setInputValue,
+              onSubmit: handleSend,
+              placeholder: config.placeholder,
+              glassClasses,
+              theme,
+              inputRef,
+              sendButtonLabel: config.sendButtonLabel
             }
           )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-2 text-xs text-gray-500 hidden sm:block", children: [
-          /* @__PURE__ */ jsx3("strong", { children: "Demo:" }),
-          " Commands execute @Tool methods and update widgets above"
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx3(
+        ]
+      }
+    ),
+    !isExpanded && /* @__PURE__ */ jsxs(
       "button",
       {
         onClick: handleToggle,
-        className: "absolute bottom-0 right-0 w-12 h-12 sm:w-14 sm:h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all duration-200 flex items-center justify-center",
+        className: THEME_CLASSES.bg.bubble,
         "data-testid": ChatNames.bubble,
-        title: isExpanded ? "Minimize chat" : "Open AI chat",
-        children: isExpanded ? /* @__PURE__ */ jsx3("svg", { className: "w-5 h-5 sm:w-6 sm:h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) : /* @__PURE__ */ jsx3("svg", { className: "w-5 h-5 sm:w-6 sm:h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) })
+        title: "Open chat",
+        children: [
+          /* @__PURE__ */ jsx3("img", { src: "/logo.svg", alt: "Supernal", className: "w-8 h-8" }),
+          hasUnread && /* @__PURE__ */ jsx3("div", { className: "absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center animate-pulse shadow-lg", "data-testid": "unread-indicator", children: /* @__PURE__ */ jsx3("span", { className: "text-xs text-white font-bold", children: unreadCount > 9 ? "9+" : unreadCount }) })
+        ]
       }
-    ),
-    hasUnread && /* @__PURE__ */ jsx3("div", { className: "absolute -top-1 -right-1 w-4 h-4 sm:w-5 sm:h-5 bg-red-500 rounded-full flex items-center justify-center animate-pulse", "data-testid": "unread-indicator", children: /* @__PURE__ */ jsx3("span", { className: "text-xs text-white font-bold", children: unreadCount > 9 ? "9+" : unreadCount }) })
+    )
   ] }) });
 };
 
@@ -724,7 +1370,26 @@ function inferContextFromPath(path, customRoutes) {
 }
 
 // src/components/SupernalProvider.tsx
+import { ExposureCollector, ToolRegistry } from "@supernal/interface/browser";
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function ChatBubbleConnector({
+  theme,
+  position,
+  welcomeMessage
+}) {
+  const { messages, sendMessage, clearMessages } = useChatContext();
+  return /* @__PURE__ */ jsx6(
+    ChatBubble,
+    {
+      messages,
+      onSendMessage: sendMessage,
+      onClearChat: clearMessages,
+      position,
+      variant: "full",
+      defaultExpanded: true
+    }
+  );
+}
 function SupernalProvider({
   children,
   theme = "auto",
@@ -738,10 +1403,44 @@ function SupernalProvider({
   onToolExecute
 }) {
   const shouldRenderChatBubble = !disabled;
+  console.log("[SupernalProvider] disabled:", disabled, "type:", typeof disabled);
+  console.log("[SupernalProvider] shouldRenderChatBubble:", shouldRenderChatBubble);
+  useEffect5(() => {
+    if (typeof window === "undefined") return;
+    const collector = ExposureCollector.getInstance();
+    const registeredToolIds = /* @__PURE__ */ new Set();
+    const registerTools = () => {
+      const allTools = ToolRegistry.getAllTools();
+      allTools.forEach((tool) => {
+        if (tool.elementId && !registeredToolIds.has(tool.toolId)) {
+          const element = document.querySelector(`[data-testid="${tool.elementId}"]`);
+          if (element) {
+            collector.registerTool(tool.toolId, element, {
+              name: tool.name,
+              description: tool.description
+            });
+            registeredToolIds.add(tool.toolId);
+          }
+        }
+      });
+    };
+    registerTools();
+    const observer = new MutationObserver(() => {
+      registerTools();
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      observer.disconnect();
+      collector.destroy();
+    };
+  }, []);
   return /* @__PURE__ */ jsx6(ChatInputProvider, { children: /* @__PURE__ */ jsxs2(ChatProvider, { mode, apiKey, onToolExecute, children: [
     /* @__PURE__ */ jsx6(AutoNavigationContext, { routes, onNavigate, children }),
     shouldRenderChatBubble ? /* @__PURE__ */ jsx6(
-      ChatBubble,
+      ChatBubbleConnector,
       {
         theme,
         position,