feat(web): add trigger button and status indicators for file transcription (#2188)

* feat(web): add trigger button and status indicators for file transcription

- Separate file upload from pipeline start
- Add 'Start Transcription' button that appears after file upload
- Add detailed status indicators (uploading, uploaded, queued, transcribing, summarizing, done, error)
- Update FileInfo component to show upload progress and disable remove during processing
- Update TranscriptDisplay to handle new status types

Co-Authored-By: yujonglee <[email protected]>

* refactor(web): use useMutation for upload and pipeline state management

- Replace manual isUploading/uploadError state with uploadMutation
- Replace manual pipeline start error handling with startPipelineMutation
- Derive loading/error states from mutation.isPending and mutation.error
- Reset mutations on file select and remove to clear stale state

Co-Authored-By: yujonglee <[email protected]>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: yujonglee <[email protected]>

Author: devin-ai-integration[bot]

apps/web/src/components/transcription/transcript-display.tsx

@@ -3,16 +3,20 @@ import { cn } from "@hypr/utils";
 type Status =
   | "idle"
   | "uploading"
+  | "uploaded"
   | "queued"
   | "transcribing"
+  | "summarizing"
   | "done"
   | "error";
 
 const statusMessages: Record<Status, string> = {
   idle: "Upload an audio file to see the transcript",
   uploading: "Uploading audio file...",
+  uploaded: "Ready to transcribe",
   queued: "Queued for transcription...",
   transcribing: "Transcribing audio...",
+  summarizing: "Generating summary...",
   done: "",
   error: "",
 };
@@ -35,7 +39,10 @@ export function TranscriptDisplay({
   }
 
   const isProcessing =
-    status === "uploading" || status === "queued" || status === "transcribing";
+    status === "uploading" ||
+    status === "queued" ||
+    status === "transcribing" ||
+    status === "summarizing";
 
   if (isProcessing) {
     return (
@@ -48,6 +55,16 @@ export function TranscriptDisplay({
     );
   }
 
+  if (status === "uploaded") {
+    return (
+      <div className="border border-neutral-200 rounded-sm p-8 text-center">
+        <p className="text-neutral-500">
+          Click "Start Transcription" to begin processing your audio
+        </p>
+      </div>
+    );
+  }
+
   if (!transcript) {
     return (
       <div className="border border-neutral-200 rounded-sm p-8 text-center">
@@ -71,17 +88,23 @@ export function FileInfo({
   fileName,
   fileSize,
   onRemove,
+  isUploading,
+  isProcessing,
 }: {
   fileName: string;
   fileSize: number;
   onRemove: () => void;
+  isUploading?: boolean;
+  isProcessing?: boolean;
 }) {
   const formatSize = (bytes: number) => {
     if (bytes < 1024) return `${bytes} B`;
     if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   };
 
+  const canRemove = !isUploading && !isProcessing;
+
   return (
     <div
       className={cn([
@@ -90,15 +113,28 @@ export function FileInfo({
         "bg-stone-50/30",
       ])}
     >
-      <div className="flex-1 min-w-0">
-        <p className="text-sm font-medium text-neutral-700 truncate">
-          {fileName}
-        </p>
-        <p className="text-xs text-neutral-500">{formatSize(fileSize)}</p>
+      <div className="flex-1 min-w-0 flex items-center gap-3">
+        {isUploading && (
+          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-stone-600 shrink-0" />
+        )}
+        <div>
+          <p className="text-sm font-medium text-neutral-700 truncate">
+            {fileName}
+          </p>
+          <p className="text-xs text-neutral-500">
+            {isUploading ? "Uploading..." : formatSize(fileSize)}
+          </p>
+        </div>
       </div>
       <button
         onClick={onRemove}
-        className="ml-4 px-3 py-1 text-sm text-neutral-600 hover:text-neutral-800 border border-neutral-200 rounded-full hover:bg-neutral-50 transition-all"
+        disabled={!canRemove}
+        className={cn([
+          "ml-4 px-3 py-1 text-sm border border-neutral-200 rounded-full transition-all",
+          canRemove &&
+            "text-neutral-600 hover:text-neutral-800 hover:bg-neutral-50",
+          !canRemove && "text-neutral-400 cursor-not-allowed",
+        ])}
       >
         Remove
       </button>

apps/web/src/routes/_view/app/file-transcription.tsx

@@ -1,10 +1,12 @@
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
+import { Play } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 
 import NoteEditor, { type JSONContent } from "@hypr/tiptap/editor";
 import { EMPTY_TIPTAP_DOC } from "@hypr/tiptap/shared";
 import "@hypr/tiptap/styles.css";
+import { cn } from "@hypr/utils";
 
 import {
   FileInfo,
@@ -27,16 +29,74 @@ export const Route = createFileRoute("/_view/app/file-transcription")({
 
 function Component() {
   const [file, setFile] = useState<File | null>(null);
+  const [fileId, setFileId] = useState<string | null>(null);
   const [pipelineId, setPipelineId] = useState<string | null>(null);
   const [transcript, setTranscript] = useState<string | null>(null);
-  const [uploadError, setUploadError] = useState<string | null>(null);
   const [noteContent, setNoteContent] = useState<JSONContent>(EMPTY_TIPTAP_DOC);
   const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
     setIsMounted(true);
   }, []);
 
+  const uploadMutation = useMutation({
+    mutationFn: async (selectedFile: File) => {
+      const base64Data = await new Promise<string>((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+          const result = reader.result?.toString().split(",")[1];
+          if (!result) {
+            reject(new Error("Failed to read file"));
+          } else {
+            resolve(result);
+          }
+        };
+        reader.onerror = () => reject(new Error("Failed to read file"));
+        reader.readAsDataURL(selectedFile);
+      });
+
+      const uploadResult = await uploadAudioFile({
+        data: {
+          fileName: selectedFile.name,
+          fileType: selectedFile.type,
+          fileData: base64Data,
+        },
+      });
+
+      if ("error" in uploadResult && uploadResult.error) {
+        throw new Error(uploadResult.message || "Failed to upload file");
+      }
+      if (!("fileId" in uploadResult)) {
+        throw new Error("Failed to get file ID");
+      }
+
+      return uploadResult.fileId;
+    },
+    onSuccess: (newFileId) => {
+      setFileId(newFileId);
+    },
+  });
+
+  const startPipelineMutation = useMutation({
+    mutationFn: async (fileIdArg: string) => {
+      const pipelineResult = await startAudioPipeline({
+        data: { fileId: fileIdArg },
+      });
+
+      if ("error" in pipelineResult && pipelineResult.error) {
+        throw new Error(pipelineResult.message || "Failed to start pipeline");
+      }
+      if (!("pipelineId" in pipelineResult)) {
+        throw new Error("Failed to get pipeline ID");
+      }
+
+      return pipelineResult.pipelineId;
+    },
+    onSuccess: (newPipelineId) => {
+      setPipelineId(newPipelineId);
+    },
+  });
+
   const pipelineStatusQuery = useQuery({
     queryKey: ["audioPipelineStatus", pipelineId],
     queryFn: async (): Promise<StatusStateType> => {
@@ -70,8 +130,11 @@ function Component() {
   }, [pipelineStatusQuery.data]);
 
   const isProcessing =
-    !!pipelineId &&
-    !["DONE", "ERROR"].includes(pipelineStatusQuery.data?.status ?? "");
+    (!!pipelineId &&
+      !["DONE", "ERROR"].includes(pipelineStatusQuery.data?.status ?? "")) ||
+    startPipelineMutation.isPending;
+
+  const pipelineStatus = pipelineStatusQuery.data?.status;
 
   const status = (() => {
     if (pipelineStatusQuery.data?.status === "ERROR") {
@@ -80,86 +143,64 @@ function Component() {
     if (pipelineStatusQuery.data?.status === "DONE" || transcript) {
       return "done" as const;
     }
-    if (pipelineId) {
+    if (pipelineStatus === "LLM_RUNNING") {
+      return "summarizing" as const;
+    }
+    if (pipelineStatus === "TRANSCRIBED") {
+      return "summarizing" as const;
+    }
+    if (pipelineStatus === "TRANSCRIBING") {
       return "transcribing" as const;
     }
+    if (pipelineStatus === "QUEUED" || pipelineId) {
+      return "queued" as const;
+    }
+    if (uploadMutation.isPending) {
+      return "uploading" as const;
+    }
+    if (fileId) {
+      return "uploaded" as const;
+    }
     return "idle" as const;
   })();
 
   const errorMessage =
-    uploadError ??
+    (uploadMutation.error instanceof Error
+      ? uploadMutation.error.message
+      : null) ??
+    (startPipelineMutation.error instanceof Error
+      ? startPipelineMutation.error.message
+      : null) ??
     (pipelineStatusQuery.isError && pipelineStatusQuery.error instanceof Error
       ? pipelineStatusQuery.error.message
       : null) ??
     (pipelineStatusQuery.data?.status === "ERROR"
-      ? pipelineStatusQuery.data.error
+      ? (pipelineStatusQuery.data.error ?? null)
       : null);
 
-  const handleFileSelect = async (selectedFile: File) => {
+  const handleFileSelect = (selectedFile: File) => {
     setFile(selectedFile);
-    setTranscript(null);
-    setUploadError(null);
+    setFileId(null);
     setPipelineId(null);
+    setTranscript(null);
+    uploadMutation.reset();
+    startPipelineMutation.reset();
+    uploadMutation.mutate(selectedFile);
+  };
 
-    try {
-      const reader = new FileReader();
-      reader.readAsDataURL(selectedFile);
-
-      reader.onload = async () => {
-        const base64Data = reader.result?.toString().split(",")[1];
-        if (!base64Data) {
-          setUploadError("Failed to read file");
-          return;
-        }
-
-        const uploadResult = await uploadAudioFile({
-          data: {
-            fileName: selectedFile.name,
-            fileType: selectedFile.type,
-            fileData: base64Data,
-          },
-        });
-
-        if ("error" in uploadResult && uploadResult.error) {
-          setUploadError(uploadResult.message || "Failed to upload file");
-          return;
-        }
-
-        if (!("fileId" in uploadResult)) {
-          setUploadError("Failed to get file ID");
-          return;
-        }
-
-        const pipelineResult = await startAudioPipeline({
-          data: {
-            fileId: uploadResult.fileId,
-          },
-        });
-
-        if ("error" in pipelineResult && pipelineResult.error) {
-          setUploadError(pipelineResult.message || "Failed to start pipeline");
-          return;
-        }
-
-        if ("pipelineId" in pipelineResult) {
-          setPipelineId(pipelineResult.pipelineId);
-        }
-      };
-
-      reader.onerror = () => {
-        setUploadError("Failed to read file");
-      };
-    } catch (err) {
-      setUploadError(err instanceof Error ? err.message : "Unknown error");
-    }
+  const handleStartTranscription = () => {
+    if (!fileId) return;
+    startPipelineMutation.mutate(fileId);
   };
 
   const handleRemoveFile = () => {
     setFile(null);
-    setTranscript(null);
-    setUploadError(null);
+    setFileId(null);
     setPipelineId(null);
+    setTranscript(null);
     setNoteContent(EMPTY_TIPTAP_DOC);
+    uploadMutation.reset();
+    startPipelineMutation.reset();
   };
 
   const mentionConfig = useMemo(
@@ -224,11 +265,32 @@ function Component() {
                       disabled={isProcessing}
                     />
                   ) : (
-                    <FileInfo
-                      fileName={file.name}
-                      fileSize={file.size}
-                      onRemove={handleRemoveFile}
-                    />
+                    <div className="space-y-4">
+                      <FileInfo
+                        fileName={file.name}
+                        fileSize={file.size}
+                        onRemove={handleRemoveFile}
+                        isUploading={uploadMutation.isPending}
+                        isProcessing={isProcessing}
+                      />
+                      {status === "uploaded" && (
+                        <button
+                          onClick={handleStartTranscription}
+                          className={cn([
+                            "w-full flex items-center justify-center gap-2",
+                            "px-4 py-3 rounded-lg",
+                            "bg-gradient-to-t from-stone-600 to-stone-500",
+                            "text-white font-medium",
+                            "shadow-md hover:shadow-lg",
+                            "hover:scale-[101%] active:scale-[99%]",
+                            "transition-all",
+                          ])}
+                        >
+                          <Play size={18} />
+                          Start Transcription
+                        </button>
+                      )}
+                    </div>
                   )}
 
                   <div>