diff --git a/docs/pages/Extensions/react-widget.md b/docs/pages/Extensions/react-widget.md index 1859b558..8429e377 100644 --- a/docs/pages/Extensions/react-widget.md +++ b/docs/pages/Extensions/react-widget.md @@ -29,18 +29,30 @@ Now, you can use the widget in your component like this : buttonBg = "#222327" /> ``` -To tailor the widget to your needs, you can configure the following props in your component: -1. `apiHost` — The URL of your DocsGPT API. -2. `theme` — Allows to select your specific theme (dark or light). -3. `apiKey` — Usually, it's empty. -4. `avatar`: Specifies the URL of the avatar or image representing the chatbot. -5. `title`: Sets the title text displayed in the chatbot interface. -6. `description`: Provides a brief description of the chatbot's purpose or functionality. -7. `heroTitle`: Displays a welcome title when users interact with the chatbot. -8. `heroDescription`: Provide additional introductory text or information about the chatbot's capabilities. -9. `buttonIcon`: Specifies the url of the icon image for the widget. -10. `buttonBg`: Allows to specify the Background color of the widget. -11. `size`: Sets the size of the widget ( small, medium). +### Props Table for DocsGPT Widget + +| **Prop** | **Type** | **Default Value** | **Description** | +|--------------------|------------------|-------------------------------------------------------------|-----------------------------------------------------------------------------------------------------| +| **`apiHost`** | `string` | `"https://gptcloud.arc53.com"` | The URL of your DocsGPT API for vector search and chatbot queries. | +| **`apiKey`** | `string` | `""` | Your API key for authentication. Can be left empty if authentication is not required. | +| **`avatar`** | `string` | `"https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png"` | Specifies the URL of the avatar or image representing the chatbot. | +| **`title`** | `string` | `"Get AI assistance"` | Sets the title text displayed in the chatbot interface. | +| **`description`** | `string` | `"DocsGPT's AI Chatbot is here to help"` | Provides a brief description of the chatbot's purpose or functionality. | +| **`heroTitle`** | `string` | `"Welcome to DocsGPT !"` | Displays a welcome title when users interact with the chatbot. | +| **`heroDescription`** | `string` | `"This chatbot is built with DocsGPT and utilises GenAI, please review important information using sources."` | Provides additional introductory text or information about the chatbot's capabilities. | +| **`theme`** | `"dark" \| "light"` | `"dark"` | Allows you to select the theme for the chatbot interface. Accepts `"dark"` or `"light"`. | +| **`buttonIcon`** | `string` | `"https://your-icon"` | Specifies the URL of the icon image for the widget's launch button. | +| **`buttonBg`** | `string` | `"#222327"` | Sets the background color of the widget's launch button. | +| **`size`** | `"small" \| "medium"` | `"medium"` | Sets the size of the widget. Options are `"small"` or `"medium"`. | + +--- + +### Notes +- **Customizing Props:** All properties can be overridden when embedding the widget. For example, you can provide a unique avatar, title, or color scheme to better align with your brand. +- **Default Theme:** The widget defaults to the dark theme unless explicitly set to `"light"`. +- **API Key:** If the `apiKey` is not required for your application, leave it empty. + +This table provides a clear overview of the customization options available for tailoring the DocsGPT widget to fit your application. ### How to use DocsGPTWidget with [Nextra](https://nextra.site/) (Next.js + MDX) @@ -121,5 +133,80 @@ To link the widget to your api and your documents you can pass parameters to the ``` +# SearchBar + +The `SearchBar` component is an interactive search bar designed to provide search results based on **vector similarity search**. It also includes the capability to open the AI Chatbot, enabling users to query. + +--- + +### Importing the Component +```tsx +import { SearchBar } from "docsgpt-react"; +``` + +--- + +### Usage Example +```tsx + +``` + +--- + +## HTML embedding for Search bar + +```html + + + + + + SearchBar Embedding + + + + +
+ + + + + +``` + +### Props + +| **Prop** | **Type** | **Default Value** | **Description** | +|-----------------|-----------|-------------------------------------|--------------------------------------------------------------------------------------------------| +| **`apiKey`** | `string` | `"74039c6d-bff7-44ce-ae55-2973cbf13837"` | Your API key generated from the app. Used for authenticating requests. | +| **`apiHost`** | `string` | `"https://gptcloud.arc53.com"` | The base URL of the server hosting the vector similarity search and chatbot services. | +| **`theme`** | `"dark" \| "light"` | `"dark"` | The theme of the search bar. Accepts `"dark"` or `"light"`. | +| **`placeholder`** | `string` | `"Search or Ask AI..."` | Placeholder text displayed in the search input field. | +| **`width`** | `string` | `"256px"` | Width of the search bar. Accepts any valid CSS width value (e.g., `"300px"`, `"100%"`, `"20rem"`). | + + +Feel free to reach out if you need help customizing or extending the `SearchBar`! + +## Our github + +[DocsGPT](https://github.com/arc53/DocsGPT) + +You can find the source code in the extensions/react-widget folder. + For more information about React, refer to this [link here](https://react.dev/learn) diff --git a/extensions/react-widget/README.md b/extensions/react-widget/README.md index b4159578..5b6222d2 100644 --- a/extensions/react-widget/README.md +++ b/extensions/react-widget/README.md @@ -13,7 +13,7 @@ npm install docsgpt ### React ```javascript - import { DocsGPTWidget } from "docsgpt"; + import { DocsGPTWidget } from "docsgpt-react"; const App = () => { return ; @@ -23,11 +23,11 @@ npm install docsgpt To link the widget to your api and your documents you can pass parameters to the component. ```javascript - import { DocsGPTWidget } from "docsgpt"; + import { DocsGPTWidget } from "docsgpt-react"; const App = () => { return ``` +# SearchBar + +The `SearchBar` component is an interactive search bar designed to provide search results based on **vector similarity search**. It also includes the capability to open the AI Chatbot, enabling users to query. + +--- + +### Importing the Component +```tsx +import { SearchBar } from "docsgpt-react"; +``` + +--- + +### Usage Example +```tsx + +``` + +--- + +## HTML embedding for Search bar + +```html + + + + + + SearchBar Embedding + + + + +
+ + + + + +``` + +### Props + +| **Prop** | **Type** | **Default Value** | **Description** | +|-----------------|-----------|-------------------------------------|--------------------------------------------------------------------------------------------------| +| **`apiKey`** | `string` | `"74039c6d-bff7-44ce-ae55-2973cbf13837"` | Your API key generated from the app. Used for authenticating requests. | +| **`apiHost`** | `string` | `"https://gptcloud.arc53.com"` | The base URL of the server hosting the vector similarity search and chatbot services. | +| **`theme`** | `"dark" \| "light"` | `"dark"` | The theme of the search bar. Accepts `"dark"` or `"light"`. | +| **`placeholder`** | `string` | `"Search or Ask AI..."` | Placeholder text displayed in the search input field. | +| **`width`** | `string` | `"256px"` | Width of the search bar. Accepts any valid CSS width value (e.g., `"300px"`, `"100%"`, `"20rem"`). | + + +Feel free to reach out if you need help customizing or extending the `SearchBar`! + ## Our github [DocsGPT](https://github.com/arc53/DocsGPT)