@djangocfg/layouts 2.0.7 → 2.0.9

package/src/snippets/McpChat/components/ChatSidebar.tsx

@@ -2,60 +2,59 @@
 
 import React, { useEffect } from 'react';
 import { Button } from '@djangocfg/ui';
-import { X, PanelRightClose, Bot } from 'lucide-react';
+import { X, PanelRightClose, Bot, GripVertical, RotateCcw } from 'lucide-react';
 import { ChatMessages } from './ChatMessages';
 import { AIMessageInput } from './MessageInput';
 import { useChatLayout } from '../hooks/useChatLayout';
-import type { AIChatMessage, ChatDisplayMode } from '../types';
+import { useAIChatContext } from '../context/AIChatContext';
 
-const SIDEBAR_WIDTH = 400;
-
-export interface ChatSidebarProps {
-  messages: AIChatMessage[];
-  isLoading: boolean;
-  onSendMessage: (content: string) => void;
-  onClose?: () => void;
-  onModeChange?: (mode: ChatDisplayMode) => void;
-  onStopStreaming?: () => void;
-  title?: string;
-  placeholder?: string;
-  greeting?: string;
-}
-
-export const ChatSidebar = React.memo<ChatSidebarProps>(
-  ({
+export const ChatSidebar = React.memo(() => {
+  const {
     messages,
     isLoading,
-    onSendMessage,
-    onClose,
-    onModeChange,
-    onStopStreaming,
-    title = 'DjangoCFG Assistant',
-    placeholder,
-    greeting,
-  }) => {
-    // Use the layout hook for content pushing
-    const { applyLayout, getSidebarStyles } = useChatLayout({
-      sidebarWidth: SIDEBAR_WIDTH,
-    });
+    config,
+    sendMessage,
+    closeChat,
+    setDisplayMode,
+    stopStreaming,
+    clearMessages,
+  } = useAIChatContext();
 
-    // Apply sidebar layout on mount, reset on unmount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => {
-      applyLayout('sidebar');
-      return () => {
-        applyLayout('closed');
-      };
-    }, []);
+  // Use the layout hook for content pushing and resizing
+  const { applyLayout, getSidebarStyles, startResize, isResizing } = useChatLayout();
 
-    const sidebarStyles = getSidebarStyles();
+  // Apply sidebar layout on mount, reset on unmount
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    applyLayout('sidebar');
+    return () => {
+      applyLayout('closed');
+    };
+  }, []);
 
