smart-ai-chatbot/README.md

A customizable AI chatbot component for React and web applications.

# AI Chatbot

A customizable AI chatbot component for React, built with TypeScript and Tailwind CSS. This chatbot uses TensorFlow.js and the Universal Sentence Encoder to provide intelligent responses based on a predefined dataset.

## Chatbot Preview

![image](https://github.com/sydhsn/smart-ai-chatbot/blob/main/418105888-8a238ffe-61cd-4e2e-af92-bd6d3c140379.png)

<!-- Add a screenshot or GIF of your chatbot here -->

## Features

- **Customizable Themes:** Choose between dark and light themes.
- **Predefined Dataset:** Provide a dataset of questions and answers for the chatbot to respond to.
- **TensorFlow.js Integration:** Uses the Universal Sentence Encoder for semantic similarity matching.
- **Responsive Design:** Works seamlessly on all screen sizes.
- **TypeScript Support:** Fully typed for better developer experience.

## Installation

Install the package using npm or yarn:

```bash
npm install ai-chat-bot
```

or

```bash
yarn add ai-chat-bot
```

## Usage

### Basic Usage

Import the Chatbot component and provide a dataset of questions and answers:

```tsx
import { Chatbot } from "ai-chat-bot";

const dataset = [
  { question: "What is your name?", answer: "I am an AI chatbot." },
  { question: "How are you?", answer: "I'm doing great, thanks!" },
];

const App = () => {
  return <Chatbot dataset={dataset} />;
};

export default App;
```

### Customizing the Chatbot

You can customize the chatbot's title and theme:

```tsx
<Chatbot
  dataset={dataset}
  title="My Chatbot"
  theme="dark" // or "light"
/>
```

## Props

| Prop    | Type       | Default      | Description                                |
| ------- | ---------- | ------------ | ------------------------------------------ | -------------------------------------------------------- |
| dataset | `QAPair[]` | Required     | An array of question-answer pairs.         |
| title   | `string`   | "AI Chatbot" | The title displayed in the chatbot header. |
| theme   | `"dark"    | "light"`     | "dark"                                     | The theme of the chatbot. Choose between dark and light. |

## Dataset Structure

The `dataset` prop expects an array of objects with the following structure:

```typescript
interface QAPair {
  question: string; // The question to match against
  answer: string; // The response to display
}
```

### Example:

```tsx
const dataset = [
  { question: "What is your name?", answer: "I am an AI chatbot." },
  { question: "How are you?", answer: "I'm doing great, thanks!" },
];
```

## Styling with Tailwind CSS

This package uses Tailwind CSS for styling. If your project doesn't already use Tailwind CSS, follow these steps to set it up:

### Install Tailwind CSS:

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
```

### Add Tailwind to your `tailwind.config.js`:

```javascript
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/ai-chat-bot/dist/**/*.js", // Include the chatbot package
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

### Add Tailwind to your CSS file:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## Usage in Next.js App Router

If you're using Next.js with the App Router, mark the component as a Client Component by adding `"use client"` at the top of your file:

```tsx
"use client";

import { Chatbot } from "ai-chat-bot";

const dataset = [
  { question: "What is your name?", answer: "I am an AI chatbot." },
];

const Page = () => {
  return <Chatbot dataset={dataset} />;
};

export default Page;
```

## Example Project

Check out the example project to see how to use the `ai-chat-bot` package in a real-world application.

## Contributing

Contributions are welcome! If you'd like to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch (`git checkout -b feature/YourFeature`).
3. Commit your changes (`git commit -m 'Add some feature'`).
4. Push to the branch (`git push origin feature/YourFeature`).
5. Open a pull request.

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

## Acknowledgments

- [TensorFlow.js](https://www.tensorflow.org/js) for providing the Universal Sentence Encoder model.
- [React Icons](https://react-icons.github.io/react-icons/) for the icons used in the chatbot.
- [Tailwind CSS](https://tailwindcss.com/) for the utility-first CSS framework.

## Support

If you have any questions or issues, please open an issue on GitHub.

## Buy Me a Coffee ☕

If you like this project and want to support its development, you can buy me a coffee!

[![Buy Me a Coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/your-username)

Enjoy using the AI Chatbot! 🚀