Benjamin_Boenisch/breakpilot-lehrer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(rag-qa): add fullscreen mode for split-view chunk browser

Browse Source 
Allows viewing chunks side-by-side with original PDF in fullscreen mode
for large screen QA review. Toggle via button or close with Escape key.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-02-28 21:23:32 +01:00
parent 266b9dfad3
commit e3aa8e899e
1 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
admin-lehrer/app/(admin)/ai/rag/components/ChunkBrowserQA.tsx
View File

@@ -52,6 +52,7 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
// Split-View
const [splitViewActive, setSplitViewActive] = useState(true)
const [chunksPerPage, setChunksPerPage] = useState(6)
const [fullscreen, setFullscreen] = useState(false)
// Collection — default to bp_compliance_ce where we have PDFs downloaded
const [collection, setCollection] = useState('bp_compliance_ce')
@@ -242,21 +243,24 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
}
const handleKeyDown = useCallback((e: KeyboardEvent) => {
if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
if (e.key === 'Escape' && fullscreen) {
e.preventDefault()
setFullscreen(false)
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
e.preventDefault()
setDocChunkIndex(i => Math.max(0, i - 1))
} else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
e.preventDefault()
setDocChunkIndex(i => Math.min(docChunksRef.current.length - 1, i + 1))
}
}, [])
}, [fullscreen])
useEffect(() => {
if (selectedRegulation && docChunks.length > 0) {
if (fullscreen || (selectedRegulation && docChunks.length > 0)) {
window.addEventListener('keydown', handleKeyDown)
return () => window.removeEventListener('keydown', handleKeyDown)
}
}, [selectedRegulation, docChunks.length, handleKeyDown])
}, [selectedRegulation, docChunks.length, handleKeyDown, fullscreen])
const toggleGroup = (group: string) => {
setCollapsedGroups(prev => {
@@ -340,7 +344,10 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
const structInfo = getStructuralInfo(currentChunk)
return (
<div className="flex flex-col" style={{ height: 'calc(100vh - 220px)' }}>
<div
className={`flex flex-col ${fullscreen ? 'fixed inset-0 z-50 bg-slate-100 p-4' : ''}`}
style={fullscreen ? { height: '100vh' } : { height: 'calc(100vh - 220px)' }}
>
{/* Header bar — fixed height */}
<div className="flex-shrink-0 bg-white rounded-xl border border-slate-200 p-3 mb-3">
<div className="flex flex-wrap items-center gap-4">
@@ -424,6 +431,15 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
>
{splitViewActive ? 'Split-View an' : 'Split-View aus'}
</button>
<button
onClick={() => setFullscreen(!fullscreen)}
className={`px-3 py-1 text-xs rounded-lg border ${
fullscreen ? 'bg-indigo-50 border-indigo-300 text-indigo-700' : 'bg-slate-50 border-slate-300 text-slate-600'
}`}
title={fullscreen ? 'Vollbild beenden (Esc)' : 'Vollbild'}
>
{fullscreen ? '&#10005; Vollbild beenden' : '&#9974; Vollbild'}
</button>
</div>
</>
)}