Merge pull request #4 from intellwe/feat/export

FEAT: implement Export transcripts option along with copy transcripts

Author: RianaAzad

src/components/ExportOptions.tsx

@@ -0,0 +1,156 @@
+import React, { useState } from 'react';
+import { Download, Copy, FileText, FileJson, Share2 } from 'lucide-react';
+import { TranscriptResponse } from '../types';
+
+interface ExportOptionsProps {
+  transcript: TranscriptResponse;
+}
+
+const ExportOptions: React.FC<ExportOptionsProps> = ({ transcript }) => {
+  const [copied, setCopied] = useState(false);
+  const [exportFormat, setExportFormat] = useState<'txt' | 'docx' | 'json'>('txt');
+  
+  const formatTranscriptAsText = () => {
+    let result = '';
+    let currentSpeaker = '';
+    let currentText = '';
+    
+    transcript.words.forEach((word, index) => {
+      if (word.type === 'word') {
+        if (currentSpeaker === '') {
+          // First word
+          currentSpeaker = word.speaker_id;
+          currentText = word.text;
+        } else if (word.speaker_id !== currentSpeaker) {
+          // Speaker changed
+          result += `${currentSpeaker.replace('speaker_', 'Speaker ')}: ${currentText.trim()}\n\n`;
+          currentSpeaker = word.speaker_id;
+          currentText = word.text;
+        } else {
+          // Same speaker continues
+          currentText += word.text;
+        }
+      } else if (word.type === 'spacing') {
+        currentText += ' ';
+      }
+      
+      // Handle last word
+      if (index === transcript.words.length - 1 && currentSpeaker) {
+        result += `${currentSpeaker.replace('speaker_', 'Speaker ')}: ${currentText.trim()}\n`;
+      }
+    });
+    
+    return result;
+  };
+  
+  const copyToClipboard = () => {
+    const text = formatTranscriptAsText();
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+  
+  const downloadTranscript = () => {
+    let content: string;
+    let mimeType: string;
+    let fileExtension: string;
+    
+    if (exportFormat === 'json') {
+      content = JSON.stringify(transcript, null, 2);
+      mimeType = 'application/json';
+      fileExtension = 'json';
+    } else {
+      // Default to txt
+      content = formatTranscriptAsText();
+      mimeType = 'text/plain';
+      fileExtension = 'txt';
+    }
+    
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `transcript.${fileExtension}`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+  
+  const shareTranscript = async () => {
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title: 'Audio Transcript',
+          text: formatTranscriptAsText(),
+        });
+      } catch (err) {
+        console.error('Error sharing:', err);
+      }
+    } else {
+      copyToClipboard();
+    }
+  };
+  
+  return (
+    <div className="bg-gray-800 rounded-xl p-4 border border-gray-700 mb-8">
+      <h3 className="text-lg font-medium text-gray-200 mb-3">Export Options</h3>
+      
+      <div className="flex flex-wrap gap-3 mb-4">
+        <button 
+          onClick={() => setExportFormat('txt')}
+          className={`px-3 py-2 rounded-md flex items-center text-sm ${
+            exportFormat === 'txt' 
+              ? 'bg-blue-600 text-white' 
+              : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+          } transition-colors`}
+        >
+          <FileText className="h-4 w-4 mr-2" />
+          Text
+        </button>
+        
+        <button 
+          onClick={() => setExportFormat('json')}
+          className={`px-3 py-2 rounded-md flex items-center text-sm ${
+            exportFormat === 'json' 
+              ? 'bg-blue-600 text-white' 
+              : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+          } transition-colors`}
+        >
+          <FileJson className="h-4 w-4 mr-2" />
+          JSON
+        </button>
+      </div>
+      
+      <div className="flex flex-wrap gap-3">
+        <button 
+          onClick={downloadTranscript}
+          className="px-4 py-2 bg-gradient-to-r from-green-600 to-emerald-500 rounded-md text-white flex items-center hover:from-green-700 hover:to-emerald-600 transition-colors"
+        >
+          <Download className="h-4 w-4 mr-2" />
+          Download
+        </button>
+        
+        <button 
+          onClick={copyToClipboard}
+          className={`px-4 py-2 bg-gray-700 rounded-md text-white flex items-center hover:bg-gray-600 transition-colors ${
+            copied ? 'bg-green-600 hover:bg-green-700' : ''
+          }`}
+        >
+          <Copy className="h-4 w-4 mr-2" />
+          {copied ? 'Copied!' : 'Copy'}
+        </button>
+        
+        <button 
+          onClick={shareTranscript}
+          className="px-4 py-2 bg-gray-700 rounded-md text-white flex items-center hover:bg-gray-600 transition-colors"
+        >
+          <Share2 className="h-4 w-4 mr-2" />
+          Share
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ExportOptions; 

src/components/TranscriptDisplay.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo, useEffect, useRef } from 'react';
 import { TranscriptResponse } from '../types';
 import { User, Clock } from 'lucide-react';
+import ExportOptions from './ExportOptions';
 
 interface TranscriptDisplayProps {
   transcript: TranscriptResponse | null;
@@ -128,6 +129,8 @@ const TranscriptDisplay: React.FC<TranscriptDisplayProps> = ({ transcript }) =>
         </div>
       </div>
 
+      {transcript && <ExportOptions transcript={transcript} />}
+      
       <div className="space-y-4">
         {groupedBySpeaker.map((segment, index) => (
           <div key={index} className="flex transcript-segment opacity-0">