620 lines
31 KiB
TypeScript
620 lines
31 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
import axios from 'axios'
|
|
import { Upload, FileText, Clock, CheckCircle2, Loader2, AlertCircle, Trash2, ArrowLeft, Copy, Edit3, X, Scissors, Users, Wand2, Share2 } from 'lucide-react'
|
|
import clsx from 'clsx'
|
|
|
|
const API_BASE = '/tr/api'
|
|
|
|
// --- INTERFACES ---
|
|
|
|
interface AnalysisResult {
|
|
id: number;
|
|
prompt_key: string;
|
|
result_text: string;
|
|
created_at: string;
|
|
}
|
|
|
|
interface TranscriptMessage {
|
|
time: string
|
|
display_time: string
|
|
absolute_seconds: number
|
|
speaker: string
|
|
text: string
|
|
_chunkId?: number // Virtual field for frontend mapping
|
|
_idx?: number // Virtual field
|
|
}
|
|
|
|
interface Chunk {
|
|
id: number
|
|
chunk_index: number
|
|
raw_text: string
|
|
json_content: TranscriptMessage[] | null
|
|
}
|
|
|
|
interface Meeting {
|
|
id: number
|
|
title: string
|
|
status: string
|
|
date_recorded: string
|
|
duration_seconds?: number
|
|
created_at: string
|
|
chunks?: Chunk[]
|
|
analysis_results?: AnalysisResult[]
|
|
}
|
|
|
|
// --- MODAL COMPONENT ---
|
|
|
|
const InsightModal = ({ title, content, onClose, onCopy }: { title: string, content: string, onClose: () => void, onCopy: (text: string) => void }) => (
|
|
<div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 backdrop-blur-sm animate-fade-in">
|
|
<div className="bg-white dark:bg-slate-900 rounded-2xl shadow-2xl w-full max-w-3xl max-h-[90vh] flex flex-col border border-slate-200 dark:border-slate-800">
|
|
<header className="p-4 border-b border-slate-200 dark:border-slate-800 flex justify-between items-center flex-shrink-0">
|
|
<h2 className="text-lg font-bold flex items-center gap-2"><Wand2 className="h-5 w-5 text-blue-500" /> {title}</h2>
|
|
<div className='flex items-center gap-2'>
|
|
<button onClick={() => onCopy(content)} className="flex items-center gap-2 text-sm px-3 py-1.5 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md font-medium transition-colors"><Copy className='h-4 w-4'/> Copy</button>
|
|
<button onClick={onClose} className="p-1.5 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full"><X className="h-5 w-5" /></button>
|
|
</div>
|
|
</header>
|
|
<main className="p-6 overflow-auto">
|
|
<pre className="whitespace-pre-wrap font-sans text-sm leading-relaxed">{content}</pre>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
|
|
export default function App() {
|
|
const [view, setView] = useState<'list' | 'detail'>('list')
|
|
const [selectedId, setSelectedId] = useState<number | null>(null)
|
|
|
|
const [meetings, setMeetings] = useState<Meeting[]>([])
|
|
const [uploading, setUploading] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const [detailMeeting, setDetailMeeting] = useState<Meeting | null>(null)
|
|
const [loadingDetail, setLoadingDetail] = useState(false)
|
|
|
|
// Editing State
|
|
const [editingRow, setEditingRow] = useState<{chunkId: number, idx: number, field: 'speaker' | 'text'} | null>(null)
|
|
const [editValue, setEditValue] = useState("")
|
|
const [isProcessing, setIsProcessing] = useState(false)
|
|
|
|
// Insight State
|
|
const [showInsightModal, setShowInsightModal] = useState(false)
|
|
const [insightLoading, setInsightLoading] = useState(false)
|
|
const [insightResult, setInsightResult] = useState('')
|
|
const [insightTitle, setInsightTitle] = useState('')
|
|
|
|
// Translation State
|
|
const [translationResult, setTranslationResult] = useState<AnalysisResult | null>(null)
|
|
const [activeTab, setActiveTab] = useState<'transcript' | 'translation'>('transcript');
|
|
|
|
const fetchMeetings = async () => {
|
|
try {
|
|
const res = await axios.get(`${API_BASE}/meetings`)
|
|
setMeetings(res.data)
|
|
} catch (e) {
|
|
console.error("Failed to fetch meetings", e)
|
|
}
|
|
}
|
|
|
|
const fetchDetail = async (id: number) => {
|
|
setLoadingDetail(true)
|
|
try {
|
|
const res = await axios.get(`${API_BASE}/meetings/${id}`)
|
|
setDetailMeeting(res.data)
|
|
} catch (e) {
|
|
setError("Could not load details")
|
|
} finally {
|
|
setLoadingDetail(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (view === 'list') {
|
|
fetchMeetings()
|
|
const interval = setInterval(fetchMeetings, 5000)
|
|
return () => clearInterval(interval)
|
|
} else if (view === 'detail' && selectedId) {
|
|
fetchDetail(selectedId)
|
|
}
|
|
}, [view, selectedId])
|
|
|
|
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0]
|
|
if (!file) return
|
|
setUploading(true)
|
|
setError(null)
|
|
const formData = new FormData()
|
|
formData.append('file', file)
|
|
try {
|
|
await axios.post(`${API_BASE}/upload`, formData)
|
|
fetchMeetings()
|
|
} catch (e) { setError("Upload failed.") } finally { setUploading(false) }
|
|
}
|
|
|
|
const handleDeleteMeeting = async (e: React.MouseEvent, id: number) => {
|
|
e.stopPropagation()
|
|
if (!confirm("Delete meeting permanently?")) return
|
|
try {
|
|
await axios.delete(`${API_BASE}/meetings/${id}`)
|
|
if (selectedId === id) { setView('list'); setSelectedId(null); }
|
|
fetchMeetings()
|
|
} catch (e) { alert("Delete failed") }
|
|
}
|
|
|
|
// --- AI INSIGHTS ---
|
|
|
|
const handleGenerateInsight = async (insightType: string, title: string) => {
|
|
if (!detailMeeting) return;
|
|
setInsightLoading(true);
|
|
setInsightTitle(title);
|
|
|
|
try {
|
|
// First, check if result already exists
|
|
const existing = detailMeeting.analysis_results?.find(r => r.prompt_key === insightType);
|
|
if (existing) {
|
|
setInsightResult(existing.result_text);
|
|
setShowInsightModal(true);
|
|
return;
|
|
}
|
|
|
|
// If not, generate it
|
|
const res = await axios.post(`${API_BASE}/meetings/${detailMeeting.id}/insights`, {
|
|
insight_type: insightType
|
|
});
|
|
setInsightResult(res.data.result_text);
|
|
setShowInsightModal(true);
|
|
// Refresh detail view to get the new analysis result in the meeting object
|
|
fetchDetail(detailMeeting.id);
|
|
} catch(e) {
|
|
console.error("Failed to generate insight", e);
|
|
alert(`Error: Could not generate ${title}.`);
|
|
} finally {
|
|
setInsightLoading(false);
|
|
}
|
|
}
|
|
|
|
const handleTranslate = async () => {
|
|
if (!detailMeeting) return;
|
|
setInsightLoading(true);
|
|
|
|
try {
|
|
// Use a consistent key for the translation type
|
|
const translationType = 'translation_english';
|
|
|
|
// Check if result already exists in the main meeting object
|
|
const existing = detailMeeting.analysis_results?.find(r => r.prompt_key === translationType);
|
|
if (existing) {
|
|
setTranslationResult(existing);
|
|
// Here you might want to switch to a "Translation" tab or show a modal
|
|
alert("Translation already exists and has been loaded.");
|
|
return;
|
|
}
|
|
|
|
// If not, generate it
|
|
const res = await axios.post(`${API_BASE}/meetings/${detailMeeting.id}/translate`, {
|
|
target_language: 'English'
|
|
});
|
|
|
|
// The API returns an AnalysisResult object, let's store it
|
|
setTranslationResult(res.data);
|
|
|
|
// Also refresh the main meeting detail to include this new result for persistence
|
|
fetchDetail(detailMeeting.id);
|
|
setActiveTab('translation');
|
|
alert("Translation successful!");
|
|
|
|
} catch(e) {
|
|
console.error("Failed to generate translation", e);
|
|
alert(`Error: Could not translate.`);
|
|
} finally {
|
|
setInsightLoading(false);
|
|
}
|
|
}
|
|
|
|
// --- GLOBAL SPEAKER MANAGEMENT ---
|
|
|
|
const getUniqueSpeakers = () => {
|
|
if (!detailMeeting?.chunks) return []
|
|
const speakers = new Set<string>()
|
|
detailMeeting.chunks.forEach(c => {
|
|
c.json_content?.forEach(m => speakers.add(m.speaker))
|
|
})
|
|
return Array.from(speakers).sort()
|
|
}
|
|
|
|
const handleGlobalRename = async (oldName: string) => {
|
|
const newName = prompt(`Rename speaker '${oldName}' globally to:`, oldName)
|
|
if (!newName || newName === oldName || !detailMeeting) return
|
|
|
|
setIsProcessing(true)
|
|
try {
|
|
await axios.post(`${API_BASE}/meetings/${detailMeeting.id}/rename_speaker`, {
|
|
old_name: oldName,
|
|
new_name: newName
|
|
})
|
|
fetchDetail(detailMeeting.id)
|
|
} catch (e) {
|
|
alert("Global rename failed")
|
|
} finally {
|
|
setIsProcessing(false)
|
|
}
|
|
}
|
|
|
|
// --- TRIMMING & EDITING ---
|
|
|
|
const saveChunkUpdate = async (chunkId: number, newJson: TranscriptMessage[]) => {
|
|
try {
|
|
await axios.put(`${API_BASE}/chunks/${chunkId}`, { json_content: newJson })
|
|
} catch (e) {
|
|
console.error("Failed to save chunk", e)
|
|
alert("Failed to save changes")
|
|
}
|
|
}
|
|
|
|
// Trim Logic: Cut everything BEFORE or AFTER the target message
|
|
const handleTrim = async (targetMsg: TranscriptMessage, mode: 'start' | 'end') => {
|
|
if (!detailMeeting || !detailMeeting.chunks) return
|
|
if (!confirm(mode === 'start' ? "Delete EVERYTHING before this line?" : "Delete EVERYTHING after this line?")) return
|
|
|
|
setIsProcessing(true)
|
|
|
|
// We need to iterate all chunks and decide what to do
|
|
const updates = []
|
|
|
|
for (const chunk of detailMeeting.chunks) {
|
|
if (!chunk.json_content) continue
|
|
|
|
let newContent = [...chunk.json_content]
|
|
let changed = false
|
|
|
|
if (mode === 'start') {
|
|
// Cut BEFORE
|
|
if (chunk.chunk_index < (detailMeeting.chunks.find(c => c.id === targetMsg._chunkId)?.chunk_index || 0)) {
|
|
// This entire chunk is BEFORE the target chunk -> Empty it
|
|
if (newContent.length > 0) {
|
|
newContent = []
|
|
changed = true
|
|
}
|
|
} else if (chunk.id === targetMsg._chunkId) {
|
|
// This is the target chunk -> Slice content
|
|
const cutIdx = newContent.findIndex(m => m.absolute_seconds === targetMsg.absolute_seconds && m.text === targetMsg.text)
|
|
if (cutIdx > 0) {
|
|
newContent = newContent.slice(cutIdx)
|
|
changed = true
|
|
}
|
|
}
|
|
} else {
|
|
// Cut AFTER
|
|
if (chunk.chunk_index > (detailMeeting.chunks.find(c => c.id === targetMsg._chunkId)?.chunk_index || 0)) {
|
|
// This entire chunk is AFTER -> Empty it
|
|
if (newContent.length > 0) {
|
|
newContent = []
|
|
changed = true
|
|
}
|
|
} else if (chunk.id === targetMsg._chunkId) {
|
|
// Target chunk
|
|
const cutIdx = newContent.findIndex(m => m.absolute_seconds === targetMsg.absolute_seconds && m.text === targetMsg.text)
|
|
if (cutIdx !== -1 && cutIdx < newContent.length - 1) {
|
|
newContent = newContent.slice(0, cutIdx + 1)
|
|
changed = true
|
|
}
|
|
}
|
|
}
|
|
|
|
if (changed) {
|
|
updates.push(saveChunkUpdate(chunk.id, newContent))
|
|
}
|
|
}
|
|
|
|
await Promise.all(updates)
|
|
await fetchDetail(detailMeeting.id)
|
|
setIsProcessing(false)
|
|
}
|
|
|
|
const handleUpdateRow = async (chunkId: number, idx: number, field: 'speaker' | 'text', value: string) => {
|
|
if (!detailMeeting) return
|
|
|
|
const newChunks = detailMeeting.chunks!.map(c => {
|
|
if (c.id === chunkId && c.json_content) {
|
|
const newContent = [...c.json_content]
|
|
newContent[idx] = { ...newContent[idx], [field]: value }
|
|
return { ...c, json_content: newContent }
|
|
}
|
|
return c
|
|
})
|
|
|
|
setDetailMeeting({ ...detailMeeting, chunks: newChunks })
|
|
|
|
const updatedChunk = newChunks.find(c => c.id === chunkId)
|
|
if (updatedChunk?.json_content) {
|
|
await saveChunkUpdate(chunkId, updatedChunk.json_content)
|
|
}
|
|
setEditingRow(null)
|
|
}
|
|
|
|
// --- RENDER ---
|
|
|
|
if (view === 'detail') {
|
|
// Flatten messages
|
|
const flatMessages = detailMeeting?.chunks?.flatMap(c =>
|
|
(c.json_content || []).map((msg, idx) => ({ ...msg, _chunkId: c.id, _idx: idx }))
|
|
).sort((a,b) => a.absolute_seconds - b.absolute_seconds) || []
|
|
|
|
const uniqueSpeakers = getUniqueSpeakers()
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-200 font-sans">
|
|
{showInsightModal && <InsightModal title={insightTitle} content={insightResult} onClose={() => setShowInsightModal(false)} onCopy={text => navigator.clipboard.writeText(text)} />}
|
|
<div className="max-w-4xl mx-auto px-4 py-8">
|
|
<button
|
|
onClick={() => { setView('list'); setSelectedId(null); setDetailMeeting(null); }}
|
|
className="flex items-center gap-2 text-slate-500 hover:text-blue-500 mb-6 transition-colors font-medium"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" /> Back to List
|
|
</button>
|
|
|
|
{loadingDetail || !detailMeeting ? (
|
|
<div className="flex justify-center py-20"><Loader2 className="h-8 w-8 animate-spin text-blue-500" /></div>
|
|
) : (
|
|
<>
|
|
<header className="mb-6 border-b border-slate-200 dark:border-slate-800 pb-6 flex justify-between items-start">
|
|
<div>
|
|
<h1 className="text-2xl font-bold mb-2">{detailMeeting.title}</h1>
|
|
<div className="flex items-center gap-4 text-sm text-slate-500">
|
|
<span className="flex items-center gap-1"><Clock className="h-4 w-4" /> {new Date(detailMeeting.created_at).toLocaleString()}</span>
|
|
<span className={clsx("px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide", detailMeeting.status === 'COMPLETED' ? "bg-green-100 text-green-700" : "bg-blue-100 text-blue-700")}>{detailMeeting.status}</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => navigator.clipboard.writeText(flatMessages.map(m => `[${m.display_time}] ${m.speaker}: ${m.text}`).join('\n'))}
|
|
className="text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 p-2 rounded" title="Copy Full Transcript"
|
|
>
|
|
<Copy className="h-5 w-5" />
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
const transcriptText = flatMessages.map(m => `[${m.display_time}] ${m.speaker}: ${m.text}`).join('\n');
|
|
const filename = `${detailMeeting.title}.txt`;
|
|
const blob = new Blob([transcriptText], { type: 'text/plain;charset=utf-8' });
|
|
const link = document.createElement('a');
|
|
link.href = URL.createObjectURL(blob);
|
|
link.download = filename;
|
|
link.click();
|
|
URL.revokeObjectURL(link.href);
|
|
}}
|
|
className="text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 p-2 rounded" title="Download Full Transcript as TXT"
|
|
>
|
|
<FileText className="h-5 w-5" />
|
|
</button>
|
|
<button
|
|
onClick={() => alert("Share functionality coming soon!")} // Placeholder
|
|
className="text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 p-2 rounded" title="Share Transcript"
|
|
>
|
|
<Share2 className="h-5 w-5" />
|
|
</button>
|
|
<button onClick={(e) => handleDeleteMeeting(e, detailMeeting.id)} className="text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 p-2 rounded"><Trash2 className="h-5 w-5" /></button>
|
|
</div>
|
|
</header>
|
|
|
|
{/* SPEAKER MANAGER BAR */}
|
|
{uniqueSpeakers.length > 0 && (
|
|
<div className="mb-6 bg-blue-50 dark:bg-blue-900/20 p-4 rounded-xl border border-blue-100 dark:border-blue-800 flex items-center gap-4 flex-wrap">
|
|
<div className="flex items-center gap-2 text-sm font-bold text-blue-700 dark:text-blue-300">
|
|
<Users className="h-4 w-4" /> Speakers found:
|
|
</div>
|
|
<div className="flex gap-2 flex-wrap">
|
|
{uniqueSpeakers.map(speaker => (
|
|
<button
|
|
key={speaker}
|
|
onClick={() => handleGlobalRename(speaker)}
|
|
className="px-3 py-1 bg-white dark:bg-slate-800 border border-blue-200 dark:border-blue-700 rounded-full text-xs font-medium text-slate-700 dark:text-slate-300 hover:border-blue-500 hover:text-blue-500 transition-colors flex items-center gap-1 shadow-sm"
|
|
title="Click to rename globally"
|
|
>
|
|
{speaker} <Edit3 className="h-3 w-3 opacity-50" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mb-6 bg-purple-50 dark:bg-purple-900/20 p-4 rounded-xl border border-purple-100 dark:border-purple-800">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<Wand2 className="h-5 w-5 text-purple-600 dark:text-purple-300" />
|
|
<h3 className="font-bold text-purple-800 dark:text-purple-200">AI Tools</h3>
|
|
{insightLoading && <Loader2 className="h-4 w-4 animate-spin text-purple-500" />}
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
|
<button disabled={insightLoading} onClick={() => handleGenerateInsight('meeting_minutes', 'Meeting Protocol')} className="text-sm font-medium px-4 py-2 bg-white dark:bg-slate-800 border dark:border-slate-700 rounded-lg shadow-sm hover:bg-slate-50 dark:hover:bg-slate-700/50 disabled:opacity-50 transition-colors">Generate Protocol</button>
|
|
<button disabled={insightLoading} onClick={() => handleGenerateInsight('action_items', 'Action Items')} className="text-sm font-medium px-4 py-2 bg-white dark:bg-slate-800 border dark:border-slate-700 rounded-lg shadow-sm hover:bg-slate-50 dark:hover:bg-slate-700/50 disabled:opacity-50 transition-colors">Extract Action Items</button>
|
|
<button disabled={insightLoading} onClick={() => handleGenerateInsight('sales_summary', 'Sales Summary')} className="text-sm font-medium px-4 py-2 bg-white dark:bg-slate-800 border dark:border-slate-700 rounded-lg shadow-sm hover:bg-slate-50 dark:hover:bg-slate-700/50 disabled:opacity-50 transition-colors">Sales Summary</button>
|
|
<button disabled={insightLoading} onClick={() => handleTranslate()} className="text-sm font-medium px-4 py-2 bg-white dark:bg-slate-800 border dark:border-slate-700 rounded-lg shadow-sm hover:bg-slate-50 dark:hover:bg-slate-700/50 disabled:opacity-50 transition-colors">Translate (EN)</button>
|
|
</div>
|
|
</div>
|
|
|
|
{isProcessing && (
|
|
<div className="fixed inset-0 bg-white/50 dark:bg-black/50 z-50 flex items-center justify-center backdrop-blur-sm">
|
|
<div className="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-2xl flex items-center gap-4">
|
|
<Loader2 className="h-6 w-6 animate-spin text-blue-500" />
|
|
<span className="font-medium">Updating transcript...</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden">
|
|
{/* TAB Navigation */}
|
|
<div className="flex border-b border-slate-200 dark:border-slate-800">
|
|
<button
|
|
onClick={() => setActiveTab('transcript')}
|
|
className={clsx("px-4 py-3 font-medium text-sm", activeTab === 'transcript' ? "text-blue-600 border-b-2 border-blue-600" : "text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800/50")}
|
|
>
|
|
Original Transcript
|
|
</button>
|
|
{translationResult && (
|
|
<button
|
|
onClick={() => setActiveTab('translation')}
|
|
className={clsx("px-4 py-3 font-medium text-sm", activeTab === 'translation' ? "text-blue-600 border-b-2 border-blue-600" : "text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800/50")}
|
|
>
|
|
English Translation
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Conditional Content */}
|
|
{activeTab === 'transcript' && (
|
|
flatMessages.length > 0 ? (
|
|
<div className="divide-y divide-slate-100 dark:divide-slate-800">
|
|
{flatMessages.map((msg, uniqueIdx) => {
|
|
const isEditingSpeaker = editingRow?.chunkId === msg._chunkId && editingRow?.idx === msg._idx && editingRow?.field === 'speaker';
|
|
const isEditingText = editingRow?.chunkId === msg._chunkId && editingRow?.idx === msg._idx && editingRow?.field === 'text';
|
|
|
|
return (
|
|
<div key={uniqueIdx} className="p-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors flex gap-4 group relative">
|
|
{/* Time */}
|
|
<div className="w-16 pt-1 flex flex-col items-end gap-1 flex-shrink-0">
|
|
<span className="text-xs text-slate-400 font-mono">{msg.display_time || "00:00"}</span>
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
{/* Speaker */}
|
|
<div className="mb-1 flex items-center gap-2">
|
|
{isEditingSpeaker ? (
|
|
<input
|
|
autoFocus
|
|
className="text-sm font-bold text-blue-600 dark:text-blue-400 bg-slate-100 dark:bg-slate-800 border rounded px-2 py-0.5 outline-none w-48"
|
|
value={editValue}
|
|
onChange={e => setEditValue(e.target.value)}
|
|
onBlur={() => handleUpdateRow(msg._chunkId!, msg._idx!, 'speaker', editValue)}
|
|
onKeyDown={e => e.key === 'Enter' && handleUpdateRow(msg._chunkId!, msg._idx!, 'speaker', editValue)}
|
|
/>
|
|
) : (
|
|
<div
|
|
className="font-bold text-sm text-blue-600 dark:text-blue-400 cursor-pointer hover:underline flex items-center gap-1 w-fit"
|
|
onClick={() => { setEditingRow({chunkId: msg._chunkId!, idx: msg._idx!, field: 'speaker'}); setEditValue(msg.speaker); }}
|
|
>
|
|
{msg.speaker}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Text */}
|
|
<div>
|
|
{isEditingText ? (
|
|
<textarea
|
|
autoFocus
|
|
className="w-full text-slate-800 dark:text-slate-200 bg-slate-100 dark:bg-slate-800 border rounded px-2 py-1 outline-none min-h-[60px]"
|
|
value={editValue}
|
|
onChange={e => setEditValue(e.target.value)}
|
|
onBlur={() => handleUpdateRow(msg._chunkId!, msg._idx!, 'text', editValue)}
|
|
/>
|
|
) : (
|
|
<div
|
|
className="text-slate-800 dark:text-slate-200 leading-relaxed whitespace-pre-wrap cursor-text hover:bg-slate-100/50 dark:hover:bg-slate-800/30 rounded p-1 -ml-1 transition-colors"
|
|
onClick={() => { setEditingRow({chunkId: msg._chunkId!, idx: msg._idx!, field: 'text'}); setEditValue(msg.text); }}
|
|
>
|
|
{msg.text}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hover Actions (Trim / Delete) */}
|
|
<div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 flex gap-1 bg-white dark:bg-slate-900 border dark:border-slate-700 shadow-sm rounded-lg p-1 transition-all">
|
|
<button
|
|
onClick={() => handleTrim(msg, 'start')}
|
|
className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded"
|
|
title="Trim Start: Delete everything BEFORE this line"
|
|
>
|
|
<Scissors className="h-3.5 w-3.5 rotate-180" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleTrim(msg, 'end')}
|
|
className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded"
|
|
title="Trim End: Delete everything AFTER this line"
|
|
>
|
|
<Scissors className="h-3.5 w-3.5" />
|
|
</button>
|
|
<div className="w-px bg-slate-200 dark:bg-slate-700 mx-1"></div>
|
|
<button
|
|
onClick={() => {
|
|
// Single delete logic is redundant if we have trims, but nice to keep
|
|
// Reuse update logic but filter out index
|
|
// Simplified: Just use handleTrim but that's overkill
|
|
// Let's implement quick single delete
|
|
const cId = msg._chunkId!;
|
|
const idx = msg._idx!;
|
|
const newChunks = detailMeeting?.chunks?.map(c => {
|
|
if (c.id === cId && c.json_content) {
|
|
return { ...c, json_content: c.json_content.filter((_, i) => i !== idx) }
|
|
}
|
|
return c
|
|
}) || [];
|
|
setDetailMeeting(prev => prev ? ({ ...prev, chunks: newChunks }) : null);
|
|
const updatedC = newChunks.find(c => c.id === cId);
|
|
if(updatedC?.json_content) saveChunkUpdate(cId, updatedC.json_content);
|
|
}}
|
|
className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded"
|
|
title="Delete this line"
|
|
>
|
|
<X className="h-3.5 w-3.5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)})}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-12">
|
|
{detailMeeting.chunks && detailMeeting.chunks.length > 0 && detailMeeting.chunks[0].raw_text ? (
|
|
<div className="p-8">
|
|
<p className="text-yellow-600 mb-2 font-medium">Legacy Format</p>
|
|
<p className="text-slate-500 text-sm mb-4">Re-upload file to enable editing.</p>
|
|
<div className="text-left font-mono text-xs overflow-auto max-h-96">{detailMeeting.chunks[0].raw_text}</div>
|
|
</div>
|
|
) : (<p className="text-slate-500">Processing...</p>)}
|
|
</div>
|
|
)
|
|
)}
|
|
|
|
{activeTab === 'translation' && (
|
|
<div className="p-6">
|
|
<pre className="whitespace-pre-wrap font-sans text-sm leading-relaxed">{translationResult?.result_text || "Loading translation..."}</pre>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// List View remains same
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-200">
|
|
<div className="max-w-5xl mx-auto px-4 py-12">
|
|
<header className="flex items-center justify-between mb-12">
|
|
<div><h1 className="text-3xl font-bold tracking-tight">Meeting Assistant</h1><p className="text-slate-500 mt-2">Transcribe and analyze your meetings with Gemini 2.0</p></div>
|
|
<label className={clsx("flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-full font-semibold transition-all cursor-pointer shadow-lg shadow-blue-500/20", uploading && "opacity-50 cursor-not-allowed")}>
|
|
{uploading ? <Loader2 className="h-5 w-5 animate-spin" /> : <Upload className="h-5 w-5" />}
|
|
{uploading ? "Uploading..." : "New Meeting"}
|
|
<input type="file" className="hidden" accept="audio/*" onChange={handleUpload} disabled={uploading} />
|
|
</label>
|
|
</header>
|
|
{error && <div className="mb-8 p-4 bg-red-50 text-red-600 rounded-xl flex items-center gap-3"><AlertCircle className="h-5 w-5" />{error}</div>}
|
|
<div className="grid gap-4">
|
|
{meetings.map((m: Meeting) => (
|
|
<div key={m.id} onClick={() => { setSelectedId(m.id); setView('detail'); }} className="group bg-white dark:bg-slate-900 p-6 rounded-2xl border border-slate-200 dark:border-slate-800 hover:shadow-xl transition-all flex items-center justify-between cursor-pointer">
|
|
<div className="flex items-center gap-4">
|
|
<div className={clsx("p-3 rounded-xl", m.status === 'COMPLETED' ? "bg-green-100 text-green-600" : "bg-blue-100 text-blue-600")}>{m.status === 'COMPLETED' ? <CheckCircle2 className="h-6 w-6" /> : <FileText className="h-6 w-6" />}</div>
|
|
<div><h3 className="font-bold text-lg leading-tight">{m.title}</h3><div className="flex items-center gap-4 mt-1 text-sm text-slate-500"><span className="flex items-center gap-1"><Clock className="h-3.5 w-3.5" /> {new Date(m.created_at).toLocaleDateString()}</span><span className={clsx("font-semibold uppercase tracking-wider text-[10px] px-2 py-0.5 rounded", m.status === 'COMPLETED' ? "bg-green-100 text-green-700" : "bg-slate-100 text-slate-600")}>{m.status}</span></div></div>
|
|
</div>
|
|
<button onClick={(e) => handleDeleteMeeting(e, m.id)} className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-full transition-colors"><Trash2 className="h-5 w-5" /></button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|