invalid words cache when transcript edited

Author: yujonglee

apps/desktop/src/components/right-panel/hooks/useTranscript.ts

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from "react";
 import { commands as dbCommands } from "@hypr/plugin-db";
 import { events as listenerEvents, type Word } from "@hypr/plugin-listener";
 import { useOngoingSession, useSession } from "@hypr/utils/contexts";
+import { useQuery } from "@tanstack/react-query";
 
 export function useTranscript(sessionId: string | null) {
   const ongoingSessionState = useOngoingSession((s) => ({
@@ -21,31 +22,23 @@ export function useTranscript(sessionId: string | null) {
 
   const [words, setWords] = useState<Word[]>([]);
   const [selectedLanguage, setSelectedLanguage] = useState<string>("en");
-  const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  useEffect(() => {
-    if (!sessionId) {
-      setWords([]);
-      return;
-    }
+  const existingWords = useQuery({
+    enabled: !!sessionId,
+    queryKey: ["session", "words", sessionId],
+    queryFn: async () => {
+      const onboardingSessionId = await dbCommands.onboardingSessionId();
+      const fn = (sessionId === onboardingSessionId && isEnhanced)
+        ? dbCommands.getWordsOnboarding
+        : dbCommands.getWords;
 
-    setIsLoading(true);
-    const fn = async () => {
-      try {
-        const onboardingSessionId = await dbCommands.onboardingSessionId();
-        const fn = (sessionId === onboardingSessionId && isEnhanced)
-          ? dbCommands.getWordsOnboarding
-          : dbCommands.getWords;
+      return fn(sessionId!);
+    },
+  });
 
-        const words = await fn(sessionId);
-        setWords(words as Word[]);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fn();
-  }, [sessionId, isEnhanced]);
+  useEffect(() => {
+    setWords(existingWords.data ?? []);
+  }, [existingWords.data]);
 
   useEffect(() => {
     if (ongoingSessionState.status !== "running_active" || ongoingSessionState.sessionId !== sessionId) {
@@ -78,6 +71,5 @@ export function useTranscript(sessionId: string | null) {
     isLive,
     selectedLanguage,
     handleLanguageChange,
-    isLoading,
   };
 }

apps/desktop/src/components/right-panel/hooks/useTranscriptWidget.ts

@@ -2,13 +2,13 @@ import { useSession } from "@hypr/utils/contexts";
 import { useTranscript } from "./useTranscript";
 
 export function useTranscriptWidget(sessionId: string | null) {
-  const { words, isLive, selectedLanguage, handleLanguageChange, isLoading } = useTranscript(sessionId);
+  const { words, isLive, selectedLanguage, handleLanguageChange } = useTranscript(sessionId);
   const isEnhanced = sessionId ? useSession(sessionId, (s) => !!s.session.enhanced_memo_html) : false;
 
   const hasTranscript = words.length > 0;
   const isSessionActive = sessionId && (hasTranscript || isLive);
 
-  const showEmptyMessage = sessionId && !hasTranscript && !isLive && !isLoading;
+  const showEmptyMessage = sessionId && !hasTranscript && !isLive;
 
   return {
     words,
@@ -19,6 +19,5 @@ export function useTranscriptWidget(sessionId: string | null) {
     isSessionActive,
     showEmptyMessage,
     isEnhanced,
-    isLoading,
   };
 }

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

@@ -31,7 +31,7 @@ export function TranscriptView() {
   const sessionId = useSessions((s) => s.currentSessionId);
   const isInactive = useOngoingSession((s) => s.status === "inactive");
   const { showEmptyMessage, isEnhanced, hasTranscript } = useTranscriptWidget(sessionId);
-  const { isLive, words, isLoading } = useTranscript(sessionId);
+  const { isLive, words } = useTranscript(sessionId);
 
   const handleCopyAll = () => {
     if (words && words.length > 0) {
@@ -157,29 +157,19 @@ export function TranscriptView() {
           ref={transcriptContainerRef}
           className="flex-1 scrollbar-none px-4 flex flex-col gap-2 overflow-y-auto text-sm py-4"
         >
-          {isLoading
-            ? (
-              <div className="flex items-center gap-2 justify-center py-2 text-neutral-400">
-                <Loader2Icon size={14} className="animate-spin" /> Loading transcript...
-              </div>
-            )
-            : (
-              <>
-                <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>
-                )}
-              </>
-            )}
+          <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>
       )}
 

apps/desktop/src/routes/app.transcript.$id.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute, useParams } from "@tanstack/react-router";
 import { ReplaceAllIcon } from "lucide-react";
 import { PencilIcon } from "lucide-react";
@@ -37,6 +37,11 @@ type SpeakerContent = {
 type WordContent = {
   type: "word";
   content: { type: "text"; text: string }[];
+  attrs?: {
+    start_ms?: number | null;
+    end_ms?: number | null;
+    confidence?: number | null;
+  };
 };
 
 function Component() {
@@ -62,6 +67,7 @@ function Component() {
 
 function TranscriptToolbar({ editorRef }: { editorRef: React.RefObject<any> }) {
   const { id } = useParams({ from: "/app/transcript/$id" });
+  const queryClient = useQueryClient();
 
   const title = useQuery({
     queryKey: ["session-title", id],
@@ -80,6 +86,7 @@ function TranscriptToolbar({ editorRef }: { editorRef: React.RefObject<any> }) {
         });
       }
     }).then(() => {
+      queryClient.invalidateQueries({ predicate: (query) => (query.queryKey[0] as string).includes("session") });
       windowsCommands.windowDestroy({ type: "transcript", value: id });
     });
   };
@@ -226,6 +233,11 @@ const fromWordsToEditor = (words: Word[]): EditorContent => {
         state.acc[state.acc.length - 1].content.push({
           type: "word",
           content: [{ type: "text", text: word.text }],
+          attrs: {
+            confidence: word.confidence ?? null,
+            start_ms: word.start_ms ?? null,
+            end_ms: word.end_ms ?? null,
+          },
         });
       }
 
@@ -268,13 +280,13 @@ const fromEditorToWords = (content: EditorContent): Word[] => {
       if (wordBlock.type !== "word" || !wordBlock.content?.[0]?.text) {
         continue;
       }
-
+      const attrs = wordBlock.attrs || {};
       words.push({
         text: wordBlock.content[0].text,
         speaker,
-        confidence: 1,
-        start_ms: 0,
-        end_ms: 0,
+        confidence: attrs.confidence ?? null,
+        start_ms: attrs.start_ms ?? null,
+        end_ms: attrs.end_ms ?? null,
       });
     }
   }

packages/tiptap/src/transcript/nodes.ts

@@ -73,6 +73,34 @@ export const WordNode = Node.create({
   inline: true,
   atom: false,
   content: "text*",
+  addAttributes() {
+    return {
+      start_ms: {
+        default: null,
+        parseHTML: element => {
+          const value = element.getAttribute("data-start-ms");
+          return value !== null ? Number(value) : null;
+        },
+        renderHTML: attributes => attributes.start_ms != null ? { "data-start-ms": attributes.start_ms } : {},
+      },
+      end_ms: {
+        default: null,
+        parseHTML: element => {
+          const value = element.getAttribute("data-end-ms");
+          return value !== null ? Number(value) : null;
+        },
+        renderHTML: attributes => attributes.end_ms != null ? { "data-end-ms": attributes.end_ms } : {},
+      },
+      confidence: {
+        default: null,
+        parseHTML: element => {
+          const value = element.getAttribute("data-confidence");
+          return value !== null ? Number(value) : null;
+        },
+        renderHTML: attributes => attributes.confidence != null ? { "data-confidence": attributes.confidence } : {},
+      },
+    };
+  },
   parseHTML() {
     return [{ tag: "span.transcript-word" }];
   },

plugins/listener/js/bindings.gen.ts

@@ -73,7 +73,8 @@ sessionEvent: "plugin:listener:session-event"
 /** user-defined types **/
 
 export type SessionEvent = { type: "inactive" } | { type: "running_active" } | { type: "running_paused" } | { type: "words"; words: Word[] } | { type: "audioAmplitude"; mic: number; speaker: number }
-export type Word = { text: string; speaker: number | null; confidence: number | null; start_ms: number | null; end_ms: number | null }
+export type SpeakerIdentity = { type: "unassigned"; value: { index: number } } | { type: "assigned"; value: { id: string; label: string } }
+export type Word = { text: string; speaker: SpeakerIdentity | null; confidence: number | null; start_ms: number | null; end_ms: number | null }
 
 /** tauri-specta globals **/