feat: enhance modal functionality with reset and confirmation handlers

frontend/src/modals/ChunkModal.tsx

@@ -33,6 +33,19 @@ export default function ChunkModal({
     setChunkText(originalText || '');
   }, [originalTitle, originalText]);
 
+  const resetForm = () => {
+    setTitle('');
+    setChunkText('');
+  };
+
+  const handleDeleteConfirmed = () => {
+    if (handleDelete) {
+      handleDelete();
+    }
+    setDeleteModal('INACTIVE');
+    setModalState('INACTIVE');
+  };
+
   if (modalState !== 'ACTIVE') return null;
 
   const content = (
@@ -71,6 +84,7 @@ export default function ChunkModal({
             onClick={() => {
               handleSubmit(title, chunkText);
               setModalState('INACTIVE');
+              resetForm();
             }}
             className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-violets-are-blue"
           >
@@ -79,6 +93,7 @@ export default function ChunkModal({
           <button
             onClick={() => {
               setModalState('INACTIVE');
+              resetForm();
             }}
             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"
           >
@@ -124,6 +139,7 @@ export default function ChunkModal({
       <WrapperModal
         close={() => setModalState('INACTIVE')}
         className="sm:w-[620px]"
+        isPerformingTask={true}
       >
         {content}
       </WrapperModal>
@@ -133,13 +149,7 @@ export default function ChunkModal({
           message={t('modals.chunk.deleteConfirmation')}
           modalState={deleteModal}
           setModalState={setDeleteModal}
-          handleSubmit={
-            handleDelete
-              ? handleDelete
-              : () => {
-                  /* no-op */
-                }
-          }
+          handleSubmit={handleDeleteConfirmed}
           submitLabel={t('modals.chunk.delete')}
         />
       )}

frontend/src/modals/ConfirmationModal.tsx

@@ -29,6 +29,20 @@ export default function ConfirmationModal({
       ? 'rounded-3xl bg-rosso-corsa px-5 py-2 text-sm text-lotion transition-all hover:bg-red-2000 hover:font-bold tracking-[0.019em] hover:tracking-normal'
       : 'rounded-3xl bg-purple-30 px-5 py-2 text-sm text-lotion transition-all hover:bg-violets-are-blue';
 
+  const handleSubmitClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    handleSubmit();
+    setModalState('INACTIVE');
+  };
+
+  const handleCancelClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setModalState('INACTIVE');
+    handleCancel?.();
+  };
+
   return (
     <>
       {modalState === 'ACTIVE' && (
@@ -41,20 +55,13 @@ export default function ConfirmationModal({
               <div>
                 <div className="mt-6 flex flex-row-reverse gap-1">
                   <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleSubmit();
-                    }}
+                    onClick={handleSubmitClick}
                     className={submitButtonClasses}
                   >
                     {submitLabel}
                   </button>
                   <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setModalState('INACTIVE');
-                      handleCancel && handleCancel();
-                    }}
+                    onClick={handleCancelClick}
                     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"
                   >
                     {cancelLabel ? cancelLabel : t('cancel')}

frontend/src/modals/WrapperModal.tsx

@@ -3,38 +3,33 @@ import { createPortal } from 'react-dom';
 
 import Exit from '../assets/exit.svg';
 
-interface WrapperModalPropsType {
+type WrapperModalPropsType = {
   children: React.ReactNode;
   close: () => void;
   isPerformingTask?: boolean;
   className?: string;
   contentClassName?: string;
-}
+};
 
 export default function WrapperModal({
   children,
   close,
   isPerformingTask = false,
-  className = '', // Default width, but can be overridden
-  contentClassName = '', // Default padding, but can be overridden
+  className = '',
+  contentClassName = '',
 }: WrapperModalPropsType) {
   const modalRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (isPerformingTask) return;
+
     const handleClickOutside = (event: MouseEvent) => {
-      if (
-        modalRef.current &&
-        !modalRef.current.contains(event.target as Node)
-      ) {
+      if (modalRef.current && !modalRef.current.contains(event.target as Node))
         close();
-      }
     };
 
     const handleEscapePress = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        close();
-      }
+      if (event.key === 'Escape') close();
     };
 
     document.addEventListener('mousedown', handleClickOutside);
@@ -44,7 +39,7 @@ export default function WrapperModal({
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('keydown', handleEscapePress);
     };
-  }, [close]);
+  }, [close, isPerformingTask]);
 
   const modalContent = (
     <div className="fixed left-0 top-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">

frontend/src/settings/Documents.tsx

@@ -9,8 +9,10 @@ import Edit from '../assets/edit.svg';
 import EyeView from '../assets/eye-view.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/red-trash.svg';
+import SyncIcon from '../assets/sync.svg';
+import ThreeDots from '../assets/three-dots.svg';
+import ContextMenu, { MenuOption } from '../components/ContextMenu';
 import Pagination from '../components/DocumentPagination';
 import DropdownMenu from '../components/DropdownMenu';
 import Input from '../components/Input';
@@ -29,8 +31,6 @@ import {
 import Upload from '../upload/Upload';
 import { formatDate } from '../utils/dateTimeUtils';
 import { ChunkType } from './types';
-import ContextMenu, { MenuOption } from '../components/ContextMenu';
-import ThreeDots from '../assets/three-dots.svg';
 
 const formatTokens = (tokens: number): string => {
   const roundToTwoDecimals = (num: number): string => {
@@ -766,19 +766,23 @@ function DocumentChunks({
         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);
-        }}
-      />
+      {editModal.chunk && (
+        <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>
   );
 }