<p align="center">
  <a href="https://sigmentech.com/" rel="noopener" target="_blank"><img width="150" src="https://sigmentech.com/site/wp-content/uploads/2021/08/w.png" alt="MUI logo"></a></p>
</p>

<h1 align="center">Sigma-H AI Bot</h1>

<div align="center">

Quickly build beautiful [React](https://reactjs.org/) apps. Sigma-H AI Bot is a simple and customizable component library to build faster, beautiful, and more accessible React applications.

[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://sigmentech.com/)

</div>

## Installation

Sigma-H AI Bot is available as an [npm package](https://www.npmjs.com/package/sigma-chat-bot-kit).

**[Stable channel v1](https://www.npmjs.com/package/sigma-chat-bot-kit)**

```sh
// with npm
npm install sigma-chat-bot-kit

// with yarn
yarn add sigma-chat-bot-kit
```

## Usage

Here is a quick example to get you started, **it's all you need**:

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Chatbot from 'sigma-chat-bot-kit';
import 'sigma-chat-bot-kit/build/main.css';

const App = () => {
  // pass the styleing props
  const style = {
    botButtonPosition: '', // should be right or left
    iconColor: '', // color code should be HEX or RGB
    chatHeader: '', // color code should be HEX or RGB
    chatHeaderTitle: '', // pass the string for the the header
    adLogo: '', // pass the image url image format should be (JPG,JPGE,PNG)
    textColor: '', // color code should be HEX or RGB
  };
  return <Chatbot URL="your websocket URL Put here" Style={style} Icon={
    //pass the icon or write a image tag Like (<img src="image" alt="text" />)
  } />;
};

ReactDOM.render(<App />, document.querySelector('#app'));
```

Yes, it's really all you need to get started as you can see in this live and interactive demo:

<!-- [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4j7m47vlm4) -->

## License

This project is licensed under the terms of the
[MIT license](/LICENSE).
