@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

``bash
npm install @apteva/agent-chat
`

Usage

`tsx
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



);
}
`

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

$3

`bash


Install dependencies

npm install

Build the library

npm run build

Watch mode

npm run dev
`

$3

`bash


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