Benjamin Admin
49171e841f
Rebuilds the Compliance Advisor floating widget from a plain chat into an Evidence
Workspace: pinned last question, markdown-rendered answer (clean prose), and separate
panes for Sources (hierarchical Knowledge Units), Figures (C8, conditional) and
Footnotes (C-FN), plus a stats bar (Quellen/Regelwerke/Diagramme/Fußnoten). Scrollable
turn history; stays a floating icon on every SDK page.
Architecture (user direction): the frontend renders ONLY structured evidence and NEVER
parses the answer text. The proxy now returns a JSON AdvisorEvidenceMeta line followed
by the streamed markdown answer; advisor-rag exposes structured results; an adapter maps
RAG/compiler output to the frontend envelope. Figures/footnotes wire in once the
RAG-ingestion contract lands (requested on the board) — figures pane is conditional.
- lib/sdk/advisor/{evidence,evidence-adapter}.ts (+ adapter test, 7 cases)
- components/sdk/advisor/* panes + in-house safe Markdown (no new dep, no dangerouslySetInnerHTML) + test
- useAdvisorStream (meta-line parse + streamed answer) + useAdvisorEmail (escaped)
- proxy: evidence-meta-v1 envelope + clean-prose prompt (no inline citations)
- tsc clean, 11 vitest pass, check-loc 0. ESLint not installed in this node_modules -> CI lints on push.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import { Image as ImageIcon, ExternalLink } from 'lucide-react'
|
|
import type { FigureUnit } from '@/lib/sdk/advisor/evidence'
|
|
import { PaneHeader } from './PaneHeader'
|
|
|
|
function FigureCard({ fig }: { fig: FigureUnit }) {
|
|
const canOpen = !!fig.imageUrl && /^https?:\/\//i.test(fig.imageUrl)
|
|
return (
|
|
<div className="rounded-lg border border-gray-200 bg-white p-2.5">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="text-xs font-semibold text-gray-900">
|
|
{fig.label}
|
|
{fig.caption ? <span className="font-normal text-gray-600"> — {fig.caption}</span> : null}
|
|
</div>
|
|
{canOpen && (
|
|
<a
|
|
href={fig.imageUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex flex-shrink-0 items-center gap-0.5 rounded px-1.5 py-0.5 text-[11px] font-medium text-indigo-600 hover:bg-indigo-50"
|
|
>
|
|
<ExternalLink className="h-3 w-3" />
|
|
Original anzeigen
|
|
</a>
|
|
)}
|
|
</div>
|
|
<div className="mt-0.5 text-[11px] text-gray-500">
|
|
Quelle: {fig.source.short}
|
|
{fig.section ? ` · ${fig.section}` : ''}
|
|
</div>
|
|
{canOpen ? (
|
|
<a href={fig.imageUrl} target="_blank" rel="noopener noreferrer" className="mt-1.5 block">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={fig.imageUrl}
|
|
alt={fig.caption || fig.label}
|
|
loading="lazy"
|
|
className="max-h-44 w-full rounded border border-gray-100 object-contain"
|
|
/>
|
|
</a>
|
|
) : (
|
|
<div className="mt-1.5 flex items-center justify-center rounded border border-dashed border-gray-200 bg-gray-50 px-3 py-5 text-[11px] text-gray-400">
|
|
Original-Abbildung folgt
|
|
</div>
|
|
)}
|
|
{fig.visionSummary && (
|
|
<p className="mt-1.5 text-[11px] italic text-gray-500">{fig.visionSummary}</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/** Figures pane (C8) — original document figures, rendered only when present. */
|
|
export function FiguresPane({ figures }: { figures: FigureUnit[] }) {
|
|
if (figures.length === 0) return null
|
|
return (
|
|
<section>
|
|
<PaneHeader
|
|
icon={<ImageIcon className="h-3.5 w-3.5 text-gray-500" />}
|
|
title="Abbildungen & Diagramme"
|
|
count={figures.length}
|
|
/>
|
|
<div className="space-y-1.5">
|
|
{figures.map((f) => (
|
|
<FigureCard key={f.id} fig={f} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|