Spaces:
Runtime error
Runtime error
File size: 4,086 Bytes
a45ece3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | import { useEffect } from 'react'
import { Header } from '@/components/Header'
import { UploadPanel } from '@/components/UploadPanel'
import { TranscriptPanel } from '@/components/TranscriptPanel'
import { SettingsPanel } from '@/components/SettingsPanel'
import { Stepper } from '@/components/Stepper'
import { ResultsSummary } from '@/components/ResultsSummary'
import { ClaimsTable } from '@/components/ClaimsTable'
import { EvidenceDrawer } from '@/components/EvidenceDrawer'
import { TranscriptViewer } from '@/components/TranscriptViewer'
import { RunHistory } from '@/components/RunHistory'
import { useAppStore } from '@/store/appStore'
export default function App() {
const currentRun = useAppStore((s) => s.runs.find((r) => r.id === s.currentRunId))
const loadFromStorage = useAppStore((s) => s.loadFromStorage)
useEffect(() => {
loadFromStorage()
}, [loadFromStorage])
return (
<div className="min-h-full">
<Header />
<main className="px-4 sm:px-6 lg:px-8 py-6 max-w-7xl mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
<section className="lg:col-span-5 space-y-6" aria-label="Input panel and run history">
<div className="bg-card text-card-foreground rounded-lg border">
<div className="p-4">
<SettingsTabs />
</div>
</div>
<RunHistory />
</section>
<section className="lg:col-span-7 space-y-4" aria-label="Results panel">
<Stepper />
{currentRun?.report ? (
<div className="space-y-4">
<ResultsSummary />
<ClaimsTable />
<TranscriptViewer />
<EvidenceDrawer />
</div>
) : (
<EmptyState />)
}
</section>
</div>
</main>
</div>
)
}
function SettingsTabs() {
// Simple tabs without external lib for accessibility
// 0: Upload, 1: Transcript, 2: Settings
const tab = useAppStore((s) => s.ui.tab)
const setTab = useAppStore((s) => s.setTab)
return (
<div role="tablist" aria-label="Input tabs" className="w-full">
<div className="flex gap-2 border-b pb-2">
<button
role="tab"
aria-selected={tab === 0}
className={`px-3 py-2 rounded-md text-sm font-medium ${tab === 0 ? 'bg-accent text-accent-foreground' : 'hover:bg-muted'}`}
onClick={() => setTab(0)}
>
Upload Audio
</button>
<button
role="tab"
aria-selected={tab === 1}
className={`px-3 py-2 rounded-md text-sm font-medium ${tab === 1 ? 'bg-accent text-accent-foreground' : 'hover:bg-muted'}`}
onClick={() => setTab(1)}
>
Paste Transcript
</button>
<button
role="tab"
aria-selected={tab === 2}
className={`px-3 py-2 rounded-md text-sm font-medium ${tab === 2 ? 'bg-accent text-accent-foreground' : 'hover:bg-muted'}`}
onClick={() => setTab(2)}
>
KB & Settings
</button>
</div>
<div className="mt-4">
{tab === 0 && <UploadPanel />}
{tab === 1 && <TranscriptPanel />}
{tab === 2 && <SettingsPanel />}
</div>
</div>
)
}
function EmptyState() {
return (
<div className="bg-card text-card-foreground rounded-lg border p-8">
<h2 className="text-lg font-semibold">Welcome to ClaimCheck.AI</h2>
<p className="text-sm text-muted-foreground mt-2">
Upload an audio file or paste a transcript to verify claims against your knowledge base. Use the sample data to explore the UI.
</p>
<div className="mt-4">
<SampleDataButton />
</div>
</div>
)
}
function SampleDataButton() {
const loadSample = useAppStore((s) => s.loadSample)
return (
<button onClick={loadSample} className="inline-flex items-center gap-2 px-3 py-2 rounded-md bg-primary text-primary-foreground hover:opacity-90">
Use Sample Data
</button>
)
} |