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:

Terminal

npx nocta-ui add chat

Then import the components you need:

Import

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

Basic Usage

Simple Chat

Hello! How can I help you today?

0/500

Chat with Header

Customer Support

We're here to help! Chat with our support team.

Welcome to our support chat!

11:25 PM

Hello! I'm here to help you with any questions.

11:25 PM

0/500

Message Types

The Chat component supports three message types: user, assistant, and system.

Message Interface

interface Message {
  id: string;
  content: string;
  sender: 'user' | 'assistant' | 'system';
  timestamp: Date;
  avatar?: string;
  name?: string;
}

Sizing and Layout

The Chat component's size is controlled through the className prop, giving you full flexibility over dimensions:

Size Control Examples

// Small chat window
<Chat
  messages={messages}
  onSendMessage={handleSendMessage}
  className="w-80 h-64"
/>

// Medium chat (default-like)
<Chat
  messages={messages}
  onSendMessage={handleSendMessage}
  className="w-96 h-96"
/>

// Large chat
<Chat
  messages={messages}
  onSendMessage={handleSendMessage}
  className="w-full max-w-2xl h-[500px]"
/>

// Full width with responsive height
<Chat
  messages={messages}
  onSendMessage={handleSendMessage}
  className="w-full h-screen max-h-[600px]"
/>

// Custom breakpoint sizing
<Chat
  messages={messages}
  onSendMessage={handleSendMessage}
  className="w-full sm:w-96 md:w-[500px] lg:w-[600px] h-80 md:h-96"
/>

Features

Chat with Avatars

Display user avatars alongside messages for better visual identification.

Hey everyone! Welcome to the group chat 👋

10:25 PM

Thanks for setting this up! Looking forward to our collaboration.

10:27 PM

Alice joined the chat

10:35 PM

Same here! This is going to be great.

10:52 PM

0/500

Chat with Timestamps

Show message timestamps for better context and conversation tracking.

Good morning! How can I assist you today?

11:20 PM

Hi! I have a question about my account.

11:21 PM

Of course! I'd be happy to help with your account. What specific question do you have?

11:22 PM

I'm trying to update my billing information but can't find the option.

11:23 PM

I can guide you through that! Go to Settings > Account > Billing Information.

11:24 PM

0/500

Read-Only Chat

Display conversation history without input capabilities.

This is a read-only chat

11:24 PM

Perfect for displaying conversation history

11:25 PM

Or showing announcements and updates

11:25 PM

Typing Indicators

Display real-time typing indicators to show when users are composing messages.

Typing Indicator Demo

Team Chat

Real-time typing indicators show when team members are responding

Hey there! Welcome to the team chat 👋

11:20 PM

Thanks! Excited to be here and start collaborating.

11:21 PM

0/500

Features demonstrated:

Single user typing indicator
Multiple users typing simultaneously
Smart text that handles different user counts
Animated bouncing dots
Integration with avatars

TypingUser Interface

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

Features:

Single User Typing: Shows "[Name] is typing"
Multiple Users: Shows "[Name] and [Name] are typing" or "[Name] and X others are typing"
Animated Dots: Bouncing animation with staggered timing
Avatar Integration: Works seamlessly with chat avatars
Auto-scroll: Automatically scrolls when typing indicators appear

Advanced Usage

Chat with Actions

Add external action buttons for enhanced functionality.

Chat with Actions

Hello! I'm your AI assistant. How can I help you today?

11:25 PM

0/500

Input Configuration

Message Length Limit

Set a maximum character limit for messages:

Message Length Limit

<Chat
  messages={messages}
  onSendMessage={handleSendMessage}
  maxLength={280}
  placeholder="Type your message (max 280 chars)..."
  className="w-full max-w-md"
/>

Multiline Control

Control whether users can send multiline messages:

Multiline Control

// Allow multiline (default)
<Chat
  messages={messages}
  onSendMessage={handleSendMessage}
  allowMultiline={true}
  placeholder="Press Shift+Enter for new line..."
  className="w-full max-w-lg"
/>

// Single line only
<Chat
  messages={messages}
  onSendMessage={handleSendMessage}
  allowMultiline={false}
  placeholder="Press Enter to send..."
  className="w-full max-w-lg"
/>

Disabled State

Disable the chat input when needed:

Disabled State

<Chat
  messages={messages}
  onSendMessage={handleSendMessage}
  disabled={isLoading}
  placeholder="Chat is disabled..."
  className="w-full max-w-lg opacity-50"
/>

Customization

Custom Styling

All components accept a className prop for custom styling:

This chat has custom styling!

The colors and spacing can be customized

0/500

Individual Component Styling

Style individual chat components:

Individual Component Styling

<Chat 
  messages={messages} 
  onSendMessage={handleSendMessage}
  className="w-full max-w-2xl"
>
  <ChatHeader className="bg-blue-50 dark:bg-blue-950">
    <ChatTitle className="text-blue-900 dark:text-blue-100">
      Custom Chat
    </ChatTitle>
    <ChatDescription className="text-blue-700 dark:text-blue-300">
      With custom header styling
    </ChatDescription>
  </ChatHeader>
</Chat>

Component Architecture

The Chat component is built with a modular architecture:

Chat: Main container component
ChatHeader: Optional header with title and description
ChatTitle: Title component with customizable element type
ChatDescription: Description text component
ChatMessages: Messages container with auto-scroll
ChatMessage: Individual message component
ChatInput: Input component with auto-resize textarea
ChatActions: Container for action buttons
TypingIndicator: Real-time typing indicator with animated dots

Accessibility

The Chat component includes several accessibility features:

Keyboard Navigation: Full keyboard support for input and actions
Screen Reader Support: Proper ARIA labels and semantic HTML
Focus Management: Proper focus handling for interactive elements
Auto-scroll: Automatic scrolling to new messages and typing indicators
Message Timestamps: Available for screen readers
Typing Indicators: Accessible real-time feedback for ongoing conversations

API Reference

Chat Props

Prop	Type	Default	Description
`messages`	`Message[]`	`[]`	Array of chat messages
`onSendMessage`	`(message: string) => void`	`undefined`	Callback when message is sent
`placeholder`	`string`	`"Type a message..."`	Input placeholder text
`disabled`	`boolean`	`false`	Disable chat input
`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 avatars
`allowMultiline`	`boolean`	`true`	Allow multiline messages
`typingUsers`	`TypingUser[]`	`[]`	Array of users currently typing
`variant`	`'default'`	`'default'`	Visual variant
`className`	`string`	`''`	Additional CSS classes (used for sizing and custom styling)

Message Interface

interface Message {
  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
}

Customer Support

Typing Indicator Demo

Team Chat

Chat with Actions

On this page