AI Agent Chat Component for React with complete style isolation
npm install @apteva/agent-chatA React component library for AI agent chat interfaces with fully isolated styles.
- šØ 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
``bash`
npm install @apteva/agent-chat
`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 installBuild the library
npm run buildWatch mode
npm run dev
`$3
`bash
Navigate to example directory
cd examples/nextjs-appInstall dependencies
npm installStart 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.MIT