@gappy/gappy-react v1.1.10
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
Download the latest build artifact from the actions tab.
Extract the zip file.
Copy the
assets/*
folder to your project. this folder contains css and js files that are needed for the widget to work.Add the js file in your html file as follows:
<script src="[some_js_file].js"></script>
Don't add the css file in your html file, instead, the script will inject the css files dynamically.
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
- Install
@gappy/gappy-react
npm package
npm i @gappy/gappy-react
@gappy/gappy-react
export two functions ChatWindowWithTrigger
or ChatWindowWithoutTrigger
.
ChatWindowWithoutTrigger
- It renders the chat window without trigger button in your application.
ChatWindowWithTrigger
- It renders the chat window along with the trigger button.
- You can open/close chat window using the trigger button.
- chat-window will have position fixed and will be displayed on bottom-right corner of the screen.
- Import Root,
ChatWindowWithTrigger
orChatWindowWithoutTrigger
and index.css from@gappy/gappy-react
import { Root, ChatWindowWithoutTrigger, ChatWindowWithTrigger } from "@gappy/gappy-react"
import "@gappy/gappy-react/index.css";
- Wrap your App component with contexts provided by gappy.
<Root options={options}>
<App/>
</Root>
Now, import you copilot component inside your code.
....
<CopilotWindowWithTrigger />
....
- 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
,user_id
properties.addAgentId
It accepts agentId parameter of type string.
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
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
- Click on the trigger element to open the widget.
- Type your message and press enter to send it or you can click mic to give input through spoken words.
Graphs
8 days ago
13 days ago
13 days ago
14 days ago
14 days ago
15 days ago
15 days ago
20 days ago
22 days ago
22 days ago
22 days ago
23 days ago
22 days ago
22 days ago
22 days ago
27 days ago
28 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago