Merge branch 'main' of https://github.com/arc53/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/Documents.tsx

@@ -1,24 +1,33 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import userService from '../api/services/userService';
-import SyncIcon from '../assets/sync.svg';
-import Trash from '../assets/trash.svg';
-import caretSort from '../assets/caret-sort.svg';
-import DropdownMenu from '../components/DropdownMenu';
-import SkeletonLoader from '../components/SkeletonLoader';
-import Input from '../components/Input';
-import Upload from '../upload/Upload'; // Import the Upload component
-import Pagination from '../components/DocumentPagination';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
-import { Doc, DocumentsProps, ActiveState } from '../models/misc'; // Ensure ActiveState type is imported
-import { getDocs, getDocsWithPagination } from '../preferences/preferenceApi';
-import { setSourceDocs } from '../preferences/preferenceSlice';
-import { setPaginatedDocuments } from '../preferences/preferenceSlice';
-import { formatDate } from '../utils/dateTimeUtils';
-import ConfirmationModal from '../modals/ConfirmationModal';
 
-// Utility function to format numbers
+import userService from '../api/services/userService';
+import ArrowLeft from '../assets/arrow-left.svg';
+import caretSort from '../assets/caret-sort.svg';
+import Edit from '../assets/edit.svg';
+import NoFilesDarkIcon from '../assets/no-files-dark.svg';
+import NoFilesIcon from '../assets/no-files.svg';
+import SyncIcon from '../assets/sync.svg';
+import Trash from '../assets/trash.svg';
+import Pagination from '../components/DocumentPagination';
+import DropdownMenu from '../components/DropdownMenu';
+import Input from '../components/Input';
+import SkeletonLoader from '../components/SkeletonLoader';
+import Spinner from '../components/Spinner';
+import { useDarkTheme } from '../hooks';
+import ChunkModal from '../modals/ChunkModal';
+import ConfirmationModal from '../modals/ConfirmationModal';
+import { ActiveState, Doc, DocumentsProps } from '../models/misc';
+import { getDocs, getDocsWithPagination } from '../preferences/preferenceApi';
+import {
+  setPaginatedDocuments,
+  setSourceDocs,
+} from '../preferences/preferenceSlice';
+import Upload from '../upload/Upload';
+import { formatDate } from '../utils/dateTimeUtils';
+import { ChunkType } from './types';
+
 const formatTokens = (tokens: number): string => {
   const roundToTwoDecimals = (num: number): string => {
     return (Math.round((num + Number.EPSILON) * 100) / 100).toString();
@@ -35,17 +44,16 @@ const formatTokens = (tokens: number): string => {
   }
 };
 
-const Documents: React.FC<DocumentsProps> = ({
+export default function Documents({
   paginatedDocuments,
   handleDeleteDocument,
-}) => {
+}: DocumentsProps) {
   const { t } = useTranslation();
   const dispatch = useDispatch();
-  // State for search input
+
   const [searchTerm, setSearchTerm] = useState<string>('');
-  // State for modal: active/inactive
-  const [modalState, setModalState] = useState<ActiveState>('INACTIVE'); // Initialize with inactive state
-  const [isOnboarding, setIsOnboarding] = useState<boolean>(false); // State for onboarding flag
+  const [modalState, setModalState] = useState<ActiveState>('INACTIVE');
+  const [isOnboarding, setIsOnboarding] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
   const [sortField, setSortField] = useState<'date' | 'tokens'>('date');
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
@@ -60,6 +68,7 @@ const Documents: React.FC<DocumentsProps> = ({
     { label: t('settings.documents.syncFrequency.weekly'), value: 'weekly' },
     { label: t('settings.documents.syncFrequency.monthly'), value: 'monthly' },
   ];
+  const [showDocumentChunks, setShowDocumentChunks] = useState<Doc>();
 
   const refreshDocs = useCallback(
     (
@@ -159,7 +168,14 @@ const Documents: React.FC<DocumentsProps> = ({
     refreshDocs(undefined, 1, rowsPerPage);
   }, [searchTerm]);
 
-  return (
+  return showDocumentChunks ? (
+    <DocumentChunks
+      document={showDocumentChunks}
+      handleGoBack={() => {
+        setShowDocumentChunks(undefined);
+      }}
+    />
+  ) : (
     <div className="flex flex-col mt-8">
       <div className="flex flex-col relative flex-grow">
         <div className="mb-6">
@@ -183,6 +199,7 @@ const Documents: React.FC<DocumentsProps> = ({
                 setSearchTerm(e.target.value);
                 setCurrentPage(1);
               }}
+              borderVariant="thin"
             />
           </div>
           <button
@@ -256,7 +273,11 @@ const Documents: React.FC<DocumentsProps> = ({
                     </tr>
                   ) : (
                     currentDocuments.map((document, index) => (
-                      <tr key={index} className="group transition-colors">
+                      <tr
+                        key={index}
+                        className="group transition-colors"
+                        onClick={() => setShowDocumentChunks(document)}
+                      >
                         <td
                           className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[45%] truncate group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50"
                           title={document.name}
@@ -359,11 +380,260 @@ const Documents: React.FC<DocumentsProps> = ({
       )}
     </div>
   );
-};
+}
 
-Documents.propTypes = {
-  //documents: PropTypes.array.isRequired,
-  handleDeleteDocument: PropTypes.func.isRequired,
-};
+function DocumentChunks({
+  document,
+  handleGoBack,
+}: {
+  document: Doc;
+  handleGoBack: () => void;
+}) {
+  const { t } = useTranslation();
+  const [isDarkTheme] = useDarkTheme();
+  const [paginatedChunks, setPaginatedChunks] = useState<ChunkType[]>([]);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(5);
+  const [totalChunks, setTotalChunks] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [addModal, setAddModal] = useState<ActiveState>('INACTIVE');
+  const [editModal, setEditModal] = useState<{
+    state: ActiveState;
+    chunk: ChunkType | null;
+  }>({ state: 'INACTIVE', chunk: null });
 
-export default Documents;
+  const fetchChunks = () => {
+    setLoading(true);
+    try {
+      userService
+        .getDocumentChunks(document.id ?? '', page, perPage)
+        .then((response) => {
+          if (!response.ok) {
+            setLoading(false);
+            setPaginatedChunks([]);
+            throw new Error('Failed to fetch chunks data');
+          }
+          return response.json();
+        })
+        .then((data) => {
+          setPage(data.page);
+          setPerPage(data.per_page);
+          setTotalChunks(data.total);
+          setPaginatedChunks(data.chunks);
+          setLoading(false);
+        });
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const handleAddChunk = (title: string, text: string) => {
+    try {
+      userService
+        .addChunk({
+          id: document.id ?? '',
+          text: text,
+          metadata: {
+            title: title,
+          },
+        })
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error('Failed to add chunk');
+          }
+          fetchChunks();
+        });
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const handleUpdateChunk = (title: string, text: string, chunk: ChunkType) => {
+    try {
+      userService
+        .updateChunk({
+          id: document.id ?? '',
+          chunk_id: chunk.doc_id,
+          text: text,
+          metadata: {
+            title: title,
+          },
+        })
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error('Failed to update chunk');
+          }
+          fetchChunks();
+        });
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const handleDeleteChunk = (chunk: ChunkType) => {
+    try {
+      userService
+        .deleteChunk(document.id ?? '', chunk.doc_id)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error('Failed to delete chunk');
+          }
+          setEditModal({ state: 'INACTIVE', chunk: null });
+          fetchChunks();
+        });
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  React.useEffect(() => {
+    fetchChunks();
+  }, [page, perPage]);
+  return (
+    <div className="flex flex-col mt-8">
+      <div className="mb-3 flex items-center gap-3 text-eerie-black dark:text-bright-gray text-sm">
+        <button
+          className="text-sm text-gray-400 dark:text-gray-500 border dark:border-0 dark:bg-[#28292D] dark:hover:bg-[#2E2F34] p-3 rounded-full"
+          onClick={handleGoBack}
+        >
+          <img src={ArrowLeft} alt="left-arrow" className="w-3 h-3" />
+        </button>
+        <p className="mt-px">Back to all documents</p>
+      </div>
+      <div className="my-3 flex justify-between items-center gap-1">
+        <div className="w-full sm:w-auto flex items-center gap-2 text-eerie-black dark:text-bright-gray">
+          <p className="font-semibold text-2xl hidden sm:flex">{`${totalChunks} Chunks`}</p>
+          <label htmlFor="chunk-search-input" className="sr-only">
+            {t('settings.documents.searchPlaceholder')}
+          </label>
+          <Input
+            maxLength={256}
+            placeholder={t('settings.documents.searchPlaceholder')}
+            name="chunk-search-input"
+            type="text"
+            id="chunk-search-input"
+            value={searchTerm}
+            onChange={(e) => {
+              setSearchTerm(e.target.value);
+            }}
+            borderVariant="thin"
+          />
+        </div>
+        <button
+          className="rounded-full w-full sm:w-40 bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]"
+          title={t('settings.documents.addNew')}
+          onClick={() => setAddModal('ACTIVE')}
+        >
+          {t('settings.documents.addNew')}
+        </button>
+      </div>
+      {loading ? (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="h-32 flex items-center justify-center mt-24 col-span-2 lg:col-span-3">
+            <Spinner />
+          </div>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          {paginatedChunks.filter((chunk) =>
+            chunk.metadata?.title
+              .toLowerCase()
+              .includes(searchTerm.toLowerCase()),
+          ).length === 0 ? (
+            <div className="mt-24 col-span-2 lg:col-span-3 text-center text-gray-500 dark:text-gray-400">
+              <img
+                src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
+                alt="No tools found"
+                className="h-24 w-24 mx-auto mb-2"
+              />
+              No chunks found
+            </div>
+          ) : (
+            paginatedChunks
+              .filter((chunk) =>
+                chunk.metadata?.title
+                  .toLowerCase()
+                  .includes(searchTerm.toLowerCase()),
+              )
+              .map((chunk, index) => (
+                <div
+                  key={index}
+                  className="relative h-56 w-full p-6 border rounded-2xl border-silver dark:border-silver/40 flex flex-col justify-between"
+                >
+                  <div className="w-full">
+                    <div className="w-full flex items-center justify-between">
+                      <button
+                        aria-label={'edit'}
+                        onClick={() => {
+                          setEditModal({
+                            state: 'ACTIVE',
+                            chunk: chunk,
+                          });
+                        }}
+                        className="absolute top-3 right-3 h-4 w-4 cursor-pointer"
+                      >
+                        <img
+                          alt={'edit'}
+                          src={Edit}
+                          className="opacity-60 hover:opacity-100"
+                        />
+                      </button>
+                    </div>
+                    <div className="mt-[9px]">
+                      <p className="h-12 text-sm font-semibold text-eerie-black dark:text-[#EEEEEE] leading-relaxed break-words ellipsis-text">
+                        {chunk.metadata?.title}
+                      </p>
+                      <p className="mt-1 pr-1 h-[110px] overflow-y-auto text-[13px] text-gray-600 dark:text-gray-400 leading-relaxed break-words">
+                        {chunk.text}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ))
+          )}
+        </div>
+      )}
+      {!loading &&
+        paginatedChunks.filter((chunk) =>
+          chunk.metadata?.title
+            .toLowerCase()
+            .includes(searchTerm.toLowerCase()),
+        ).length !== 0 && (
+          <div className="mt-10 w-full flex items-center justify-center">
+            <Pagination
+              currentPage={page}
+              totalPages={Math.ceil(totalChunks / perPage)}
+              rowsPerPage={perPage}
+              onPageChange={(page) => {
+                setPage(page);
+              }}
+              onRowsPerPageChange={(rows) => {
+                setPerPage(rows);
+                setPage(1);
+              }}
+            />
+          </div>
+        )}
+      <ChunkModal
+        type="ADD"
+        modalState={addModal}
+        setModalState={setAddModal}
+        handleSubmit={handleAddChunk}
+      />
+      <ChunkModal
+        type="EDIT"
+        modalState={editModal.state}
+        setModalState={(state) => setEditModal((prev) => ({ ...prev, state }))}
+        handleSubmit={(title, text) => {
+          handleUpdateChunk(title, text, editModal.chunk as ChunkType);
+        }}
+        originalText={editModal.chunk?.text}
+        originalTitle={editModal.chunk?.metadata?.title}
+        handleDelete={() => {
+          handleDeleteChunk(editModal.chunk as ChunkType);
+        }}
+      />
+    </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;