[LucasBassetti]

Description

Rewrites React Simple Chatbot in TypeScript with React function components and hooks, and modernizes the tooling. The public API (props, steps, custom components) stays the same, apart from the breaking changes listed below.

What changes

Library

• lib/ → src/ in TypeScript (moved with git mv, so the history is kept).
• ChatBot, TextStep, CustomStep and OptionsStep are function components. The conversation logic moved to pure helpers (src/conversation.ts) and hooks (useStep, useAutoScroll, useLatest), and the step state is updated immutably.
• Type declarations are generated from the source (src/types.ts) instead of the hand-written index.d.ts. New exported type: ChatBotTheme.
• Styled components use transient $props, so style props like width, height and opened no longer leak into the DOM.
• A partial theme falls back to the default theme for the missing keys.
• Fix: a DOM element used as extraControl (e.g. <button />) only receives disabled, which removes React's "non-boolean attribute" warnings.
• Removes the prop-types and random-id dependencies.

Tooling

• Build: Vite replaces webpack/babel and outputs the UMD bundle (same file name) plus a new ES module build (module field).
• Tests: Vitest + Testing Library replace mocha/enzyme (enzyme doesn't support React 19). All previous cases were ported.
• Lint: ESLint 9 flat config with typescript-eslint. TypeScript is pinned to 6.0 because typescript-eslint doesn't support TypeScript 7 yet.
• CI: Node 22 and 24, plus a job running the tests on React 18.

Docs and repo

• README: supported versions, TypeScript usage and tips; removes the outdated "with AI", "Built with" and blogduwebdesign entries.
• Contributing guide: development commands and the Conventional Commits title rule.
• Adds a pull request template.

Security

• The new lockfile resolves all 9 open Dependabot alerts (serialize-javascript, js-yaml, uuid, @tootallnate/once). They came from removed dev dependencies (mocha, nyc, codecov, the old jsdom); js-yaml is now at the patched 4.3.2. npm audit reports 0 vulnerabilities.

Where to start reviewing

1. src/ChatBot.tsx: the main component and the conversation flow (triggerNextStep, submitUserMessage).
2. src/conversation.ts: pure helpers (building the steps, triggers, messages, bubble positions).
3. src/steps_components/common/useStep.ts and src/hooks/: delay, trigger-once and auto-scroll logic.
4. tests/unit/ChatBot.spec.tsx: the integration tests describing the expected behavior.

Related issue

Closes #393 (Dependabot bump of serialize-javascript through mocha, which this PR removes).

Type of change

• feat: new feature
• fix: bug fix
• docs: documentation
• refactor / perf / test
• build / ci / chore
• Breaking change (the title has !, and the migration is described below)

How has this been tested?

Check	Result
Lint, typecheck and build	✅
Unit and integration tests (Vitest), 95% coverage	✅ 86/86 on React 19 and 18, styled-components 6 and 5
End-to-end (Playwright): Chromium, Firefox, WebKit, iPhone and Pixel emulation	✅ 26/26, also on React 18 and on styled-components 5 + React 19
Server-side rendering of the CommonJS build, ES module build through a bundler	✅
<script> tags with React 18 + styled-components 5 (3 browsers)	✅

The end-to-end tests cover the full conversation, theming, floating mode (mouse, keyboard and controlled), the cache across reloads, the validator, auto-scroll, voice input and speech, the mobile layout, and the custom header and extra control.

Not covered:

• Voice with a real microphone and speaker: the browser speech APIs were faked.
• Physical phones: only device emulation.
• <script> tags with styled-components 6 don't work, because its UMD build nests the exports under styled.default. The published 0.7.0 behaves the same (works with styled-components 5, fails with 6), so it is not a regression.

Breaking changes

Change	Migration
Peer dependencies: React >= 18 and styled-components >= 5.1 (were React >= 16.3 and styled-components >= 4)	Upgrade React and styled-components
ChatBot is a function component, a ref no longer returns a component instance	Remove refs to ChatBot; control it with props (e.g. opened + toggleFloating, or a new key to restart)
Enter submits on keydown instead of the deprecated keypress, and is ignored while composing IME characters	Code listening to keypress on the input should use keydown
handleEnd receives steps as an object keyed by step id, instead of an array with string keys	Nothing if you read steps.someId; replace array methods with Object.values(steps)

The version is bumped to 1.0.0 (latest published is 0.7.0).

Checklist

• The title follows Conventional Commits
• npm run lint, npm run typecheck and npm test pass
• Tests cover the change
• The README is updated when the public API changes