# uiux-agent-kit

AI UI Component Kit for Better Agents - Reusable React components for AI applications.

## Installation

```bash
pnpm add uiux-agent-kit
```

## Components

### Agent Components

-   **AgentStatus** - Visual status indicator for AI agents

### Chat Components

-   **ChatMessageInput** - Complete message input with audio recording, file upload, and transcription
-   **ChatMessage** - Message display component with file attachments and audio support
-   **StreamingMessage** - Real-time streaming message display
-   **FileUpload** - Drag & drop file upload component
-   **FilePreview** - File preview with thumbnails and icons
-   **AudioWaveform** - Real-time audio waveform visualization

### Common Components

-   **Spinner** - Loading indicator with multiple sizes
-   **EmptyState** - Empty state display component
-   **AudioRecorder** - Standalone audio recording component
-   **MarkdownRenderer** - Markdown content renderer with GitHub Flavored Markdown support

## Usage

```tsx
import { ChatMessageInput, Spinner, AgentStatus } from 'uiux-agent-kit';

function MyComponent() {
	const [input, setInput] = useState('');

	return (
		<>
			<AgentStatus status='active' showLabel showIcon />
			<ChatMessageInput value={input} onChange={setInput} onSend={message => console.log(message)} />
			<Spinner size='md' />
		</>
	);
}
```

## Requirements

-   React 18.2.0 or higher
-   Tailwind CSS (for styling)

## License

ISC