Skip to content

Commit

Permalink
Merge pull request #1450 from ManishMadan2882/main
Browse files Browse the repository at this point in the history
React Widget: Updating to v0.4.8
  • Loading branch information
dartpain authored Nov 22, 2024
2 parents 92d9086 + ce975c5 commit 2e02304
Show file tree
Hide file tree
Showing 11 changed files with 433 additions and 57 deletions.
237 changes: 226 additions & 11 deletions docs/package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"license": "MIT",
"dependencies": {
"@vercel/analytics": "^1.1.1",
"docsgpt": "^0.4.7",
"docsgpt-react": "^0.4.8",
"next": "^14.2.12",
"nextra": "^2.13.2",
"nextra-theme-docs": "^2.13.2",
Expand Down
111 changes: 99 additions & 12 deletions docs/pages/Extensions/react-widget.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -121,5 +133,80 @@ To link the widget to your api and your documents you can pass parameters to the
</html>
```

# 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
<SearchBar
apiKey="your-api-key"
apiHost="https://gptcloud.arc53.com"
theme="light"
placeholder="Search or Ask AI..."
width="300px"
/>
```

---

## HTML embedding for Search bar

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SearchBar Embedding</title>
<script src="https://unpkg.com/docsgpt/dist/modern/main.js"></script> <!-- The bundled JavaScript file -->
</head>
<body>
<!-- Element where the SearchBar will render -->
<div id="search-bar-container"></div>

<script>
// Render the SearchBar into the specified element
renderSearchBar('search-bar-container', {
apiKey: 'your-api-key-here',
apiHost: 'https://your-api-host.com',
theme: 'light',
placeholder: 'Search here...',
width: '300px'
});
</script>
</body>
</html>

```

### 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)

2 changes: 1 addition & 1 deletion docs/pages/_app.mdx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { DocsGPTWidget } from "docsgpt";
import { DocsGPTWidget } from "docsgpt-react";

export default function MyApp({ Component, pageProps }) {
return (
Expand Down
75 changes: 72 additions & 3 deletions extensions/react-widget/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ npm install docsgpt
### React

```javascript
import { DocsGPTWidget } from "docsgpt";
import { DocsGPTWidget } from "docsgpt-react";

const App = () => {
return <DocsGPTWidget />;
Expand All @@ -23,11 +23,11 @@ npm install docsgpt
To link the widget to your api and your documents you can pass parameters to the <DocsGPTWidget /> component.

```javascript
import { DocsGPTWidget } from "docsgpt";
import { DocsGPTWidget } from "docsgpt-react";

const App = () => {
return <DocsGPTWidget
apiHost="https://your-docsgpt-api.com"
apiHost="https://gptcloud.arc53.com"
apiKey=""
avatar = "https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png"
title = "Get AI assistance"
Expand Down Expand Up @@ -101,6 +101,75 @@ To link the widget to your api and your documents you can pass parameters to the
</html>
```

# 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
<SearchBar
apiKey="your-api-key"
apiHost="https://gptcloud.arc53.com"
theme="light"
placeholder="Search or Ask AI..."
width="300px"
/>
```

---

## HTML embedding for Search bar

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SearchBar Embedding</title>
<script src="https://unpkg.com/docsgpt/dist/modern/main.js"></script> <!-- The bundled JavaScript file -->
</head>
<body>
<!-- Element where the SearchBar will render -->
<div id="search-bar-container"></div>

<script>
// Render the SearchBar into the specified element
renderSearchBar('search-bar-container', {
apiKey: 'your-api-key-here',
apiHost: 'https://your-api-host.com',
theme: 'light',
placeholder: 'Search here...',
width: '300px'
});
</script>
</body>
</html>

```

### 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)
Expand Down
4 changes: 2 additions & 2 deletions extensions/react-widget/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions extensions/react-widget/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "docsgpt",
"version": "0.4.7",
"name": "docsgpt-react",
"version": "0.4.8",
"private": false,
"description": "DocsGPT 🦖 is an innovative open-source tool designed to simplify the retrieval of information from project documentation using advanced GPT models 🤖.",
"source": "./src/index.html",
Expand Down Expand Up @@ -30,9 +30,9 @@
"styled-components": "^5"
},
"scripts": {
"build": "parcel build src/main.tsx --public-url ./",
"build": "parcel build src/browser.tsx --public-url ./",
"build:react": "parcel build src/index.ts",
"serve": "parcel serve -p 3000",
"serve": "parcel serve -p 3000",
"dev": "parcel -p 3000",
"test": "jest",
"lint": "eslint",
Expand Down
22 changes: 22 additions & 0 deletions extensions/react-widget/src/browser.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
//exports browser ready methods

import { createRoot } from "react-dom/client";

import { DocsGPTWidget } from './components/DocsGPTWidget';
import { SearchBar } from './components/SearchBar';
import React from "react";
if (typeof window !== 'undefined') {
const renderWidget = (elementId: string, props = {}) => {
const root = createRoot(document.getElementById(elementId) as HTMLElement);
root.render(<DocsGPTWidget {...props} />);
};
const renderSearchBar = (elementId: string, props = {}) => {
const root = createRoot(document.getElementById(elementId) as HTMLElement);
root.render(<SearchBar {...props} />);
};
(window as any).renderDocsGPTWidget = renderWidget;

(window as any).renderSearchBar = renderSearchBar;
}

export { DocsGPTWidget, SearchBar };
6 changes: 3 additions & 3 deletions extensions/react-widget/src/components/SearchBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ const SearchResults = styled.div`
position: absolute;
display: block;
background-color: ${props => props.theme.primary.bg};
opacity: 90%;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 12px;
padding: 8px;
Expand Down Expand Up @@ -287,7 +286,7 @@ export const SearchBar = ({
debounceTimeout.current = setTimeout(() => {
getSearchResults(input, apiKey, apiHost, abortController.signal)
.then((data) => setResults(data))
.catch((err) => console.log(err))
.catch((err) => !abortController.signal.aborted && console.log(err))
.finally(() => setLoading(false));
}, 500);

Expand Down Expand Up @@ -340,10 +339,11 @@ export const SearchBar = ({
</InfoButton>
{!loading ?
(results.length > 0 ?
results.map((res) => {
results.map((res, key) => {
const containsSource = res.source !== 'local';
return (
<ResultWrapper
key={key}
onClick={() => {
if (!containsSource) return;
window.open(res.source, '_blank', 'noopener, noreferrer')
Expand Down
1 change: 1 addition & 0 deletions extensions/react-widget/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
//exports methods for React
export {SearchBar} from "./components/SearchBar"
export { DocsGPTWidget } from "./components/DocsGPTWidget";
22 changes: 2 additions & 20 deletions extensions/react-widget/src/main.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,7 @@

//development
import { createRoot } from "react-dom/client";
import { App } from "./App";
import { DocsGPTWidget } from './components/DocsGPTWidget';
import { SearchBar } from './components/SearchBar';
import React from "react";
if (typeof window !== 'undefined') {
const renderWidget = (elementId: string, props = {}) => {
const root = createRoot(document.getElementById(elementId) as HTMLElement);
root.render(<DocsGPTWidget {...props} />);
};
const renderSearchBar = (elementId: string, props = {}) => {
const root = createRoot(document.getElementById(elementId) as HTMLElement);
root.render(<SearchBar {...props} />);
};
(window as any).renderDocsGPTWidget = renderWidget;

(window as any).renderSearchBar = renderSearchBar;
}
const container = document.getElementById("app") as HTMLElement;
const root = createRoot(container)
root.render(<App />);

export { DocsGPTWidget };
export { SearchBar }
root.render(<App />);

0 comments on commit 2e02304

Please sign in to comment.