React Simple Chatbot Files

A refreshed look for the chatbot, with fixes for the message alignment, auto-scroll, voice input and cached conversations.

Install

:::bash
npm install react-simple-chatbot@1.0.1 styled-components

New look (#397)

The props, the theme keys and the rsc-* class names are unchanged, and a theme still overrides the colors and the font.

• Aligned messages: the avatar has a fixed column, so the messages of a group stay aligned on any page, including pages with a CSS reset (Tailwind, Starlight...)
• System font by default instead of monospace, also used by the input
• Bubbles: grouped corners, better spacing and line height, long words and URLs wrap, subtle entrance animation (off with prefers-reduced-motion)
• Options: outlined quick-reply pills aligned with the bot messages
• Custom components: a card aligned with the bot messages
• Typing indicator with animated dots instead of ...
• Footer: clean input, round send button in the accent color, crisp send and mic icons
• Header: semibold title, round close button, focus rings for keyboard users

To keep the old font, pass fontFamily: 'monospace' in a theme. Apps with custom CSS that depends on the old spacing may need small adjustments.

Bug fixes

• Auto-scroll: the chatbot keeps following new messages when they grow without a DOM change, and when many messages arrive during a smooth scroll (#397)
• Falsy values: triggerNextStep keeps 0, false and '' as the step value, so trigger functions and handleEnd receive them (#396)
• Voice input: the final transcript is submitted instead of the last interim one, and automatic submission works again after the user stopped a recognition (#396)
• Cache: a restored conversation keeps the validator of the step waiting for the user (#396)

Full Changelog: https://github.com/LucasBassetti/react-simple-chatbot/compare/v1.0.0...v1.0.1