Upload: communicate failure, minor frontend updates (#2048)

* (feat:pause-stream) generator exit

* (feat:pause-stream) close request

* (feat:pause-stream) finally close; google anthropic

* (feat:task_status)communicate failure

* (clean:connector) unused routes

* (feat:file-table) missing skeletons

* (fix:apiKeys) build err

---------

Co-authored-by: GH Action - Upstream Sync <action@github.com>

frontend/src/components/ConnectorTreeComponent.tsx

@@ -6,6 +6,7 @@ import { selectToken } from '../preferences/preferenceSlice';
 import { ActiveState } from '../models/misc';
 import Chunks from './Chunks';
 import ContextMenu, { MenuOption } from './ContextMenu';
+import SkeletonLoader from './SkeletonLoader';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import userService from '../api/services/userService';
 import FileIcon from '../assets/file.svg';
@@ -15,7 +16,7 @@ import ThreeDots from '../assets/three-dots.svg';
 import EyeView from '../assets/eye-view.svg';
 import SyncIcon from '../assets/sync.svg';
 import CheckmarkIcon from '../assets/checkMark2.svg';
-import { useOutsideAlerter } from '../hooks';
+import { useOutsideAlerter, useLoaderState } from '../hooks';
 import {
   Table,
   TableContainer,
@@ -55,7 +56,7 @@ const ConnectorTreeComponent: React.FC<ConnectorTreeComponentProps> = ({
   onBackToDocuments,
 }) => {
   const { t } = useTranslation();
-  const [loading, setLoading] = useState<boolean>(true);
+  const [loading, setLoading] = useLoaderState(true, 500);
   const [error, setError] = useState<string | null>(null);
   const [directoryStructure, setDirectoryStructure] =
     useState<DirectoryStructure | null>(null);
@@ -716,7 +717,13 @@ const ConnectorTreeComponent: React.FC<ConnectorTreeComponentProps> = ({
                     </TableHeader>
                   </TableRow>
                 </TableHead>
-                <TableBody>{renderFileTree(getCurrentDirectory())}</TableBody>
+                <TableBody>
+                  {loading ? (
+                    <SkeletonLoader component="fileTable" />
+                  ) : (
+                    renderFileTree(getCurrentDirectory())
+                  )}
+                </TableBody>
               </Table>
             </TableContainer>
           </div>

frontend/src/components/FileTreeComponent.tsx

@@ -5,6 +5,7 @@ import { selectToken } from '../preferences/preferenceSlice';
 import { formatBytes } from '../utils/stringUtils';
 import Chunks from './Chunks';
 import ContextMenu, { MenuOption } from './ContextMenu';
+import SkeletonLoader from './SkeletonLoader';
 import userService from '../api/services/userService';
 import FileIcon from '../assets/file.svg';
 import FolderIcon from '../assets/folder.svg';
@@ -12,7 +13,7 @@ import ArrowLeft from '../assets/arrow-left.svg';
 import ThreeDots from '../assets/three-dots.svg';
 import EyeView from '../assets/eye-view.svg';
 import Trash from '../assets/red-trash.svg';
-import { useOutsideAlerter } from '../hooks';
+import { useOutsideAlerter, useLoaderState } from '../hooks';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import {
   Table,
@@ -53,7 +54,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   onBackToDocuments,
 }) => {
   const { t } = useTranslation();
-  const [loading, setLoading] = useState<boolean>(true);
+  const [loading, setLoading] = useLoaderState(true, 500);
   const [error, setError] = useState<string | null>(null);
   const [directoryStructure, setDirectoryStructure] =
     useState<DirectoryStructure | null>(null);
@@ -839,7 +840,13 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                     </TableHeader>
                   </TableRow>
                 </TableHead>
-                <TableBody>{renderFileTree(currentDirectory)}</TableBody>
+                <TableBody>
+                  {loading ? (
+                    <SkeletonLoader component="fileTable" />
+                  ) : (
+                    renderFileTree(currentDirectory)
+                  )}
+                </TableBody>
               </Table>
             </TableContainer>
           </div>

frontend/src/components/SkeletonLoader.tsx

@@ -6,7 +6,7 @@ interface SkeletonLoaderProps {
     | 'default'
     | 'analysis'
     | 'logs'
-    | 'table'
+    | 'fileTable'
     | 'chatbot'
     | 'dropdown'
     | 'chunkCards'
@@ -44,15 +44,15 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
     <>
       {[...Array(4)].map((_, idx) => (
         <tr key={idx} className="animate-pulse">
-          <td className="w-[45%] px-4 py-4">
+          <td className="w-[40%] px-4 py-4">
+            <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+          </td>
+          <td className="w-[30%] px-4 py-4">
             <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
           </td>
           <td className="w-[20%] px-4 py-4">
             <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
           </td>
-          <td className="w-[25%] px-4 py-4">
-            <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-          </td>
           <td className="w-[10%] px-4 py-4">
             <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
           </td>
@@ -241,7 +241,7 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   );
 
   const componentMap = {
-    table: renderTable,
+    fileTable: renderTable,
     chatbot: renderChatbot,
     dropdown: renderDropdown,
     logs: renderLogs,

frontend/src/components/UploadToast.tsx

@@ -37,7 +37,7 @@ export default function UploadToast() {
       case 'completed':
         return t('modals.uploadDoc.progress.completed');
       case 'failed':
-        return t('attachments.uploadFailed');
+        return t('modals.uploadDoc.progress.failed');
       default:
         return t('modals.uploadDoc.progress.preparing');
     }