Unified Components API

TIP

Looking for components without store dependencies? Check out the Standalone Components documentation.

Overview

The Unified Components provide a full-featured chat experience with built-in state management via Pinia store. These are perfect for quick setup and standard chat functionality.

For more control over state management, see the Standalone Components.

---

SidekickChat

The main chat interface component for full-featured chat experiences.

Usage

<template>
  <div class="h-96">
    <SidekickChat />
  </div>
</template>

Props

This component doesn't accept any props. All configuration is handled through the store.

Events

This component doesn't emit any events.

Slots

Currently no slots are available.

Styling

The component uses the following CSS classes that can be customized:

• .sidekick-chat - Main container
• .sidekick-chat-header - Header section
• .sidekick-chat-messages - Messages container
• .sidekick-chat-input - Input area

SidekickChatPlugin

A floating chat widget that appears in the bottom-right corner of the screen.

Usage

<template>
  <SidekickChatPlugin @open="handleOpen" @close="handleClose" @toggle="handleToggle" />
</template>

Props

This component doesn't accept any props. All configuration is handled through the store.

Events

Event	Payload	Description
open	void	Emitted when the chat widget is opened
close	void	Emitted when the chat widget is closed
toggle	boolean	Emitted when the chat widget is toggled, with the new open state

Event Examples

function handleOpen() {
  console.log('Chat widget opened')
  // Track analytics, update UI, etc.
}

function handleClose() {
  console.log('Chat widget closed')
  // Save state, clean up, etc.
}

function handleToggle(isOpen: boolean) {
  console.log(`Chat widget is now ${isOpen ? 'open' : 'closed'}`)
}

Keyboard Interactions

• Escape - Closes the chat widget when open

Styling

The component uses the following CSS classes:

• .sidekick-chat-plugin - Main container (positioned fixed)
• Uses the same message and input classes as SidekickChat

Positioning

The widget is positioned using fixed positioning:

• bottom: 1rem (16px)
• right: 1rem (16px)
• z-index: 9999

On mobile devices (< 768px):

• Adjusts width to fit screen with proper margins

Component Features

Authentication State

Both components automatically show authentication prompts when the user is not authenticated:

<template>
  <!-- Authentication notice appears automatically -->
  <div v-if="!isAuthenticated" class="auth-notice">
    <button @click="authenticate">Authenticate</button>
  </div>
</template>

Message Display

Messages are displayed with:

• User messages: Right-aligned, blue background
• Bot messages: Left-aligned, gray background
• Timestamps in local time format
• Automatic scrolling to latest message

Typing Indicator

When the bot is "typing" (simulated), both components show an animated typing indicator with bouncing dots.

Responsive Design

Both components are fully responsive:

SidekickChat

• Adapts to container size
• Mobile-optimized input and buttons
• Scrollable message area

SidekickChatPlugin

• Fixed size on desktop (320px/384px width)
• Responsive width on mobile
• Maintains aspect ratio

Accessibility

Both components include:

• Proper ARIA labels
• Keyboard navigation support
• Focus management
• High contrast support
• Reduced motion support