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

3 weeks ago · 2c100825cc
parent df24cfff4f 558ecd84a6
commit 2c100825cc
7 changed files with 98 additions and 41 deletions
--- a/README.md
+++ b/README.md
@ -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.

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

 ![video-example-of-docs-gpt](https://d3dg1063dc54p9.cloudfront.net/videos/demov3.gif)
--- a/docs/pages/Extensions/react-widget.md
+++ b/docs/pages/Extensions/react-widget.md
@ -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)

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

        <div className="mb-4 flex flex-col items-center justify-center dark:text-white"></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(
          (demo: { header: string; query: string }, key: number) =>
            demo.header &&
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@ -19,7 +19,6 @@ import { FEEDBACK, Query } from './conversationModels';
 import { sendFeedback } from './conversationApi';
 import { useTranslation } from 'react-i18next';
 import ArrowDown from './../assets/arrow-down.svg';
-import RetryIcon from '../components/RetryIcon';
 export default function Conversation() {
  const queries = useSelector(selectQueries);
  const status = useSelector(selectStatus);
@ -176,13 +175,13 @@ export default function Conversation() {
      <div
        onWheel={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 && (
          <button
            onClick={scrollIntoView}
            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
              src={ArrowDown}
@ -214,29 +213,8 @@ export default function Conversation() {

        {queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
      </div>
-
-      {/* INPUTS VIEW */}
-      <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 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">
+        <div className="flex h-full w-full items-center rounded-full border border-silver bg-white dark:bg-raisin-black">
          <div
            id="inputbox"
            ref={inputRef}
@ -255,7 +233,7 @@ export default function Conversation() {
          {status === 'loading' ? (
            <img
              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>
          ) : (
            <div className="mx-1 cursor-pointer rounded-full p-4 text-center hover:bg-gray-3000">
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -408,3 +408,7 @@ template {
 ::-webkit-scrollbar {
  width: 0;
 }
+
+.bottom-safe {
+  bottom: env(safe-area-inset-bottom, 0);
+}
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@ -2,6 +2,24 @@ import { DocumentsProps } from '../models/misc';
 import Trash from '../assets/trash.svg';
 import PropTypes from 'prop-types';
 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> = ({
  documents,
  handleDeleteDocument,
@ -40,7 +58,7 @@ const Documents: React.FC<DocumentsProps> = ({
                      {document.date}
                    </td>
                    <td className="border-r border-t px-4 py-2">
-                      {document.tokens ? document.tokens : ''}
+                      {document.tokens ? formatTokens(+document.tokens) : ''}
                    </td>
                    <td className="border-r border-t px-4 py-2">
                      {document.location === 'remote'