chores

Author: yujonglee

apps/desktop/src/components/main/body/sessions/floating/listen.tsx

@@ -2,12 +2,14 @@ import { Icon } from "@iconify-icon/react";
 import useMediaQuery from "beautiful-react-hooks/useMediaQuery";
 import { useCallback, useEffect, useState } from "react";
 
+import { type StreamResponse } from "@hypr/plugin-listener";
 import { DancingSticks } from "@hypr/ui/components/ui/dancing-sticks";
 import { Spinner } from "@hypr/ui/components/ui/spinner";
 import { useListener } from "../../../../../contexts/listener";
 import { useSTTConnection } from "../../../../../hooks/useSTTConnection";
 import * as persisted from "../../../../../store/tinybase/persisted";
 import { type Tab } from "../../../../../store/zustand/tabs";
+import { id } from "../../../../../utils";
 import { FloatingButton, formatTime } from "./shared";
 
 type RemoteMeeting =
@@ -145,6 +147,7 @@ function useRemoteMeeting(sessionId: string): RemoteMeeting | null {
 
 function useStartSession(sessionId: string) {
   const start = useListener((state) => state.start);
+  const append = useAppendTranscript(sessionId);
   const conn = useSTTConnection();
 
   const handleClick = useCallback(() => {
@@ -162,9 +165,31 @@ function useStartSession(sessionId: string) {
       base_url: conn.baseUrl,
       api_key: conn.apiKey,
     }, (response) => {
-      console.log(response);
+      append(response);
     });
   }, [conn, sessionId, start]);
 
   return handleClick;
 }
+
+function useAppendTranscript(sessionId: string) {
+  const store = persisted.UI.useStore(persisted.STORE_ID);
+
+  const handler = useCallback((res: StreamResponse) => {
+    if (store && res.type === "Results") {
+      res.channel.alternatives[0].words.forEach((w) => {
+        store.setRow("words", id(), {
+          session_id: sessionId,
+          text: w.word,
+          start_ms: Math.round(w.start * 1000),
+          end_ms: Math.round(w.end * 1000),
+          speaker: w.speaker?.toString() ?? undefined,
+          user_id: "",
+          created_at: new Date().toISOString(),
+        });
+      });
+    }
+  }, [store, sessionId]);
+
+  return handler;
+}

apps/desktop/src/components/main/body/sessions/note-input/transcript.tsx

@@ -1,97 +1,25 @@
-import { ChevronDownIcon } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { createQueries } from "tinybase/with-schemas";
 import * as persisted from "../../../../../store/tinybase/persisted";
 
-import { Button } from "@hypr/ui/components/ui/button";
-import { useSegments } from "../../../../../hooks/useSegments";
-
-export function TranscriptEditorWrapper({
-  sessionId,
-}: {
-  sessionId: string;
-}) {
-  const value = persisted.UI.useCell("sessions", sessionId, "transcript", persisted.STORE_ID);
-
-  return <pre>{JSON.stringify(value, null, 2)}</pre>;
-}
-
 export function TranscriptView({ sessionId }: { sessionId: string }) {
-  const segments = useSegments(sessionId);
-
-  const [isAtBottom, setIsAtBottom] = useState(true);
-  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    if (isAtBottom && scrollContainerRef.current) {
-      scrollContainerRef.current.scrollTo({
-        top: scrollContainerRef.current.scrollHeight,
-        behavior: "smooth",
-      });
-    }
-  }, [segments, isAtBottom]);
-
-  const handleScroll = useCallback(() => {
-    const container = scrollContainerRef.current;
-    if (!container) {
-      return;
-    }
-
-    const { scrollTop, scrollHeight, clientHeight } = container;
-    const threshold = 100;
-    const atBottom = scrollHeight - scrollTop - clientHeight <= threshold;
-    setIsAtBottom(atBottom);
-  }, []);
-
-  const scrollToBottom = useCallback(() => {
-    const container = scrollContainerRef.current;
-    if (!container) {
-      return;
-    }
-
-    container.scrollTo({
-      top: container.scrollHeight,
-      behavior: "smooth",
-    });
-  }, []);
-
-  const hasContent = segments.length > 0;
+  const store = persisted.UI.useStore(persisted.STORE_ID);
+
+  const QUERY = `${sessionId}_words`;
+  const QUERIES = persisted.UI.useCreateQueries(
+    store,
+    (store) =>
+      createQueries(store).setQueryDefinition(QUERY, "words", ({ select, where }) => {
+        select("text");
+        where("session_id", sessionId);
+      }),
+    [sessionId],
+  );
 
