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');
     }

frontend/src/locale/en.json

@@ -262,6 +262,7 @@
         "upload": "Upload is in progress",
         "training": "Upload is in progress",
         "completed": "Upload completed",
+        "failed": "Upload failed",
         "wait": "This may take several minutes",
         "preparing": "Preparing upload",
         "tokenLimit": "Over the token limit, please consider uploading smaller document",
@@ -424,8 +425,7 @@
     },
     "attachments": {
       "attach": "Attach",
-      "remove": "Remove attachment",
-      "uploadFailed": "Upload failed"
+      "remove": "Remove attachment"
     },
     "retry": "Retry"
   }

frontend/src/locale/es.json

@@ -225,6 +225,7 @@
         "upload": "Subida en progreso",
         "training": "Subida en progreso",
         "completed": "Subida completada",
+        "failed": "Error al subir",
         "wait": "Esto puede tardar varios minutos",
         "preparing": "Preparando subida",
         "tokenLimit": "Excede el límite de tokens, considere cargar un documento más pequeño",
@@ -387,8 +388,7 @@
     },
     "attachments": {
       "attach": "Adjuntar",
-      "remove": "Eliminar adjunto",
-      "uploadFailed": "Error al subir"
+      "remove": "Eliminar adjunto"
     },
     "retry": "Reintentar"
   }

frontend/src/locale/jp.json

@@ -225,6 +225,7 @@
         "upload": "アップロード中",
         "training": "アップロード中",
         "completed": "アップロード完了",
+        "failed": "アップロード失敗",
         "wait": "数分かかる場合があります",
         "preparing": "アップロードを準備中",
         "tokenLimit": "トークン制限を超えています。より小さいドキュメントをアップロードしてください",
@@ -387,8 +388,7 @@
     },
     "attachments": {
       "attach": "添付",
-      "remove": "添付ファイルを削除",
-      "uploadFailed": "アップロード失敗"
+      "remove": "添付ファイルを削除"
     },
     "retry": "再試行"
   }

frontend/src/locale/ru.json

@@ -225,6 +225,7 @@
         "upload": "Идет загрузка",
         "training": "Идет загрузка",
         "completed": "Загрузка завершена",
+        "failed": "Ошибка загрузки",
         "wait": "Это может занять несколько минут",
         "preparing": "Подготовка загрузки",
         "tokenLimit": "Превышен лимит токенов, рассмотрите возможность загрузки документа меньшего размера",
@@ -387,8 +388,7 @@
     },
     "attachments": {
       "attach": "Прикрепить",
-      "remove": "Удалить вложение",
-      "uploadFailed": "Ошибка загрузки"
+      "remove": "Удалить вложение"
     },
     "retry": "Повторить"
   }

frontend/src/locale/zh-TW.json

@@ -225,6 +225,7 @@
         "upload": "正在上傳",
         "training": "正在上傳",
         "completed": "上傳完成",
+        "failed": "上傳失敗",
         "wait": "這可能需要幾分鐘",
         "preparing": "準備上傳",
         "tokenLimit": "超出令牌限制，請考慮上傳較小的文檔",
@@ -387,8 +388,7 @@
     },
     "attachments": {
       "attach": "附件",
-      "remove": "刪除附件",
-      "uploadFailed": "上傳失敗"
+      "remove": "刪除附件"
     },
     "retry": "重試"
   }

frontend/src/locale/zh.json

@@ -225,6 +225,7 @@
         "upload": "正在上传",
         "training": "正在上传",
         "completed": "上传完成",
+        "failed": "上传失败",
         "wait": "这可能需要几分钟",
         "preparing": "准备上传",
         "tokenLimit": "超出令牌限制，请考虑上传较小的文档",
@@ -387,8 +388,7 @@
     },
     "attachments": {
       "attach": "附件",
-      "remove": "删除附件",
-      "uploadFailed": "上传失败"
+      "remove": "删除附件"
     },
     "retry": "重试"
   }

frontend/src/settings/APIKeys.tsx

@@ -146,7 +146,7 @@ export default function APIKeys() {
                 </thead>
                 <tbody className="dark:divide-silver/40 divide-y divide-gray-300">
                   {loading ? (
-                    <SkeletonLoader component="table" />
+                    <SkeletonLoader component="fileTable" />
                   ) : !apiKeys?.length ? (
                     <tr>
                       <td

frontend/src/upload/Upload.tsx

@@ -291,12 +291,12 @@ function Upload({
           id: clientTaskId,
           updates: {
             status: 'failed',
-            errorMessage: errorMessage || t('attachments.uploadFailed'),
+            errorMessage: errorMessage,
           },
         }),
       );
     },
-    [dispatch, t],
+    [dispatch],
   );
 
   const trackTraining = useCallback(
@@ -308,6 +308,15 @@ function Upload({
           .getTaskStatus(backendTaskId, null)
           .then((response) => response.json())
           .then(async (data) => {
+            if (!data.success && data.message) {
+              if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+              }
+              handleTaskFailure(clientTaskId, data.message);
+              return;
+            }
+
             if (data.status === 'SUCCESS') {
               if (timeoutId !== null) {
                 clearTimeout(timeoutId);
@@ -376,12 +385,12 @@ function Upload({
               timeoutId = window.setTimeout(poll, 5000);
             }
           })
-          .catch(() => {
+          .catch((error) => {
             if (timeoutId !== null) {
               clearTimeout(timeoutId);
               timeoutId = null;
             }
-            handleTaskFailure(clientTaskId);
+            handleTaskFailure(clientTaskId, error?.message);
           });
       };