@apteva/agent-chat

A React component library for AI agent chat interfaces with fully isolated styles.

Features

• 🎨 Complete Style Isolation - All styles use prefixed classes to prevent conflicts
• 📦 Separate CSS Output - Import CSS separately for better control
• 🚀 TypeScript Support - Full TypeScript support with exported types
• 🎭 Mock Chat Functionality - Built-in mock responses for demos
• 🌙 Dark Mode Support - Automatic dark mode detection
• 🪟 Transparent by Default - No borders or background, perfect for embedding
• 📐 Full Width - Adapts to parent container width

Installation

npm install @apteva/agent-chat

Usage

import { AgentChat } from '@apteva/agent-chat';
import '@apteva/agent-chat/dist/index.css';

function App() {
  const handleSendMessage = (message: string) => {
    console.log('Message sent:', message);
    // Handle the message (e.g., send to API)
  };

  return (
    // Component is transparent and takes full width by default
    <div style={{ 
      maxWidth: '600px', 
      margin: '0 auto',
      padding: '20px',
      backgroundColor: '#f3f4f6',
      borderRadius: '12px'
    }}>
      <AgentChat 
        onSendMessage={handleSendMessage}
        placeholder="Ask me anything..."
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | - | Additional CSS class for the container | | placeholder | string | "Type a message..." | Input placeholder text | | onSendMessage | (message: string) => void | - | Callback when a message is sent | | messages | Message[] | - | External messages array (for controlled mode) |

Development

Building the Library

# Install dependencies
npm install

# Build the library
npm run build

# Watch mode
npm run dev

Running the Example

# Navigate to example directory
cd examples/nextjs-app

# Install dependencies
npm install

# Start development server on port 4000
npm run dev

Project Structure

agent-chat/
├── src/                    # Library source code
│   ├── components/         # React components
│   ├── styles/            # Isolated CSS styles
│   └── lib/               # Utilities
├── dist/                  # Built library files
├── examples/              # Example applications
│   └── nextjs-app/        # Next.js example with sidebar
└── package.json           # NPM package configuration

Style Isolation

The component uses prefixed classes (.agent-chat-*) to ensure complete style isolation. This prevents any conflicts with your application's styles, even when using similar class names or CSS frameworks.

License

MIT