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 add chat

Then import the components you need:

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

Examples

Simple Chat

Hello! How can I help you today?

0/500

Features

Chat with Avatars

Display user avatars alongside messages for better visual identification.

Hey everyone! Welcome to the group chat 👋

10:06 PM

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

10:08 PM

Alice joined the chat

10:16 PM

Same here! This is going to be great.

10:33 PM

0/500

Chat with Timestamps

Show message timestamps for better context and conversation tracking.

Good morning! How can I assist you today?

11:01 PM

Hi! I have a question about my account.

11:02 PM

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

11:03 PM

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

11:04 PM

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

11:05 PM

0/500

Read-Only Chat

Display conversation history without input capabilities.

This is a read-only chat

11:05 PM

Perfect for displaying conversation history

11:06 PM

Or showing announcements and updates

11:06 PM

Typing Indicators

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

Typing Indicator Demo

Hey there! Welcome to the team chat 👋

11:01 PM

Thanks! Excited to be here and start collaborating.

11:02 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

Input Configuration

Message Length Limit

Set a maximum character limit for messages:

<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:

// 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:

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

API Reference

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
}

Typing Indicator Demo

On this page