Merge branch 'main' of https://github.com/ManishMadan2882/docsgpt

frontend/src/api/endpoints.ts

@@ -24,6 +24,12 @@ const endpoints = {
     UPDATE_TOOL_STATUS: '/api/update_tool_status',
     UPDATE_TOOL: '/api/update_tool',
     DELETE_TOOL: '/api/delete_tool',
+    GET_CHUNKS: (docId: string, page: number, per_page: number) =>
+      `/api/get_chunks?id=${docId}&page=${page}&per_page=${per_page}`,
+    ADD_CHUNK: '/api/add_chunk',
+    DELETE_CHUNK: (docId: string, chunkId: string) =>
+      `/api/delete_chunk?id=${docId}&chunk_id=${chunkId}`,
+    UPDATE_CHUNK: '/api/update_chunk',
   },
   CONVERSATION: {
     ANSWER: '/api/answer',

frontend/src/api/services/userService.ts

@@ -47,6 +47,18 @@ const userService = {
     apiClient.post(endpoints.USER.UPDATE_TOOL, data),
   deleteTool: (data: any): Promise<any> =>
     apiClient.post(endpoints.USER.DELETE_TOOL, data),
+  getDocumentChunks: (
+    docId: string,
+    page: number,
+    perPage: number,
+  ): Promise<any> =>
+    apiClient.get(endpoints.USER.GET_CHUNKS(docId, page, perPage)),
+  addChunk: (data: any): Promise<any> =>
+    apiClient.post(endpoints.USER.ADD_CHUNK, data),
+  deleteChunk: (docId: string, chunkId: string): Promise<any> =>
+    apiClient.delete(endpoints.USER.DELETE_CHUNK(docId, chunkId)),
+  updateChunk: (data: any): Promise<any> =>
+    apiClient.put(endpoints.USER.UPDATE_CHUNK, data),
 };
 
 export default userService;

frontend/src/components/Spinner.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+type SpinnerProps = {
+  size?: 'small' | 'medium' | 'large';
+  color?: string;
+};
+
+export default function Spinner({
+  size = 'medium',
+  color = 'grey',
+}: SpinnerProps) {
+  const sizeMap = {
+    small: '20px',
+    medium: '30px',
+    large: '40px',
+  };
+  const spinnerSize = sizeMap[size];
+
+  const spinnerStyle = {
+    width: spinnerSize,
+    height: spinnerSize,
+    aspectRatio: '1',
+    borderRadius: '50%',
+    background: `
+      radial-gradient(farthest-side, ${color} 94%, #0000) top/8px 8px no-repeat,
+      conic-gradient(#0000 30%, ${color})
+    `,
+    WebkitMask:
+      'radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0)',
+    animation: 'l13 1s infinite linear',
+  } as React.CSSProperties;
+
+  const keyframesStyle = `@keyframes l13 {
+    100% { transform: rotate(1turn) }
+  }`;
+
+  return (
+    <>
+      <style>{keyframesStyle}</style>
+      <div className="loader" style={spinnerStyle} />
+    </>
+  );
+}

frontend/src/modals/AddActionModal.tsx

@@ -1,21 +1,40 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Exit from '../assets/exit.svg';
 import Input from '../components/Input';
 import { ActiveState } from '../models/misc';
 
+const isValidFunctionName = (name: string): boolean => {
+  const pattern = /^[a-zA-Z0-9_-]+$/;
+  return pattern.test(name);
+};
+
+interface AddActionModalProps {
+  modalState: ActiveState;
+  setModalState: (state: ActiveState) => void;
+  handleSubmit: (actionName: string) => void;
+}
+
 export default function AddActionModal({
   modalState,
   setModalState,
   handleSubmit,
-}: {
-  modalState: ActiveState;
-  setModalState: (state: ActiveState) => void;
-  handleSubmit: (actionName: string) => void;
-}) {
+}: AddActionModalProps) {
   const { t } = useTranslation();
   const [actionName, setActionName] = React.useState('');
+  const [functionNameError, setFunctionNameError] = useState<boolean>(false); // New error state
+
+  const handleAddAction = () => {
+    if (!isValidFunctionName(actionName)) {
+      setFunctionNameError(true); // Set error state if invalid
+      return;
+    }
+    setFunctionNameError(false); // Clear error state if valid
+    handleSubmit(actionName);
+    setModalState('INACTIVE');
+  };
+
   return (
     <div
       className={`${
@@ -37,7 +56,7 @@ export default function AddActionModal({
               New Action
             </h2>
             <div className="mt-6 relative px-3">
-              <span className="absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
+              <span className="z-10 absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
                 Action Name
               </span>
               <Input
@@ -46,14 +65,21 @@ export default function AddActionModal({
                 onChange={(e) => setActionName(e.target.value)}
                 borderVariant="thin"
                 placeholder={'Enter name'}
-              ></Input>
+              />
+              <p className="mt-1 text-gray-500 text-xs">
+                Use only letters, numbers, underscores, and hyphens (e.g.,
+                `get_user_data`, `send-report`).
+              </p>
+              {functionNameError && (
+                <p className="mt-1 text-red-500 text-xs">
+                  Invalid function name format. Use only letters, numbers,
+                  underscores, and hyphens.
+                </p>
+              )}
             </div>
             <div className="mt-8 flex flex-row-reverse gap-1 px-3">
               <button
-                onClick={() => {
-                  handleSubmit(actionName);
-                  setModalState('INACTIVE');
-                }}
+                onClick={handleAddAction}
                 className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
               >
                 Add

frontend/src/modals/AddToolModal.tsx

@@ -13,11 +13,13 @@ export default function AddToolModal({
   modalState,
   setModalState,
   getUserTools,
+  onToolAdded,
 }: {
   message: string;
   modalState: ActiveState;
   setModalState: (state: ActiveState) => void;
   getUserTools: () => void;
+  onToolAdded: (toolId: string) => void;
 }) {
   const [availableTools, setAvailableTools] = React.useState<
     AvailableToolType[]
@@ -59,9 +61,20 @@ export default function AddToolModal({
         })
         .then((res) => {
           if (res.status === 200) {
-            getUserTools();
-            setModalState('INACTIVE');
+            return res.json();
+          } else {
+            throw new Error(
+              `Failed to create tool, status code: ${res.status}`,
+            );
           }
+        })
+        .then((data) => {
+          getUserTools();
+          setModalState('INACTIVE');
+          onToolAdded(data.id);
+        })
+        .catch((error) => {
+          console.error('Failed to create tool:', error);
         });
     } else {
       setModalState('INACTIVE');

frontend/src/modals/ChunkModal.tsx

@@ -0,0 +1,199 @@
+import React from 'react';
+
+import Exit from '../assets/exit.svg';
+import Input from '../components/Input';
+import { ActiveState } from '../models/misc';
+import ConfirmationModal from './ConfirmationModal';
+
+export default function ChunkModal({
+  type,
+  modalState,
+  setModalState,
+  handleSubmit,
+  originalTitle,
+  originalText,
+  handleDelete,
+}: {
+  type: 'ADD' | 'EDIT';
+  modalState: ActiveState;
+  setModalState: (state: ActiveState) => void;
+  handleSubmit: (title: string, text: string) => void;
+  originalTitle?: string;
+  originalText?: string;
+  handleDelete?: () => void;
+}) {
+  const [title, setTitle] = React.useState('');
+  const [chunkText, setChunkText] = React.useState('');
+  const [deleteModal, setDeleteModal] = React.useState<ActiveState>('INACTIVE');
+
+  React.useEffect(() => {
+    setTitle(originalTitle || '');
+    setChunkText(originalText || '');
+  }, [originalTitle, originalText]);
+  if (type === 'ADD') {
+    return (
+      <div
+        className={`${
+          modalState === 'ACTIVE' ? 'visible' : 'hidden'
+        } fixed top-0 left-0 z-30  h-screen w-screen  bg-gray-alpha flex items-center justify-center`}
+      >
+        <article className="flex w-11/12 sm:w-[620px] flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-[#26272E]">
+          <div className="relative">
+            <button
+              className="absolute top-3 right-4 m-2 w-3"
+              onClick={() => {
+                setModalState('INACTIVE');
+              }}
+            >
+              <img className="filter dark:invert" src={Exit} />
+            </button>
+            <div className="p-6">
+              <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
+                Add Chunk
+              </h2>
+              <div className="mt-6 relative px-3">
+                <span className="z-10 absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
+                  Title
+                </span>
+                <Input
+                  type="text"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  borderVariant="thin"
+                  placeholder={'Enter title'}
+                ></Input>
+              </div>
+              <div className="mt-6 relative px-3">
+                <div className="pt-3 pb-1 border border-silver dark:border-silver/40 rounded-lg">
+                  <span className="absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver rounded-lg">
+                    Body text
+                  </span>
+                  <textarea
+                    id="chunk-body-text"
+                    className="h-60 w-full px-3 outline-none  dark:bg-transparent dark:text-white"
+                    value={chunkText}
+                    onChange={(e) => setChunkText(e.target.value)}
+                    aria-label="Prompt Text"
+                  ></textarea>
+                </div>
+              </div>
+              <div className="mt-8 flex flex-row-reverse gap-1 px-3">
+                <button
+                  onClick={() => {
+                    handleSubmit(title, chunkText);
+                    setModalState('INACTIVE');
+                  }}
+                  className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
+                >
+                  Add
+                </button>
+                <button
+                  onClick={() => {
+                    setModalState('INACTIVE');
+                  }}
+                  className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
+                >
+                  Close
+                </button>
+              </div>
+            </div>
+          </div>
+        </article>
+      </div>
+    );
+  } else {
+    return (
+      <div
+        className={`${
+          modalState === 'ACTIVE' ? 'visible' : 'hidden'
+        } fixed top-0 left-0 z-30  h-screen w-screen  bg-gray-alpha flex items-center justify-center`}
+      >
+        <article className="flex w-11/12 sm:w-[620px] flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-[#26272E]">
+          <div className="relative">
+            <button
+              className="absolute top-3 right-4 m-2 w-3"
+              onClick={() => {
+                setModalState('INACTIVE');
+              }}
+            >
+              <img className="filter dark:invert" src={Exit} />
+            </button>
+            <div className="p-6">
+              <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
+                Edit Chunk
+              </h2>
+              <div className="mt-6 relative px-3">
+                <span className="z-10 absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
+                  Title
+                </span>
+                <Input
+                  type="text"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  borderVariant="thin"
+                  placeholder={'Enter title'}
+                ></Input>
+              </div>
+              <div className="mt-6 relative px-3">
+                <div className="pt-3 pb-1 border border-silver dark:border-silver/40 rounded-lg">
+                  <span className="absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver rounded-lg">
+                    Body text
+                  </span>
+                  <textarea
+                    id="chunk-body-text"
+                    className="h-60 w-full px-3 outline-none  dark:bg-transparent dark:text-white"
+                    value={chunkText}
+                    onChange={(e) => setChunkText(e.target.value)}
+                    aria-label="Prompt Text"
+                  ></textarea>
+                </div>
+              </div>
+              <div className="mt-8 w-full px-3 flex items-center justify-between">
+                <button
+                  className="rounded-full px-5 py-2 border border-solid border-red-500 text-red-500 hover:bg-red-500 hover:text-white text-nowrap text-sm"
+                  onClick={() => {
+                    setDeleteModal('ACTIVE');
+                  }}
+                >
+                  Delete
+                </button>
+                <div className="flex flex-row-reverse gap-1">
+                  <button
+                    onClick={() => {
+                      handleSubmit(title, chunkText);
+                      setModalState('INACTIVE');
+                    }}
+                    className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
+                  >
+                    Update
+                  </button>
+                  <button
+                    onClick={() => {
+                      setModalState('INACTIVE');
+                    }}
+                    className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
+                  >
+                    Close
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </article>
+        <ConfirmationModal
+          message="Are you sure you want to delete this chunk?"
+          modalState={deleteModal}
+          setModalState={setDeleteModal}
+          handleSubmit={
+            handleDelete
+              ? handleDelete
+              : () => {
+                  /* no-op */
+                }
+          }
+          submitLabel="Delete"
+        />
+      </div>
+    );
+  }
+}

frontend/src/settings/ToolConfig.tsx

@@ -134,7 +134,7 @@ export default function ToolConfig({
           {Object.keys(tool?.config).length !== 0 &&
             tool.name !== 'api_tool' && (
               <div className="relative w-96">
-                <span className="absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
+                <span className="z-10 absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
                   API Key / Oauth
                 </span>
                 <Input
@@ -447,7 +447,7 @@ function APIToolConfig({
                 </div>
                 <div className="mt-8 px-5">
                   <div className="relative w-full">
-                    <span className="absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-raisin-black dark:text-silver">
+                    <span className="z-10 absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-raisin-black dark:text-silver">
                       URL
                     </span>
                     <Input
@@ -516,7 +516,7 @@ function APIToolConfig({
                 </div>
                 <div className="mt-4 px-5 py-2">
                   <div className="relative w-full">
-                    <span className="absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-raisin-black dark:text-silver">
+                    <span className="z-10 absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-raisin-black dark:text-silver">
                       Description
                     </span>
                     <Input

frontend/src/settings/Tools.tsx

@@ -58,9 +58,27 @@ export default function Tools() {
     getUserTools();
   };
 
+  const handleToolAdded = (toolId: string) => {
+    userService
+      .getUserTools()
+      .then((res) => res.json())
+      .then((data) => {
+        const newTool = data.tools.find(
+          (tool: UserToolType) => tool.id === toolId,
+        );
+        if (newTool) {
+          setSelectedTool(newTool);
+        } else {
+          console.error('Newly added tool not found');
+        }
+      })
+      .catch((error) => console.error('Error fetching tools:', error));
+  };
+
   React.useEffect(() => {
     getUserTools();
   }, []);
+
   return (
     <div>
       {selectedTool ? (
@@ -85,6 +103,7 @@ export default function Tools() {
                   id="tool-search-input"
                   value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}
+                  borderVariant="thin"
                 />
               </div>
               <button
@@ -184,6 +203,7 @@ export default function Tools() {
             modalState={addToolModalState}
             setModalState={setAddToolModalState}
             getUserTools={getUserTools}
+            onToolAdded={handleToolAdded}
           />
         </div>
       )}

frontend/src/settings/types/index.ts

@@ -1,3 +1,9 @@
+export type ChunkType = {
+  doc_id: string;
+  text: string;
+  metadata: { [key: string]: string };
+};
+
 export type APIKeyData = {
   id: string;
   name: string;