LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 08:33:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/utin-francis-peter/DocsGPT into fix/retry-btn

Browse Source
This commit is contained in:
utin-francis-peter
2024-06-13 23:25:33 +01:00
parent df24cfff4f 558ecd84a6
commit 2c100825cc
7 changed files with 98 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -27,7 +27,7 @@ Say goodbye to time-consuming manual searches, and let <strong><a href="https://
We're eager to provide personalized assistance when deploying your DocsGPT to a live environment. We're eager to provide personalized assistance when deploying your DocsGPT to a live environment.
- [Book Enterprise Demo :wave:](https://airtable.com/appdeaL0F1qV8Bl2C/shrrJF1Ll7btCJRbP) - [Get Enterprise / teams Demo :wave:](https://www.docsgpt.cloud/contact)
- [Send Email :email:](mailto:contact@arc53.com?subject=DocsGPT%20support%2Fsolutions) - [Send Email :email:](mailto:contact@arc53.com?subject=DocsGPT%20support%2Fsolutions)
![video-example-of-docs-gpt](https://d3dg1063dc54p9.cloudfront.net/videos/demov3.gif) ![video-example-of-docs-gpt](https://d3dg1063dc54p9.cloudfront.net/videos/demov3.gif)

53
docs/pages/Extensions/react-widget.md
View File

@@ -51,6 +51,59 @@ export default function MyApp({ Component, pageProps }) {
) )
} }
``` ```
### How to use DocsGPTWidget with HTML
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DocsGPT Widget</title>
</head>
<body>
<div id="app"></div>
<!-- Include the widget script from dist/modern or dist/legacy -->
<script src="https://unpkg.com/docsgpt/dist/modern/main.js" type="module"></script>
<script type="module">
window.onload = function() {
renderDocsGPTWidget('app');
}
</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>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DocsGPT Widget</title>
</head>
<body>
<div id="app"></div>
<!-- Include the widget script from dist/modern or dist/legacy -->
<script src="https://unpkg.com/docsgpt/dist/modern/main.js" type="module"></script>
<script type="module">
window.onload = function() {
renderDocsGPTWidget('app', {
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>
```
For more information about React, refer to this [link here](https://react.dev/learn) For more information about React, refer to this [link here](https://react.dev/learn)

26
frontend/index.html
View File

@@ -1,13 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" /> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta charset="UTF-8" />
<title>DocsGPT 🦖</title> <meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> <meta name="apple-mobile-web-app-capable" content="yes">
</head> <title>DocsGPT 🦖</title>
<body> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<div id="root" class="h-screen"></div> </head>
<script type="module" src="/src/main.tsx"></script>
</body> <body>
</html> <div id="root" class="h-screen"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

2
frontend/src/Hero.tsx
View File

@@ -29,7 +29,7 @@ export default function Hero({
<div className="mb-4 flex flex-col items-center justify-center dark:text-white"></div> <div className="mb-4 flex flex-col items-center justify-center dark:text-white"></div>
</div> </div>
<div className="grid w-full grid-cols-1 items-center gap-4 self-center text-xs sm:w-auto sm:gap-6 md:text-sm lg:grid-cols-2"> <div className="mb-16 grid w-full grid-cols-1 items-center gap-4 self-center text-xs sm:w-auto sm:gap-6 md:mb-0 md:text-sm lg:grid-cols-2">
{demos?.map( {demos?.map(
(demo: { header: string; query: string }, key: number) => (demo: { header: string; query: string }, key: number) =>
demo.header && demo.header &&

32
frontend/src/conversation/Conversation.tsx
View File

@@ -19,7 +19,6 @@ import { FEEDBACK, Query } from './conversationModels';
import { sendFeedback } from './conversationApi'; import { sendFeedback } from './conversationApi';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import ArrowDown from './../assets/arrow-down.svg'; import ArrowDown from './../assets/arrow-down.svg';
import RetryIcon from '../components/RetryIcon';
export default function Conversation() { export default function Conversation() {
const queries = useSelector(selectQueries); const queries = useSelector(selectQueries);
const status = useSelector(selectStatus); const status = useSelector(selectStatus);
@@ -176,13 +175,13 @@ export default function Conversation() {
<div <div
onWheel={handleUserInterruption} onWheel={handleUserInterruption}
onTouchMove={handleUserInterruption} onTouchMove={handleUserInterruption}
className="flex h-[85vh] w-full flex-1 justify-center overflow-y-auto p-4" className="flex h-[90%] w-full justify-center overflow-y-auto p-4 md:h-[84vh]"
> >
{queries.length > 0 && !hasScrolledToLast && ( {queries.length > 0 && !hasScrolledToLast && (
<button <button
onClick={scrollIntoView} onClick={scrollIntoView}
aria-label="scroll to bottom" aria-label="scroll to bottom"
className="fixed bottom-32 right-14 z-10 flex h-7 w-7 items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 bg-opacity-50 dark:bg-purple-taupe md:h-9 md:w-9 md:bg-opacity-100 " className="fixed bottom-40 right-14 z-10 flex h-7 w-7 items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 bg-opacity-50 dark:bg-purple-taupe md:h-9 md:w-9 md:bg-opacity-100 "
> >
<img <img
src={ArrowDown} src={ArrowDown}
@@ -214,29 +213,8 @@ export default function Conversation() {
{queries.length === 0 && <Hero handleQuestion={handleQuestion} />} {queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
</div> </div>
<div className="bottom-safe fixed flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-6/12">
{/* INPUTS VIEW */} <div className="flex h-full w-full items-center rounded-full border border-silver bg-white dark:bg-raisin-black">
<div className="bottom-0 flex w-11/12 flex-col items-end self-center bg-white pt-1 dark:bg-raisin-black sm:w-6/12">
{lastQueryReturnedErr && (
<button
className="mb-2 flex items-center justify-center gap-3 self-center rounded-full border border-silver py-3 px-8 text-lg text-gray-500 transition-colors delay-100 hover:border-gray-500 disabled:cursor-not-allowed dark:text-bright-gray"
disabled={status === 'loading'}
onClick={() => {
handleQuestion({
question: queries[queries.length - 1].prompt,
isRetry: true,
});
}}
>
<RetryIcon
fill={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
stroke={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
/>
Retry
</button>
)}
<div className="flex h-full w-full items-center rounded-full border border-silver">
<div <div
id="inputbox" id="inputbox"
ref={inputRef} ref={inputRef}
@@ -255,7 +233,7 @@ export default function Conversation() {
{status === 'loading' ? ( {status === 'loading' ? (
<img <img
src={isDarkTheme ? SpinnerDark : Spinner} src={isDarkTheme ? SpinnerDark : Spinner}
className="relative right-[38px] bottom-[15px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent" className="relative right-[38px] bottom-[24px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
></img> ></img>
) : ( ) : (
<div className="mx-1 cursor-pointer rounded-full p-4 text-center hover:bg-gray-3000"> <div className="mx-1 cursor-pointer rounded-full p-4 text-center hover:bg-gray-3000">

4
frontend/src/index.css
View File

@@ -408,3 +408,7 @@ template {
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0; width: 0;
} }
.bottom-safe {
bottom: env(safe-area-inset-bottom, 0);
}

20
frontend/src/settings/Documents.tsx
View File

@@ -2,6 +2,24 @@ import { DocumentsProps } from '../models/misc';
import Trash from '../assets/trash.svg'; import Trash from '../assets/trash.svg';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
// Utility function to format numbers
const formatTokens = (tokens: number): string => {
const roundToTwoDecimals = (num: number): string => {
return (Math.round((num + Number.EPSILON) * 100) / 100).toString();
};
if (tokens >= 1_000_000_000) {
return roundToTwoDecimals(tokens / 1_000_000_000) + 'b';
} else if (tokens >= 1_000_000) {
return roundToTwoDecimals(tokens / 1_000_000) + 'm';
} else if (tokens >= 1_000) {
return roundToTwoDecimals(tokens / 1_000) + 'k';
} else {
return tokens.toString();
}
};
const Documents: React.FC<DocumentsProps> = ({ const Documents: React.FC<DocumentsProps> = ({
documents, documents,
handleDeleteDocument, handleDeleteDocument,
@@ -40,7 +58,7 @@ const Documents: React.FC<DocumentsProps> = ({
{document.date} {document.date}
</td> </td>
<td className="border-r border-t px-4 py-2"> <td className="border-r border-t px-4 py-2">
{document.tokens ? document.tokens : ''} {document.tokens ? formatTokens(+document.tokens) : ''}
</td> </td>
<td className="border-r border-t px-4 py-2"> <td className="border-r border-t px-4 py-2">
{document.location === 'remote' {document.location === 'remote'