Contenta Assistant Widget

A lightweight, headless React component library for building AI-powered chat interfaces. No CSS included—style it your way.

Features

• 🎯 Headless components - Bring your own styles
• 🔄 Streaming support - Real-time AI responses via AsyncIterables
• ⚡ TypeScript first - Full type safety out of the box
• 📦 Tiny bundle - Zero styling overhead
• 🎨 Fully customizable - Complete control over appearance
• 🪝 React 18+ - Built for modern React

Installation

Using Bun (recommended)

bun add @contentagen/assistant-widget Using npm

npm install @contentagen/assistant-widget Using pnpm

pnpm add @contentagen/assistant-widget Using yarn

yarn add @contentagen/assistant-widget

Quick Start

Basic Chat Component

import { ContentaChat } from '@contentagen/assistant-widget';

function App() { const handleSendMessage = async function* (message: string, agentId: string) { // Your streaming API implementation const response = await fetch(https://api.yourservice.com/chat/${agentId}, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message }) });

text const reader = response.body?.getReader(); const decoder = new TextDecoder();

while (true) { const { done, value } = await reader.read(); if (done) break; yield decoder.decode(value); }

};

return ( ); }

Widget with Popover

import { ContentaWidget } from '@contentagen/assistant-widget';

function App() { const handleSendMessage = async function* (message: string, agentId: string) { // Your streaming implementation // ... };

return ( ); }

text

API Reference

ContentaChat

Full-screen chat interface component.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | agentId | string | ✅ | - | Your AI agent identifier | | sendMessage | (message: string, agentId: string) => AsyncIterable<string> | ✅ | - | Async generator function for streaming responses | | placeholder | string | ❌ | "Digite sua mensagem..." | Input placeholder text | | disabled | boolean | ❌ | false | Disable the input field | | autoFocus | boolean | ❌ | false | Auto-focus input on mount | | maxLength | number | ❌ | 500 | Maximum message length | | showTimestamps | boolean | ❌ | false | Show message timestamps | | showAvatars | boolean | ❌ | false | Show user/assistant avatars | | allowMultiline | boolean | ❌ | true | Allow multiline messages (Shift+Enter) | | className | string | ❌ | "max-w-md" | Additional CSS classes | | errorMessage | string | ❌ | "Desculpe, ocorreu um erro..." | Custom error message |

ContentaWidget

Chat widget with popover trigger button. Inherits all ContentaChat props.

Styling

This library is headless and does not include any CSS. You have complete control over styling using:

• Tailwind CSS classes via className prop
• CSS Modules
• Styled Components
• Emotion
• Plain CSS

The components use semantic HTML and follow accessibility best practices.

Example with Tailwind

text

TypeScript Support

Full TypeScript definitions are included. Import types as needed:

import type { ContentaChatProps } from '@contentagen/assistant-widget';

const MyComponent: React.FC = (props) => { // Your component logic };

text

Requirements

• React 18.0.0 or higher
• React DOM 18.0.0 or higher

License

Apache-2.0

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues and questions, please open an issue on GitHub.

Built with ❤️ using TypeScript, React, and Bun