@djangocfg/layouts 2.1.101 → 2.1.102

package/dist/chunk-EI7TDN2G.mjs

@@ -0,0 +1,1652 @@
+import { User, Bot, Loader2, ExternalLink, MessageSquare, StopCircle, Send, RotateCcw, PanelRight, X, GripVertical, PanelRightClose, Zap } from 'lucide-react';
+import React, { createContext, forwardRef, useRef, useImperativeHandle, useState, useCallback, useEffect, useContext, useMemo } from 'react';
+import { Avatar, AvatarImage, AvatarFallback, Card, CardContent, Badge, Button, CardHeader, CardFooter, Portal } from '@djangocfg/ui-nextjs';
+import { useLocalStorage, useIsMobile } from '@djangocfg/ui-nextjs/hooks';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useAuth } from '@djangocfg/api/auth';
+import { MarkdownMessage } from '@djangocfg/ui-tools';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/snippets/McpChat/config.ts
+var PROD_HOST = "https://mcp.djangocfg.com";
+var DEV_HOST = "http://localhost:3002";
+function getHost(autoDetect = false) {
+  if (autoDetect && true) {
+    return DEV_HOST;
+  }
+  return PROD_HOST;
+}
+__name(getHost, "getHost");
+function getMcpEndpoints(autoDetect = false) {
+  const HOST = getHost(autoDetect);
+  return {
+    /** Base URL */
+    baseUrl: HOST,
+    /** Chat API endpoint */
+    chat: `${HOST}/api/chat`,
+    /** Search API endpoint */
+    search: `${HOST}/api/search`,
+    /** Conversations API endpoint */
+    conversations: `${HOST}/api/conversations`,
+    /** Health check endpoint */
+    health: `${HOST}/health`,
+    /** MCP protocol endpoint (Streamable HTTP) */
+    mcp: `${HOST}/mcp`,
+    /** SSE endpoint for legacy clients */
+    sse: `${HOST}/mcp/sse`
+  };
+}
+__name(getMcpEndpoints, "getMcpEndpoints");
+var mcpEndpoints = getMcpEndpoints(false);
+var sidebarConfig = {
+  /** Minimum sidebar width in pixels */
+  minWidth: 320,
+  /** Maximum sidebar width in pixels */
+  maxWidth: 600,
+  /** Default sidebar width in pixels */
+  defaultWidth: 400,
+  /** Z-index for chat elements */
+  zIndex: 300,
+  /** Animation duration in milliseconds */
+  animationDuration: 200
+};
+var fabConfig = {
+  /** Bottom offset in pixels */
+  bottom: 24,
+  /** Right offset in pixels */
+  right: 24};
+var storageKeys = {
+  /** Display mode (closed, floating, sidebar) */
+  mode: "djangocfg-chat-mode",
+  /** User ID for conversation tracking */
+  userId: "djangocfg-chat-user-id",
+  /** Chat messages history */
+  messages: "djangocfg-chat-messages",
+  /** Sidebar width */
+  sidebarWidth: "djangocfg-chat-sidebar-width"
+};
+
+// src/snippets/McpChat/hooks/useAIChat.ts
+function generateId() {
+  return `msg_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+}
+__name(generateId, "generateId");
+function generateThreadId() {
+  return `thread_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+}
+__name(generateThreadId, "generateThreadId");
+function generateUserId() {
+  return `user_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+}
+__name(generateUserId, "generateUserId");
+var STORAGE_KEY = "djangocfg_chat";
+function getPersistedIds() {
+  if (typeof window === "undefined") {
+    return { threadId: generateThreadId(), userId: generateUserId() };
+  }
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      const data = JSON.parse(stored);
+      if (data.threadId && data.userId) {
+        return data;
+      }
+    }
+  } catch {
+  }
+  const ids = { threadId: generateThreadId(), userId: generateUserId() };
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(ids));
+  } catch {
+  }
+  return ids;
+}
+__name(getPersistedIds, "getPersistedIds");
+function persistThreadId(threadId, userId) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ threadId, userId }));
+  } catch {
+  }
+}
+__name(persistThreadId, "persistThreadId");
+async function saveMessageToServer(threadId, userId, message) {
+  try {
+    await fetch(`${mcpEndpoints.conversations}/${threadId}/messages`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        userId,
+        message: {
+          id: message.id,
+          role: message.role,
+          content: message.content,
+          timestamp: message.timestamp.getTime(),
+          sources: message.sources
+        }
+      })
+    });
+  } catch (error) {
+    console.warn("[Chat] Failed to save message to server:", error);
+  }
+}
+__name(saveMessageToServer, "saveMessageToServer");
+async function loadConversationFromServer(threadId) {
+  try {
+    const response = await fetch(`${mcpEndpoints.conversations}/${threadId}`);
+    if (response.status === 404) return null;
+    if (!response.ok) return [];
+    const data = await response.json();
+    if (!data.messages || !Array.isArray(data.messages)) return [];
+    return data.messages.map((m) => ({
+      id: m.id,
+      role: m.role,
+      content: m.content,
+      timestamp: new Date(m.timestamp),
+      sources: m.sources
+    }));
+  } catch (error) {
+    console.warn("[Chat] Failed to load conversation from server:", error);
+    return [];
+  }
+}
+__name(loadConversationFromServer, "loadConversationFromServer");
+async function deleteConversationFromServer(threadId) {
+  try {
+    await fetch(`${mcpEndpoints.conversations}/${threadId}`, {
+      method: "DELETE"
+    });
+  } catch (error) {
+    console.warn("[Chat] Failed to delete conversation from server:", error);
+  }
+}
+__name(deleteConversationFromServer, "deleteConversationFromServer");
+function useAIChat(options) {
+  const {
+    apiEndpoint = mcpEndpoints.chat,
+    initialMessages = [],
+    onError,
+    enableStreaming = true,
+    threadId: initialThreadId,
+    userId: initialUserId
+  } = options;
+  const [messages, setMessages] = useState(initialMessages);
+  const [isLoadingHistory, setIsLoadingHistory] = useState(true);
+  const persistedIds = useRef(null);
+  if (persistedIds.current === null && typeof window !== "undefined") {
+    persistedIds.current = getPersistedIds();
+  }
+  const [threadId, setThreadId] = useState(
+    () => initialThreadId || persistedIds.current?.threadId || generateThreadId()
+  );
+  const [userId] = useState(
+    () => initialUserId || persistedIds.current?.userId || generateUserId()
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const abortControllerRef = useRef(null);
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      setIsLoadingHistory(false);
+      return;
+    }
+    const loadHistory = /* @__PURE__ */ __name(async () => {
+      const serverMessages = await loadConversationFromServer(threadId);
+      if (serverMessages === null) {
+        console.log("[Chat] Session expired or invalid, starting new session");
+        const newThreadId = generateThreadId();
+        setThreadId(newThreadId);
+        persistThreadId(newThreadId, userId);
+        setMessages([]);
+      } else if (serverMessages.length > 0) {
+        setMessages(serverMessages);
+      }
+      setIsLoadingHistory(false);
+    }, "loadHistory");
+    loadHistory();
+  }, [threadId, userId]);
+  const sendMessage = useCallback(
+    async (content) => {
+      if (!content.trim() || isLoading) return;
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      abortControllerRef.current = new AbortController();
+      const userMessage = {
+        id: generateId(),
+        role: "user",
+        content: content.trim(),
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      const assistantMessageId = generateId();
+      const assistantMessage = {
+        id: assistantMessageId,
+        role: "assistant",
+        content: "",
+        timestamp: /* @__PURE__ */ new Date(),
+        isStreaming: true
+      };
+      setMessages((prev) => [...prev, userMessage, assistantMessage]);
+      setIsLoading(true);
+      setError(null);
+      saveMessageToServer(threadId, userId, userMessage);
+      try {
+        const chatMessages = [
+          ...messages.filter((m) => m.role !== "system").slice(-10).map((m) => ({
+            role: m.role,
+            content: m.content
+          })),
+          { role: "user", content }
+        ];
+        const response = await fetch(apiEndpoint, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            messages: chatMessages,
+            stream: enableStreaming
+          }),
+          signal: abortControllerRef.current.signal
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error: ${response.status}`);
+        }
+        if (enableStreaming && response.headers.get("content-type")?.includes("text/event-stream")) {
+          await handleStreamingResponse(response, assistantMessageId);
+        } else {
+          const data = await response.json();
+          if (!data.success) {
+            throw new Error(data.error || "Failed to get response");
+          }
+          if (data.threadId && data.threadId !== threadId) {
+            setThreadId(data.threadId);
+          }
+          const sources = data.sources?.map((s) => ({
+            title: s.title,
+            path: s.path,
+            url: s.url,
+            section: s.section,
+            score: s.score
+          })) || [];
+          const finalContent = data.content || "I found some relevant documentation.";
+          setMessages(
+            (prev) => prev.map(
+              (m) => m.id === assistantMessageId ? {
+                ...m,
+                content: finalContent,
+                sources,
+                isStreaming: false
+              } : m
+            )
+          );
+          saveMessageToServer(threadId, userId, {
+            id: assistantMessageId,
+            role: "assistant",
+            content: finalContent,
+            timestamp: /* @__PURE__ */ new Date(),
+            sources
+          });
+        }
+      } catch (err) {
+        if (err instanceof Error && err.name === "AbortError") {
+          setMessages((prev) => prev.filter((m) => m.id !== assistantMessageId));
+          return;
+        }
+        const error2 = err instanceof Error ? err : new Error("Unknown error");
+        setError(error2);
+        onError?.(error2);
+        setMessages(
+          (prev) => prev.map(
+            (m) => m.id === assistantMessageId ? {
+              ...m,
+              content: `Sorry, I encountered an error: ${error2.message}. Please try again.`,
+              isStreaming: false
+            } : m
+          )
+        );
+      } finally {
+        setIsLoading(false);
+        abortControllerRef.current = null;
+      }
+    },
+    [apiEndpoint, isLoading, messages, threadId, userId, enableStreaming, onError]
+  );
+  const handleStreamingResponse = /* @__PURE__ */ __name(async (response, messageId) => {
+    const reader = response.body?.getReader();
+    if (!reader) {
+      throw new Error("No response body");
+    }
+    const decoder = new TextDecoder();
+    let buffer = "";
+    let fullContent = "";
+    const sources = [];
+    try {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() || "";
+        for (const line of lines) {
+          if (line.startsWith("data: ")) {
+            const data = line.slice(6);
+            if (data === "[DONE]") {
+              setMessages(
+                (prev) => prev.map(
+                  (m) => m.id === messageId ? {
+                    ...m,
+                    content: fullContent,
+                    sources,
+                    isStreaming: false
+                  } : m
+                )
+              );
+              saveMessageToServer(threadId, userId, {
+                id: messageId,
+                role: "assistant",
+                content: fullContent,
+                timestamp: /* @__PURE__ */ new Date(),
+                sources
+              });
+              return;
+            }
+            try {
+              const parsed = JSON.parse(data);
+              if (parsed.type === "text" && parsed.content) {
+                fullContent += parsed.content;
+                setMessages(
+                  (prev) => prev.map(
+                    (m) => m.id === messageId ? {
+                      ...m,
+                      content: fullContent,
+                      isStreaming: true
+                    } : m
+                  )
+                );
+              } else if (parsed.type === "source" && parsed.source) {
+                sources.push({
+                  title: parsed.source.title,
+                  path: parsed.source.path,
+                  url: parsed.source.url,
+                  section: parsed.source.section,
+                  score: parsed.source.score
+                });
+              } else if (parsed.type === "done") {
+                setMessages(
+                  (prev) => prev.map(
+                    (m) => m.id === messageId ? {
+                      ...m,
+                      content: fullContent,
+                      sources,
+                      isStreaming: false
+                    } : m
+                  )
+                );
+                saveMessageToServer(threadId, userId, {
+                  id: messageId,
+                  role: "assistant",
+                  content: fullContent,
+                  timestamp: /* @__PURE__ */ new Date(),
+                  sources
+                });
+              } else if (parsed.type === "error") {
+                throw new Error(parsed.error || "Stream error");
+              }
+            } catch {
+            }
+          }
+        }
+      }
+    } finally {
+      reader.releaseLock();
+    }
+  }, "handleStreamingResponse");
+  const clearMessages = useCallback(async () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    await deleteConversationFromServer(threadId);
+    setMessages([]);
+    setError(null);
+    const newThreadId = generateThreadId();
+    setThreadId(newThreadId);
+    persistThreadId(newThreadId, userId);
+  }, [threadId, userId]);
+  const stopStreaming = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+  }, []);
+  return {
+    messages,
+    isLoading: isLoading || isLoadingHistory,
+    error,
+    threadId,
+    userId,
+    sendMessage,
+    clearMessages,
+    stopStreaming
+  };
+}
+__name(useAIChat, "useAIChat");
+var STORAGE_KEY_MODE = "djangocfg-ai-chat-mode";
+var AIChatContext = createContext(null);
+function AIChatProvider({
+  children,
+  apiEndpoint = mcpEndpoints.chat,
+  config: userConfig = {},
+  onError,
+  enableStreaming = true
+}) {
+  const {
+    messages,
+    isLoading,
+    error,
+    threadId,
+    userId,
+    sendMessage: sendAIMessage,
+    clearMessages: clearAIMessages,
+    stopStreaming
+  } = useAIChat({
+    apiEndpoint,
+    onError,
+    enableStreaming
+  });
+  const [isMinimized, setIsMinimized] = useState(false);
+  const [storedMode, setStoredMode] = useLocalStorage(STORAGE_KEY_MODE, "closed");
+  const isMobile = useIsMobile();
+  const displayMode = useMemo(() => {
+    if (isMobile && storedMode === "sidebar") {
+      return "floating";
+    }
+    return storedMode;
+  }, [isMobile, storedMode]);
+  const isOpen = displayMode !== "closed";
+  const isOpenRef = useRef(isOpen);
+  useEffect(() => {
+    isOpenRef.current = isOpen;
+  }, [isOpen]);
+  const lastActiveModeRef = useRef("floating");
+  useEffect(() => {
+    if (displayMode !== "closed") {
+      lastActiveModeRef.current = displayMode;
+    }
+  }, [displayMode]);
+  const config = useMemo(
+    () => ({
+      apiEndpoint,
+      title: "DjangoCFG AI",
+      placeholder: "Ask about DjangoCFG...",
+      greeting: "Hi! I'm your DjangoCFG AI assistant powered by GPT. Ask me anything about configuration, features, or how to use the library.",
+      position: "bottom-right",
+      variant: "default",
+      ...userConfig
+    }),
+    [apiEndpoint, userConfig]
+  );
+  const sendMessage = useCallback(
+    async (content) => {
+      await sendAIMessage(content);
+    },
+    [sendAIMessage]
+  );
+  const clearMessages = useCallback(() => {
+    clearAIMessages();
+  }, [clearAIMessages]);
+  const openChat = useCallback(() => {
+    setStoredMode(lastActiveModeRef.current);
+    setIsMinimized(false);
+  }, [setStoredMode]);
+  const closeChat = useCallback(() => {
+    setStoredMode("closed");
+    setIsMinimized(false);
+  }, [setStoredMode]);
+  const toggleChat = useCallback(() => {
+    if (displayMode === "closed") {
+      setStoredMode("floating");
+      setIsMinimized(false);
+    } else {
+      setStoredMode("closed");
+    }
+  }, [displayMode, setStoredMode]);
+  const toggleMinimize = useCallback(() => {
+    setIsMinimized((prev) => !prev);
+  }, []);
+  const setDisplayMode = useCallback(
+    (mode) => {
+      if (isMobile && mode === "sidebar") {
+        setStoredMode("floating");
+      } else {
+        setStoredMode(mode);
+      }
+      setIsMinimized(false);
+    },
+    [isMobile, setStoredMode]
+  );
+  const value = useMemo(
+    () => ({
+      messages,
+      isLoading,
+      error,
+      isOpen,
+      isMinimized,
+      config,
+      displayMode,
+      isMobile,
+      threadId,
+      userId,
+      sendMessage,
+      clearMessages,
+      openChat,
+      closeChat,
+      toggleChat,
+      toggleMinimize,
+      setDisplayMode,
+      stopStreaming
+    }),
+    [
+      messages,
+      isLoading,
+      error,
+      isOpen,
+      isMinimized,
+      config,
+      displayMode,
+      isMobile,
+      threadId,
+      userId,
+      sendMessage,
+      clearMessages,
+      openChat,
+      closeChat,
+      toggleChat,
+      toggleMinimize,
+      setDisplayMode,
+      stopStreaming
+    ]
+  );
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      window.__MCP_CHAT_AVAILABLE__ = true;
+    }
+    const handleChatEvent = /* @__PURE__ */ __name((event) => {
+      const customEvent = event;
+      const { message, context, autoSend = true, displayMode: requestedMode } = customEvent.detail;
+      window.dispatchEvent(new CustomEvent("mcp:chat:handled"));
+      let fullMessage = message;
+      if (context) {
+        if (context.type) {
+          fullMessage = `[${context.type.toUpperCase()}] ${message}`;
+        }
+        if (context.data) {
+          fullMessage += `
+
+**Context:**
+\`\`\`json
+${JSON.stringify(context.data, null, 2)}
+\`\`\``;
+        }
+        if (context.source) {
+          fullMessage += `
+
+_Source: ${context.source}_`;
+        }
+      }
+      if (requestedMode) {
+        setDisplayMode(requestedMode);
+      } else if (!isOpenRef.current) {
+        openChat();
+      }
+      if (autoSend) {
+        setTimeout(() => {
+          sendMessage(fullMessage);
+        }, 100);
+      }
+    }, "handleChatEvent");
+    window.addEventListener("mcp:chat:send", handleChatEvent);
+    return () => {
+      window.removeEventListener("mcp:chat:send", handleChatEvent);
+      if (typeof window !== "undefined") {
+        window.__MCP_CHAT_AVAILABLE__ = false;
+      }
+    };
+  }, [sendMessage, setDisplayMode, openChat]);
+  return /* @__PURE__ */ jsx(AIChatContext.Provider, { value, children });
+}
+__name(AIChatProvider, "AIChatProvider");
+function useAIChatContext() {
+  const context = useContext(AIChatContext);
+  if (!context) {
+    throw new Error("useAIChatContext must be used within an AIChatProvider");
+  }
+  return context;
+}
+__name(useAIChatContext, "useAIChatContext");
+function useAIChatContextOptional() {
+  return useContext(AIChatContext);
+}
+__name(useAIChatContextOptional, "useAIChatContextOptional");
+var MIN_SIDEBAR_WIDTH = sidebarConfig.minWidth;
+var MAX_SIDEBAR_WIDTH = sidebarConfig.maxWidth;
+var DEFAULT_CONFIG = {
+  initialWidth: sidebarConfig.defaultWidth,
+  animationDuration: sidebarConfig.animationDuration,
+  pushTarget: "body"
+};
+function useChatLayout(config) {
+  const mergedConfig = { ...DEFAULT_CONFIG, ...config };
+  const { initialWidth, animationDuration, pushTarget } = mergedConfig;
+  const [storedWidth, setStoredWidth] = useLocalStorage(storageKeys.sidebarWidth, initialWidth);
+  const sidebarWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, storedWidth));
+  const sidebarWidthRef = useRef(sidebarWidth);
+  const [isResizing, setIsResizing] = useState(false);
+  useEffect(() => {
+    sidebarWidthRef.current = sidebarWidth;
+  }, [sidebarWidth]);
+  const originalStylesRef = useRef(null);
+  const fixedElementsRef = useRef([]);
+  const currentModeRef = useRef("closed");
+  const getTargetElement = useCallback(() => {
+    if (typeof window === "undefined") return null;
+    if (pushTarget === "body") {
+      return document.body;
+    } else if (pushTarget === "main") {
+      return document.querySelector("main");
+    } else {
+      return document.querySelector(pushTarget);
+    }
+  }, [pushTarget]);
+  const getFixedElements = useCallback(() => {
+    if (typeof window === "undefined") return [];
+    const elements = [];
+    const allElements = document.querySelectorAll("*");
+    allElements.forEach((el) => {
+      if (!(el instanceof HTMLElement)) return;
+      if (el.closest("[data-chat-sidebar-panel]")) return;
+      const style = window.getComputedStyle(el);
+      const position = style.position;
+      const right = style.right;
+      if ((position === "fixed" || position === "sticky") && right === "0px") {
+        elements.push(el);
+      }
+    });
+    return elements;
+  }, []);
+  const saveOriginalStyles = useCallback((element) => {
+    if (!originalStylesRef.current) {
+      originalStylesRef.current = {
+        marginRight: element.style.marginRight,
+        overflowX: element.style.overflowX,
+        transition: element.style.transition
+      };
+    }
+  }, []);
+  const restoreOriginalStyles = useCallback((element) => {
+    if (originalStylesRef.current) {
+      element.style.marginRight = originalStylesRef.current.marginRight || "";
+      element.style.overflowX = originalStylesRef.current.overflowX || "";
+      element.style.transition = originalStylesRef.current.transition || "";
+      element.removeAttribute("data-chat-sidebar");
+      originalStylesRef.current = null;
+    }
+  }, []);
+  const adjustFixedElements = useCallback(
+    (open) => {
+      const currentWidth = sidebarWidthRef.current;
+      if (open) {
+        const fixedElements = getFixedElements();
+        fixedElementsRef.current = fixedElements.map((el) => ({
+          element: el,
+          right: el.style.right,
+          transition: el.style.transition
+        }));
+        fixedElements.forEach((el) => {
+          el.style.transition = `right ${animationDuration}ms ease`;
+          el.style.right = `${currentWidth}px`;
+        });
+      } else {
+        fixedElementsRef.current.forEach(({ element, right, transition }) => {
+          element.style.transition = `right ${animationDuration}ms ease`;
+          element.style.right = "0px";
+          setTimeout(() => {
+            element.style.right = right;
+            element.style.transition = transition;
+          }, animationDuration);
+        });
+        fixedElementsRef.current = [];
+      }
+    },
+    [getFixedElements, animationDuration]
+  );
+  const applySidebarLayout = useCallback(() => {
+    const target = getTargetElement();
+    if (!target) return;
+    const currentWidth = sidebarWidthRef.current;
+    saveOriginalStyles(target);
+    target.style.transition = `margin-right ${animationDuration}ms ease`;
+    target.style.marginRight = `${currentWidth}px`;
+    target.style.overflowX = "hidden";
+    target.setAttribute("data-chat-sidebar", "open");
+    adjustFixedElements(true);
+    currentModeRef.current = "sidebar";
+  }, [getTargetElement, saveOriginalStyles, animationDuration, adjustFixedElements]);
+  const applyDefaultLayout = useCallback(
+    (mode) => {
+      const target = getTargetElement();
+      if (!target) return;
+      if (currentModeRef.current === "sidebar") {
+        target.style.transition = `margin-right ${animationDuration}ms ease`;
+        target.style.marginRight = "0px";
+        adjustFixedElements(false);
+        setTimeout(() => {
+          restoreOriginalStyles(target);
+        }, animationDuration);
+      }
+      currentModeRef.current = mode;
+    },
+    [getTargetElement, restoreOriginalStyles, animationDuration, adjustFixedElements]
+  );
+  const applyLayout = useCallback(
+    (mode) => {
+      if (mode === "sidebar") {
+        applySidebarLayout();
+      } else {
+        applyDefaultLayout(mode);
+      }
+    },
+    [applySidebarLayout, applyDefaultLayout]
+  );
+  const resetLayout = useCallback(() => {
+    const target = getTargetElement();
+    if (target && originalStylesRef.current) {
+      restoreOriginalStyles(target);
+    }
+    fixedElementsRef.current.forEach(({ element, right, transition }) => {
+      element.style.right = right;
+      element.style.transition = transition;
+    });
+    fixedElementsRef.current = [];
+    currentModeRef.current = "closed";
+  }, [getTargetElement, restoreOriginalStyles]);
+  const updateWidthImmediate = useCallback(
+    (newWidth) => {
+      const clampedWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, newWidth));
+      const target = getTargetElement();
+      if (target && currentModeRef.current === "sidebar") {
+        target.style.transition = "none";
+        target.style.marginRight = `${clampedWidth}px`;
+      }
+      fixedElementsRef.current.forEach(({ element }) => {
+        element.style.transition = "none";
+        element.style.right = `${clampedWidth}px`;
+      });
+      return clampedWidth;
+    },
+    [getTargetElement]
+  );
+  const updateWidth = useCallback(
+    (newWidth) => {
+      const clampedWidth = updateWidthImmediate(newWidth);
+      setStoredWidth(clampedWidth);
+    },
+    [updateWidthImmediate, setStoredWidth]
+  );
+  const startResize = useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsResizing(true);
+      const startX = e.clientX;
+      const startWidth = sidebarWidthRef.current;
+      const handleMouseMove = /* @__PURE__ */ __name((moveEvent) => {
+        const deltaX = startX - moveEvent.clientX;
+        const newWidth = startWidth + deltaX;
+        const clampedWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, newWidth));
+        updateWidthImmediate(clampedWidth);
+        sidebarWidthRef.current = clampedWidth;
+        setStoredWidth(clampedWidth);
+      }, "handleMouseMove");
+      const handleMouseUp = /* @__PURE__ */ __name(() => {
+        setIsResizing(false);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      }, "handleMouseUp");
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "ew-resize";
+      document.body.style.userSelect = "none";
+    },
+    [updateWidthImmediate, setStoredWidth]
+  );
+  const getSidebarStyles = useCallback(() => {
+    return {
+      position: "fixed",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: `${sidebarWidth}px`,
+      zIndex: sidebarConfig.zIndex
+    };
+  }, [sidebarWidth]);
+  const getFloatingStyles = useCallback(
+    (position) => {
+      return {
+        position: "fixed",
+        zIndex: sidebarConfig.zIndex - 50,
+        bottom: fabConfig.bottom,
+        ...position === "bottom-right" ? { right: fabConfig.right } : { left: fabConfig.right }
+      };
+    },
+    []
+  );
+  const getFabStyles = useCallback(
+    (position) => {
+      return {
+        position: "fixed",
+        zIndex: sidebarConfig.zIndex - 50,
+        bottom: fabConfig.bottom,
+        ...position === "bottom-right" ? { right: fabConfig.right } : { left: fabConfig.right }
+      };
+    },
+    []
+  );
+  useEffect(() => {
+    return () => {
+      resetLayout();
+    };
+  }, [resetLayout]);
+  return {
+    sidebarWidth,
+    applyLayout,
+    resetLayout,
+    updateWidth,
+    startResize,
+    isResizing,
+    getSidebarStyles,
+    getFloatingStyles,
+    getFabStyles
+  };
+}
+__name(useChatLayout, "useChatLayout");
+function formatTime(date) {
+  return date.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+__name(formatTime, "formatTime");
+var MessageBubble = React.memo(
+  ({ message, isCompact = false }) => {
+    const isUser = message.role === "user";
+    const isAssistant = message.role === "assistant";
+    const { user, isAuthenticated } = useAuth();
+    const showUserAvatar = isUser && isAuthenticated && user;
+    const userAvatar = user?.avatar || "";
+    const userDisplayName = user?.display_username || user?.email || "User";
+    const userInitial = userDisplayName.charAt(0).toUpperCase();
+    const avatarSize = isCompact ? "28px" : "36px";
+    const iconSize = isCompact ? "h-3.5 w-3.5" : "h-4 w-4";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex gap-3 animate-in fade-in slide-in-from-bottom-2 duration-300 max-w-full overflow-hidden ${isUser ? "flex-row-reverse" : ""}`,
+        children: [
+          showUserAvatar ? (
+            // Authenticated user avatar
+            /* @__PURE__ */ jsxs(Avatar, { className: "flex-shrink-0", style: { width: avatarSize, height: avatarSize }, children: [
+              /* @__PURE__ */ jsx(AvatarImage, { src: userAvatar, alt: userDisplayName }),
+              /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary text-primary-foreground text-xs", children: userInitial })
+            ] })
+          ) : isUser ? (
+            // Guest user icon
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex-shrink-0 rounded-full flex items-center justify-center bg-primary text-primary-foreground",
+                style: { width: avatarSize, height: avatarSize },
+                children: /* @__PURE__ */ jsx(User, { className: iconSize })
+              }
+            )
+          ) : (
+            // Bot icon
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex-shrink-0 rounded-full flex items-center justify-center bg-muted text-muted-foreground",
+                style: { width: avatarSize, height: avatarSize },
+                children: /* @__PURE__ */ jsx(Bot, { className: iconSize })
+              }
+            )
+          ),
+          /* @__PURE__ */ jsxs("div", { className: `flex-1 min-w-0 ${isUser ? "max-w-[80%] ml-auto" : "max-w-[85%]"}`, children: [
+            /* @__PURE__ */ jsxs("div", { className: `flex items-baseline gap-2 mb-1 ${isUser ? "justify-end" : ""}`, children: [
+              /* @__PURE__ */ jsx("span", { className: `font-medium ${isCompact ? "text-xs" : "text-sm"}`, children: isUser ? userDisplayName : "DjangoCFG AI" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatTime(message.timestamp) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Card,
+              {
+                className: `transition-all duration-200 ${isUser ? "bg-primary text-primary-foreground ml-auto" : "bg-muted"}`,
+                children: /* @__PURE__ */ jsxs(CardContent, { className: isCompact ? "p-2" : "p-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: `${isCompact ? "text-xs" : "text-sm"} overflow-hidden`, style: { overflowWrap: "anywhere", wordBreak: "break-word" }, children: [
+                    /* @__PURE__ */ jsx(
+                      MarkdownMessage,
+                      {
+                        content: message.content,
+                        isUser,
+                        isCompact
+                      }
+                    ),
+                    message.isStreaming && /* @__PURE__ */ jsx(Loader2, { className: "inline-block ml-1 h-3 w-3 animate-spin" })
+                  ] }),
+                  isAssistant && message.sources && message.sources.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3 pt-2 border-t border-border/50", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mb-1.5", children: "Related docs:" }),
+                    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: message.sources.slice(0, 3).map((source, idx) => /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        href: source.url || source.path,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        className: "inline-block",
+                        children: /* @__PURE__ */ jsxs(
+                          Badge,
+                          {
+                            variant: "outline",
+                            className: "text-xs gap-1 hover:bg-primary/10 transition-colors cursor-pointer",
+                            children: [
+                              source.title,
+                              source.section && ` - ${source.section}`,
+                              /* @__PURE__ */ jsx(ExternalLink, { className: "h-2.5 w-2.5" })
+                            ]
+                          }
+                        )
+                      },
+                      idx
+                    )) })
+                  ] })
+                ] })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+MessageBubble.displayName = "MessageBubble";
+var ChatMessages = forwardRef(
+  ({
+    messages,
+    isLoading,
+    greeting,
+    onStopStreaming,
+    isCompact = false,
+    largeGreetingIcon = false,
+    greetingIcon = "bot",
+    greetingTitle
+  }, ref) => {
+    const scrollContainerRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+      scrollToBottom: /* @__PURE__ */ __name(() => {
+        scrollContainerRef.current?.scrollTo({ top: 0, behavior: "smooth" });
+      }, "scrollToBottom"),
+      scrollToLastMessage: /* @__PURE__ */ __name(() => {
+        scrollContainerRef.current?.scrollTo({ top: 0, behavior: "smooth" });
+      }, "scrollToLastMessage")
+    }), []);
+    const GreetingIcon = greetingIcon === "message" ? MessageSquare : Bot;
+    const iconSize = largeGreetingIcon ? { container: "64px", icon: "h-8 w-8" } : { container: "48px", icon: "h-6 w-6" };
+    const padding = largeGreetingIcon ? "py-12" : "py-8";
+    return /* @__PURE__ */ jsx("div", { ref: scrollContainerRef, className: "h-full w-full overflow-y-auto flex flex-col-reverse", children: /* @__PURE__ */ jsxs("div", { className: `${isCompact ? "p-3" : "p-4"} space-y-4 max-w-full overflow-x-hidden`, children: [
+      messages.length === 0 && greeting && /* @__PURE__ */ jsxs("div", { className: `text-center ${padding}`, children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center",
+            style: { width: iconSize.container, height: iconSize.container },
+            children: /* @__PURE__ */ jsx(GreetingIcon, { className: `${iconSize.icon} text-primary` })
+          }
+        ),
+        greetingTitle && /* @__PURE__ */ jsx("h4", { className: "font-medium mb-2", children: greetingTitle }),
+        /* @__PURE__ */ jsx("p", { className: `text-sm text-muted-foreground ${largeGreetingIcon ? "max-w-[300px]" : "max-w-[280px]"} mx-auto`, children: greeting })
+      ] }),
+      messages.map((message) => /* @__PURE__ */ jsx("div", { "data-message-bubble": true, children: /* @__PURE__ */ jsx(MessageBubble, { message, isCompact }) }, message.id)),
+      isLoading && messages.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-muted-foreground text-sm", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "animate-bounce", style: { animationDelay: "0ms" }, children: "." }),
+            /* @__PURE__ */ jsx("span", { className: "animate-bounce", style: { animationDelay: "150ms" }, children: "." }),
+            /* @__PURE__ */ jsx("span", { className: "animate-bounce", style: { animationDelay: "300ms" }, children: "." })
+          ] }),
+          /* @__PURE__ */ jsx("span", { children: "Generating response..." })
+        ] }),
+        onStopStreaming && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: onStopStreaming,
+            className: "h-6 px-2 text-xs",
+            children: [
+              /* @__PURE__ */ jsx(StopCircle, { className: "h-3 w-3 mr-1" }),
+              "Stop"
+            ]
+          }
+        )
+      ] })
+    ] }) });
+  }
+);
+ChatMessages.displayName = "ChatMessages";
+var AIMessageInput = React.memo(
+  ({
+    onSend,
+    disabled = false,
+    isLoading = false,
+    placeholder = "Ask about DjangoCFG...",
+    maxRows = 5
+  }) => {
+    const [value, setValue] = useState("");
+    const textareaRef = useRef(null);
+    const adjustHeight = useCallback(() => {
+      const textarea = textareaRef.current;
+      if (!textarea) return;
+      textarea.style.height = "auto";
+      const lineHeight = 24;
+      const minHeight = 44;
+      const maxHeight = lineHeight * maxRows + 20;
+      const newHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
+      textarea.style.height = `${newHeight}px`;
+    }, [maxRows]);
+    useEffect(() => {
+      adjustHeight();
+    }, [value, adjustHeight]);
+    const handleSubmit = useCallback(
+      (e) => {
+        e?.preventDefault();
+        const trimmed = value.trim();
+        if (!trimmed || disabled || isLoading) return;
+        onSend(trimmed);
+        setValue("");
+        if (textareaRef.current) {
+          textareaRef.current.style.height = "auto";
+        }
+        textareaRef.current?.focus();
+      },
+      [value, disabled, isLoading, onSend]
+    );
+    const handleKeyDown = useCallback(
+      (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          handleSubmit();
+        }
+      },
+      [handleSubmit]
+    );
+    const canSend = value.trim().length > 0 && !disabled && !isLoading;
+    return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "w-full", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "relative flex items-end rounded-2xl border border-input bg-background transition-colors focus-within:ring-1 focus-within:ring-ring focus-within:border-ring",
+          style: { minHeight: "44px" },
+          children: [
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: textareaRef,
+                value,
+                onChange: (e) => setValue(e.target.value),
+                onKeyDown: handleKeyDown,
+                placeholder,
+                disabled: disabled || isLoading,
+                rows: 1,
+                className: "flex-1 resize-none bg-transparent px-4 py-3 text-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 pr-12",
+                style: {
+                  minHeight: "44px",
+                  maxHeight: `${24 * maxRows + 20}px`,
+                  lineHeight: "1.5rem"
+                },
+                autoComplete: "off"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute flex items-center justify-center",
+                style: {
+                  right: "6px",
+                  bottom: "6px"
+                },
+                children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "submit",
+                    size: "icon",
+                    disabled: !canSend,
+                    className: "h-8 w-8 rounded-full transition-all",
+                    style: {
+                      opacity: canSend ? 1 : 0.5
+                    },
+                    children: isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Send, { className: "h-4 w-4" })
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-muted-foreground text-center", children: "Press Enter to send, Shift+Enter for new line" })
+    ] });
+  }
+);
+AIMessageInput.displayName = "AIMessageInput";
+var ChatPanel = React.memo(() => {
+  const {
+    messages,
+    isLoading,
+    config,
+    isMobile,
+    sendMessage,
+    closeChat,
+    setDisplayMode,
+    stopStreaming,
+    clearMessages
+  } = useAIChatContext();
+  const panelStyles = isMobile ? {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: "100%",
+    height: "100%",
+    maxHeight: "100dvh",
+    borderRadius: 0,
+    display: "flex",
+    flexDirection: "column",
+    margin: 0,
+    border: "none"
+  } : {
+    width: "380px",
+    height: "520px",
+    maxHeight: "calc(100vh - 100px)"
+  };
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: `flex flex-col ${isMobile ? "rounded-none border-0 shadow-none" : "shadow-2xl border-border/50"}`,
+      style: panelStyles,
+      children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between p-3 border-b", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "rounded-full bg-primary/10 flex items-center justify-center",
+                style: { width: "32px", height: "32px" },
+                children: /* @__PURE__ */ jsx(Bot, { className: "h-4 w-4 text-primary" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm", children: config.title || "DjangoCFG AI" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "AI Assistant" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+            messages.length > 0 && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-8 w-8",
+                onClick: clearMessages,
+                title: "New chat",
+                children: /* @__PURE__ */ jsx(RotateCcw, { className: "h-4 w-4" })
+              }
+            ),
+            !isMobile && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-8 w-8",
+                onClick: () => setDisplayMode("sidebar"),
+                title: "Switch to sidebar mode",
+                children: /* @__PURE__ */ jsx(PanelRight, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8", onClick: closeChat, title: "Close", children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(CardContent, { className: "flex-1 p-0 overflow-hidden", children: /* @__PURE__ */ jsx(
+          ChatMessages,
+          {
+            messages,
+            isLoading,
+            greeting: config.greeting,
+            onStopStreaming: stopStreaming,
+            isCompact: true,
+            greetingIcon: "bot"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(CardFooter, { className: "p-3 border-t", children: /* @__PURE__ */ jsx(
+          AIMessageInput,
+          {
+            onSend: sendMessage,
+            isLoading,
+            placeholder: config.placeholder
+          }
+        ) })
+      ]
+    }
+  );
+});
+ChatPanel.displayName = "ChatPanel";
+var ChatSidebar = React.memo(({
+  resizeHandleWidth = 12,
+  showResizeIcon = true,
+  resizeHandleClassName
+}) => {
+  const {
+    messages,
+    isLoading,
+    config,
+    sendMessage,
+    closeChat,
+    setDisplayMode,
+    stopStreaming,
+    clearMessages
+  } = useAIChatContext();
+  const { applyLayout, getSidebarStyles, startResize, isResizing } = useChatLayout();
+  useEffect(() => {
+    applyLayout("sidebar");
+    return () => {
+      applyLayout("closed");
+    };
+  }, []);
+  const sidebarStyles = getSidebarStyles();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex bg-background",
+      style: sidebarStyles,
+      "data-chat-sidebar-panel": true,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `
+          flex items-center justify-center cursor-ew-resize
+          border-l border-border transition-colors select-none flex-shrink-0
+          ${isResizing ? "bg-primary/20" : "bg-muted/30 hover:bg-muted/50"}
+          ${resizeHandleClassName || ""}
+        `,
+            style: { width: resizeHandleWidth },
+            onMouseDown: startResize,
+            title: "Drag to resize",
+            children: showResizeIcon && /* @__PURE__ */ jsx(GripVertical, { className: `h-4 w-4 ${isResizing ? "text-primary" : "text-muted-foreground/50"}` })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center justify-between px-4 border-b border-border bg-muted/30",
+              style: { height: "var(--nextra-navbar-height, 64px)", minHeight: "var(--nextra-navbar-height, 64px)" },
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "rounded-full bg-primary/10 flex items-center justify-center",
+                      style: { width: "32px", height: "32px" },
+                      children: /* @__PURE__ */ jsx(Bot, { className: "h-4 w-4 text-primary" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm", children: config.title || "DjangoCFG AI" }),
+                    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "AI Assistant" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+                  messages.length > 0 && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: "h-8 w-8",
+                      onClick: clearMessages,
+                      title: "New chat",
+                      children: /* @__PURE__ */ jsx(RotateCcw, { className: "h-4 w-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: "h-8 w-8",
+                      onClick: () => setDisplayMode("floating"),
+                      title: "Switch to floating mode",
+                      children: /* @__PURE__ */ jsx(PanelRightClose, { className: "h-4 w-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8", onClick: closeChat, title: "Close chat", children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+            ChatMessages,
+            {
+              messages,
+              isLoading,
+              greeting: config.greeting,
+              onStopStreaming: stopStreaming,
+              isCompact: false,
+              largeGreetingIcon: true,
+              greetingIcon: "message",
+              greetingTitle: "How can I help?"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "p-4 border-t border-border bg-muted/30", children: /* @__PURE__ */ jsx(AIMessageInput, { onSend: sendMessage, isLoading, placeholder: config.placeholder }) })
+        ] })
+      ]
+    }
+  );
+});
+ChatSidebar.displayName = "ChatSidebar";
+var fabAnimationStyles = `
+@keyframes rotate-gradient {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes rotate-gradient-reverse {
+  0% { transform: rotate(360deg); }
+  100% { transform: rotate(0deg); }
+}
+
+@keyframes color-shift-glow {
+  0%, 100% {
+    box-shadow:
+      0 0 20px rgba(251, 191, 36, 0.5),
+      0 0 40px rgba(168, 85, 247, 0.3),
+      0 0 60px rgba(20, 184, 166, 0.2);
+  }
+  33% {
+    box-shadow:
+      0 0 20px rgba(168, 85, 247, 0.5),
+      0 0 40px rgba(20, 184, 166, 0.3),
+      0 0 60px rgba(251, 191, 36, 0.2);
+  }
+  66% {
+    box-shadow:
+      0 0 20px rgba(20, 184, 166, 0.5),
+      0 0 40px rgba(236, 72, 153, 0.3),
+      0 0 60px rgba(168, 85, 247, 0.2);
+  }
+}
+
+@keyframes icon-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.7));
+  }
+  50% {
+    opacity: 0.85;
+    transform: scale(1.15);
+    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 1));
+  }
+}
+
+@keyframes border-pulse {
+  0%, 100% {
+    opacity: 1;
+    filter: blur(0px);
+  }
+  50% {
+    opacity: 0.85;
+    filter: blur(0.5px);
+  }
+}
+
+@keyframes inner-glow-pulse {
+  0%, 100% {
+    box-shadow:
+      inset 0 0 15px rgba(251, 191, 36, 0.3),
+      inset 0 0 25px rgba(168, 85, 247, 0.2);
+  }
+  50% {
+    box-shadow:
+      inset 0 0 20px rgba(168, 85, 247, 0.35),
+      inset 0 0 30px rgba(20, 184, 166, 0.25);
+  }
+}
+
+@keyframes fab-entrance {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.08);
+  }
+  70% {
+    transform: scale(0.98);
+  }
+  85% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes fab-glow-entrance {
+  0% {
+    box-shadow: 0 0 0 rgba(251, 191, 36, 0);
+  }
+  40% {
+    box-shadow:
+      0 0 25px rgba(251, 191, 36, 0.6),
+      0 0 50px rgba(168, 85, 247, 0.4),
+      0 0 75px rgba(20, 184, 166, 0.25);
+  }
+  100% {
+    box-shadow:
+      0 0 20px rgba(251, 191, 36, 0.5),
+      0 0 40px rgba(168, 85, 247, 0.3),
+      0 0 60px rgba(20, 184, 166, 0.2);
+  }
+}
+`;
+var AIChatWidgetInternal = React.memo(({ className }) => {
+  const { config, displayMode, openChat, isMobile } = useAIChatContext();
+  const { getFabStyles, getFloatingStyles } = useChatLayout();
+  const position = config.position || "bottom-right";
+  const fabStyles = getFabStyles(position);
+  const floatingStyles = getFloatingStyles(position);
+  if (displayMode === "closed") {
+    return /* @__PURE__ */ jsxs(Portal, { children: [
+      /* @__PURE__ */ jsx("style", { children: fabAnimationStyles }),
+      /* @__PURE__ */ jsx("div", { style: fabStyles, className: className || "", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "relative rounded-full",
+          style: {
+            width: "68px",
+            height: "68px",
+            overflow: "hidden",
+            animation: "fab-entrance 0.6s cubic-bezier(0.34, 1.45, 0.64, 1) 0s 1 normal forwards, fab-glow-entrance 0.8s ease-out 0s 1 normal forwards, color-shift-glow 8s ease-in-out 0.6s infinite"
+          },
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "absolute rounded-full",
+              style: {
+                inset: "0",
+                overflow: "hidden"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute rounded-full",
+                    style: {
+                      inset: "0",
+                      background: `conic-gradient(
+                    from 0deg,
+                    rgba(251, 191, 36, 1) 0%,
+                    rgba(251, 191, 36, 0.7) 8%,
+                    rgba(251, 191, 36, 0) 15%,
+                    rgba(168, 85, 247, 0) 20%,
+                    rgba(168, 85, 247, 0.7) 28%,
+                    rgba(168, 85, 247, 1) 35%,
+                    rgba(168, 85, 247, 0.7) 42%,
+                    rgba(168, 85, 247, 0) 50%,
+                    rgba(20, 184, 166, 0) 55%,
+                    rgba(20, 184, 166, 0.7) 63%,
+                    rgba(20, 184, 166, 1) 70%,
+                    rgba(20, 184, 166, 0.7) 77%,
+                    rgba(20, 184, 166, 0) 85%,
+                    rgba(236, 72, 153, 0) 88%,
+                    rgba(236, 72, 153, 0.7) 93%,
+                    rgba(236, 72, 153, 1) 97%,
+                    rgba(251, 191, 36, 1) 100%
+                  )`,
+                      animation: "rotate-gradient 7s linear infinite, border-pulse 4s ease-in-out infinite",
+                      filter: "blur(1px)",
+                      opacity: 0.95
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute rounded-full",
+                    style: {
+                      inset: "1px",
+                      background: `conic-gradient(
+                    from 180deg,
+                    rgba(168, 85, 247, 0.85) 0%,
+                    rgba(168, 85, 247, 0.5) 10%,
+                    rgba(168, 85, 247, 0) 20%,
+                    rgba(20, 184, 166, 0) 30%,
+                    rgba(20, 184, 166, 0.5) 40%,
+                    rgba(20, 184, 166, 0.85) 50%,
+                    rgba(20, 184, 166, 0.5) 60%,
+                    rgba(20, 184, 166, 0) 70%,
+                    rgba(251, 191, 36, 0) 75%,
+                    rgba(251, 191, 36, 0.5) 85%,
+                    rgba(251, 191, 36, 0.85) 95%,
+                    rgba(168, 85, 247, 0.85) 100%
+                  )`,
+                      animation: "rotate-gradient-reverse 9s linear infinite",
+                      filter: "blur(0.75px)",
+                      opacity: 0.75
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute rounded-full bg-background",
+                    style: {
+                      inset: "4px",
+                      animation: "inner-glow-pulse 5s ease-in-out infinite"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: openChat,
+                    variant: "ghost",
+                    className: "absolute rounded-full hover:scale-105 transition-all duration-300 bg-background/80 hover:bg-background/95 border-0 backdrop-blur-sm",
+                    style: {
+                      inset: "2.5px",
+                      width: "auto",
+                      height: "auto"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      Zap,
+                      {
+                        className: "h-6 w-6",
+                        style: {
+                          animation: "icon-pulse 2.5s ease-in-out infinite",
+                          color: "#fbbf24",
+                          fill: "#fbbf24"
+                        }
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ) })
+    ] });
+  }
+  if (displayMode === "sidebar") {
+    return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(ChatSidebar, {}) });
+  }
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "z-[400] overflow-hidden",
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          width: "100vw",
+          height: "100dvh"
+        },
+        children: /* @__PURE__ */ jsx(ChatPanel, {})
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", { style: floatingStyles, className: className || "", children: /* @__PURE__ */ jsx(ChatPanel, {}) }) });
+});
+AIChatWidgetInternal.displayName = "AIChatWidgetInternal";
+var AIChatWidget = /* @__PURE__ */ __name(({
+  apiEndpoint,
+  title = "DjangoCFG AI",
+  placeholder = "Ask about DjangoCFG...",
+  greeting = "Hi! I'm your DjangoCFG AI assistant powered by GPT. Ask me anything about configuration, features, or how to use the library.",
+  position = "bottom-right",
+  variant = "default",
+  className,
+  enableStreaming = true,
+  autoDetectEnvironment = false
+}) => {
+  const existingContext = useAIChatContextOptional();
+  if (existingContext) {
+    return /* @__PURE__ */ jsx(AIChatWidgetInternal, { className });
+  }
+  const finalApiEndpoint = apiEndpoint || getMcpEndpoints(autoDetectEnvironment).chat;
+  return /* @__PURE__ */ jsx(
+    AIChatProvider,
+    {
+      apiEndpoint: finalApiEndpoint,
+      config: { title, placeholder, greeting, position, variant, autoDetectEnvironment },
+      enableStreaming,
+      children: /* @__PURE__ */ jsx(AIChatWidgetInternal, { className })
+    }
+  );
+}, "AIChatWidget");
+AIChatWidget.displayName = "AIChatWidget";
+
+export { AIChatProvider, AIChatWidget, AIMessageInput, ChatPanel, ChatSidebar, MessageBubble, __name, storageKeys, useAIChat, useAIChatContext, useAIChatContextOptional, useChatLayout };
+//# sourceMappingURL=chunk-EI7TDN2G.mjs.map
+//# sourceMappingURL=chunk-EI7TDN2G.mjs.map