-    return (
+  const sidebarStyles = getSidebarStyles();
+
+  return (
+    <div
+      className="flex bg-background"
+      style={sidebarStyles}
+      data-chat-sidebar-panel
+    >
+      {/* Resize handle */}
       <div
-        className="flex flex-col bg-background border-l border-border"
-        style={sidebarStyles}
-        data-chat-sidebar-panel
+        className={`
+          flex items-center justify-center w-3 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'}
+        `}
+        onMouseDown={startResize}
+        title="Drag to resize"
       >
+        <GripVertical className={`h-4 w-4 ${isResizing ? 'text-primary' : 'text-muted-foreground/50'}`} />
+      </div>
+
+      {/* Main sidebar content */}
+      <div className="flex flex-col flex-1 min-w-0">
         {/* Header - uses CSS variable for navbar height consistency */}
         <div
           className="flex items-center justify-between px-4 border-b border-border bg-muted/30"
@@ -69,27 +68,34 @@ export const ChatSidebar = React.memo<ChatSidebarProps>(
               <Bot className="h-4 w-4 text-primary" />
             </div>
             <div>
-              <h3 className="font-semibold text-sm">{title}</h3>
-              <p className="text-xs text-muted-foreground">Documentation assistant</p>
+              <h3 className="font-semibold text-sm">{config.title || 'DjangoCFG AI'}</h3>
+              <p className="text-xs text-muted-foreground">documentation assistant</p>
             </div>
           </div>
           <div className="flex gap-1">
-            {onModeChange && (
+            {messages.length > 0 && (
               <Button
                 variant="ghost"
                 size="icon"
                 className="h-8 w-8"
-                onClick={() => onModeChange('floating')}
-                title="Switch to floating mode"
+                onClick={clearMessages}
+                title="New chat"
               >
-                <PanelRightClose className="h-4 w-4" />
-              </Button>
-            )}
-            {onClose && (
-              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onClose} title="Close chat">
-                <X className="h-4 w-4" />
+                <RotateCcw className="h-4 w-4" />
               </Button>
             )}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={() => setDisplayMode('floating')}
+              title="Switch to floating mode"
+            >
+              <PanelRightClose className="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" size="icon" className="h-8 w-8" onClick={closeChat} title="Close chat">
+              <X className="h-4 w-4" />
+            </Button>
           </div>
         </div>
 
@@ -98,8 +104,8 @@ export const ChatSidebar = React.memo<ChatSidebarProps>(
           <ChatMessages
             messages={messages}
             isLoading={isLoading}
-            greeting={greeting}
-            onStopStreaming={onStopStreaming}
+            greeting={config.greeting}
+            onStopStreaming={stopStreaming}
             isCompact={false}
             largeGreetingIcon
             greetingIcon="message"
@@ -109,11 +115,11 @@ export const ChatSidebar = React.memo<ChatSidebarProps>(
 
         {/* Input */}
         <div className="p-4 border-t border-border bg-muted/30">
-          <AIMessageInput onSend={onSendMessage} isLoading={isLoading} placeholder={placeholder} />
+          <AIMessageInput onSend={sendMessage} isLoading={isLoading} placeholder={config.placeholder} />
         </div>
       </div>
-    );
-  }
-);
+    </div>
+  );
+});
 
 ChatSidebar.displayName = 'ChatSidebar';

package/src/snippets/McpChat/components/ChatWidget.tsx

