Conversation
…led-components 6 support (#392) * Fix Recognition returning the first instance for every new instance The module-level singleton made every new Recognition return the first one, so a remounted or second ChatBot kept calling the callbacks of the first (possibly unmounted) component. * Wait for input when the first step is a user step; guard localStorage - A first user step was rendered as an empty bubble and immediately triggered the next step without waiting for the user. - Only read localStorage when cache is enabled and tolerate storage that throws (Safari private mode, quota exceeded). Ports #351. * Modernize toolchain: webpack 5, Babel 7.29, ESLint 8, mocha 10, React 18 tests - Move react/react-dom and lint tooling out of runtime dependencies - Widen peer ranges to react/react-dom >=16.3 and styled-components >=4 - Replace Travis/Node 8 CI with GitHub Actions on Node 20/22/24 - Stop tracking dist/ and coverage.lcov (dist is built on publish) - Fix flatted import path for flatted 3 * Fix duplicated messages: trigger each step only once Steps started their delay timer in componentDidMount and never cleared it, so React 18 StrictMode (mount, unmount, mount) triggered every step twice and the conversation doubled at each step. Custom components that called triggerNextStep more than once and double clicks on options had the same effect. - clear the step timer on unmount - let each step trigger the next step at most once - ignore repeated clicks on an options step * Fix autoscroll on modern browsers and several small bugs - Replace the removed DOMNodeInserted event with a MutationObserver, so the conversation scrolls to the last message again (Chrome 127+) - Don't restart speech recognition forever when it ends with no text - Don't access window when checking recognition support (SSR) - Copy options of update steps instead of changing the original step - Fix extraControl prop type (a single element, not an object of elements) - Use default parameters instead of defaultProps in icons (React 19) * Support styled-components 6 without leaking style props to the DOM styled-components 6 forwards every prop to DOM elements, which made React warn about user, isFirst, floating, opened, invalid and others. Filter the style-only props with shouldForwardProp; styled-components 4 and 5.0 ignore the option and keep filtering them as before. Tested with styled-components 4.4, 5.3 and 6.5. * Don't crash the mic button with non-hex theme colors rgba() returned null for named, rgb() or hsl() colors and the pulse animation threw. Fall back to color-mix() for those colors. * Apply steps prop updates and fix several step bugs - Rebuild the step definitions when steps, avatars, delays or botName change, so steps that were not rendered yet use the new values - Select options without a value by their label (all of them matched the first option before) - Start the conversation from the parsed first step, so it gets the default settings too, and don't mutate the steps prop - Render DOM element components (e.g. <div />) without injecting step props, which React warned about - Don't speak cached steps again, and read speechSynthesis on every message so it can be toggled after mount - Ignore triggerNextStep calls with a value that matches no option * Only autoscroll when the user is at the bottom; improve accessibility Autoscroll: - scroll to the bottom on every new message - for other DOM changes (loading bubbles, tooltips, ripples, content loaded inside custom steps) only scroll if the user didn't scroll up Accessibility (based on #293): - label the input, the submit/voice button and the open/close buttons - make the open/close buttons focusable and usable with the keyboard - use type="button" so the chatbot doesn't submit a surrounding form - use a valid input type and fix the invalid avatar width (40 -> 40px) * Add TypeScript declarations Types for the ChatBot props, every step kind, trigger/message functions, handleEnd and the props injected in custom step components. Checked in CI with tsc against tests/types. * Start a closed floating chatbot when it is opened The conversation used to run while the floating chatbot was still closed, so users opened it to find every message already there. * Filter the loading delay prop and update the example app - LoadingStep leaked its delay prop to the DOM with styled-components 6 - The example uses createRoot and StrictMode and a real conversation (input, options without value and a custom step) * Run the createRoot tests with React 19 in CI * Update README: install styled-components, supported versions and tips Also points the website and author links to the current domains (same change as #391). * Publish an ES5 bundle and stop tracking dist - Build for ES5 (including flatted) so webpack 4 and older browsers can parse the bundle, as before - Stop tracking dist/ and build it in prepare, so installs from git get a fresh bundle - Remove engines, it would block installs on older Node versions * Fix issues found in review - Build steps again lazily, when a step is triggered, instead of on every parent render; keep the last valid steps if the new ones are invalid - Submit the recognized text when voice recognition ends (the batched speaking state restarted the recognition instead under createRoot) - Keep the value of a first custom step and evaluate its message on a copy, so looping back to it evaluates the message again - Restore option values from old caches - Don't focus the input of a closed floating chatbot - Allow boolean validators in the TypeScript declarations * Add CAMARADES BR to the Build with list (from #347) Co-authored-by: vyk1 <47799125+vyk1@users.noreply.github.com> * Release 0.7.0 --------- Co-authored-by: vyk1 <47799125+vyk1@users.noreply.github.com>
Removed Beerpay badge from README.md
Removed maintenance warning for React Simple Chatbot and suggested alternative.
…#394) * Migrate to TypeScript and React function components with hooks - Move lib/ to src/ in TypeScript; ChatBot, TextStep, CustomStep and OptionsStep are now function components (useStep, useAutoScroll hooks, pure conversation helpers in src/conversation.ts) - Generate type declarations from src/types.ts instead of index.d.ts - Styled components use transient $props instead of withConfig filtering - Replace webpack/babel with Vite (UMD + ES module builds), mocha/enzyme with Vitest + Testing Library, and use ESLint 9 flat config - Support React 18/19 and styled-components >= 5.1; drop prop-types and random-id * Only pass disabled to a DOM element used as extraControl React warned about the non-boolean speaking and invalid attributes when extraControl was a DOM element (e.g. <button />), like the step components already do for DOM elements. * docs: add a pull request template with Conventional Commits titles * docs: remove outdated README sections Remove the React Simple Chatbot with AI and Built with sections, and the blogduwebdesign link. * chore: release 1.0.0
…nt (#397) * fix: keep following new messages while they grow The chatbot stopped following the conversation in some cases: - content that grows without a DOM change (fonts, images, text wrapping) didn't scroll to the bottom, so the chatbot now also observes the size of the messages - growing content was mistaken for the user scrolling up, because the distance to the bottom grew; now only scrolling up stops following - browsers can stop a smooth scroll early when it is requested many times in a row, so it is checked again when it should have finished * feat: refresh the default look of the chatbot - fix the alignment of the messages: the avatar has a fixed column, and the layout no longer depends on the box-sizing of the page - system font by default instead of monospace, inherited by the input - bubbles: grouped corners, better spacing and line height, long words wrap, subtle entrance animation (off with prefers-reduced-motion) - options: outlined quick replies aligned with the bot messages - custom components: 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 (the old send icon was clipped) - header: semibold title with ellipsis, round close button - focus rings for keyboard users, thin scrollbar, larger radius and softer shadows The props, the theme keys and the rsc-* class names are unchanged.
…lidators (#396) * fix: keep falsy step values, the final voice transcript and cached validators - triggerNextStep saves 0, false and '' as the step value (only undefined means no value), so trigger functions and handleEnd receive them - speech recognition sends the final transcript before it ends, and automatic submission works again after the user stopped a recognition - a cached conversation restores the validator of the step waiting for the user input * chore: release 1.0.1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
See Commits and Changes for more details.
Created by
pull[bot] (v2.0.0-alpha.4)
Can you help keep this open source service alive? 💖 Please sponsor : )