Chat

A comprehensive chat component system with message display, input handling, avatars, timestamps, and real-time messaging capabilities

Installation

Install the Chat component using the nocta-ui CLI:

npx @nocta-ui/cli add chat

Then import the components you need:

import {
  Chat,
  ChatMessages,
  ChatMessage,
  ChatInput,
  ChatActions,
  TypingIndicator,
  type ChatMessage,
  type TypingUser,
} from '@/components/ui/chat';

Examples

Default Chat

Chat with Avatars

Chat with Timestamps

Read-Only Chat

Typing Indicators

API Reference

Message Interface

interface ChatMessage {
  id: string;                    // Unique message identifier
  content: string;               // Message text content
  sender: 'user' | 'assistant' | 'system'; // Message sender type
  timestamp: Date;               // Message timestamp
  avatar?: string;               // Optional avatar URL
  name?: string;                 // Optional sender name
}

TypingUser Interface

interface TypingUser {
  id: string;                    // Unique user identifier
  name?: string;                 // Optional user name
  avatar?: string;               // Optional avatar URL
}

Prop

Type