LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-12-01 17:43:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add DocsGPTWidget embedding support for HTML

Browse Source
This commit is contained in:
ilyasosman
2024-05-19 22:08:18 +03:00
parent 6753b55160
commit d8720d0849
5 changed files with 360 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
extensions/react-widget/README.md
View File

@@ -11,6 +11,8 @@ npm install docsgpt
## Usage
### React
```javascript
import { DocsGPTWidget } from "docsgpt";
@@ -25,9 +27,9 @@ To link the widget to your api and your documents you can pass parameters to the
import { DocsGPTWidget } from "docsgpt";
const App = () => {
return <DocsGPTWidget
return <DocsGPTWidget
apiHost = 'http://localhost:7001',
selectDocs = 'default',
selectDocs = 'default',
apiKey = '',
avatar = 'https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png',
title = 'Get AI assistance',
@@ -38,6 +40,57 @@ To link the widget to your api and your documents you can pass parameters to the
};
```
### Html
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<div id="widget-container"></div>
<!-- Include the widget script -->
<script src="path/to/your/dist/main.js" type="module"></script>
<script type="module">
window.onload = function() {
renderDocsGPTWidget('widget-container');
}
</script>
</body>
</html>
```
To link the widget to your api and your documents you can pass parameters to the **renderDocsGPTWidget('div id', { parameters })**.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<div id="widget-container"></div>
<!-- Include the widget script -->
<script src="path/to/your/dist/main.js" type="module"></script>
<script type="module">
window.onload = function() {
renderDocsGPTWidget('widget-container', , {
apiHost: 'http://localhost:7001',
selectDocs: 'default',
apiKey: '',
avatar: 'https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png',
title: 'Get AI assistance',
description: "DocsGPT's AI Chatbot is here to help",
heroTitle: 'Welcome to DocsGPT !',
heroDescription: 'This chatbot is built with DocsGPT and utilises GenAI, please review important information using sources.'
});
}
</script>
</body>
</html>
```
## Our github

315
extensions/react-widget/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
extensions/react-widget/package.json
View File

@@ -18,7 +18,7 @@
"styled-components": "^5"
},
"scripts": {
"build": "parcel build src/index.ts",
"build": "parcel build src/main.tsx --public-url ./",
"dev": "parcel src/index.html -p 3000",
"test": "jest",
"lint": "eslint",
@@ -42,7 +42,6 @@
"i": "^0.3.7",
"install": "^0.13.0",
"npm": "^10.5.0",
"parcel": "^2.12.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-components": "^6.1.8"
@@ -55,6 +54,7 @@
"@parcel/transformer-typescript-types": "^2.12.0",
"@types/dompurify": "^3.0.5",
"babel-loader": "^8.0.4",
"parcel": "^2.12.0",
"process": "^0.11.10",
"typescript": "^5.3.3"
},

6
extensions/react-widget/src/index.html
View File

@@ -9,5 +9,11 @@
<body>
<div id="app"></div>
<script type="module" src="main.tsx"></script>
<script type="module" src="../dist/main.js"></script>
<script type="module">
window.onload = function() {
renderDocsGPTWidget('app');
}
</script>
</body>
</html>

10
extensions/react-widget/src/main.tsx
View File

@@ -1,6 +1,10 @@
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import React from 'react';
const root = createRoot(document.getElementById('app') as HTMLElement);
import { DocsGPTWidget } from './components/DocsGPTWidget';
root.render(<App />);
const renderWidget = (elementId: string, props = {}) => {
const root = createRoot(document.getElementById(elementId) as HTMLElement);
root.render(<DocsGPTWidget {...props} />);
};
(window as any).renderDocsGPTWidget = renderWidget;