Flow Chat Widget

Author: Vijay Singh

An amazing, customizable chat widget that integrates easily into any website or web app, with features like voice input, smooth animations, and custom fonts, powered by Tailwind CSS.

Overview

This package provides a lightweight, highly customizable chat widget that can be easily integrated into any web application. It supports voice input using the react-speech library, animations, and transitions for a sleek user experience. Tailwind CSS is used for styling, allowing you to customize the widget's appearance easily.

Key Features:

• Movable Chat Widget: Users can drag and place the chat widget anywhere on the screen.
• Voice Input: Includes a microphone feature to input voice messages.
• Customizable UI: Easily change fonts, colors, and sizes using Tailwind CSS.
• Responsive Design: The chat widget is fully responsive and looks great on mobile devices.
• Animations: Smooth transitions and animations are included out of the box.
• Dark Mode Support: Built-in support for light and dark themes.

Installation

To use the chat widget in your project, follow these steps:

1. Install the package via npm:

npm install Flow-chat-widget

2. Add Tailwind CSS

Ensure Tailwind CSS is set up in your project. If you haven't added Tailwind yet, follow the steps below:

npm install tailwindcss postcss autoprefixer
npx tailwindcss init

Then, configure the files as follows:

• Add the Tailwind directives in your CSS (e.g., src/styles.css):

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

• Update your tailwind.config.js to include the necessary paths:

  module.exports = {
    content: [
      './src/**/*.{js,jsx,ts,tsx}',
      './node_modules/flow-chat-widget/**/*.{js,jsx}',
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  };

3. Import the widget in your code:

import ChatWidget from 'flow-chat-widget';
import 'flow-chat-widget/dist/styles.css'; // Tailwind CSS styles

const App = () => (
  <div>
    <ChatWidget />
  </div>
);

export default App;

4. Build Tailwind CSS

Make sure to build your Tailwind CSS if you're using a custom configuration.

npm run build:css

Usage

Here’s how you can use the chat widget in your application:

Basic Example:

import ChatWidget from 'flow-chat-widget';

const App = () => (
  <div>
    <ChatWidget />
  </div>
);

export default App;

Customizing the Widget:

The chat widget allows you to customize its appearance using Tailwind classes. You can modify the widget's styling, layout, and behavior by passing in props.

<ChatWidget
  customFont="font-sans"
  bgColor="bg-blue-500"
  textColor="text-white"
  animation="transition-all ease-in-out duration-300"
/>

Available Props:

| Prop Name | Type | Default | Description | |-------------|----------|-----------------|-----------------------------------------------| | customFont| string | font-sans | Sets the font for the chat widget | | bgColor | string | bg-white | Background color of the chat widget | | textColor | string | text-black | Text color of the chat messages | | animation | string | transition-all| Animation class for opening/closing the widget|

Customization Options

You can modify the appearance of the chat widget by changing the Tailwind classes. Here's how to customize various parts of the widget:

1. Changing Colors:

   • Update the background or text color using Tailwind’s utility classes.

   <ChatWidget bgColor="bg-purple-600" textColor="text-yellow-300" />

2. Changing Fonts:

   • You can use any custom font by passing the font class.

   <ChatWidget customFont="font-serif" />

3. Animations:

   • You can modify the animations by passing custom transition classes.

   <ChatWidget animation="transition-transform duration-500 ease-in-out" />

4. Voice Input:

   • Voice input is enabled by default. The microphone icon appears next to the send button.

5. Dark Mode:

   • The widget supports dark mode by default. You can toggle between dark and light modes by setting a class like dark:bg-gray-900.

   <ChatWidget darkMode={true} />

Development

If you want to contribute to the development of this package or make modifications for your own use:

Clone the repository:

git clone https://github.com/vijaysingh1621/flow-chat-widget.git

Install dependencies:

npm install

Build the package:

Run the build script to generate the minified CSS and JavaScript files.

npm run build

Test locally:

You can test your modifications locally by linking the package.

npm link

Then, in your project where you want to test the package:

npm link flow-chat-widget

Author

• Name: Vijay Singh
• Website: vijaysingh.me
• GitHub: vijaysingh1621
• Email: [[email protected]]

License

This project is licensed under the MIT License. See the LICENSE file for more information.