techco-chat-widget

A chatbot widget for React project.

This widget provides a user-friendly interface for interacting with the chatbot. It allows users to input messages and receive responses from the chatbot.

Usage:

1. Declare your widget.
2. Set the appropriate configuration options.
3. Run your react project.

Example:

Here's an example of how to use the ChatBot component:

import React, { useState } from 'react';
import { ChatBot } from 'techco-chat-widget';

export const suggestions = [
  'What’s my account balance?',
  'What’s my refund status?',
  'Give me my account statement for last three months.',
];
const now = new Date();

const agentDetails = {
  name: 'Jane Doe',
  avatar:
    'https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=1727&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
};
const userDetails = {
  name: 'John Doe',
  avatar:
    'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
};

const emojis = {
  sad: '😢',
  happy: '😊',
  angry: '😡',
  love: '😍',
  like: '👍',
};

function App() {
  const [sampleMessages, setSampleMessages] = useState([
    {
      message:
        "That's awesome. I think our users will really appreciate the improvements. 1",
      date: now,
      isUser: false,
      emoji: 'happy',
    },
    {
      message:
        "That's awesome. I think our users will really appreciate the improvements. 2",
      date: now,
      isUser: false,
    },
  ]);
  const [inputText, setInputText] = useState('');

  const onClickSuggestion = suggestion => {
    const newMessage = {
      message: suggestion,
      date: new Date(),
      isUser: true,
    };
    setSampleMessages([...sampleMessages, newMessage]);
  };

  const onSend = () => {
    console.log(inputText);
    if (inputText === '') return;
    const newMessage = {
      message: inputText,
      date: new Date(),
      isUser: true,
    };
    setSampleMessages([...sampleMessages, newMessage]);
    setInputText('');
  };

  const onSelectEmoji = (emoji, index) => {
    console.log(emoji, index);
    const newMessages = [...sampleMessages];
    newMessages[index].emoji = emoji;
    setSampleMessages(newMessages);
  };
  return (
    <ChatBot
      emojis={emojis}
      messages={sampleMessages}
      userDetails={userDetails}
      agentDetails={agentDetails}
      inputText={inputText}
      suggestions={suggestions}
      inputPlaceholder="Type a message..."
      onInputChange={event => setInputText(event.target.value)}
      onSelectEmoji={onSelectEmoji}
      onSend={onSend}
      onClickSuggestion={onClickSuggestion}
    />
  );
}

export default App;

Attributes

emojis: `A dictionary of emojis used for reactions to messages. This is optional.

Format:

{
sad: '😢',
happy: '😊',
angry: '😡',
love: '😍',
like: '👍',
}

messages: `An array of message objects. Each object represents a message and should follow this format:

Format:

{
message: string; // The content of the message
date: Date; // The date when the message was sent
isUser: boolean; // A flag indicating if the message is from the user
emoji?: string; // An optional emoji reaction to the message
}

userDetails: `An object containing the user's details. It should follow this format:

Format:

{
  name: string; // The name of the user
  avatar: string; // The URL of the user's avatar
}

Agent: `An object containing the agent's details. It should follow this format:

Format:

{
  name: string; // The name of the agent
  avatar: string; // The URL of the agent's avatar
}

inputText: `A string state used to store the message currently being typed by the user.

Type: `string`

Description: This state holds the value of the message input field. It updates as the user types their message.`,

suggestions: `An optional array of strings used for providing suggestions to the user.

Type: `string[]`

Description: This array holds a list of suggestions that can be presented to the user. It's optional and can be omitted if no suggestions are needed.`,

inputPlaceholder: `An optional string used to display placeholder text in the message input field.

Type: `string`

Description: This string is used as the placeholder text in the message input field. It gives the user a hint about what they're supposed to type.`

Methods

const onClickSuggestion = suggestion => {
  // This method is triggered when a suggestion is clicked.
  // It creates a new message object with the clicked suggestion as the message,
  // the current date, and a flag indicating that the message is from the user.
  // This new message is then added to the 'sampleMessages' state.
};

const onSend = () => {
  // This method is triggered when the send button is clicked.
  // It first checks if the 'inputText' is not empty. If it's not,
  // it creates a new message object with the 'inputText' as the message,
  // the current date, and a flag indicating that the message is from the user.
  // This new message is then added to the 'sampleMessages' state and the 'inputText' is cleared.
};

const onSelectEmoji = (emoji, index) => {
  // This method is triggered when an emoji is selected.
  // It adds the selected emoji to the message at the given index in the 'sampleMessages' state.
};