Skip to content

Added CAMARADES BR as a "Build with" example. - #347

Closed
vyk1 wants to merge 1 commit into
LucasBassetti:masterfrom
vyk1:master
Closed

vyk1 wants to merge 1 commit into
LucasBassetti:masterfrom
vyk1:master

Conversation

@vyk1

@vyk1 vyk1 commented Aug 29, 2022

Copy link
Copy Markdown
Contributor

No description provided.

LucasBassetti added a commit that referenced this pull request Sep 26, 2026
@LucasBassetti

Copy link
Copy Markdown
Owner

Thanks! Your entry was added to the README in #392 (with you as co-author), so I'm closing this one.

LucasBassetti added a commit that referenced this pull request Sep 26, 2026
…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 <[email protected]>

* Release 0.7.0

---------

Co-authored-by: vyk1 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants