feat: add update chunk API endpoint and service method

frontend/src/api/endpoints.ts

@@ -29,6 +29,7 @@ const endpoints = {
     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

@@ -57,6 +57,8 @@ const userService = {
     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/modals/AddChunkModal.tsx

@@ -1,86 +0,0 @@
-import React from 'react';
-
-import Exit from '../assets/exit.svg';
-import Input from '../components/Input';
-import { ActiveState } from '../models/misc';
-
-export default function AddChunkModal({
-  modalState,
-  setModalState,
-  handleSubmit,
-}: {
-  modalState: ActiveState;
-  setModalState: (state: ActiveState) => void;
-  handleSubmit: (title: string, text: string) => void;
-}) {
-  const [title, setTitle] = React.useState('');
-  const [chunkText, setChunkText] = React.useState('');
-  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">
-              <span className="absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
-                Body text
-              </span>
-              <textarea
-                id="chunk-body-text"
-                className="h-56 w-full rounded-lg border border-silver px-3 py-2 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
-                value={chunkText}
-                onChange={(e) => setChunkText(e.target.value)}
-                aria-label="Prompt Text"
-              ></textarea>
-            </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>
-  );
-}

frontend/src/modals/ChunkModal.tsx

@@ -0,0 +1,193 @@
+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 : () => {}}
+          submitLabel="Delete"
+        />
+      </div>
+    );
+  }
+}

frontend/src/settings/Documents.tsx

@@ -5,6 +5,7 @@ import { useDispatch } from 'react-redux';
 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';
@@ -15,7 +16,7 @@ import Input from '../components/Input';
 import SkeletonLoader from '../components/SkeletonLoader';
 import Spinner from '../components/Spinner';
 import { useDarkTheme } from '../hooks';
-import AddChunkModal from '../modals/AddChunkModal';
+import ChunkModal from '../modals/ChunkModal';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState, Doc, DocumentsProps } from '../models/misc';
 import { getDocs, getDocsWithPagination } from '../preferences/preferenceApi';
@@ -396,11 +397,11 @@ function DocumentChunks({
   const [totalChunks, setTotalChunks] = useState(0);
   const [loading, setLoading] = useState(true);
   const [searchTerm, setSearchTerm] = useState<string>('');
-  const [deleteModalState, setDeleteModalState] = useState<{
+  const [addModal, setAddModal] = useState<ActiveState>('INACTIVE');
+  const [editModal, setEditModal] = useState<{
     state: ActiveState;
-    chunkId: string | null;
-  }>({ state: 'INACTIVE', chunkId: null });
-  const [addModalState, setAddModalState] = useState<ActiveState>('INACTIVE');
+    chunk: ChunkType | null;
+  }>({ state: 'INACTIVE', chunk: null });
 
   const fetchChunks = () => {
     setLoading(true);
@@ -448,15 +449,39 @@ function DocumentChunks({
     }
   };
 
-  const handleDeleteChunk = (chunkId: string) => {
+  const handleUpdateChunk = (title: string, text: string, chunk: ChunkType) => {
     try {
-      userService.deleteChunk(document.id ?? '', chunkId).then((response) => {
-        if (!response.ok) {
-          throw new Error('Failed to delete chunk');
-        }
-        setDeleteModalState({ state: 'INACTIVE', chunkId: null });
-        fetchChunks();
-      });
+      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);
     }
@@ -498,7 +523,7 @@ function DocumentChunks({
         <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={() => setAddModalState('ACTIVE')}
+          onClick={() => setAddModal('ACTIVE')}
         >
           {t('settings.documents.addNew')}
         </button>
@@ -539,18 +564,18 @@ function DocumentChunks({
                   <div className="w-full">
                     <div className="w-full flex items-center justify-between">
                       <button
-                        className="absolute top-3 right-3 h-[19px] w-[19px] cursor-pointer"
+                        aria-label={'edit'}
                         onClick={() => {
-                          setDeleteModalState({
+                          setEditModal({
                             state: 'ACTIVE',
-                            chunkId: chunk.doc_id,
+                            chunk: chunk,
                           });
                         }}
-                        aria-label={'delete'}
+                        className="absolute top-3 right-3 h-4 w-4 cursor-pointer"
                       >
                         <img
-                          src={Trash}
-                          alt={'delete'}
+                          alt={'edit'}
+                          src={Edit}
                           className="opacity-60 hover:opacity-100"
                         />
                       </button>
@@ -590,20 +615,25 @@ function DocumentChunks({
             />
           </div>
         )}
-      <ConfirmationModal
-        message="Are you sure you want to delete this?"
-        modalState={deleteModalState.state}
-        setModalState={(state) =>
-          setDeleteModalState((prev) => ({ ...prev, state }))
-        }
-        handleSubmit={() => handleDeleteChunk(deleteModalState.chunkId ?? '')}
-        submitLabel="Delete"
-      />
-      <AddChunkModal
-        modalState={addModalState}
-        setModalState={setAddModalState}
+      <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>
   );
 }