Conversation

A complete React chat interface component with message display, input field, typing indicators, and interactive actions. Perfect for chat applications, AI assistants, or customer support interfaces. Built with TypeScript.

Installation

npm install @sarthakb009/conversation

Peer Dependencies

Make sure you have these installed in your project:

npm install react react-dom lucide-react

Required versions:

• react ^18.0.0
• react-dom ^18.0.0
• lucide-react ^0.294.0

Usage

Basic Example

import { Conversation } from '@sarthakb009/conversation';
import { useState } from 'react';

function App() {
  const [messages, setMessages] = useState([
    {
      id: 1,
      role: 'user',
      content: 'Hello!',
      timestamp: '10:00 AM',
    },
    {
      id: 2,
      role: 'assistant',
      content: 'Hi there! How can I help you?',
      timestamp: '10:01 AM',
    },
  ]);

  const handleSend = (message: string) => {
    const newMessage = {
      id: messages.length + 1,
      role: 'user' as const,
      content: message,
      timestamp: new Date().toLocaleTimeString(),
    };
    setMessages([...messages, newMessage]);
  };

  return (
    <Conversation
      messages={messages}
      onSend={handleSend}
      height="600px"
    />
  );
}

With Loading State

import { Conversation } from '@sarthakb009/conversation';
import { useState } from 'react';

function App() {
  const [messages, setMessages] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const handleSend = async (message: string) => {
    // Add user message
    setMessages(prev => [...prev, {
      id: Date.now(),
      role: 'user',
      content: message,
    }]);

    // Show loading
    setIsLoading(true);

    // Simulate API call
    setTimeout(() => {
      setMessages(prev => [...prev, {
        id: Date.now() + 1,
        role: 'assistant',
        content: 'This is a response!',
      }]);
      setIsLoading(false);
    }, 2000);
  };

  return (
    <Conversation
      messages={messages}
      isLoading={isLoading}
      onSend={handleSend}
    />
  );
}

With Callbacks

import { Conversation } from '@sarthakb009/conversation';

function App() {
  return (
    <Conversation
      messages={messages}
      onSend={(message) => console.log('Sent:', message)}
      onCopy={(content) => {
        navigator.clipboard.writeText(content);
        console.log('Copied:', content);
      }}
      onThumbsUp={(messageId) => {
        console.log('Thumbs up for:', messageId);
      }}
      onThumbsDown={(messageId) => {
        console.log('Thumbs down for:', messageId);
      }}
    />
  );
}

Custom Styling

import { Conversation } from '@sarthakb009/conversation';

function App() {
  return (
    <Conversation
      messages={messages}
      onSend={handleSend}
      height="500px"
      width="800px"
      className="my-conversation"
      style={{ border: '2px solid #e5e7eb' }}
      placeholder="Type your message here..."
    />
  );
}

Props

| Prop | Type | Default | Required | Description | |------|------|---------|----------|-------------| | messages | ConversationMessage[] | - | Yes | Array of messages to display | | onSend | (message: string) => void | - | Yes | Callback fired when message is sent | | isLoading | boolean | false | No | Shows typing indicator when true | | placeholder | string | "Type a message..." | No | Placeholder text for input field | | height | string | "500px" | No | Height of the conversation container | | width | string | "100%" | No | Width of the conversation container | | onCopy | (content: string) => void | undefined | No | Callback fired when copy button is clicked | | onThumbsUp | (messageId: number \| string) => void | undefined | No | Callback fired when thumbs up is clicked | | onThumbsDown | (messageId: number \| string) => void | undefined | No | Callback fired when thumbs down is clicked | | className | string | "" | No | Additional CSS classes | | style | CSSProperties | undefined | No | Inline styles for container |

ConversationMessage Type

interface ConversationMessage {
  id: number | string;
  role: 'user' | 'assistant';
  content: string;
  timestamp?: string;
}

Features

• ✅ Message Display: Clean chat bubble interface
• ✅ Auto-scroll: Automatically scrolls to latest message
• ✅ Typing Indicator: Animated dots when loading
• ✅ Interactive Actions: Copy, thumbs up/down for assistant messages
• ✅ Keyboard Support: Enter to send, Shift+Enter for new line
• ✅ Hover Effects: Actions appear on message hover
• ✅ Responsive: Adapts to different screen sizes
• ✅ TypeScript: Full TypeScript support with exported types
• ✅ Accessible: Proper ARIA labels and semantic HTML

TypeScript

The component is written in TypeScript and exports all types:

import { Conversation, ConversationProps, ConversationMessage } from '@sarthakb009/conversation';

const message: ConversationMessage = {
  id: 1,
  role: 'user',
  content: 'Hello!',
  timestamp: '10:00 AM',
};

const props: ConversationProps = {
  messages: [message],
  onSend: (msg) => console.log(msg),
};

License

MIT