(chore:chunks) i18n

frontend/src/components/DocumentChunks.tsx

@@ -10,6 +10,7 @@ import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import OutlineSource from '../assets/outline-source.svg';
 import Spinner from '../components/Spinner';
 import ChunkModal from '../modals/ChunkModal';
+import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState } from '../models/misc';
 import { ChunkType } from '../settings/types';
 import EditIcon from '../assets/edit.svg';
@@ -104,6 +105,8 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
   const [editingTitle, setEditingTitle] = useState('');
   const [editingText, setEditingText] = useState('');
   const [isAddingChunk, setIsAddingChunk] = useState(false);
+  const [deleteModalState, setDeleteModalState] = useState<ActiveState>('INACTIVE');
+  const [chunkToDelete, setChunkToDelete] = useState<ChunkType | null>(null);
 
 
 
@@ -200,6 +203,24 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
     }
   };
 
+  const confirmDeleteChunk = (chunk: ChunkType) => {
+    setChunkToDelete(chunk);
+    setDeleteModalState('ACTIVE');
+  };
+
+  const handleConfirmedDelete = () => {
+    if (chunkToDelete) {
+      handleDeleteChunk(chunkToDelete);
+      setDeleteModalState('INACTIVE');
+      setChunkToDelete(null);
+    }
+  };
+
+  const handleCancelDelete = () => {
+    setDeleteModalState('INACTIVE');
+    setChunkToDelete(null);
+  };
+
   useEffect(() => {
     fetchChunks();
   }, [page, perPage, path]);
@@ -251,8 +272,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
             <button
               className="rounded-full border border-solid border-red-500 px-3 py-1 text-sm text-nowrap text-red-500 hover:bg-red-500 hover:text-white"
               onClick={() => {
-                handleDeleteChunk(editingChunk);
-                setEditingChunk(null);
+                confirmDeleteChunk(editingChunk);
               }}
             >
               {t('modals.chunk.delete')}
@@ -281,7 +301,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
               onClick={() => setIsAddingChunk(false)}
               className="dark:text-light-gray cursor-pointer rounded-full px-3 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50"
             >
-              {t('modals.chunk.close')}
+              {t('modals.chunk.cancel')}
             </button>
             <button
               onClick={() => {
@@ -366,10 +386,10 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                         <div className="w-full">
                           <div className="flex w-full items-center justify-between border-b border-[#D1D9E0] bg-[#F6F8FA] dark:bg-[#27282D] dark:border-[#6A6A6A] px-4 py-3">
                             <div className="text-[#59636E] text-sm dark:text-[#E0E0E0]">
-                              {chunk.metadata.token_count ? chunk.metadata.token_count.toLocaleString() : '-'} tokens
+                              {chunk.metadata.token_count ? chunk.metadata.token_count.toLocaleString() : '-'} {t('settings.documents.tokensUnit')}
                             </div>
                             <button
-                              aria-label={'edit'}
+                              aria-label={t('settings.documents.editAlt')}
                               onClick={() => {
                                 setEditingChunk(chunk);
                                 setEditingTitle(chunk.metadata?.title || '');
@@ -408,7 +428,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
               <div className="relative flex flex-col rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden w-full">
                 <div className="flex w-full items-center justify-between border-b border-[#D1D9E0] bg-[#F6F8FA] dark:bg-[#27282D] dark:border-[#6A6A6A] px-4 py-3">
                   <div className="text-[#59636E] text-sm dark:text-[#E0E0E0]">
-                    {editingChunk.metadata.token_count ? editingChunk.metadata.token_count.toLocaleString() : '-'} tokens
+                    {editingChunk.metadata.token_count ? editingChunk.metadata.token_count.toLocaleString() : '-'} {t('settings.documents.tokensUnit')}
                   </div>
                 </div>
                 <div className="p-4 overflow-hidden">
@@ -436,6 +456,17 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
           )}
         </div>
       </div>
+
+      {/* Delete Confirmation Modal */}
+      <ConfirmationModal
+        message={t('modals.chunk.deleteConfirmation')}
+        modalState={deleteModalState}
+        setModalState={setDeleteModalState}
+        handleSubmit={handleConfirmedDelete}
+        handleCancel={handleCancelDelete}
+        submitLabel={t('modals.chunk.delete')}
+        variant="danger"
+      />
     </div>
   );
 };

frontend/src/components/FileTreeComponent.tsx

@@ -283,7 +283,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
               <div className="flex items-center">
                 <img
                   src={FolderIcon}
-                  alt="Parent folder"
+                  alt={t('settings.documents.parentFolderAlt')}
                   className="mr-2 h-4 w-4"
                 />
                 <span className="text-sm dark:text-[#E0E0E0]">..</span>
@@ -312,7 +312,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           >
             <td className="px-4 py-2">
               <div className="flex items-center">
-                <img src={FolderIcon} alt="Folder" className="mr-2 h-4 w-4" />
+                <img src={FolderIcon} alt={t('settings.documents.folderAlt')} className="mr-2 h-4 w-4" />
                 <span className="text-sm dark:text-[#E0E0E0]">{name}</span>
               </div>
             </td>
@@ -333,7 +333,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                 >
                   <img
                     src={ThreeDots}
-                    alt="Menu"
+                    alt={t('settings.documents.menuAlt')}
                     className="opacity-60 hover:opacity-100"
                   />
                 </button>
@@ -364,7 +364,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           >
             <td className="px-4 py-2">
               <div className="flex items-center">
-                <img src={FileIcon} alt="File" className="mr-2 h-4 w-4" />
+                <img src={FileIcon} alt={t('settings.documents.fileAlt')} className="mr-2 h-4 w-4" />
                 <span className="text-sm dark:text-[#E0E0E0]">{name}</span>
               </div>
             </td>
@@ -383,7 +383,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                 >
                   <img
                     src={ThreeDots}
-                    alt="Menu"
+                    alt={t('settings.documents.menuAlt')}
                     className="opacity-60 hover:opacity-100"
                   />
                 </button>
@@ -490,7 +490,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                   >
                     <img
                       src={result.isFile ? FileIcon : FolderIcon}
-                      alt={result.isFile ? "File" : "Folder"}
+                      alt={result.isFile ? t('settings.documents.fileAlt') : t('settings.documents.folderAlt')}
                       className="flex-shrink-0 w-4 h-4 mr-2"
                     />
                     <span className="text-sm dark:text-[#E0E0E0]">
@@ -537,16 +537,16 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                   <thead className="bg-gray-100 dark:bg-[#27282D]">
                     <tr className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]">
                       <th className="w-3/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
-                        Name
+                        {t('settings.documents.fileName')}
                       </th>
                       <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
-                        Tokens
+                        {t('settings.documents.tokens')}
                       </th>
                       <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
-                        Size
+                        {t('settings.documents.size')}
                       </th>
                       <th className="w-[60px] px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
-                        <span className="sr-only">Actions</span>
+                        <span className="sr-only">{t('settings.documents.actions')}</span>
                       </th>
                     </tr>
                   </thead>