[pull] master from LucasBassetti:master

.github/pull_request_template.md

@@ -0,0 +1,57 @@
+<!--
+The PR title must follow Conventional Commits (https://www.conventionalcommits.org):
+
+  <type>(<optional scope>)<optional !>: <short summary in the imperative mood>
+
+Types:
+  feat      a new feature
+  fix       a bug fix
+  docs      documentation only
+  style     formatting, no code change
+  refactor  a code change that neither fixes a bug nor adds a feature
+  perf      a performance improvement
+  test      adding or fixing tests
+  build     build system or dependencies
+  ci        CI configuration
+  chore     other changes that don't modify src or tests
+  revert    reverts a previous commit
+
+Add ! after the type (or scope) for a breaking change, e.g. `feat!: drop React 17 support`.
+
+Examples:
+  feat: add a typing indicator to custom steps
+  fix(cache): restore options without value
+  docs: document the extraControl prop
+-->
+
+## Description
+
+<!-- What does this PR change, and why? -->
+
+## Related issue
+
+<!-- e.g. Closes #123. Please open an issue first for big changes. -->
+
+## 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?
+
+<!-- Tests added or updated, and manual testing (browsers, React versions, example app...). -->
+
+## Breaking changes
+
+<!-- Only for breaking changes: what breaks, and how to migrate. Remove this section otherwise. -->
+
+## 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

.github/workflows/nodejs.yml

@@ -1,26 +1,40 @@
 name: Node CI
 
-on: [push]
+on:
+  push:
+    branches: [master]
+  pull_request:
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [8.x, 10.x, 12.x]
+        node-version: [22.x, 24.x]
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: npm
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run typecheck
+      - run: npm run test:coverage
+      - run: npm run build
+
+  react-18:
+    runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v1
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - name: npm install, build, and test
-      run: |
-        npm ci
-        npm run build --if-present
-        npm test
-      env:
-        CI: true
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24.x
+          cache: npm
+      - run: npm ci
+      - run: npm install --no-save react@18 react-dom@18
+      - run: npm test

.gitignore

@@ -28,3 +28,9 @@ pids
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
+
+# Coverage report
+coverage.lcov
+
+# Build output (generated on publish)
+/dist

.prettierrc

@@ -1,4 +1,6 @@
 {
   "printWidth": 100,
-  "singleQuote": true
-}
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid"
+}

README.md

