yarn dev

ChatComponent Usage Guide

Overview

ChatComponent is a reusable React component designed to provide chat functionality in your Next.js application. It can be used to display chat messages, handle user input, and integrate with your backend or API for conversational experiences.

Installation (as npm package)

Install the package in your Next.js app:

npm install loveyandex
# or
pnpm add loveyandex
# or
yarn add loveyandex

Importing ChatComponent

Import directly from the package:

import ChatComponent from 'loveyandex/ChatComponent';

Basic Usage

Add the ChatComponent to your page or component:

<ChatComponent />

Props

ChatComponent may accept the following props (customize as per your implementation):

• initialMessages (optional): Array of message objects to display initially.
• onSendMessage (optional): Function called when the user sends a message.
• user (optional): User information for the chat session.

Example:

<ChatComponent
  initialMessages={[{ sender: 'bot', text: 'Hello! How can I help you?' }]}
  onSendMessage={(message) => {
    // Handle sending message to backend
    console.log('User sent:', message);
  }}
  user={{ id: 'user1', name: 'Alice' }}
/>

Customization

You can style or extend ChatComponent as needed. For advanced usage, refer to the component's source code in components/ChatComponent.tsx.

Example Integration

To use ChatComponent in a Next.js page:

// app/chat/page.tsx
import ChatComponent from '../../components/ChatComponent';

export default function ChatPage() {
  return (
    <main>
      <h1>Chat with Us</h1>
      <ChatComponent />
    </main>
  );
}

For more details, see the source code or contact the project maintainer.