<CopilotChat
  theme={{
    primaryColor: '#6366f1',
    backgroundColor: '#ffffff',
    textColor: '#1f2937',
    borderRadius: '12px',
  }}
/>

<CopilotChat
  theme={{
    mode: 'dark', // 'light' | 'dark' | 'system'
  }}
/>

<CopilotChat
  header={{
    title: 'Support Assistant',
    subtitle: 'How can I help you today?',
    logo: '/logo.svg',
  }}
/>

<CopilotChat
  welcomeMessage="Hi! I'm your AI assistant. Ask me anything about our products."
/>

<CopilotChat
  placeholder="Type your question here..."
/>

// Floating button (default)
<CopilotChat position="bottom-right" />

// Embedded in page
<CopilotChat embedded={true} />

// Full page
<CopilotChat fullPage={true} />

<CopilotChat
  width={400}
  height={600}
  maxHeight="80vh"
/>

<CopilotChat
  attachmentsEnabled={true}
  allowedFileTypes={['image/*', '.pdf', '.doc']}
  maxFileSize={10 * 1024 * 1024} // 10MB
/>

<CopilotChat
  voiceEnabled={true}
/>

<CopilotChat
  userAvatar="/user-avatar.png"
  assistantAvatar="/ai-avatar.png"
/>

<CopilotChat
  renderMessage={(message) => (
    <div className="custom-message">
      <Markdown>{message.content}</Markdown>
    </div>
  )}
/>

<CopilotChat
  autoFocus={true}
/>

<CopilotChat
  persistHistory={true}
  storageKey="my-app-chat"
/>

<CopilotChat
  scrollBehavior="smooth" // 'smooth' | 'instant' | 'auto'
/>

:root {
  --copilot-primary: #6366f1;
  --copilot-bg: #ffffff;
  --copilot-text: #1f2937;
  --copilot-border: #e5e7eb;
  --copilot-radius: 12px;
}

<CopilotChat
  className="my-custom-chat"
  classNames={{
    container: 'chat-container',
    header: 'chat-header',
    messages: 'chat-messages',
    input: 'chat-input',
  }}
/>

<CopilotChat
  // Theme
  theme={{
    mode: 'system',
    primaryColor: '#6366f1',
  }}

  // Branding
  header={{
    title: 'AI Assistant',
    logo: '/logo.svg',
  }}
  welcomeMessage="How can I help you today?"
  placeholder="Ask anything..."

  // Layout
  position="bottom-right"
  width={400}

  // Features
  attachmentsEnabled={true}
  voiceEnabled={true}
  persistHistory={true}

  // Avatars
  userAvatar="/user.png"
  assistantAvatar="/ai.png"
/>