-  if (!hasContent) {
-    return <div className="h-full" />;
-  }
+  const words = persisted.UI.useResultTable(QUERY, QUERIES);
 
   return (
     <div className="relative h-full flex flex-col">
-      <div
-        ref={scrollContainerRef}
-        className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden pt-8 pb-6"
-        onScroll={handleScroll}
-      >
-        <div className="px-8 text-[15px] leading-relaxed space-y-4">
-          {segments.map((segment, idx) => (
-            <div key={idx} className="space-y-1">
-              <div className="text-xs font-medium text-gray-500">
-                Speaker {segment.speaker ?? "Unknown"}
-              </div>
-              <div className="text-gray-800">
-                {segment.words.map(word => word.punctuated_word || word.word).join(" ")}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {!isAtBottom && (
-        <Button
-          onClick={scrollToBottom}
-          size="sm"
-          className="absolute bottom-4 left-1/2 transform -translate-x-1/2 rounded-full shadow-lg bg-white hover:bg-gray-50 text-gray-700 border border-gray-200 z-10 flex items-center gap-1"
-          variant="outline"
-        >
-          <ChevronDownIcon size={14} />
-          <span className="text-xs">Go to bottom</span>
-        </Button>
-      )}
+      <pre>{JSON.stringify(words)}</pre>
     </div>
   );
 }

apps/desktop/src/devtool/seed/shared.ts

@@ -15,6 +15,7 @@ import type {
   Tag,
   TemplateSection,
   TemplateStorage,
+  Word,
 } from "../../store/tinybase/persisted";
 import { id } from "../../utils";
 
@@ -136,11 +137,10 @@ export const generateEnhancedMarkdown = () => {
 
 export const generateTranscript = () => {
   const wordCount = faker.number.int({ min: 50, max: 200 });
-  const words: Array<{ speaker: string; text: string; start: string; end: string }> = [];
+  const words: Array<{ speaker: string; text: string; start_ms: number; end_ms: number }> = [];
   const speakers = ["Speaker 1", "Speaker 2"];
 
-  const baseTime = faker.date.recent({ days: 30 });
-  let currentTime = baseTime.getTime();
+  let currentTimeMs = 0;
 
   for (let i = 0; i < wordCount; i++) {
     const word = faker.lorem.word();
@@ -149,11 +149,11 @@ export const generateTranscript = () => {
     words.push({
       speaker: faker.helpers.arrayElement(speakers),
       text: word,
-      start: new Date(currentTime).toISOString(),
-      end: new Date(currentTime + durationMs).toISOString(),
+      start_ms: currentTimeMs,
+      end_ms: currentTimeMs + durationMs,
     });
 
-    currentTime += durationMs + faker.number.int({ min: 50, max: 300 });
+    currentTimeMs += durationMs + faker.number.int({ min: 50, max: 300 });
   }
 
   return { words };
@@ -174,7 +174,6 @@ export const createSession = (eventId?: string, folderId?: string): { id: string
       created_at: faker.date.recent({ days: 30 }).toISOString(),
       event_id: eventId,
       folder_id: folderId,
-      transcript: JSON.stringify(generateTranscript()),
     },
   };
 };
@@ -383,6 +382,7 @@ export const generateMockData = (config: MockConfig) => {
   const calendars: Record<string, Calendar> = {};
   const folders: Record<string, Folder> = {};
   const sessions: Record<string, SessionStorage> = {};
+  const words: Record<string, Word> = {};
   const events: Record<string, Event> = {};
   const mapping_session_participant: Record<string, mappingSessionParticipant> = {};
   const tags: Record<string, Tag> = {};
@@ -493,6 +493,20 @@ export const generateMockData = (config: MockConfig) => {
       const session = createSession(eventId, folderId);
       sessions[session.id] = session.data;
       sessionIds.push(session.id);
+
+      const transcript = generateTranscript();
+      transcript.words.forEach((word) => {
+        const wordId = id();
+        words[wordId] = {
+          user_id: USER_ID,
+          session_id: session.id,
+          text: word.text,
+          start_ms: word.start_ms,
+          end_ms: word.end_ms,
+          speaker: word.speaker || undefined,
+          created_at: faker.date.recent({ days: 30 }).toISOString(),
+        };
+      });
     });
   });
 
@@ -539,6 +553,7 @@ export const generateMockData = (config: MockConfig) => {
     calendars,
     folders,
     sessions,
+    words,
     events,
     mapping_session_participant,
     tags,

apps/desktop/src/hooks/useSegments.ts

@@ -11,7 +11,12 @@ export function createLocalPersister<Schemas extends OptionalSchemas>(
   return createCustomSqlitePersister(
     store,
     { mode: "json", ...config },
-    async (sql: string, args: any[] = []): Promise<any> => (await db2Commands.executeLocal(sql, args)),
+    async (sql: string, args: any[] = []): Promise<any> => {
+      const r = await db2Commands.executeLocal(sql, args);
+      if (r.status === "error") {
+        console.error(r.error);
+      }
+    },
     () => {},
     (unsubscribeFunction: any): any => unsubscribeFunction(),
     false ? console.log.bind(console, "[LocalPersister]") : () => {},

apps/desktop/src/hooks/useWords.ts

@@ -27,7 +27,7 @@ import {
   TABLE_SESSIONS,
   tagSchema as baseTagSchema,
   templateSchema as baseTemplateSchema,
-  transcriptSchema,
+  wordSchema,
 } from "@hypr/db";
 import { createBroadcastChannelSynchronizer } from "tinybase/synchronizers/synchronizer-broadcast-channel/with-schemas";
 import * as internal from "./internal";
@@ -62,7 +62,6 @@ export const folderSchema = baseFolderSchema.omit({ id: true }).extend({
 });
 
 export const sessionSchema = baseSessionSchema.omit({ id: true }).extend({
-  transcript: jsonObject(transcriptSchema),
   created_at: z.string(),
   event_id: z.preprocess(val => val ?? undefined, z.string().optional()),
   folder_id: z.preprocess(val => val ?? undefined, z.string().optional()),
@@ -97,12 +96,18 @@ export const chatMessageSchema = baseChatMessageSchema.omit({ id: true }).extend
   parts: jsonObject(z.any()),
 });
 
+export const wordSchemaOverride = wordSchema.omit({ id: true }).extend({
+  created_at: z.string(),
+  speaker: z.preprocess(val => val ?? undefined, z.string().optional()),
+});
+
 export type Human = z.infer<typeof humanSchema>;
 export type Event = z.infer<typeof eventSchema>;
 export type Calendar = z.infer<typeof calendarSchema>;
 export type Organization = z.infer<typeof organizationSchema>;
 export type Folder = z.infer<typeof folderSchema>;
 export type Session = z.infer<typeof sessionSchema>;
+export type Word = z.infer<typeof wordSchemaOverride>;
 export type mappingSessionParticipant = z.infer<typeof mappingSessionParticipantSchema>;
 export type Tag = z.infer<typeof tagSchema>;
 export type MappingTagSession = z.infer<typeof mappingTagSessionSchema>;
@@ -132,8 +137,16 @@ const SCHEMA = {
       title: { type: "string" },
       raw_md: { type: "string" },
       enhanced_md: { type: "string" },
-      transcript: { type: "string" },
     } satisfies InferTinyBaseSchema<typeof sessionSchema>,
+    words: {
+      user_id: { type: "string" },
+      created_at: { type: "string" },
+      text: { type: "string" },
+      session_id: { type: "string" },
+      start_ms: { type: "number" },
+      end_ms: { type: "number" },
+      speaker: { type: "string" },
+    } satisfies InferTinyBaseSchema<typeof wordSchema>,
     humans: {
       user_id: { type: "string" },
       created_at: { type: "string" },