(feat:settings/docs) confirm on delete

frontend/src/locale/en.json

@@ -71,7 +71,8 @@
         "weekly": "Weekly",
         "monthly": "Monthly"
       },
-      "actions": "Actions"
+      "actions": "Actions",
+      "deleteWarning": "Are you sure you want to delete \"{{name}}\"?"
     },
     "apiKeys": {
       "label": "Chatbots",

frontend/src/locale/es.json

@@ -71,7 +71,8 @@
         "weekly": "Semanal",
         "monthly": "Mensual"
       },
-      "actions": "Acciones"
+      "actions": "Acciones",
+      "deleteWarning": "¿Estás seguro de que deseas eliminar \"{{name}}\"?"
     },
     "apiKeys": {
       "label": "Chatbots",

frontend/src/locale/jp.json

@@ -70,7 +70,8 @@
         "weekly": "毎週",
         "monthly": "毎月"
       },
-      "actions": "アクション"
+      "actions": "アクション",
+      "deleteWarning": "\"{{name}}\"を削除してもよろしいですか？"
     },
     "apiKeys": {
       "label": "チャットボット",

frontend/src/locale/ru.json

@@ -71,7 +71,8 @@
         "weekly": "Еженедельно",
         "monthly": "Ежемесячно"
       },
-      "actions": "Действия"
+      "actions": "Действия",
+      "deleteWarning": "Вы уверены, что хотите удалить \"{{name}}\"?"
     },
     "apiKeys": {
       "label": "API ключи",

frontend/src/locale/zh-TW.json

@@ -71,7 +71,8 @@
         "weekly": "每週",
         "monthly": "每月"
       },
-      "actions": "操作"
+      "actions": "操作",
+      "deleteWarning": "您確定要刪除 \"{{name}}\" 嗎？"
     },
     "apiKeys": {
       "label": "聊天機器人",

frontend/src/locale/zh.json

@@ -71,7 +71,8 @@
         "weekly": "每周",
         "monthly": "每月"
       },
-      "actions": "操作"
+      "actions": "操作",
+      "deleteWarning": "您确定要删除 \"{{name}}\" 吗？"
     },
     "apiKeys": {
       "label": "聊天机器人",

frontend/src/settings/Documents.tsx

@@ -16,6 +16,7 @@ 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
 const formatTokens = (tokens: number): string => {
@@ -134,6 +135,26 @@ const Documents: React.FC<DocumentsProps> = ({
       });
   };
 
+  const [documentToDelete, setDocumentToDelete] = useState<{
+    index: number;
+    document: Doc;
+  } | null>(null);
+  const [deleteModalState, setDeleteModalState] =
+    useState<ActiveState>('INACTIVE');
+
+  const handleDeleteConfirmation = (index: number, document: Doc) => {
+    setDocumentToDelete({ index, document });
+    setDeleteModalState('ACTIVE');
+  };
+
+  const handleConfirmedDelete = () => {
+    if (documentToDelete) {
+      handleDeleteDocument(documentToDelete.index, documentToDelete.document);
+      setDeleteModalState('INACTIVE');
+      setDocumentToDelete(null);
+    }
+  };
+
   useEffect(() => {
     refreshDocs(undefined, 1, rowsPerPage);
   }, [searchTerm]);
@@ -182,10 +203,10 @@ const Documents: React.FC<DocumentsProps> = ({
           <div className="flex flex-col flex-grow">
             {' '}
             {/* Removed overflow-auto */}
-            <div className="border rounded-md border-silver dark:border-silver/40">
+            <div className="border rounded-md border-gray-300 dark:border-silver/40 overflow-hidden">
               <table className="w-full min-w-[640px] table-auto">
                 <thead>
-                  <tr className="border-b border-silver dark:border-silver/40">
+                  <tr className="border-b border-gray-300 dark:border-silver/40">
                     <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver uppercase w-[45%]">
                       {t('settings.documents.name')}
                     </th>
@@ -223,34 +244,34 @@ const Documents: React.FC<DocumentsProps> = ({
                     </th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-silver dark:divide-silver/40">
+                <tbody className="divide-y divide-gray-300 dark:divide-silver/40">
                   {!currentDocuments?.length ? (
                     <tr>
                       <td
                         colSpan={4}
-                        className="py-4 text-center text-gray-700 dark:text-[#E0E0E0] bg-white dark:bg-transparent"
+                        className="py-4 text-center text-gray-700 dark:text-[#E0E0E] bg-transparent"
                       >
                         {t('settings.documents.noData')}
                       </td>
                     </tr>
                   ) : (
                     currentDocuments.map((document, index) => (
-                      <tr key={index} className="bg-white dark:bg-transparent">
+                      <tr key={index} className="group transition-colors">
                         <td
-                          className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[45%] truncate"
+                          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}
                         >
                           {document.name}
                         </td>
-                        <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[20%]">
+                        <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[20%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
                           {document.date ? formatDate(document.date) : ''}
                         </td>
-                        <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[25%]">
+                        <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[25%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
                           {document.tokens
                             ? formatTokens(+document.tokens)
                             : ''}
                         </td>
-                        <td className="py-4 px-4 text-right w-[10%]">
+                        <td className="py-4 px-4 text-right w-[10%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
                           <div className="flex items-center justify-end gap-3">
                             {!document.syncFrequency && (
                               <div className="w-8"></div>
@@ -269,7 +290,7 @@ const Documents: React.FC<DocumentsProps> = ({
                             <button
                               onClick={(event) => {
                                 event.stopPropagation();
-                                handleDeleteDocument(index, document);
+                                handleDeleteConfirmation(index, document);
                               }}
                               className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
                             >
@@ -320,6 +341,22 @@ const Documents: React.FC<DocumentsProps> = ({
           }
         />
       )}
+
+      {deleteModalState === 'ACTIVE' && documentToDelete && (
+        <ConfirmationModal
+          message={t('settings.documents.deleteWarning', {
+            name: documentToDelete.document.name,
+          })}
+          modalState={deleteModalState}
+          setModalState={setDeleteModalState}
+          handleSubmit={handleConfirmedDelete}
+          handleCancel={() => {
+            setDeleteModalState('INACTIVE');
+            setDocumentToDelete(null);
+          }}
+          submitLabel={t('convTile.delete')}
+        />
+      )}
     </div>
   );
 };

frontend/src/upload/Upload.tsx

@@ -23,14 +23,14 @@ function Upload({
   isOnboarding,
   renderTab = null,
   close,
-  onSuccessfulUpload,
+  onSuccessfulUpload = () => undefined,
 }: {
   receivedFile: File[];
   setModalState: (state: ActiveState) => void;
   isOnboarding: boolean;
   renderTab: string | null;
   close: () => void;
-  onSuccessfulUpload: () => void;
+  onSuccessfulUpload?: () => void;
 }) {
   const [docName, setDocName] = useState(receivedFile[0]?.name);
   const [urlName, setUrlName] = useState('');
@@ -220,7 +220,7 @@ function Upload({
                   setfiles([]);
                   setProgress(undefined);
                   setModalState('INACTIVE');
-                  onSuccessfulUpload();
+                  onSuccessfulUpload?.();
                 }
               } else if (data.status == 'PROGRESS') {
                 setProgress(