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:

   <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.

   <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

   npm i @gappy/gappy-react

@gappy/gappy-react export two functions ChatWindowWithTrigger or ChatWindowWithoutTrigger.

ChatWindowWithoutTrigger

1. It renders the chat window without trigger button in your application.

ChatWindowWithTrigger

1. It renders the chat window along with the trigger button.
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

import { Root, ChatWindowWithoutTrigger, ChatWindowWithTrigger } from "@gappy/gappy-react"
import "@gappy/gappy-react/index.css";

2. Wrap your App component with contexts provided by gappy.

<Root options={options}>
   <App/>
</Root>

Now, import you copilot component inside your code.

   ....
   <CopilotWindowWithTrigger />
   ....

3. Provide options as a prop to Root.

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

interface CopilotProps {
  Theme ?: Theme_Type,
  hideCloseIcon ?: boolean        
  hideMinimiseIcon ?: boolean
  enableVoice ?: boolean    
  speechRecognitionMode ?: SpeechRecognitionModeType
}

Copilot Theme Configs.

// 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.

addUserDetails

It accepts a object parameter with name, email & user_id properties.

addAgentId

It accepts agentId parameter of type string.

const {addUserDetails, addAgentId} = useConfigData()

eg:
useEffect(()=>{
	addUserDetails({name : "gappy.ai", email : "[email protected]", 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

import {useMakeCopilotReadable} from "@gappy/gappy-react"

const {addDataToState} = useMakeCopilotReadable()

addDataToState(["engine"], "temperature", "85°C");
addDataToState(["cabin"], "temperature", "20°C");

// 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

import {useMakeCopilotReadable} from "@gappy/gappy-react"

const {removeDataFromState} = useMakeCopilotReadable()

removeDataFromState(["key1" , "key2" , "key3"])

    // Before
    
	"key1" : {
    	"key2" : {
        	"key3" : "key-value to be deleted",
            "key4" : ""
        }
    }

    // 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.

Graphs