Add new window for transcript-editor (#778)

Author: yujonglee

apps/desktop/src/components/right-panel/views/legacy/base.tsx

@@ -1,9 +1,10 @@
 import { useQuery } from "@tanstack/react-query";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
 import { CheckIcon, ClipboardCopyIcon, FileAudioIcon, PencilIcon } from "lucide-react";
-import React, { useState } from "react";
+import React from "react";
 
 import { commands as miscCommands } from "@hypr/plugin-misc";
+import { commands as windowsCommands } from "@hypr/plugin-windows";
 import { Button } from "@hypr/ui/components/ui/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@hypr/ui/components/ui/tooltip";
 import { useOngoingSession, useSessions } from "@hypr/utils/contexts";
@@ -26,8 +27,6 @@ export const TranscriptBase: React.FC<TranscriptBaseProps> = ({
   const { showEmptyMessage, isEnhanced, hasTranscript } = useTranscriptWidget(sessionId);
   const { timeline } = useTranscript(sessionId);
 
-  const [editing, setEditing] = useState(false);
-
   const handleCopyAll = () => {
     if (timeline && timeline.items && timeline.items.length > 0) {
       const transcriptText = timeline.items.map((item) => item.text).join("\n");
@@ -45,6 +44,23 @@ export const TranscriptBase: React.FC<TranscriptBaseProps> = ({
     wrapperProps.queryClient,
   );
 
+  const editing = useQuery({
+    queryKey: ["editing", sessionId],
+    queryFn: () => windowsCommands.windowIsVisible({ type: "main" }).then((v) => !v),
+  });
+
+  const handleClickToggleEditing = () => {
+    if (editing.data) {
+      windowsCommands.windowHide({ type: "transcript", value: sessionId! }).then(() => {
+        windowsCommands.windowShow({ type: "main" });
+      });
+    } else {
+      windowsCommands.windowHide({ type: "main" }).then(() => {
+        windowsCommands.windowShow({ type: "transcript", value: sessionId! });
+      });
+    }
+  };
+
   const handleOpenSession = () => {
     if (sessionId) {
       miscCommands.audioOpen(sessionId);
@@ -93,16 +109,16 @@ export const TranscriptBase: React.FC<TranscriptBaseProps> = ({
                 </Tooltip>
               </TooltipProvider>
             ),
-            <Button variant="ghost" size="icon" className="p-0" onClick={() => setEditing(!editing)}>
-              {editing
+            <Button variant="ghost" size="icon" className="p-0" onClick={handleClickToggleEditing}>
+              {editing.data
                 ? <CheckIcon size={16} className="text-black" />
                 : <PencilIcon size={16} className="text-black" />}
             </Button>,
           ].filter(Boolean)}
         />
       </div>
 
-      {sessionId && <Transcript sessionId={sessionId} editing={editing} />}
+      {sessionId && <Transcript sessionId={sessionId} />}
 
       {!sessionId && (
         <div className="absolute inset-0 backdrop-blur-sm bg-white/50 flex items-center justify-center">

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

@@ -1,12 +1,12 @@
 import { EarIcon, Loader2Icon } from "lucide-react";
 import { useEffect, useRef } from "react";
 
-import TranscriptEditor from "@hypr/tiptap/transcript";
+import { commands as windowsCommands, events as windowsEvents } from "@hypr/plugin-windows";
 import { Badge } from "@hypr/ui/components/ui/badge";
 import { useSessions } from "@hypr/utils/contexts";
 import { useTranscript } from "./useTranscript";
 
-export function Transcript({ sessionId, editing }: { sessionId?: string; editing: boolean }) {
+export function Transcript({ sessionId }: { sessionId?: string }) {
   const currentSessionId = useSessions((s) => s.currentSessionId);
   const effectiveSessionId = sessionId || currentSessionId;
 
@@ -27,19 +27,19 @@ export function Transcript({ sessionId, editing }: { sessionId?: string; editing
     }
   }, [timeline?.items, isLive, ref]);
 
-  const content = {
-    type: "doc",
-    content: [
-      {
-        type: "speaker",
-        attrs: { label: "" },
-        content: (timeline?.items || []).flatMap((item) => item.text.split(" ")).filter(Boolean).map((word) => ({
-          type: "word",
-          content: [{ type: "text", text: word }],
-        })),
-      },
-    ],
-  };
+  useEffect(() => {
+    let unlisten: () => void;
+
+    windowsEvents.windowDestroyed.listen(({ payload: { window } }) => {
+      if (window.type === "transcript") {
+        windowsCommands.windowShow({ type: "main" });
+      }
+    }).then((u) => {
+      unlisten = u;
+    });
+
+    return () => unlisten?.();
+  }, []);
 
   return (
     <div
@@ -54,14 +54,13 @@ export function Transcript({ sessionId, editing }: { sessionId?: string; editing
         )
         : (
           <>
-            {(!editing && timeline?.items?.length) && timeline.items.map((item, index) => (
+            {(timeline?.items ?? []).map((item, index) => (
               <div key={index}>
                 <p>
                   {item.text}
                 </p>
               </div>
             ))}
-            {editing && <TranscriptEditor initialContent={content} />}
             {isLive && (
               <div className="flex items-center gap-2 justify-center py-2 text-neutral-400">
                 <EarIcon size={14} /> Listening... (there might be a delay)

apps/desktop/src/main.tsx

@@ -3,23 +3,24 @@ import "./styles/globals.css";
 
 import { i18n } from "@lingui/core";
 import { I18nProvider } from "@lingui/react";
-import { QueryClient, QueryClientProvider, useQuery, useQueryClient } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider, useQueries, useQueryClient } from "@tanstack/react-query";
 import { CatchBoundary, createRouter, ErrorComponent, RouterProvider } from "@tanstack/react-router";
 import { useEffect } from "react";
 import ReactDOM from "react-dom/client";
 
 import type { Context } from "@/types";
 import { commands } from "@/types";
 import { commands as authCommands } from "@hypr/plugin-auth";
+import { commands as dbCommands } from "@hypr/plugin-db";
 import { Toaster } from "@hypr/ui/components/ui/toast";
 import { TooltipProvider } from "@hypr/ui/components/ui/tooltip";
 import { ThemeProvider } from "@hypr/ui/contexts/theme";
+import { createOngoingSessionStore, createSessionsStore } from "@hypr/utils/stores";
 import { broadcastQueryClient } from "./utils";
 
 import { messages as enMessages } from "./locales/en/messages";
 import { messages as koMessages } from "./locales/ko/messages";
 
-import { createOngoingSessionStore, createSessionsStore } from "@hypr/utils/stores";
 import { routeTree } from "./routeTree.gen";
 
 import * as Sentry from "@sentry/react";
@@ -86,17 +87,29 @@ function App() {
     return broadcastQueryClient(queryClient);
   }, [queryClient]);
 
-  const userId = useQuery({
-    queryKey: ["userId"],
-    queryFn: () => authCommands.getFromStore("auth-user-id"),
-    staleTime: Infinity,
+  const [userId, onboardingSessionId] = useQueries({
+    queries: [
+      {
+        queryKey: ["auth-user-id"],
+        queryFn: () => authCommands.getFromStore("auth-user-id"),
+      },
+      {
+        queryKey: ["onboarding-session-id"],
+        queryFn: () => dbCommands.onboardingSessionId(),
+      },
+    ],
   });
 
-  if (!userId.data) {
+  if (!userId.data || !onboardingSessionId.data) {
     return null;
   }
 
-  return <RouterProvider router={router} context={{ ...context, userId: userId.data }} />;
+  return (
+    <RouterProvider
+      router={router}
+      context={{ ...context, userId: userId.data, onboardingSessionId: onboardingSessionId.data }}
+    />
+  );
 }
 
 if (!rootElement.innerHTML) {

apps/desktop/src/routeTree.gen.ts

@@ -18,6 +18,7 @@ import { Route as AppSettingsImport } from './routes/app.settings'
 import { Route as AppPlansImport } from './routes/app.plans'
 import { Route as AppNewImport } from './routes/app.new'
 import { Route as AppCalendarImport } from './routes/app.calendar'
+import { Route as AppTranscriptIdImport } from './routes/app.transcript.$id'
 import { Route as AppOrganizationIdImport } from './routes/app.organization.$id'
 import { Route as AppNoteIdImport } from './routes/app.note.$id'
 import { Route as AppHumanIdImport } from './routes/app.human.$id'
@@ -66,6 +67,12 @@ const AppCalendarRoute = AppCalendarImport.update({
   getParentRoute: () => AppRoute,
 } as any)
 
+const AppTranscriptIdRoute = AppTranscriptIdImport.update({
+  id: '/transcript/$id',
+  path: '/transcript/$id',
+  getParentRoute: () => AppRoute,
+} as any)
+
 const AppOrganizationIdRoute = AppOrganizationIdImport.update({
   id: '/organization/$id',
   path: '/organization/$id',
@@ -158,6 +165,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppOrganizationIdImport
       parentRoute: typeof AppImport
     }
+    '/app/transcript/$id': {
+      id: '/app/transcript/$id'
+      path: '/transcript/$id'
+      fullPath: '/app/transcript/$id'
+      preLoaderRoute: typeof AppTranscriptIdImport
+      parentRoute: typeof AppImport
+    }
   }
 }
 
@@ -172,6 +186,7 @@ interface AppRouteChildren {
   AppHumanIdRoute: typeof AppHumanIdRoute
   AppNoteIdRoute: typeof AppNoteIdRoute
   AppOrganizationIdRoute: typeof AppOrganizationIdRoute
+  AppTranscriptIdRoute: typeof AppTranscriptIdRoute
 }
 
 const AppRouteChildren: AppRouteChildren = {
@@ -183,6 +198,7 @@ const AppRouteChildren: AppRouteChildren = {
   AppHumanIdRoute: AppHumanIdRoute,
   AppNoteIdRoute: AppNoteIdRoute,
   AppOrganizationIdRoute: AppOrganizationIdRoute,
+  AppTranscriptIdRoute: AppTranscriptIdRoute,
 }
 
 const AppRouteWithChildren = AppRoute._addFileChildren(AppRouteChildren)
@@ -198,6 +214,7 @@ export interface FileRoutesByFullPath {
   '/app/human/$id': typeof AppHumanIdRoute
   '/app/note/$id': typeof AppNoteIdRoute
   '/app/organization/$id': typeof AppOrganizationIdRoute
+  '/app/transcript/$id': typeof AppTranscriptIdRoute
 }
 
 export interface FileRoutesByTo {
@@ -210,6 +227,7 @@ export interface FileRoutesByTo {
   '/app/human/$id': typeof AppHumanIdRoute
   '/app/note/$id': typeof AppNoteIdRoute
   '/app/organization/$id': typeof AppOrganizationIdRoute
+  '/app/transcript/$id': typeof AppTranscriptIdRoute
 }
 
 export interface FileRoutesById {
@@ -224,6 +242,7 @@ export interface FileRoutesById {
   '/app/human/$id': typeof AppHumanIdRoute
   '/app/note/$id': typeof AppNoteIdRoute
   '/app/organization/$id': typeof AppOrganizationIdRoute
+  '/app/transcript/$id': typeof AppTranscriptIdRoute
 }
 
 export interface FileRouteTypes {
@@ -239,6 +258,7 @@ export interface FileRouteTypes {
     | '/app/human/$id'
     | '/app/note/$id'
     | '/app/organization/$id'
+    | '/app/transcript/$id'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/video'
@@ -250,6 +270,7 @@ export interface FileRouteTypes {
     | '/app/human/$id'
     | '/app/note/$id'
     | '/app/organization/$id'
+    | '/app/transcript/$id'
   id:
     | '__root__'
     | '/app'
@@ -262,6 +283,7 @@ export interface FileRouteTypes {
     | '/app/human/$id'
     | '/app/note/$id'
     | '/app/organization/$id'
+    | '/app/transcript/$id'
   fileRoutesById: FileRoutesById
 }
 
@@ -299,7 +321,8 @@ export const routeTree = rootRoute
         "/app/",
         "/app/human/$id",
         "/app/note/$id",
-        "/app/organization/$id"
+        "/app/organization/$id",
+        "/app/transcript/$id"
       ]
     },
     "/video": {
@@ -336,6 +359,10 @@ export const routeTree = rootRoute
     "/app/organization/$id": {
       "filePath": "app.organization.$id.tsx",
       "parent": "/app"
+    },
+    "/app/transcript/$id": {
+      "filePath": "app.transcript.$id.tsx",
+      "parent": "/app"
     }
   }
 }

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

@@ -0,0 +1,44 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useRef } from "react";
+
+import { commands as dbCommands } from "@hypr/plugin-db";
+import TranscriptEditor from "@hypr/tiptap/transcript";
+
+export const Route = createFileRoute("/app/transcript/$id")({
+  component: Component,
+  loader: async ({ params: { id }, context: { onboardingSessionId } }) => {
+    const timeline = onboardingSessionId
+      ? await dbCommands.getTimelineViewOnboarding()
+      : await dbCommands.getTimelineView(id);
+
+    return { timeline };
+  },
+});
+
+function Component() {
+  const { timeline } = Route.useLoaderData();
+  const editorRef = useRef(null);
+
+  const content = {
+    type: "doc",
+    content: [
+      {
+        type: "speaker",
+        attrs: { label: "" },
+        content: (timeline?.items || []).flatMap((item) => item.text.split(" ")).filter(Boolean).map((word) => ({
+          type: "word",
+          content: [{ type: "text", text: word }],
+        })),
+      },
+    ],
+  };
+
+  return (
+    <div className="p-12">
+      <TranscriptEditor
+        ref={editorRef}
+        initialContent={content}
+      />
+    </div>
+  );
+}

apps/desktop/src/types/index.ts

@@ -9,6 +9,7 @@ import type { NangoIntegration } from "./server.gen";
 
 export type Context = {
   userId?: string;
+  onboardingSessionId?: string;
   ongoingSessionStore: OngoingSessionStore;
   sessionsStore: SessionsStore;
   queryClient: QueryClient;