ChatBot Conversation UI Kit

A fully TypeScript-supported npm package for building a chatbot conversation UI kit. This package includes rule-based message rendering with support for user input, options, images, GIFs, and custom components. It also features a customizable chat header, dynamic bot and user avatars, animation delays, and toggleable floating functionality.

Features

• Rule-based message rendering
• Support for user input, options, images, GIFs, and custom components
• Customizable chat header and avatars
• Animation delays for messages
• Floating chatbot functionality

Installation

Install the package using npm:

npm i @deepmindlabs/dml-chatbot-kit

Usage

Here's a basic example of how to use the ChatBot UI Kit in your React project:

import ChatBot from '@deepmindlabs/dml-chatbot-kit';

function App() {
  const steps = [
    {
      id: '1',
      message: 'Welcome to the chatbot!',
      trigger: '2',
    },
    {
      id: '2',
      message: 'How can I assist you today?',
      end: true,
    },
  ];

  return (
    <ChatBot
      steps={steps}
      botAvatar="path/to/bot-avatar.png"
      userAvatar="path/to/user-avatar.png"
    />
  );
}

export default App;

Properties

| Property | Type | Default | Description | |--------------------------|-------------------------------------------------|-----------------------|----------------------------------------------------------------------------------------------------------------| | avatarStyle | React.CSSProperties | | The style object to use to override the avatar element | | botAvatar | string | | Bot image source | | botDelay | number | 1000 | The delay time of bot messages | | bubbleOptionStyle | React.CSSProperties | | The style object used to override the option element | | bubbleStyle | React.CSSProperties | | The style object used to override the bubble element | | cache | boolean | false | Rendered steps will be cached in localStorage. | | cacheName | string | 'rsc_cache' | Cache name to be used in localStorage | | className | string | | Add a class name to the root element | | contentStyle | React.CSSProperties | | The style object to use to override the scroll element | | customDelay | number | 1000 | The delay time of custom messages | | customStyle | React.CSSProperties | | The style object to use to override the custom step element | | enableMobileAutoFocus | boolean | false | Enable mobile input auto focus for user steps | | enableSmoothScroll | boolean | false | Enables smooth scrolling. | | floating | boolean | false | Render chatbot with a floating button | | floatingIcon | string \| React.ReactElement | | Override the floating icon. | | floatingStyle | React.CSSProperties | | The style object to use to override the floating element. | | footerStyle | React.CSSProperties | | The style object to use to override the footer element | | handleEnd | (props: { renderedSteps: any; steps: any; values: any }) => void | | The callback function when chat ends | | headerComponent | React.ReactElement | | Override the default header element | | headerTitle | string | 'Chat' | Override header title | | hideBotAvatar | boolean | false | If true, the bot avatar will be hidden in all steps | | hideHeader | boolean | false | If true, the header will be hidden | | hideSubmitButton | boolean | false | If true, the submit button will be hidden | | hideUserAvatar | boolean | false | If true, the user avatar will be hidden in all steps | | inputAttributes | React.InputHTMLAttributes<HTMLInputElement> | | Set the global attributes on the input field | | inputStyle | React.CSSProperties | | The style object to use to override the input element | | opened | boolean | undefined | Override the default opened state. | | placeholder | string | 'Type the message' | Chatbot input placeholder | | recognitionEnable | boolean | false | If true, enable speech recognition for the user step | | recognitionLang | string | 'en' | Chatbot speech recognition language | | recognitionPlaceholder | string | 'Listening' | Chatbot speech recognition placeholder | | speechSynthesis | { enable: boolean; lang: string; voice: SpeechSynthesisVoice \| null } | { enable: false, lang: 'en', voice: null } | If true, enable instant text-to-speech with voice | | steps | any[] | | The chatbot steps to display | | style | React.CSSProperties | | The style object to use to override the root element | | submitButtonStyle | React.CSSProperties | | The style object to use to override the submit button element | | toggleFloating | (props: { opened: boolean }) => void | | Must be used with the opened prop to change the state using a custom function like myToggleFloating({opened}) | | width | string | '350px' | Change the default chatbot width. | | userAvatar | string | | User image source | | userDelay | number | 1000 | The delay time of user messages |

Examples

Basic Chatbot

import ChatBot from '@deepmindlabs/dml-chatbot-kit';

const steps = [
  { id: '1', message: 'Hello, how can I help you today?', trigger: '2' },
  { id: '2', message: 'Goodbye!', end: true },
];

function App() {
  return <ChatBot steps={steps} />;
}

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any features, bugs, or improvements you'd like to add.

License

This project is licensed under the MIT License.