message-react-conversation-bot

A conversational bot component for React with Chakra UI and TypeScript. This component allows you to easily integrate a chatbot into your React application.

Table of Contents

• Installation
• Usage
• Props
• Example Conversation
• Customization

Installation

Install the message-react-conversation-bot package using npm or yarn:

npm install message-react-conversation-bot
# or
yarn add message-react-conversation-bot

Usage

Integrate the MessageReactConversationBot component into your React application. Below is a basic example:

import React, { useState } from 'react';
import { ChakraProvider, CSSReset, extendTheme } from '@chakra-ui/react';
import { MessageReactConversationBot, MessageType } from 'message-react-conversation-bot';

const theme = extendTheme({
  // Your Chakra UI theme configuration
});

const App: React.FC = () => {
  const [messages, setMessages] = useState<MessageType[]>([]);

  const handleUserMessage = (userInput: string) => {
    // Your logic to handle user input and generate bot responses
    const botResponse = getBotResponse(userInput);
    setMessages([...messages, { text: userInput, sender: 'user' }, { text: botResponse, sender: 'bot' }]);
  };

  const getBotResponse = (userInput: string): string => {
    // Your logic to generate bot responses based on different user inputs
    switch (userInput.toLowerCase()) {
      case 'experience':
        return `X has over 5 years of experience in software development.`;
      case 'projects':
        return `Some of X's notable projects include...`;
      case 'language level':
        return `X has a high level of English.`;
      default:
        return `I'm sorry, I didn't understand that. Can you ask in a different way?`;
    }
  };

  return (
    <ChakraProvider theme={theme}>
      <CSSReset />
      <MessageReactConversationBot messages={messages} onUserMessage={handleUserMessage} />
    </ChakraProvider>
  );
};

export default App;

Props

The MessageReactConversationBot component accepts the following props:

• messages: An array of message objects representing the conversation.

  • Type: MessageType[]
  • Required: true

• onUserMessage: A callback function triggered when the user sends a message.

  • Type: (userInput: string) => void
  • Required: true

Features

1. Dynamic conversation flow
2. Customizable bot responses
3. Chakra UI integration for styling

License

This project is licensed under the MIT License - see the LICENSE file for details.