Merge branch 'main' of https://github.com/SamsShow/DocsGPT

docs/pages/Deploying/Hosting-the-app.md

@@ -102,3 +102,7 @@ Repeat the process for port `7091`.
 #### Access your instance
 
 Your instance is now available at your Public IP Address on port 5173. Enjoy using DocsGPT!
+
+## Other Deployment Options
+
+- [Deploy DocsGPT on Civo Compute Cloud](https://dev.to/rutamhere/deploying-docsgpt-on-civo-compute-c)

docs/pages/Developing/API-docs.md

@@ -1,9 +1,25 @@
-Currently, the application provides the following main API endpoints:
+# API Endpoints Documentation
 
-### /api/answer 
-It's a POST request that sends a JSON in body with 4 values. It will receive an answer for a user provided question.
-Here is a JavaScript fetch example:
+*Currently, the application provides the following main API endpoints:*
 
+
+### 1. /api/answer 
+**Description:**
+
+This endpoint is used to request answers to user-provided questions.
+
+**Request:**
+
+Method: POST
+Headers: Content-Type should be set to "application/json; charset=utf-8"
+Request Body: JSON object with the following fields:
+* **question:** The user's question
+* **history:** (Optional) Previous conversation history
+* **api_key:** Your API key
+* **embeddings_key:** Your embeddings key
+* **active_docs:** The location of active documentation
+
+Here is a JavaScript Fetch Request example:
 ```js
 // answer (POST http://127.0.0.1:5000/api/answer)
 fetch("http://127.0.0.1:5000/api/answer", {
@@ -18,8 +34,9 @@ fetch("http://127.0.0.1:5000/api/answer", {
 .then(console.log.bind(console))
 ```
 
-In response, you will get a JSON document like this one:
+**Response**
 
+In response, you will get a JSON document containing the answer,query and the result:
 ```json
 {
   "answer": " Hi there! How can I help you?\n",
@@ -28,10 +45,17 @@ In response, you will get a JSON document like this one:
 }
 ```
 
-### /api/docs_check
-It will make sure documentation is loaded on a server (just run it every time user is switching between libraries (documentations)).
-It's a POST request that sends a JSON in a body with 1 value. Here is a JavaScript fetch example:
+### 2. /api/docs_check
+
+**Description:**
+
+This endpoint will make sure documentation is loaded on the server (just run it every time user is switching between libraries (documentations)).
+
+**Request:**
 
+Headers: Content-Type should be set to "application/json; charset=utf-8"
+Request Body: JSON object with the field:
+* **docs:** The location of the documentation
 ```js
 // answer (POST http://127.0.0.1:5000/api/docs_check)
 fetch("http://127.0.0.1:5000/api/docs_check", {
@@ -45,26 +69,46 @@ fetch("http://127.0.0.1:5000/api/docs_check", {
 .then(console.log.bind(console))
 ```
 
-In response, you will get a JSON document like this one:
+**Response:**
+
+In response, you will get a JSON document like this one indicating whether the documentation exists or not.:
 ```json
 {
   "status": "exists"
 }
 ```
 
 
-### /api/combine
-Provides JSON that tells UI which vectors are available and where they are located with a simple get request.
+### 3. /api/combine
+**Description:**
+
+This endpoint provides information about available vectors and their locations with a simple GET request.
+
+**Request:**
+
+Method: GET
+
+**Response:**
 
 Response will include:
 `date`, `description`, `docLink`, `fullName`, `language`, `location` (local or docshub), `model`, `name`, `version`.
 
+
 Example of JSON in Docshub and local:
+
 <img width="295" alt="image" src="https://user-images.githubusercontent.com/15183589/224714085-f09f51a4-7a9a-4efb-bd39-798029bb4273.png">
 
 
-### /api/upload
-Uploads file that needs to be trained, response is JSON with task ID, which can be used to check on task's progress
+### 4. /api/upload
+**Description:**
+
+This endpoint is used to upload a file that needs to be trained, response is JSON with task ID, which can be used to check on task's progress.
+
+**Request:**
+
+Method: POST
+Request Body: A multipart/form-data form with file upload and additional fields, including "user" and "name."
+
 HTML example:
 
 ```html
@@ -79,20 +123,24 @@ HTML example:
 </form>
 ```
 
-Response:
-```json
-{
-  "status": "ok",
-  "task_id": "b2684988-9047-428b-bd47-08518679103c"
-}
+**Response:**
+
+JSON response with a status and a task ID that can be used to check the task's progress.
 
-```
 
-### /api/task_status
-Gets task status (`task_id`) from `/api/upload`:
+### 5. /api/task_status
+**Description:**
+
+This endpoint is used to get the status of a task (`task_id`) from `/api/upload`
+
+**Request:**
+Method: GET
+Query Parameter: task_id (task ID to check)
+
+**Sample JavaScript Fetch Request:**
 ```js
 // Task status (Get http://127.0.0.1:5000/api/task_status)
-fetch("http://localhost:5001/api/task_status?task_id=b2d2a0f4-387c-44fd-a443-e4fe2e7454d1", {
+fetch("http://localhost:5001/api/task_status?task_id=YOUR_TASK_ID", {
       "method": "GET",
       "headers": {
             "Content-Type": "application/json; charset=utf-8"
@@ -102,7 +150,8 @@ fetch("http://localhost:5001/api/task_status?task_id=b2d2a0f4-387c-44fd-a443-e4f
 .then(console.log.bind(console))
 ```
 
-Responses:
+**Response:**
+
 There are two types of responses:
 
 1. While the task is still running, the 'current' value will show progress from 0 to 100.
@@ -134,9 +183,14 @@ There are two types of responses:
 }
 ```
 
-### /api/delete_old
-Deletes old Vector Stores:
+### 6. /api/delete_old
+**Description:**
+
+This endpoint is used to delete old Vector Stores.
 
+**Request:**
+
+Method: GET
 ```js
 // Task status (GET http://127.0.0.1:5000/api/docs_check)
 fetch("http://localhost:5001/api/task_status?task_id=b2d2a0f4-387c-44fd-a443-e4fe2e7454d1", {
@@ -148,8 +202,10 @@ fetch("http://localhost:5001/api/task_status?task_id=b2d2a0f4-387c-44fd-a443-e4f
 .then((res) => res.text())
 .then(console.log.bind(console))
 
-Response:
+```
+**Response:**
 
+JSON response indicating the status of the operation.
 ```json
 { "status": "ok" }
 ```

frontend/src/Navigation.tsx

@@ -255,7 +255,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                 src={Arrow2}
                 alt="arrow"
                 className={`${
-                  isDocsListOpen ? 'rotate-0' : 'rotate-180'
+                  !isDocsListOpen ? 'rotate-0' : 'rotate-180'
                 } ml-auto mr-3 w-3 transition-all`}
               />
             </div>

frontend/src/conversation/ConversationBubble.module.css

@@ -0,0 +1,11 @@
+.list p {
+  display: inline;
+}
+
+.list li:not(:first-child) {
+  margin-top: 1em;
+}
+
+.list li > .list {
+  margin-top: 1em;
+}

frontend/src/conversation/ConversationBubble.tsx

@@ -1,6 +1,7 @@
 import { forwardRef, useState } from 'react';
 import Avatar from '../Avatar';
 import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
+import classes from './ConversationBubble.module.css';
 import Alert from './../assets/alert.svg';
 import { ReactComponent as Like } from './../assets/like.svg';
 import { ReactComponent as Dislike } from './../assets/dislike.svg';
@@ -27,7 +28,6 @@ const ConversationBubble = forwardRef<
   { message, type, className, feedback, handleFeedback, sources },
   ref,
 ) {
-  const [showFeedback, setShowFeedback] = useState(false);
   const [openSource, setOpenSource] = useState<number | null>(null);
   const [copied, setCopied] = useState(false);
 
@@ -40,16 +40,6 @@ const ConversationBubble = forwardRef<
     }, 2000);
   };
 
-  const List = ({
-    ordered,
-    children,
-  }: {
-    ordered?: boolean;
-    children: React.ReactNode;
-  }) => {
-    const Tag = ordered ? 'ol' : 'ul';
-    return <Tag className="list-inside list-disc">{children}</Tag>;
-  };
   let bubble;
 
   if (type === 'QUESTION') {
@@ -65,12 +55,7 @@ const ConversationBubble = forwardRef<
     );
   } else {
     bubble = (
-      <div
-        ref={ref}
-        className={`flex self-start ${className} flex-col`}
-        onMouseEnter={() => setShowFeedback(true)}
-        onMouseLeave={() => setShowFeedback(false)}
-      >
+      <div ref={ref} className={`flex self-start ${className} group flex-col`}>
         <div className="flex self-start">
           <Avatar className="mt-2 text-2xl" avatar="🦖"></Avatar>
           <div
@@ -104,11 +89,23 @@ const ConversationBubble = forwardRef<
                     </code>
                   );
                 },
-                ul({ node, children }) {
-                  return <List>{children}</List>;
+                ul({ children }) {
+                  return (
+                    <ul
+                      className={`list-inside list-disc whitespace-normal pl-4 ${classes.list}`}
+                    >
+                      {children}
+                    </ul>
+                  );
                 },
-                ol({ node, children }) {
-                  return <List ordered>{children}</List>;
+                ol({ children }) {
+                  return (
+                    <ol
+                      className={`list-inside list-decimal whitespace-normal pl-4 ${classes.list}`}
+                    >
+                      {children}
+                    </ol>
+                  );
                 },
               }}
             >
@@ -118,9 +115,7 @@ const ConversationBubble = forwardRef<
               <>
                 <span className="mt-3 h-px w-full bg-[#DEDEDE]"></span>
                 <div className="mt-3 flex w-full flex-row flex-wrap items-center justify-start gap-2">
-                  <div className="py-1 text-base font-semibold">
-                    Sources:
-                  </div>
+                  <div className="py-1 text-base font-semibold">Sources:</div>
                   <div className="flex flex-row flex-wrap items-center justify-start gap-2">
                     {sources?.map((source, index) => (
                       <div
@@ -151,8 +146,8 @@ const ConversationBubble = forwardRef<
             )}
           </div>
           <div
-            className={`relative mr-2 flex items-center justify-center ${
-              type !== 'ERROR' && showFeedback ? '' : 'md:invisible'
+            className={`relative mr-2 flex items-center justify-center md:invisible ${
+              type !== 'ERROR' ? 'group-hover:md:visible' : ''
             }`}
           >
             {copied ? (
@@ -167,10 +162,10 @@ const ConversationBubble = forwardRef<
             )}
           </div>
           <div
-            className={`relative mr-2 flex items-center justify-center ${
-              feedback === 'LIKE' || (type !== 'ERROR' && showFeedback)
-                ? ''
-                : 'md:invisible'
+            className={`relative mr-2 flex items-center justify-center md:invisible ${
+              feedback === 'LIKE' || type !== 'ERROR'
+                ? 'group-hover:md:visible'
+                : ''
             }`}
           >
             <Like
@@ -183,10 +178,10 @@ const ConversationBubble = forwardRef<
             ></Like>
           </div>
           <div
-            className={`relative mr-10 flex items-center justify-center ${
-              feedback === 'DISLIKE' || (type !== 'ERROR' && showFeedback)
-                ? ''
-                : 'md:invisible'
+            className={`relative mr-10 flex items-center justify-center md:invisible ${
+              feedback === 'DISLIKE' || type !== 'ERROR'
+                ? 'group-hover:md:visible'
+                : ''
             }`}
           >
             <Dislike