# @gappy/gappy-react > 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. Latest version **1.1.12** (published 2024-05-15) · 0 weekly downloads ## Install ```sh npm install @gappy/gappy-react pnpm add @gappy/gappy-react yarn add @gappy/gappy-react bun add @gappy/gappy-react ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.12 | | Published | 2024-05-15 | | First published | 2024-02-27 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 30 | | Unpacked size | 378.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | openchatai | | Maintainers | abhaybisht2002 | ## Links - npm: https://www.npmjs.com/package/@gappy/gappy-react - Issues: https://github.com/openchatai/gappy/issues - npm.io page: https://npm.io/package/@gappy/gappy-react ## Dependencies (30) - [npm](https://npm.io/package/npm.md) ^10.5.2 - [clsx](https://npm.io/package/clsx.md) ^2.1.0 - [axios](https://npm.io/package/axios.md) ^1.6.8 - [install](https://npm.io/package/install.md) ^0.13.0 - [@nivo/bar](https://npm.io/package/@nivo/bar.md) ^0.80.0 - [plotly.js](https://npm.io/package/plotly.js.md) ^2.32.0 - [react-rnd](https://npm.io/package/react-rnd.md) ^10.4.1 - [@nivo/core](https://npm.io/package/@nivo/core.md) ^0.80.0 - [@nivo/line](https://npm.io/package/@nivo/line.md) ^0.80.0 - [rehype-raw](https://npm.io/package/rehype-raw.md) ^7.0.0 - [@types/node](https://npm.io/package/@types/node.md) ^20.11.25 - [html2canvas](https://npm.io/package/html2canvas.md) ^1.4.1 - [@types/react](https://npm.io/package/@types/react.md) ^18.2.64 - [lucide-react](https://npm.io/package/lucide-react.md) ^0.302.0 - [re-resizable](https://npm.io/package/re-resizable.md) ^6.9.11 - [react-plotly.js](https://npm.io/package/react-plotly.js.md) ^2.6.0 - [react-resizable](https://npm.io/package/react-resizable.md) ^3.0.5 - [@types/plotly.js](https://npm.io/package/@types/plotly.js.md) ^2.29.2 - [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.2.21 - [socket.io-client](https://npm.io/package/socket.io-client.md) ^4.7.4 - [@nivo/scatterplot](https://npm.io/package/@nivo/scatterplot.md) ^0.80.0 - [@wixc3/react-board](https://npm.io/package/@wixc3/react-board.md) ^2.4.0 - [lightweight-charts](https://npm.io/package/lightweight-charts.md) ^4.1.3 - [tailwind-scrollbar](https://npm.io/package/tailwind-scrollbar.md) ^3.1.0 - [regenerator-runtime](https://npm.io/package/regenerator-runtime.md) ^0.14.1 - [@types/react-plotly.js](https://npm.io/package/@types/react-plotly.js.md) ^2.6.3 - [react-speech-recognition](https://npm.io/package/react-speech-recognition.md) ^3.10.0 - [@types/regenerator-runtime](https://npm.io/package/@types/regenerator-runtime.md) ^0.13.5 - [@uiw/react-markdown-preview](https://npm.io/package/@uiw/react-markdown-preview.md) ^5.1.1 - [@types/react-speech-recognition](https://npm.io/package/@types/react-speech-recognition.md) ^3.9.5 ## Recent versions - 1.1.12 (latest) — 2024-05-15 - 1.1.11 — 2024-05-15 - 1.1.10 — 2024-04-24 - 1.1.9 — 2024-04-19 - 1.1.8 — 2024-04-19 - 1.1.7 — 2024-04-18 - 1.1.6 — 2024-04-18 - 1.1.5 — 2024-04-17 - 1.1.4 — 2024-04-17 - 1.1.3 — 2024-04-12 - 1.1.2 — 2024-04-10 - 1.1.1 — 2024-04-10 - 1.1.0 — 2024-04-10 - 1.0.32 — 2024-04-10 - 1.0.31 — 2024-04-10 - … 33 more at https://npm.io/package/@gappy/gappy-react/versions ## README # 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 ``` 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 ``` ## 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`. > 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` ```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 ``` Now, import you copilot component inside your code. ```js .... .... ``` 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" } // copilot component ``` ## 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. > addUserDetails >> It accepts a object parameter with `name`, `email` & `user_id` properties. > addAgentId >> 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. Screenshot 2024-03-20 at 1 25 25 PM ## Graphs
Bar Graph Line Graph Scatter Plot Candle Chart
bar line scatter candle
--- _Source: https://npm.io/package/@gappy/gappy-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._