npm package: @gappy/gappy-react
Description: This is the widget for your copilot, it's what your users will interact with. It's a react application built to be used in any webpage as a widget.
Author: openchatai
Latest version: 1.1.12

# Copilot widget

This is the widget for your copilot, it's what your users will interact with. It's a react application built to be used in any webpage as a widget.

## How to integrate with `HTML` project

1. Download the latest build artifact from the actions tab.

2. Extract the zip file.

3. Copy the `assets/*` folder to your project.
   this folder contains css and js files that are needed for the widget to work.

4. Add the js file in your html file as follows:

   ```html
   <script src="[some_js_file].js"></script>
   ```

5. Don't add the css file in your html file, instead, the script will inject the css files dynamically.

6. Init the widget.

   ```html
   <script>
     // you should run it after window loads
     window.onload = () => {
       initAiCoPilot({
         initialMessage: "👋 Hey! Welcome to Gappy.ai, your go-to place for content creation and AI chatbots. Got questions? Just ask!",
         apiUrl: "copilot_backend_url",
         socketUrl : "copilot_socket_url",
         defaultOpen : true | false,
   	 apiKey : "copilot_api_key"
       });
     };
   </script>
   ```

## How to integrate with `React.js` projects

1. Install `@gappy/gappy-react` npm package
```shell
   npm i @gappy/gappy-react
```

`@gappy/gappy-react` export two functions `ChatWindowWithTrigger` or `ChatWindowWithoutTrigger`.

> <strong>ChatWindowWithoutTrigger</strong> 
>> 1. It renders the chat window without trigger button in your application.

> <strong>ChatWindowWithTrigger</strong>
>> 1. It renders the chat window along with the trigger button.<br>
>> 2. You can open/close chat window using the trigger button.
>> 3. chat-window will have position fixed and will be displayed on bottom-right corner of the screen.

2. Import Root, `ChatWindowWithTrigger` or `ChatWindowWithoutTrigger` and index.css from `@gappy/gappy-react`
```js
import { Root, ChatWindowWithoutTrigger, ChatWindowWithTrigger } from "@gappy/gappy-react"
import "@gappy/gappy-react/index.css";
```
2. Wrap your App component with contexts provided by gappy.
```js
<Root options={options}>
   <App/>
</Root>
```

Now, import you copilot component inside your code.

```js
   ....
   <CopilotWindowWithTrigger />
   ....
```

3. Provide options as a prop to Root.
```js
const configurations = {
 	initialMessage: "👋 Hey! Welcome to Gappy.ai, your go-to place for content creation and AI chatbots. Got questions? Just ask!",
 	apiUrl: "copilot_backend_url",
 	socketUrl : "copilot_socket_url",
 	defaultOpen : true | false,
	apiKey : "copilot_api_key"
}

     <Root configurations={configurations}>
       // copilot component
     </Root>
```
## Copilot Configurations

You can configure copilot using these props
```ts
interface CopilotProps {
  Theme ?: Theme_Type,
  hideCloseIcon ?: boolean        
  hideMinimiseIcon ?: boolean
  enableVoice ?: boolean    
  speechRecognitionMode ?: SpeechRecognitionModeType
}
```
## Copilot Theme Configs.
```js
// CopilotTheme: Custom Theme Options for Gappy React
const CopilotTheme = {
  // Header Configs
  Header_Background_Color: "#574192",
  Header_Text_Color: "#FFFFFF",
  Chat_Box_Background_Color: "#192739",
  // Chat Configs
  Chat_Text_Color: "#FFFFFF",
  Ai_Chat_Background_Color: "#373562",
  User_Chat_Text_Color: "#482968",
  // Input Field Configs
  Input_Field_Background_Color: "#06040F",
  Input_Field_Border_Color: "#574192",
  Input_Field_Text_Color: "#FFFFFF",
  // Branding Configs
  Powered_By_Color: "#797B7C",
  // Icons Configs
  Copy_Icon_Color: "#FFFFFF",
  Menu_Icon_Color: "#FFFFFF",
  Minimise_Icon_Color: "#FFFFFF",
  Resize_Icon_Color: "#FFFFFF",
  Close_Icon_Color: "#FFFFFF",
  Send_Icon_Color: "#797B7C",
  Regen_Icon_Color: "#797B7C",
  Conversations_Icon: "#FFFFFF",
  // Chat Suggestion Configs
  Chat_Suggestions_Background_Color: "#574192",
  Chat_Suggestions_Text_Color: "#FFFFFF",
  Chat_Suggestions_Border_Color: "#373562",
  Chat_Suggestions_Hover_Background_Color: "#373562",
}
// These options allow you to customize the visual appearance of the Copilot widget in your application.
// Adjust the color values according to your design preferences.
```
## How to add user data & agent id?
your can use `addUserDetails` & `addAgentId` functions from `useConfigData` context.

> <strong>addUserDetails</strong> 
>> It accepts a object parameter with `name`, `email` & `user_id` properties.

> <strong>addAgentId</strong>
>> It accepts agentId parameter of type string.

```js
const {addUserDetails, addAgentId} = useConfigData()

eg:
useEffect(()=>{
	addUserDetails({name : "gappy.ai", email : "gappy@ai.com", user_id : "gappy_ai"})
	addAgentId("your_agent_id")
},[])
```


## useMakeCopilotReadable
A context for providing app-state & other information to the Copilot.

`useMakeCopilotReadable` is a React hook that provides app-state and other information to the Copilot. This will help copilot to give response based on the app-state that you will provide.

`useMakeCopilotReadable` exports two functions `addDataToState` & `removeDataFromState`

## addDataToState

This function adds data to the application state map.

### Parameters

- `ids`: An array of strings representing the keys to traverse the nested map.
- `key`: A string representing the key allocated to the provided data at final nested level.
- `data`: A string representing the data to be stored.

### Usage

```typescript
import {useMakeCopilotReadable} from "@gappy/gappy-react"

const {addDataToState} = useMakeCopilotReadable()

addDataToState(["engine"], "temperature", "85°C");
addDataToState(["cabin"], "temperature", "20°C");
```

```js
// JSON representation of the state map after adding temperature data for engine and cabin:
{
  "engine": {
    "temperature": "85°C"
  },
  "cabin": {
    "temperature": "20°C"
  }
}
```


## removeDataFromState

This function removes `value` with respect to `key` from the application state map.

### Parameters

- `ids`: An array of strings representing the keys to traverse the nested map.

### Usage

```typescript
import {useMakeCopilotReadable} from "@gappy/gappy-react"

const {removeDataFromState} = useMakeCopilotReadable()

removeDataFromState(["key1" , "key2" , "key3"])
```

```js
    // Before
    
	"key1" : {
    	"key2" : {
        	"key3" : "key-value to be deleted",
            "key4" : ""
        }
    }
```


```js
    // After
    
	"key1" : {
    	"key2" : {
        	"key4" : ""
        }
    }
```

## How to use

1. Click on the trigger element to open the widget.
2. Type your message and press enter to send it or you can click mic to give input through spoken words.

<img width="1137" alt="Screenshot 2024-03-20 at 1 25 25 PM" src="https://github.com/gappyai/gappy-react-sdk/assets/75539409/5e0fb6a4-2e77-43b2-ba75-08917ededad0">

## Graphs


<div align="center">
    <table >
     <tr>
        <td><b>Bar Graph</b></td>
        <td><b>Line Graph</b></td>
        <td><b>Scatter Plot</b></td>
        <td><b>Candle Chart</b></td>
     </tr>
     <tr>
       <td>
<img width="627" alt="bar" src="https://github.com/gappyai/gappy-react-sdk/assets/75539409/b2f24a4b-fc04-4bdd-be0e-f4fc0ab37a35"></td>
        <td> 
<img width="661" alt="line" src="https://github.com/gappyai/gappy-react-sdk/assets/75539409/37a5d85b-94d0-4be7-b218-6d8e4685eb02"></td>
	     <td>
		     <img width="607" alt="scatter" src="https://github.com/gappyai/gappy-react-sdk/assets/75539409/d845b164-a9a5-4159-9b70-fecad4840d05"></td>
	     <td>
		     <img width="609" alt="candle" src="https://github.com/gappyai/gappy-react-sdk/assets/75539409/16188da8-93b5-455b-b0b5-4383e0e404e3"></td>
     </tr>
    </table>
    </div>