ChatPopout

A popout chat interface that wraps ChatContainer with built-in AI chat functionality. Supports overlay or inline panel modes, left/right positioning, and resizable width.

Note: ChatPopout extends ChatContainer with popout shell functionality.

Import


import { ChatPopout } from "ai-chat-bootstrap";

Props


interface ChatPopoutProps extends ChatContainerProps {
  // Popout shell (layout, sizing, positioning)
  popout?: {
    isOpen?: boolean;
    onOpenChange?: (open: boolean) => void;
    position?: "left" | "right";
    mode?: "overlay" | "inline";
    container?: "viewport" | "parent";
    width?: { default?: number; min?: number; max?: number };
    height?: string | number;
    className?: string;
    contentClassName?: string;
    permanent?: boolean;
  };
 
  // Toggle button
  button?: {
    show?: boolean;
    label?: string;
    icon?: React.ReactNode;
    className?: string;
    container?: "viewport" | "parent";
  };
}

See ChatContainerProps in ChatContainer.

Usage


import { ChatPopout } from "ai-chat-bootstrap";
 
export function Page() {
  return (
    <ChatPopout
      transport={{ api: "/api/chat" }}
      messages={{ systemPrompt: "You are a helpful assistant." }}
      header={{ title: "AI Assistant" }}
      ui={{ placeholder: "Ask me anything..." }}
      suggestions={{ enabled: true, count: 3 }}
      commands={{ enabled: true }}
    />
  );
}

Modes & Positioning


// Inline mode (embedded in layout)
<ChatPopout
  transport={{ api: "/api/chat" }}
  messages={{ systemPrompt: "You are a helpful assistant." }}
  popout={{ mode: "inline", width: { default: 420 } }}
/>
 
// Overlay mode with custom positioning
<ChatPopout
  transport={{ api: "/api/chat" }}
  messages={{ systemPrompt: "You are a helpful assistant." }}
  popout={{
    mode: "overlay",
    position: "left",
    width: { default: 480, min: 360, max: 640 },
    container: "parent"
  }}
/>
 
// Permanent (always open)
<ChatPopout
  transport={{ api: "/api/chat" }}
  messages={{ systemPrompt: "You are a helpful assistant." }}
  popout={{ permanent: true }}
  button={{ show: false }}
/>

Features

Extends ChatContainer: All ChatContainer props work (model selection, chain of thought, etc.)
Resizable: Drag handles for width adjustment
Flexible Positioning: Overlay or inline modes with left/right positioning
Toggle Button: Customizable show/hide button
Container Options: Position relative to viewport or parent element