Build Advanced AI Chatbots With React – ChatBotify

Description:

ChatBotify is a modern library designed for creating versatile and expandable AI chatbots using React.

It is suitable for a variety of applications from simple FAQ systems to complex conversational interfaces.

Key Features:

  • Dynamic Conversations: Dynamically generate messages and pathways based on user inputs.
  • Custom Components: Integrate unique design elements and functionalities.
  • Streaming and LLM Integration: Stream responses from Large Language Models and other sources.
  • Interactive Elements: Support for voice inputs, notifications, file sharing, and emoji interactions.
  • Mobile Optimization: Ensures a responsive experience across different devices.

How to use it:

1. Install and import the ChatBot component into your project.

# NPM
$ npm install react-chatbotify
import ChatBot from "react-chatbotify";

2. Create a basic chatbot in the app.

const MyComponent = () => {
  return (
    <Chatbot/>
  );
};

3. Available chatbot options.

// tracks state of chat window, also the default state to load it in
isOpen?: boolean;
// configurations
theme?: {
  primaryColor?: string;
  secondaryColor?: string;
  fontFamily?: string;
  showHeader?: boolean;
  showFooter?: boolean;
  showInputRow?: boolean;
  actionDisabledIcon?: string;
  embedded?: boolean;
  desktopEnabled?: boolean;
  mobileEnabled?: boolean;
},
tooltip?: {
  mode?: string;
  text?: string;
},
chatButton?: {
  icon: string;
},
header?: {
  title?: string | JSX.Element;
  showAvatar?: boolean;
  avatar?: string;
  closeChatIcon?: string;
},
notification?: {
  disabled?: boolean;
  defaultToggledOn?: boolean;
  volume?: number;
  icon?: string;
  sound?: string;
},
audio?: {
  disabled?: boolean;
  defaultToggledOn?: boolean;
  language?: string;
  voiceNames?: string[];
  rate?: number;
  volume?: number;
  icon?: string;
},
chatHistory?: {
  disabled?: boolean;
  maxEntries?: number;
  storageKey?: string;
  viewChatHistoryButtonText?: string;
  chatHistoryLineBreakText?: string;
  autoLoad?: boolean;
},
chatInput?: {
  disabled?: boolean;
  enabledPlaceholderText?: string;
  disabledPlaceholderText?: string;
  showCharacterCount?: boolean;
  characterLimit?: number;
  botDelay?: number;
  sendButtonIcon?: string;
  blockSpam?: boolean;
  sendOptionOutput?: boolean;
  sendCheckboxOutput?: boolean;
  sendAttachmentOutput?: boolean;
},
chatWindow?: {
  showScrollbar?: boolean;
  autoJumpToBottom?: boolean;
  showMessagePrompt?: boolean;
  messagePromptText?: string;
  messagePromptOffset?: number;
},
sensitiveInput?: {
  maskInTextArea?: boolean;
  maskInUserBubble?: boolean;
  asterisksCount?: number;
  hideInUserBubble?: boolean;
},
userBubble?: {
  animate?: boolean;
  showAvatar?: boolean;
  avatar?: string;
  simStream?: boolean;
  streamSpeed? :number;
  dangerouslySetInnerHtml?: boolean;
},
botBubble?: {
  animate?: boolean;
  showAvatar?: boolean;
  avatar?: string;
  simStream?: boolean;
  streamSpeed? :number;
  dangerouslySetInnerHtml?: boolean;
},
voice?: {
  disabled?: boolean;
  defaultToggledOn?: boolean;
  timeoutPeriod?: number;
  autoSendDisabled?: boolean;
  autoSendPeriod?: number;
  icon?: string;
},
footer?: {
  text?: string | JSX.Element;
},
fileAttachment?: {
  disabled?: boolean;
  multiple?: boolean;
  accept?: string;
  icon?: string;
}
emoji?: {
  disabled?: boolean;
  icon?: string;
  list?: string[] ;
},
advance?: {
  useCustomMessages?: boolean;
  useCustomBotOptions?: boolean;
  useCustomPaths?: boolean;
},
// styles
tooltipStyle?: React.CSSProperties;
chatButtonStyle?: React.CSSProperties;
notificationBadgeStyle?: React.CSSProperties;
chatWindowStyle?: React.CSSProperties;
headerStyle?: React.CSSProperties;
bodyStyle?: React.CSSProperties;
chatInputContainerStyle?: React.CSSProperties;
chatInputAreaStyle?: React.CSSProperties;
chatInputAreaFocusedStyle?: React.CSSProperties;
chatInputAreaDisabledStyle?: React.CSSProperties;
userBubbleStyle?: React.CSSProperties;
botBubbleStyle?: React.CSSProperties;
botOptionStyle?: React.CSSProperties;
botOptionHoveredStyle?: React.CSSProperties;
botCheckboxRowStyle?: React.CSSProperties;
botCheckboxNextStyle?: React.CSSProperties;
botCheckMarkStyle?: React.CSSProperties;
botCheckMarkSelectedStyle?: React.CSSProperties;
sendButtonStyle?: React.CSSProperties;
sendButtonHoveredStyle?: React.CSSProperties;
characterLimitStyle?: React.CSSProperties;
characterLimitReachedStyle?: React.CSSProperties;
chatHistoryButtonStyle?: React.CSSProperties;
chatHistoryButtonHoveredStyle?: React.CSSProperties;
chatHistoryLineBreakStyle?: React.CSSProperties;
chatMessagePromptStyle?: React.CSSProperties;
chatMessagePromptHoveredStyle?: React.CSSProperties;
footerStyle?: React.CSSProperties;
loadingSpinnerStyle?: React.CSSProperties;
const options = {
  // options here
};
const App = () => {
  return (
    <div>
      <ChatBot options={options} />
    </div>
  );
}

Preview:

Build Advanced AI Chatbots With React ChatBotify

Tags:

Add Comment