feat(transcript-view): Add start recording button and empty state (#835)

Author: ComputelessComputer

apps/desktop/src/components/right-panel/views/transcript-view.tsx

@@ -1,12 +1,21 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
-import { CheckIcon, ClipboardCopyIcon, EarIcon, FileAudioIcon, PencilIcon } from "lucide-react";
+import {
+  CheckIcon,
+  ClipboardCopyIcon,
+  ClipboardIcon,
+  EarIcon,
+  FileAudioIcon,
+  PencilIcon,
+  UploadIcon,
+} from "lucide-react";
 import { useEffect, useRef } from "react";
 
 import { commands as dbCommands } from "@hypr/plugin-db";
 import { commands as miscCommands } from "@hypr/plugin-misc";
 import { commands as windowsCommands, events as windowsEvents } from "@hypr/plugin-windows";
 import { Button } from "@hypr/ui/components/ui/button";
+import { Spinner } from "@hypr/ui/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@hypr/ui/components/ui/tooltip";
 import { useOngoingSession, useSessions } from "@hypr/utils/contexts";
 import { useTranscript } from "../hooks/useTranscript";
@@ -17,8 +26,13 @@ export function TranscriptView() {
   const transcriptContainerRef = useRef<HTMLDivElement>(null);
 
   const sessionId = useSessions((s) => s.currentSessionId);
-  const isInactive = useOngoingSession((s) => s.status === "inactive");
-  const { showEmptyMessage, isEnhanced, hasTranscript } = useTranscriptWidget(sessionId);
+  const ongoingSession = useOngoingSession((s) => ({
+    start: s.start,
+    status: s.status,
+    loading: s.loading,
+    isInactive: s.status === "inactive",
+  }));
+  const { showEmptyMessage, hasTranscript } = useTranscriptWidget(sessionId);
   const { isLive, words } = useTranscript(sessionId);
 
   const handleCopyAll = () => {
@@ -66,6 +80,12 @@ export function TranscriptView() {
     }
   };
 
+  const handleStartRecording = () => {
+    if (sessionId && ongoingSession.status === "inactive") {
+      ongoingSession.start(sessionId);
+    }
+  };
+
   useEffect(() => {
     const scrollToBottom = () => {
       requestAnimationFrame(() => {
@@ -95,7 +115,7 @@ export function TranscriptView() {
   }, []);
 
   return (
-    <div className="relative w-full h-full flex flex-col">
+    <div className="w-full h-full flex flex-col">
       <div className="p-4 pb-0">
         <header className="flex items-center gap-2 w-full">
           <div className="flex-1 text-md font-medium">
@@ -111,7 +131,7 @@ export function TranscriptView() {
             </div>
           </div>
           <div className="not-draggable flex items-center gap-2">
-            {(audioExist.data && isInactive && hasTranscript && sessionId) && (
+            {(audioExist.data && ongoingSession.isInactive && hasTranscript && sessionId) && (
               <TooltipProvider key="listen-recording-tooltip">
                 <Tooltip>
                   <TooltipTrigger asChild>
@@ -150,40 +170,64 @@ export function TranscriptView() {
         </header>
       </div>
 
-      {sessionId && (
-        <div
-          ref={transcriptContainerRef}
-          className="flex-1 scrollbar-none px-4 flex flex-col gap-2 overflow-y-auto text-sm py-4"
-        >
-          <p className="whitespace-pre-wrap">
-            {words.map((word, i) => (
-              <span key={`${word.text}-${i}`}>
-                {i > 0 ? " " : ""}
-                {word.text}
-              </span>
-            ))}
-          </p>
-          {isLive && (
-            <div className="flex items-center gap-2 justify-center py-2 text-neutral-400">
-              <EarIcon size={14} /> Listening... (there might be a delay)
-            </div>
-          )}
-        </div>
-      )}
+      {!sessionId ? null : (
+        <div className="flex-1">
+          {showEmptyMessage
+            ? (
+              <div className="h-full flex items-center justify-center">
+                <div className="text-neutral-500 font-medium text-center">
+                  <div className="mb-6 text-neutral-600 flex items-center gap-1.5">
+                    <Button size="sm" onClick={handleStartRecording} disabled={ongoingSession.loading}>
+                      {ongoingSession.loading ? <Spinner color="black" /> : (
+                        <div className="relative h-2 w-2 mr-2">
+                          <div className="absolute inset-0 rounded-full bg-red-500"></div>
+                          <div className="absolute inset-0 rounded-full bg-red-400 animate-ping"></div>
+                        </div>
+                      )}
+                      {ongoingSession.loading ? "Starting..." : "Start recording"}
+                    </Button>
+                    <span className="text-sm">to see live transcript</span>
+                  </div>
 
-      {!sessionId && (
-        <div className="absolute inset-0 backdrop-blur-sm bg-white/50 flex items-center justify-center">
-          <div className="text-neutral-500 font-medium">Session not found</div>
-        </div>
-      )}
+                  <div className="flex items-center justify-center w-full max-w-[240px] mb-4">
+                    <div className="h-px bg-neutral-200 flex-grow"></div>
+                    <span className="px-3 text-xs text-neutral-400 font-medium">or</span>
+                    <div className="h-px bg-neutral-200 flex-grow"></div>
+                  </div>
 
-      {sessionId && showEmptyMessage && (
-        <div className="absolute inset-0 backdrop-blur-sm bg-white/50 flex items-center justify-center rounded-2xl">
-          <div className="text-neutral-500 font-medium">
-            {isEnhanced
-              ? "No transcript available"
-              : "Meeting is not active"}
-          </div>
+                  <div className="flex flex-col gap-2">
+                    <Button variant="outline" size="sm" className="hover:bg-neutral-100" disabled>
+                      <UploadIcon size={14} />Upload recording{" "}
+                      <span className="text-xs text-neutral-400 italic">coming soon</span>
+                    </Button>
+                    <Button variant="outline" size="sm" className="hover:bg-neutral-100" disabled>
+                      <ClipboardIcon size={14} />Paste transcript{" "}
+                      <span className="text-xs text-neutral-400 italic">coming soon</span>
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            )
+            : (
+              <div
+                ref={transcriptContainerRef}
+                className="h-full scrollbar-none px-4 flex flex-col gap-2 overflow-y-auto text-sm py-4"
+              >
+                <p className="whitespace-pre-wrap">
+                  {words.map((word, i) => (
+                    <span key={`${word.text}-${i}`}>
+                      {i > 0 ? " " : ""}
+                      {word.text}
+                    </span>
+                  ))}
+                </p>
+                {isLive && (
+                  <div className="flex items-center gap-2 justify-center py-2 text-neutral-400">
+                    <EarIcon size={14} /> Listening... (there might be a delay)
+                  </div>
+                )}
+              </div>
+            )}
         </div>
       )}
     </div>