@@ -1,32 +1,32 @@
-> [!WARNING]  
-> React Simple Chatbot is no longer maintained. I recommend using [react-chatbotify](https://github.com/tjtanjin/react-chatbotify) as an alternative.
-
-
-
 # React Simple Chatbot
 
-<a href="https://travis-ci.org/LucasBassetti/react-simple-chatbot"><img src="https://travis-ci.org/LucasBassetti/react-simple-chatbot.svg?branch=master" alt="Travis CI" /></a> <a href="https://badge.fury.io/js/react-simple-chatbot"><img src="https://badge.fury.io/js/react-simple-chatbot.svg" alt="npm version"></a>
+<a href="https://github.com/LucasBassetti/react-simple-chatbot/actions/workflows/nodejs.yml"><img src="https://github.com/LucasBassetti/react-simple-chatbot/actions/workflows/nodejs.yml/badge.svg" alt="Node CI" /></a> <a href="https://badge.fury.io/js/react-simple-chatbot"><img src="https://badge.fury.io/js/react-simple-chatbot.svg" alt="npm version"></a>
   <img src="https://codecov.io/gh/LucasBassetti/react-simple-chatbot/branch/master/graph/badge.svg" alt="Codecov" />
-</a> <a href="https://beerpay.io/LucasBassetti/react-simple-chatbot"><img src="https://beerpay.io/LucasBassetti/react-simple-chatbot/badge.svg?style=flat" /></a>
+</a>
 
 A simple chatbot component to create conversation chats
 
 <img src="https://cloud.githubusercontent.com/assets/1014326/25716667/2d4bb4c4-30d6-11e7-996e-30c8fb316361.gif" height="400" />
 
 ## Getting Start
 
+`react-simple-chatbot` uses [styled-components](https://styled-components.com) as a peer dependency, so install both:
+
 ```bash
-npm install react-simple-chatbot --save
+npm install react-simple-chatbot styled-components
 ```
 
+It works with React 18 or 19 and styled-components 5.1 or newer. The library is written in TypeScript, so the types are included.
+
 ## Usage
 
 There are several examples on the [website](https://lucasbassetti.github.io/react-simple-chatbot/). Here is the first one to get you started:
 
-``` javascript
-import ChatBot from 'react-simple-chatbot';
+```tsx
+import { createRoot } from 'react-dom/client';
+import ChatBot, { type Step } from 'react-simple-chatbot';
 
-const steps = [
+const steps: Step[] = [
   {
     id: '0',
     message: 'Welcome to react chatbot!',
@@ -39,33 +39,20 @@ const steps = [
   },
 ];
 
-ReactDOM.render(
-  <div>
-    <ChatBot steps={steps} />
-  </div>,
-  document.getElementById('root')
-);
+createRoot(document.getElementById('root')!).render(<ChatBot steps={steps} />);
 ```
 
-## React Simple Chatbot with AI
+### Tips
 
-1. [CodeParrot AI](https://codeparrot.ai/oracle?owner=LucasBassetti&repo=react-simple-chatbot) - Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.
+- **Restart the conversation**: render the chatbot with a new `key` (e.g. `<ChatBot key={conversationId} steps={steps} />`). If `cache` is enabled, also clear it with `localStorage.removeItem(cacheName)`.
+- **Change steps after mount**: updates to `steps`, the avatars, the delays and `botName` are used by the steps that were not rendered yet.
+- **Style the chatbot**: every element has a stable `rsc-*` class name (e.g. `.rsc-ts-bubble`, `.rsc-input`) that you can target with CSS, and the `*Style` props accept inline styles.
+- **Custom components**: the components of the steps receive `step`, `steps`, `previousStep` and `triggerNextStep`, typed as `CustomComponentProps`.
 
 ## React Simple Chatbot on media
 
 1. [webdesignerdepot](https://www.webdesignerdepot.com/2017/08/whats-new-for-designers-august-2017/)
-2. [blogduwebdesign](http://www.blogduwebdesign.com/webdesign/ressources-web-du-lundi-aout-164/2507)
-3. [codrops](https://tympanus.net/codrops/collective/collective-335/)
-
-## Build with `react-simple-chatbot`
-
-1. [Seth Loh Website](https://github.com/lackdaz/lackdaz.github.io) - Personal website of Seth Loh ([demo](https://www.sethloh.com))
-2. [Paul's Website](https://psheon.github.io/) - Personal website of Paul Jiang ([demo](https://psheon.github.io/archives/))
-3. [Cisco Partner Support API Chatbot](https://github.com/btotharye/cisco-pss-api-chatbot) - Code with screenshots to have your own Cisco Serial lookup chatbot.
-4. [Chatcompose](https://www.chatcompose.com/en.html) - Chatbot Platform for Conversational Marketing and Support.
-5. [Mixat](https://www.svt.se/mixat) - News Chatbot for tweenies. Also as app ([iOS](https://apps.apple.com/se/app/mixat-h%C3%A4r-f%C3%A5r-du-koll/id1239444432) or [Android](https://play.google.com/store/apps/details?id=se.svt.mixat))
-
-Built something with `react-simple-chatbot`? Submit a PR and add it to this list!
+2. [codrops](https://tympanus.net/codrops/collective/collective-335/)
 
 ## How to Contribute
 

contributing.md

@@ -17,8 +17,17 @@ Pull requests are very welcome. Note that if you are going to propose drastic ch
 
 Fork the repository, clone it locally and create a branch for your proposed bug fix or new feature. Avoid working directly on the master branch.
 
+The library is written in TypeScript with React function components and hooks. Useful commands:
+
+- `npm start`: run the example (`example/`) with Vite at http://localhost:5173
+- `npm test` / `npm run test:coverage`: run the tests (Vitest + Testing Library)
+- `npm run lint` and `npm run typecheck`: check the code
+- `npm run build`: build `dist/` (ES module, UMD and type declarations)
+
 Implement your bug fix or feature, write tests to cover it and make sure all tests are passing (run a final `npm test` to make sure everything is correct). Then commit your changes, push your bug fix/feature branch to the origin (your forked repo) and open a pull request to the upstream (the repository you originally forked)'s master branch.
 
+The pull request title must follow [Conventional Commits](https://www.conventionalcommits.org): `<type>(<optional scope>): <summary>`, where the type is one of `feat`, `fix`, `docs`, `style`, `refactor`, `perf`, `test`, `build`, `ci`, `chore` or `revert`, e.g. `fix(cache): restore options without value`. Add `!` after the type for breaking changes (e.g. `feat!: drop React 17 support`). Fill the pull request template, it asks for the description, the related issue, how the change was tested and the breaking changes.
+
 ## Documentation
 
 Documentation is extremely important and takes a fair deal of time and effort to write and keep updated. Please submit any and all improvements you can make to the repository's docs.

eslint.config.mjs

@@ -0,0 +1,33 @@
+import { defineConfig } from 'eslint/config';
+import js from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import prettierRecommended from 'eslint-plugin-prettier/recommended';
+import globals from 'globals';
+
+export default defineConfig(
+  { ignores: ['dist', 'coverage', 'tests/helpers/corti.ts'] },
+  js.configs.recommended,
+  tseslint.configs.recommended,
+  react.configs.flat.recommended,
+  jsxA11y.flatConfigs.recommended,
+  {
+    plugins: { 'react-hooks': reactHooks },
+    languageOptions: {
+      globals: globals.browser
+    },
+    settings: {
+      react: { version: 'detect' }
+    },
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'error',
+      'react/prop-types': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true }]
+    }
+  },
+  prettierRecommended
+);

example/components/Example.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import ChatBot, { type ChatBotTheme, type CustomComponentProps, type Step } from '../../src';
+
+const otherFontTheme: ChatBotTheme = {
+  background: '#f5f8fb',
+  fontFamily: 'Helvetica Neue',
+  headerBgColor: '#6e48aa',
+  headerFontColor: '#fff',
+  headerFontSize: '16px',
+  botBubbleColor: '#6E48AA',
+  botFontColor: '#fff',
+  userBubbleColor: '#fff',
+  userFontColor: '#4a4a4a'
+};
+
+const Summary = ({ steps }: CustomComponentProps) => (
+  <div>
+    <strong>{steps?.name.value}</strong> likes <strong>{steps?.fruit.value}</strong>
+  </div>
+);
+
+const steps: Step[] = [
+  { id: '1', message: 'Hello! What is your name?', trigger: 'name' },
+  { id: 'name', user: true, trigger: '3' },
+  { id: '3', message: 'Hi {previousValue}! Which fruit do you like?', trigger: 'fruit' },
+  {
+    id: 'fruit',
+    options: [
+      { label: 'Apple', trigger: 'summary' },
+      { label: 'Banana', trigger: 'summary' }
+    ]
+  },
+  { id: 'summary', component: <Summary />, asMessage: true, trigger: 'end' },
+  { id: 'end', message: 'Thanks!', end: true }
+];
+
+const ThemedExample = () => (
+  <ThemeProvider theme={otherFontTheme}>
+    <ChatBot steps={steps} />
+  </ThemeProvider>
+);
+
+export default ThemedExample;

example/index.html

@@ -6,6 +6,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script src="bundle.js"></script>
+    <script type="module" src="./main.tsx"></script>
   </body>
 </html>