@@ -18,19 +18,7 @@ export interface ChatWidgetProps extends ChatWidgetConfig {
  * Internal chat widget that uses context
  */
 const ChatWidgetInternal: React.FC<{ className?: string }> = ({ className }) => {
-  const {
-    messages,
-    isLoading,
-    isMinimized,
-    config,
-    displayMode,
-    isMobile,
-    sendMessage,
-    openChat,
-    closeChat,
-    toggleMinimize,
-    setDisplayMode,
-  } = useChatContext();
+  const { config, displayMode, openChat } = useChatContext();
 
   // Use layout hook for consistent positioning
   const { getFabStyles, getFloatingStyles } = useChatLayout();
@@ -60,16 +48,7 @@ const ChatWidgetInternal: React.FC<{ className?: string }> = ({ className }) =>
   if (displayMode === 'sidebar') {
     return (
       <Portal>
-        <ChatSidebar
-          messages={messages}
-          isLoading={isLoading}
-          onSendMessage={sendMessage}
-          onClose={closeChat}
-          onModeChange={setDisplayMode}
-          title={config.title}
-          placeholder={config.placeholder}
-          greeting={config.greeting}
-        />
+        <ChatSidebar />
       </Portal>
     );
   }
@@ -78,19 +57,7 @@ const ChatWidgetInternal: React.FC<{ className?: string }> = ({ className }) =>
   return (
     <Portal>
       <div style={floatingStyles} className={className || ''}>
-        <ChatPanel
-          messages={messages}
-          isLoading={isLoading}
-          onSendMessage={sendMessage}
-          onClose={closeChat}
-          onMinimize={toggleMinimize}
-          onModeChange={setDisplayMode}
-          isMinimized={isMinimized}
-          isMobile={isMobile}
-          title={config.title}
-          placeholder={config.placeholder}
-          greeting={config.greeting}
-        />
+        <ChatPanel />
       </div>
     </Portal>
   );
@@ -105,7 +72,7 @@ const ChatWidgetInternal: React.FC<{ className?: string }> = ({ className }) =>
  */
 export const ChatWidget: React.FC<ChatWidgetProps> = ({
   apiEndpoint = '/api/chat',
-  title = 'DjangoCFG Assistant',
+  title = 'DjangoCFG AI',
   placeholder = 'Ask about DjangoCFG...',
   greeting = "Hi! I'm your DjangoCFG documentation assistant. Ask me anything about configuration, features, or how to use the library.",
   position = 'bottom-right',

package/src/snippets/McpChat/components/MessageBubble.tsx

@@ -24,7 +24,7 @@ export const MessageBubble = React.memo<MessageBubbleProps>(
 
     return (
       <div
-        className={`flex gap-3 animate-in fade-in slide-in-from-bottom-2 duration-300 ${
+        className={`flex gap-3 animate-in fade-in slide-in-from-bottom-2 duration-300 max-w-full overflow-hidden ${
           isUser ? 'flex-row-reverse' : ''
         }`}
       >
@@ -52,7 +52,7 @@ export const MessageBubble = React.memo<MessageBubbleProps>(
           {/* Header */}
           <div className={`flex items-baseline gap-2 mb-1 ${isUser ? 'justify-end' : ''}`}>
             <span className={`font-medium ${isCompact ? 'text-xs' : 'text-sm'}`}>
-              {isUser ? 'You' : 'DjangoCFG Assistant'}
+              {isUser ? 'You' : 'DjangoCFG AI'}
             </span>
             <span className="text-xs text-muted-foreground">
               {formatTime(message.timestamp)}
@@ -69,12 +69,12 @@ export const MessageBubble = React.memo<MessageBubbleProps>(
           >
             <CardContent className={isCompact ? 'p-2' : 'p-3'}>
               {/* Message Text */}
-              <div className={`${isCompact ? 'text-xs' : 'text-sm'}`}>
+              <div className={`${isCompact ? 'text-xs' : 'text-sm'} overflow-hidden`} style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }}>
                 {isUser ? (
-                  <span className="whitespace-pre-wrap">{message.content}</span>
+                  <span className="whitespace-pre-wrap" style={{ overflowWrap: 'anywhere' }}>{message.content}</span>
                 ) : message.isStreaming ? (
                   // During streaming - show plain text to avoid parsing errors
-                  <span className="whitespace-pre-wrap">
+                  <span className="whitespace-pre-wrap" style={{ overflowWrap: 'anywhere' }}>
                     {message.content}
                     <Loader2 className="inline-block ml-1 h-3 w-3 animate-spin" />
                   </span>

package/src/snippets/McpChat/components/index.ts

@@ -7,7 +7,6 @@ export { AIChatWidget } from './AIChatWidget';
 export type { AIChatWidgetProps } from './AIChatWidget';
 
 export { ChatPanel } from './ChatPanel';
-export type { ChatPanelProps } from './ChatPanel';
 
 export { ChatMessages } from './ChatMessages';
 export type { ChatMessagesProps, ChatMessagesHandle } from './ChatMessages';
@@ -19,4 +18,3 @@ export { AIMessageInput } from './MessageInput';
 export type { AIMessageInputProps } from './MessageInput';
 
 export { ChatSidebar } from './ChatSidebar';
-export type { ChatSidebarProps } from './ChatSidebar';

package/src/snippets/McpChat/config.ts

@@ -33,3 +33,45 @@ export const mcpEndpoints = {
 // Export defaults for backwards compatibility
 export const DEFAULT_CHAT_API_ENDPOINT = PROD_HOST + '/api/chat';
 export const DEFAULT_MCP_BASE_URL = PROD_HOST;
+
+/**
+ * Chat sidebar layout configuration
+ */
+export const 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,
+};
+
+/**
+ * Chat FAB (Floating Action Button) configuration
+ */
+export const fabConfig = {
+  /** Bottom offset in pixels */
+  bottom: 24,
+  /** Right offset in pixels */
+  right: 24,
+  /** Size of FAB button in pixels */
+  size: 56,
+};
+
+/**
+ * LocalStorage keys for chat state persistence
+ */
+export const 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',
+};

package/src/snippets/McpChat/context/ChatContext.tsx

@@ -4,10 +4,8 @@ import React, { createContext, useContext, useState, useCallback, useMemo, useEf
 import { useLocalStorage, useIsMobile } from '@djangocfg/ui/hooks';
 import { v4 as uuidv4 } from 'uuid';
 import type { AIChatMessage, ChatApiResponse, AIChatSource, ChatWidgetConfig, ChatDisplayMode } from '../types';
+import { storageKeys } from '../config';
 
-const STORAGE_KEY_MODE = 'djangocfg-chat-mode';
-const STORAGE_KEY_USER_ID = 'djangocfg-chat-user-id';
-const STORAGE_KEY_MESSAGES = 'djangocfg-chat-messages';
 const MAX_STORED_MESSAGES = 50;
 
 function generateMessageId(): string {
@@ -102,13 +100,13 @@ export function ChatProvider({
   const isHydratedRef = useRef(false);
 
   // Display mode with localStorage persistence
-  const [storedMode, setStoredMode] = useLocalStorage<ChatDisplayMode>(STORAGE_KEY_MODE, 'closed');
+  const [storedMode, setStoredMode] = useLocalStorage<ChatDisplayMode>(storageKeys.mode, 'closed');
 
   // User ID with localStorage persistence
-  const [userId, setUserId] = useLocalStorage<string>(STORAGE_KEY_USER_ID, '');
+  const [userId, setUserId] = useLocalStorage<string>(storageKeys.userId, '');
 
   // Messages storage (serialized)
-  const [storedMessages, setStoredMessages] = useLocalStorage<SerializedMessage[]>(STORAGE_KEY_MESSAGES, []);
+  const [storedMessages, setStoredMessages] = useLocalStorage<SerializedMessage[]>(storageKeys.messages, []);
 
   const isMobile = useIsMobile();
 
@@ -163,7 +161,7 @@ export function ChatProvider({
   const config: ChatWidgetConfig = useMemo(
     () => ({
       apiEndpoint,
-      title: 'DjangoCFG Assistant',
+      title: 'DjangoCFG AI',
       placeholder: 'Ask about DjangoCFG...',
       greeting:
         "Hi! I'm your DjangoCFG documentation assistant. Ask me anything about configuration, features, or how to use the library.",

package/src/snippets/McpChat/hooks/useChatLayout.ts

@@ -1,16 +1,21 @@
 'use client';
 
-import { useEffect, useCallback, useRef } from 'react';
+import { useEffect, useCallback, useRef, useState } from 'react';
+import { useLocalStorage } from '@djangocfg/ui/hooks';
 import type { ChatDisplayMode } from '../types';
+import { sidebarConfig, fabConfig, storageKeys } from '../config';
+
+// Re-export for convenience
+export const MIN_SIDEBAR_WIDTH = sidebarConfig.minWidth;
+export const MAX_SIDEBAR_WIDTH = sidebarConfig.maxWidth;
+export const DEFAULT_SIDEBAR_WIDTH = sidebarConfig.defaultWidth;
 
 /**
  * Configuration for chat layout management
  */
 export interface ChatLayoutConfig {
-  /** Width of sidebar in pixels */
-  sidebarWidth?: number;
-  /** Z-index for chat elements */
-  zIndex?: number;
+  /** Initial width of sidebar in pixels */
+  initialWidth?: number;
   /** Animation duration in ms */
   animationDuration?: number;
   /** Element to push (defaults to body) */
@@ -21,10 +26,18 @@ export interface ChatLayoutConfig {
  * Return type for useChatLayout hook
  */
 export interface UseChatLayoutReturn {
+  /** Current sidebar width */
+  sidebarWidth: number;
   /** Apply layout changes for mode */
   applyLayout: (mode: ChatDisplayMode) => void;
   /** Reset layout to default */
   resetLayout: () => void;
+  /** Update sidebar width (for resize) */
+  updateWidth: (width: number) => void;
+  /** Start resize operation */
+  startResize: (e: React.MouseEvent) => void;
+  /** Whether currently resizing */
+  isResizing: boolean;
   /** Get CSS for sidebar container */
   getSidebarStyles: () => React.CSSProperties;
   /** Get CSS for floating container */
@@ -34,9 +47,8 @@ export interface UseChatLayoutReturn {
 }
 
 const DEFAULT_CONFIG: Required<ChatLayoutConfig> = {
-  sidebarWidth: 400,
-  zIndex: 300,
-  animationDuration: 200,
+  initialWidth: sidebarConfig.defaultWidth,
+  animationDuration: sidebarConfig.animationDuration,
   pushTarget: 'body',
 };
 
@@ -69,7 +81,22 @@ interface FixedElementOriginalStyles {
  */
 export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
   const mergedConfig = { ...DEFAULT_CONFIG, ...config };
-  const { sidebarWidth, zIndex, animationDuration, pushTarget } = mergedConfig;
+  const { initialWidth, animationDuration, pushTarget } = mergedConfig;
+
+  // Sidebar width with localStorage persistence
+  const [storedWidth, setStoredWidth] = useLocalStorage<number>(storageKeys.sidebarWidth, initialWidth);
+
+  // Clamp stored width to valid range
+  const sidebarWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, storedWidth));
+  const sidebarWidthRef = useRef(sidebarWidth);
+
+  // Resizing state (runtime only, not persisted)
+  const [isResizing, setIsResizing] = useState(false);
+
+  // Keep ref in sync
+  useEffect(() => {
+    sidebarWidthRef.current = sidebarWidth;
+  }, [sidebarWidth]);
 
   // Store original styles for cleanup
   const originalStylesRef = useRef<{
@@ -157,6 +184,7 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
    */
   const adjustFixedElements = useCallback(
     (open: boolean) => {
+      const currentWidth = sidebarWidthRef.current;
       if (open) {
         // Save and adjust fixed elements
         const fixedElements = getFixedElements();
@@ -168,7 +196,7 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
 
         fixedElements.forEach((el) => {
           el.style.transition = `right ${animationDuration}ms ease`;
-          el.style.right = `${sidebarWidth}px`;
+          el.style.right = `${currentWidth}px`;
         });
       } else {
         // Restore fixed elements
@@ -185,7 +213,7 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
         fixedElementsRef.current = [];
       }
     },
-    [getFixedElements, sidebarWidth, animationDuration]
+    [getFixedElements, animationDuration]
   );
 
   /**
@@ -195,11 +223,13 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
     const target = getTargetElement();
     if (!target) return;
 
+    const currentWidth = sidebarWidthRef.current;
+
     saveOriginalStyles(target);
 
     // Add smooth transition
     target.style.transition = `margin-right ${animationDuration}ms ease`;
-    target.style.marginRight = `${sidebarWidth}px`;
+    target.style.marginRight = `${currentWidth}px`;
     target.style.overflowX = 'hidden';
     target.setAttribute('data-chat-sidebar', 'open');
 
@@ -207,7 +237,7 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
     adjustFixedElements(true);
 
     currentModeRef.current = 'sidebar';
-  }, [getTargetElement, saveOriginalStyles, sidebarWidth, animationDuration, adjustFixedElements]);
+  }, [getTargetElement, saveOriginalStyles, animationDuration, adjustFixedElements]);
 
   /**
    * Apply floating/closed mode layout (reset sidebar push)
@@ -268,6 +298,83 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
     currentModeRef.current = 'closed';
   }, [getTargetElement, restoreOriginalStyles]);
 
+  /**
+   * Update width during resize (no animation)
+   */
+  const updateWidthImmediate = useCallback(
+    (newWidth: number) => {
+      const clampedWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, newWidth));
+
+      // Update body margin
+      const target = getTargetElement();
+      if (target && currentModeRef.current === 'sidebar') {
+        target.style.transition = 'none';
+        target.style.marginRight = `${clampedWidth}px`;
+      }
+
+      // Update fixed elements
+      fixedElementsRef.current.forEach(({ element }) => {
+        element.style.transition = 'none';
+        element.style.right = `${clampedWidth}px`;
+      });
+
+      return clampedWidth;
+    },
+    [getTargetElement]
+  );
+
+  /**
+   * Update sidebar width (for resize)
+   */
+  const updateWidth = useCallback(
+    (newWidth: number) => {
+      const clampedWidth = updateWidthImmediate(newWidth);
+      setStoredWidth(clampedWidth);
+    },
+    [updateWidthImmediate, setStoredWidth]
+  );
+
+  /**
+   * Start resize operation
+   */
+  const startResize = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      setIsResizing(true);
+
+      const startX = e.clientX;
+      const startWidth = sidebarWidthRef.current;
+
+      const handleMouseMove = (moveEvent: MouseEvent) => {
+        // Calculate new width (dragging left increases width)
+        const deltaX = startX - moveEvent.clientX;
+        const newWidth = startWidth + deltaX;
+        const clampedWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, newWidth));
+
+        // Update DOM immediately for smooth feel
+        updateWidthImmediate(clampedWidth);
+        sidebarWidthRef.current = clampedWidth;
+
+        // Also update React state so sidebar visually resizes
+        setStoredWidth(clampedWidth);
+      };
+
+      const handleMouseUp = () => {
+        setIsResizing(false);
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+      };
+
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = 'ew-resize';
+      document.body.style.userSelect = 'none';
+    },
+    [updateWidthImmediate, setStoredWidth]
+  );
+
   /**
    * Get CSS styles for sidebar container
    */
@@ -278,9 +385,9 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
       right: 0,
       bottom: 0,
       width: `${sidebarWidth}px`,
-      zIndex,
+      zIndex: sidebarConfig.zIndex,
     };
-  }, [sidebarWidth, zIndex]);
+  }, [sidebarWidth]);
 
   /**
    * Get CSS styles for floating container
@@ -289,12 +396,12 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
     (position: 'bottom-right' | 'bottom-left'): React.CSSProperties => {
       return {
         position: 'fixed',
-        zIndex: zIndex - 50, // Slightly lower than sidebar
-        bottom: 56, // Above banner
-        ...(position === 'bottom-right' ? { right: 16 } : { left: 16 }),
+        zIndex: sidebarConfig.zIndex - 50,
+        bottom: fabConfig.bottom,
+        ...(position === 'bottom-right' ? { right: fabConfig.right } : { left: fabConfig.right }),
       };
     },
-    [zIndex]
+    []
   );
 
   /**
@@ -304,12 +411,12 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
     (position: 'bottom-right' | 'bottom-left'): React.CSSProperties => {
       return {
         position: 'fixed',
-        zIndex: zIndex - 50,
-        bottom: 56,
-        ...(position === 'bottom-right' ? { right: 16 } : { left: 16 }),
+        zIndex: sidebarConfig.zIndex - 50,
+        bottom: fabConfig.bottom,
+        ...(position === 'bottom-right' ? { right: fabConfig.right } : { left: fabConfig.right }),
       };
     },
-    [zIndex]
+    []
   );
 
   // Cleanup on unmount
@@ -320,8 +427,12 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
   }, [resetLayout]);
 
   return {
+    sidebarWidth,
     applyLayout,
     resetLayout,
+    updateWidth,
+    startResize,
+    isResizing,
     getSidebarStyles,
     getFloatingStyles,
     getFabStyles,

package/src/snippets/McpChat/index.ts

@@ -46,7 +46,6 @@ export { ChatWidget, AIChatWidget, ChatPanel, MessageBubble, AIMessageInput } fr
 export type {
   ChatWidgetProps,
   AIChatWidgetProps,
-  ChatPanelProps,
   MessageBubbleProps,
   AIMessageInputProps,
 } from './components';

package/src/snippets/index.ts

@@ -24,7 +24,6 @@ export {
 } from './McpChat';
 export type {
   AIChatWidgetProps,
-  ChatPanelProps,
   MessageBubbleProps,
   AIMessageInputProps,
   AIChatContextState,