Add transcript timestamps and download

web/src/components/transcript.tsx

@@ -69,10 +69,57 @@ export function Transcript({
     }
   }, [scrollButtonRef]);
 
+  const handleDownloadTranscript = () => {
+    // Create CSV content
+    let csvContent = "Timestamp,Participant,Text\n";
+
+    displayTranscriptions.forEach(({ segment, participant, timestamp }) => {
+      const csvRow = [
+        new Date(timestamp || 0).toLocaleTimeString([], {
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          hour12: false
+        }),
+        participant?.isAgent ? "Agent" : "User",
+        `"${segment.text.trim().replace(/"/g, '""')}"`, // Escape quotes in the text
+      ].join(",");
+
+      csvContent += csvRow + "\n";
+    });
+
+    // Create Blob
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+
+    // Create download link
+    const link = document.createElement("a");
+    if (link.download !== undefined) {
+      const url = URL.createObjectURL(blob);
+      link.setAttribute("href", url);
+      link.setAttribute(
+        "download",
+        `transcript_${new Date().toISOString()}.csv`
+      );
+      link.style.visibility = "hidden";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+    console.log("Downloading transcript...");
+  };
+
   return (
     <>
-      <div className="flex items-center text-xs font-semibold uppercase tracking-widest sticky top-0 left-0 bg-white w-full p-4">
-        Transcript
+      <div className="flex items-center justify-between bg-white w-full p-4 border-b sticky top-0 z-10">
+        <h2 className="text-xs font-semibold uppercase tracking-widest">
+          Transcript
+        </h2>
+        <button
+          onClick={handleDownloadTranscript}
+          className="inline-flex text-xs font-semibold uppercase tracking-widest items-center justify-center whitespace-nowrap rounded-md transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-neutral-300 text-neutral-50 shadow hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90 h-9 px-4 py-2 text-sm font-semibold bg-oai-green"
+        >
+          <span>Download</span>
+        </button>
       </div>
       <div className="p-4 min-h-[300px] relative">
         {displayTranscriptions.length === 0 ? (
@@ -82,7 +129,7 @@ export function Transcript({
         ) : (
           <div className="space-y-4">
             {displayTranscriptions.map(
-              ({ segment, participant, publication }) =>
+              ({ segment, participant, publication, timestamp }) =>
                 segment.text.trim() !== "" && (
                   <div
                     key={segment.id}
@@ -93,7 +140,22 @@ export function Transcript({
                         : "ml-auto border border-neutral-300",
                     )}
                   >
-                    {segment.text.trim()}
+                    <div className="flex flex-col">
+                      <span>{segment.text.trim()}</span>
+                      <span
+                        className={`text-xs text-gray-400 mt-1 ${
+                          participant?.isAgent
+                            ? "text-left block"
+                            : "text-right block"
+                        }`}
+                      >
+                        {new Date(timestamp || 0).toLocaleTimeString([], {
+                          hour: "2-digit",
+                          minute: "2-digit",
+                          second: '2-digit',
+                        })}
+                      </span>
+                    </div>
                   </div>
                 ),
             )}

web/src/hooks/use-agent.tsx

@@ -18,6 +18,7 @@ interface Transcription {
   segment: TranscriptionSegment;
   participant?: Participant;
   publication?: TrackPublication;
+  timestamp?: number; // Add this line to include a timestamp
 }
 
 interface AgentContextType {
@@ -89,7 +90,7 @@ export function AgentProvider({ children }: { children: React.ReactNode }) {
     );
     const mergedSorted = sorted.reduce((acc, current) => {
       if (acc.length === 0) {
-        return [current];
+        return [{...current, timestamp: current.segment.firstReceivedTime}];
       }
 
       const last = acc[acc.length - 1];
@@ -113,10 +114,11 @@ export function AgentProvider({ children }: { children: React.ReactNode }) {
               id: current.segment.id, // Use the id of the latest segment
               firstReceivedTime: last.segment.firstReceivedTime, // Keep the original start time
             },
+            timestamp: last.timestamp, // Keep the earliest timestamp
           },
         ];
       } else {
-        return [...acc, current];
+        return [...acc, {...current, timestamp: current.segment.firstReceivedTime}];
       }
     }, [] as Transcription[]);
     setDisplayTranscriptions(mergedSorted);