Transcript editor styling (#873)

Author: yujonglee

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

@@ -1,14 +1,15 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useMatch } from "@tanstack/react-router";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
-import { AudioLinesIcon, ClipboardIcon, Copy, UploadIcon } from "lucide-react";
+import { AudioLinesIcon, ClipboardIcon, Copy, TextSearchIcon, UploadIcon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 
 import { ParticipantsChipInner } from "@/components/editor-area/note-header/chips/participants-chip";
 import { commands as dbCommands, Human, Word } from "@hypr/plugin-db";
 import { commands as miscCommands } from "@hypr/plugin-misc";
 import TranscriptEditor, { type SpeakerViewInnerProps, type TranscriptEditorRef } from "@hypr/tiptap/transcript";
 import { Button } from "@hypr/ui/components/ui/button";
+import { Input } from "@hypr/ui/components/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@hypr/ui/components/ui/popover";
 import { Spinner } from "@hypr/ui/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@hypr/ui/components/ui/tooltip";
@@ -34,8 +35,9 @@ export function TranscriptView() {
   useEffect(() => {
     if (words && words.length > 0) {
       editorRef.current?.setWords(words);
+      editorRef.current?.scrollToBottom();
     }
-  }, [words]);
+  }, [words, isLive]);
 
   const handleCopyAll = () => {
     if (words && words.length > 0) {
@@ -76,29 +78,35 @@ export function TranscriptView() {
 
   return (
     <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="px-4 py-1 border-b border-neutral-100">
+        <header className="flex items-center justify-between w-full">
           {!showEmptyMessage && (
-            <div className="flex-1 text-md font-medium">
-              <div className="flex text-md items-center gap-2">
-                Transcript
-                {isLive
-                  && (
-                    <div className="relative h-2 w-2">
-                      <div className="absolute inset-0 rounded-full bg-red-500/30"></div>
-                      <div className="absolute inset-0 rounded-full bg-red-500 animate-ping"></div>
-                    </div>
-                  )}
-              </div>
+            <div className="flex items-center gap-2">
+              <h2 className="text-sm font-semibold text-neutral-900">Transcript</h2>
+              {isLive && (
+                <div className="flex items-center gap-1.5">
+                  <div className="relative h-1.5 w-1.5">
+                    <div className="absolute inset-0 rounded-full bg-red-500/30"></div>
+                    <div className="absolute inset-0 rounded-full bg-red-500 animate-ping"></div>
+                  </div>
+                  <span className="text-xs font-medium text-red-600">Live</span>
+                </div>
+              )}
             </div>
           )}
-          <div className="not-draggable flex items-center gap-2">
+          <div className="not-draggable flex items-center gap-1">
+            {(hasTranscript && sessionId) && <SearchAndReplace editorRef={editorRef} />}
             {(audioExist.data && ongoingSession.isInactive && hasTranscript && sessionId) && (
               <TooltipProvider key="listen-recording-tooltip">
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <Button variant="ghost" size="icon" className="p-0" onClick={handleOpenSession}>
-                      <AudioLinesIcon size={16} className="text-black" />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 w-7 p-0 hover:bg-neutral-100"
+                      onClick={handleOpenSession}
+                    >
+                      <AudioLinesIcon size={14} className="text-neutral-600" />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent side="bottom">
@@ -111,8 +119,13 @@ export function TranscriptView() {
               <TooltipProvider key="copy-all-tooltip">
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <Button variant="ghost" size="icon" className="p-0" onClick={handleCopyAll}>
-                      <Copy size={16} className="text-black" />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 w-7 p-0 hover:bg-neutral-100"
+                      onClick={handleCopyAll}
+                    >
+                      <Copy size={14} className="text-neutral-600" />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent side="bottom">
@@ -195,12 +208,14 @@ function RenderEmpty({ sessionId }: { sessionId: string }) {
 }
 
 const SpeakerSelector = ({
-  onSpeakerIdChange,
+  onSpeakerChange,
   speakerId,
   speakerIndex,
 }: SpeakerViewInnerProps) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [speakerRange, setSpeakerRange] = useState<SpeakerChangeRange>("current");
   const inactive = useOngoingSession(s => s.status === "inactive");
+  const [human, setHuman] = useState<Human | null>(null);
 
   const noteMatch = useMatch({ from: "/app/note/$id", shouldThrow: false });
   const sessionId = noteMatch?.params.id;
@@ -211,24 +226,39 @@ const SpeakerSelector = ({
     queryFn: () => dbCommands.sessionListParticipants(sessionId!),
   });
 
+  useEffect(() => {
+    if (human) {
+      onSpeakerChange(human);
+    }
+  }, [human]);
+
+  useEffect(() => {
+    if (participants.length === 1 && participants[0]) {
+      setHuman(participants[0]);
+      return;
+    }
+
+    const foundHuman = participants.find((s) => s.id === speakerId);
+    if (foundHuman) {
+      setHuman(foundHuman);
+    }
+  }, [participants, speakerId]);
+
   const handleClickHuman = (human: Human) => {
-    onSpeakerIdChange(human.id);
+    setHuman(human);
     setIsOpen(false);
   };
 
-  const foundSpeaker = participants.length === 1 ? participants[0] : participants.find((s) => s.id === speakerId);
-  const displayName = foundSpeaker?.full_name ?? `Speaker ${speakerIndex ?? 0}`;
-
   if (!sessionId) {
     return <p></p>;
   }
 
-  if (!inactive && !foundSpeaker) {
+  if (!inactive && !human) {
     return <p></p>;
   }
 
   return (
-    <div className="mt-2">
+    <div className="mt-2 sticky top-0 z-10 bg-neutral-50">
       <Popover open={isOpen} onOpenChange={setIsOpen}>
         <PopoverTrigger
           onMouseDown={(e) => {
@@ -237,13 +267,136 @@ const SpeakerSelector = ({
           }}
         >
           <span className="underline py-1 font-semibold">
-            {displayName}
+            {human ? (human.full_name ?? "You") : `Speaker ${speakerIndex ?? 0}`}
           </span>
         </PopoverTrigger>
         <PopoverContent align="start" side="bottom">
-          <ParticipantsChipInner sessionId={sessionId} handleClickHuman={handleClickHuman} />
+          <div className="space-y-4">
+            {!speakerId && (
+              <div className="border-b border-neutral-100 pb-3">
+                <SpeakerRangeSelector
+                  value={speakerRange}
+                  onChange={setSpeakerRange}
+                />
+              </div>
+            )}
+
+            <ParticipantsChipInner sessionId={sessionId} handleClickHuman={handleClickHuman} />
+          </div>
         </PopoverContent>
       </Popover>
     </div>
   );
 };
+
+type SpeakerChangeRange = "current" | "all" | "fromHere";
+
+interface SpeakerRangeSelectorProps {
+  value: SpeakerChangeRange;
+  onChange: (value: SpeakerChangeRange) => void;
+}
+
+function SpeakerRangeSelector({ value, onChange }: SpeakerRangeSelectorProps) {
+  const options = [
+    { value: "current" as const, label: "Just this" },
+    { value: "all" as const, label: "Replace all" },
+    { value: "fromHere" as const, label: "From here" },
+  ];
+
+  return (
+    <div className="space-y-1.5">
+      <p className="text-sm font-medium text-neutral-700">Apply speaker change to:</p>
+      <div className="flex rounded-md border border-neutral-200 p-0.5 bg-neutral-50">
+        {options.map((option) => (
+          <label key={option.value} className="flex-1 cursor-pointer">
+            <input
+              type="radio"
+              name="speaker-range"
+              value={option.value}
+              className="sr-only"
+              checked={value === option.value}
+              onChange={() => onChange(option.value)}
+            />
+            <div
+              className={`px-2 py-1 text-xs font-medium text-center rounded transition-colors ${
+                value === option.value
+                  ? "bg-white text-neutral-900 shadow-sm"
+                  : "text-neutral-600 hover:text-neutral-900 hover:bg-white/50"
+              }`}
+            >
+              {option.label}
+            </div>
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function SearchAndReplace({ editorRef }: { editorRef: React.RefObject<any> }) {
+  const [expanded, setExpanded] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [replaceTerm, setReplaceTerm] = useState("");
+
+  useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.editor.commands.setSearchTerm(searchTerm);
+
+      if (searchTerm.substring(0, searchTerm.length - 1) === replaceTerm) {
+        setReplaceTerm(searchTerm);
+      }
+    }
+  }, [searchTerm]);
+
+  useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.editor.commands.setReplaceTerm(replaceTerm);
+    }
+  }, [replaceTerm]);
+
+  const handleReplaceAll = () => {
+    if (editorRef.current && searchTerm) {
+      editorRef.current.editor.commands.replaceAll(replaceTerm);
+      setExpanded(false);
+      setSearchTerm("");
+      setReplaceTerm("");
+    }
+  };
+
+  return (
+    <Popover open={expanded} onOpenChange={setExpanded}>
+      <PopoverTrigger asChild>
+        <Button
+          className="w-8"
+          variant="ghost"
+          size="icon"
+        >
+          <TextSearchIcon size={14} className="text-neutral-600" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-2" align="start" side="left">
+        <div className="flex flex-row gap-2">
+          <Input
+            className="h-5 w-32"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            placeholder="Search"
+          />
+          <Input
+            className="h-5 w-32"
+            value={replaceTerm}
+            onChange={(e) => setReplaceTerm(e.target.value)}
+            placeholder="Replace"
+          />
+          <Button
+            className="h-5"
+            variant="default"
+            onClick={handleReplaceAll}
+          >
+            Replace
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

packages/tiptap/src/transcript/index.tsx

@@ -7,7 +7,7 @@ import Document from "@tiptap/extension-document";
 import History from "@tiptap/extension-history";
 import Text from "@tiptap/extension-text";
 import { EditorContent, useEditor } from "@tiptap/react";
-import { forwardRef, useEffect } from "react";
+import { forwardRef, useEffect, useRef } from "react";
 
 import { SpeakerSplit, WordSplit } from "./extensions";
 import { SpeakerNode, WordNode } from "./nodes";
@@ -27,10 +27,13 @@ export interface TranscriptEditorRef {
   editor: TiptapEditor | null;
   getWords: () => Word[] | null;
   setWords: (words: Word[]) => void;
+  scrollToBottom: () => void;
 }
 
 const TranscriptEditor = forwardRef<TranscriptEditorRef, TranscriptEditorProps>(
   ({ editable = true, c, onUpdate, initialWords }, ref) => {
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
+
     const extensions = [
       Document.configure({ content: "speaker+" }),
       History,
@@ -41,7 +44,7 @@ const TranscriptEditor = forwardRef<TranscriptEditorRef, TranscriptEditorProps>(
       SpeakerSplit,
       SearchAndReplace.configure({
         searchResultClass: "search-result",
-        disableRegex: false,
+        disableRegex: true,
       }),
       BubbleMenu,
     ];
@@ -80,6 +83,11 @@ const TranscriptEditor = forwardRef<TranscriptEditorRef, TranscriptEditorProps>(
             }
             return fromEditorToWords(editor.getJSON() as any);
           },
+          scrollToBottom: () => {
+            if (scrollContainerRef.current) {
+              scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight;
+            }
+          },
         };
       }
     }, [editor]);
@@ -92,7 +100,10 @@ const TranscriptEditor = forwardRef<TranscriptEditorRef, TranscriptEditorProps>(
 
     return (
       <div role="textbox" className="h-full flex flex-col overflow-hidden">
-        <div className="flex-1 overflow-y-auto">
+        <div
+          ref={scrollContainerRef}
+          className="flex-1 overflow-y-auto"
+        >
           <EditorContent editor={editor} className="h-full" />
         </div>
       </div>

packages/tiptap/src/transcript/nodes.ts

@@ -1,12 +1,16 @@
-import { mergeAttributes, Node } from "@tiptap/core";
-import { CommandProps } from "@tiptap/core";
+import { type CommandProps, mergeAttributes, Node } from "@tiptap/core";
 import { ReactNodeViewRenderer } from "@tiptap/react";
 import { Node as ProseNode } from "prosemirror-model";
 
 import { createSpeakerView, SpeakerViewInnerComponent } from "./views";
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
+    searchAndReplace: {
+      setSearchTerm: (s: string) => ReturnType;
+      setReplaceTerm: (s: string) => ReturnType;
+      replaceAll: () => ReturnType;
+    };
     speaker: {
       updateSpeakerIndexToId: (
         speakerIndex: number,