@vertesia/ui 1.5.0-dev.20260717.131047Z → 1.5.0-dev.20260722.120446Z

package/src/features/magic-pdf/DownloadPopover.tsx

@@ -1,5 +1,5 @@
-import type { ContentObject, DocumentMetadata } from '@vertesia/common';
-import { Button, Popover, PopoverContent, PopoverTrigger } from '@vertesia/ui/core';
+import type { ContentObject } from '@vertesia/common';
+import { Button } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
 import { Download } from 'lucide-react';
@@ -15,52 +15,9 @@ export function DownloadPopover({ object }: DownloadPopoverProps) {
         void getResourceUrl(client, object.id, name).then((url) => window.open(url, '_blank'));
     };
 
-    const getProcessorType = (): string => {
-        if (object.metadata?.type === 'document') {
-            const docMetadata = object.metadata as DocumentMetadata;
-            return docMetadata.content_processor?.type || 'xml';
-        }
-        return 'xml'; // default
-    };
-
-    const processorType = getProcessorType();
-
-    const buttonClass = 'p-2 cursor-pointer hover:bg-muted text-start text-sm';
-
-    // For markdown processor, only one download option - render simple button
-    if (processorType === 'markdown') {
-        return (
-            <Button variant="ghost" size="xs" onClick={() => onDownload('document.md')} alt={t('pdf.download')}>
-                <Download className="size-4" />
-            </Button>
-        );
-    }
-
-    // Default XML processor - multiple options, use popover
     return (
-        <Popover>
-            <PopoverTrigger>
-                <Button variant="ghost" size="xs" alt={t('pdf.download')}>
-                    <Download className="size-4" />
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent align="start" className="p-0 w-auto">
-                <div className="min-w-[200px] flex flex-col divide-y divide-border">
-                    <Button variant="unstyled" className={buttonClass} onClick={() => onDownload('annotated.pdf')}>
-                        annotated.pdf
-                    </Button>
-                    <Button variant="unstyled" className={buttonClass} onClick={() => onDownload('document.xml')}>
-                        document.xml
-                    </Button>
-                    <Button
-                        variant="unstyled"
-                        className={buttonClass}
-                        onClick={() => onDownload('analyzed-pages.json')}
-                    >
-                        analyzed-pages.json
-                    </Button>
-                </div>
-            </PopoverContent>
-        </Popover>
+        <Button variant="ghost" size="xs" onClick={() => onDownload('document.md')} title={t('pdf.download')}>
+            <Download className="size-4" />
+        </Button>
     );
 }

package/src/features/magic-pdf/ExtractedContentView.tsx

@@ -1,4 +1,4 @@
-import { JSONCode, MarkdownRenderer, XMLViewer } from '@vertesia/ui/widgets';
+import { JSONCode, MarkdownRenderer } from '@vertesia/ui/widgets';
 import { Loader2 } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useMagicPdfContext } from './MagicPdfProvider';
@@ -23,22 +23,10 @@ export function ExtractedContentView({ viewType, pageNumber }: ExtractedContentV
         case 'markdown':
             return <MarkdownPageView pageNumber={pageNumber} />;
         default:
-            return <XmlPageView pageNumber={pageNumber} />;
+            return <MarkdownPageView pageNumber={pageNumber} />;
     }
 }
 
-interface XmlPageViewProps {
-    pageNumber: number;
-}
-function XmlPageView({ pageNumber }: XmlPageViewProps) {
-    const { xmlPages: pages } = useMagicPdfContext();
-    return (
-        <div className="px-4 py-2">
-            <XMLViewer xml={pages[pageNumber - 1]} collapsible />
-        </div>
-    );
-}
-
 interface JsonPageLayoutViewProps {
     pageNumber: number;
 }

package/src/features/magic-pdf/GroundedExtractionAssistantPanel.tsx

@@ -0,0 +1,86 @@
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { useUserSession } from '@vertesia/ui/session';
+import { useCallback, useRef, useState } from 'react';
+import { ModernAgentConversation, type StartWorkflowFn } from '../agent/chat';
+
+interface GroundedExtractionAssistantPanelProps {
+    objectId: string;
+    /**
+     * Called after the assistant finishes a turn (which may have applied a grounded
+     * edit) so the grounded view can re-fetch and re-render the data + citation boxes.
+     */
+    onExtractionChanged?: () => void;
+    /**
+     * The field path currently selected in the view. When set (before the
+     * conversation starts), it seeds the assistant: the first message is scoped to
+     * this field so "click a field, say what's wrong" reaches the model.
+     */
+    selectedField?: string;
+    onClose?: () => void;
+}
+
+/**
+ * Interactive assistant embedded in the grounded-extraction view. Starts the
+ * server-side GroundedExtractionAssistant conversation (recordRun -> stage the
+ * document into the agent space -> launch interactive), then renders the live
+ * conversation. Each completed turn triggers `onExtractionChanged` so an operator's
+ * grounded edits appear in the data tree + citation overlay without a manual reload.
+ */
+export function GroundedExtractionAssistantPanel({
+    objectId,
+    onExtractionChanged,
+    selectedField,
+    onClose,
+}: GroundedExtractionAssistantPanelProps) {
+    const { t } = useUITranslation();
+    const { client } = useUserSession();
+    const [agentRunId, setAgentRunId] = useState<string | undefined>(undefined);
+    // Keep the latest callback/selection without re-creating the handlers each render.
+    const changedRef = useRef(onExtractionChanged);
+    changedRef.current = onExtractionChanged;
+    const selectedRef = useRef(selectedField);
+    selectedRef.current = selectedField;
+
+    const startWorkflow: StartWorkflowFn = useCallback(
+        async (initialMessage) => {
+            const field = selectedRef.current;
+            // Scope the opening message to the field the operator had selected, so
+            // "click a field, say what's wrong" reaches the model with the target.
+            const prompt =
+                field && initialMessage ? `Regarding the field "${field}": ${initialMessage}` : initialMessage;
+            const res = await client.store.objects
+                .analyze(objectId)
+                .startGroundedAssistant(prompt ? { user_prompt: prompt } : {});
+            setAgentRunId(res.agent_run_id);
+            return { agent_run_id: res.agent_run_id };
+        },
+        [client, objectId],
+    );
+
+    // The agent re-enables the follow-up input when a turn completes; that turn may
+    // have applied a grounded edit, so refresh the extraction at that point.
+    const handleShowInputChange = useCallback((canSendFollowUp: boolean) => {
+        if (canSendFollowUp) {
+            changedRef.current?.();
+        }
+    }, []);
+
+    return (
+        <div className="flex h-full flex-col">
+            {selectedField && !agentRunId && (
+                <div className="shrink-0 border-b border-border bg-muted/40 px-3 py-1.5 text-xs text-muted-foreground">
+                    {t('grounded.assistantField')} <span className="font-mono text-foreground">{selectedField}</span>
+                </div>
+            )}
+            <ModernAgentConversation
+                agentRunId={agentRunId}
+                startWorkflow={startWorkflow}
+                interactive
+                fullWidth
+                hideObjectLinking
+                onShowInputChange={handleShowInputChange}
+                onClose={onClose}
+            />
+        </div>
+    );
+}

package/src/features/magic-pdf/GroundedExtractionView.test.tsx

@@ -0,0 +1,65 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { renderWithProviders } from '../../__tests__/test-utils.js';
+import { GroundedExtractionPanel } from './GroundedExtractionView.js';
+
+const { mockClient } = vi.hoisted(() => {
+    const downloadUrl = vi.fn((path: string) => Promise.resolve({ url: `https://files.test/${path}` }));
+    return {
+        mockClient: { files: { getDownloadUrl: downloadUrl } },
+    };
+});
+
+vi.mock('@vertesia/ui/session', () => ({
+    useUserSession: () => ({
+        client: mockClient,
+    }),
+}));
+
+describe('GroundedExtractionPanel', () => {
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    it('switches between the original and checkerboard page and shows the selected A1 range', async () => {
+        const extraction = {
+            version: 1,
+            object_id: 'object-1',
+            run_id: 'run-1',
+            generated_at: '2026-07-13T16:30:27.418Z',
+            pages: { '1': { width: 612, height: 792 } },
+            data: { part_number: 'DFVS25' },
+            citations: [
+                {
+                    path: 'part_number',
+                    page: 1,
+                    block_ids: [],
+                    cells: { start: 'E38', end: 'J38' },
+                    verified: false,
+                    reviewed: true,
+                    value: 'DFVS25',
+                    boxes: [{ x: 59.7, y: 552.9, w: 89.6, h: 17.4 }],
+                    confidence: 0.99,
+                },
+            ],
+        };
+        vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce(
+            new Response(JSON.stringify(extraction), {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' },
+            }),
+        );
+
+        renderWithProviders(<GroundedExtractionPanel objectId="object-1" />);
+
+        const pageImage = await screen.findByAltText('Page 1');
+        expect(pageImage.getAttribute('src')).toContain('page-1.original.jpg');
+
+        fireEvent.click(screen.getByRole('button', { name: 'Checkerboard' }));
+        await waitFor(() => expect(screen.getByAltText('Page 1').getAttribute('src')).toContain('page-1.grid.jpg'));
+
+        fireEvent.click(screen.getByText('DFVS25'));
+        expect(screen.getByText('E38:J38')).not.toBeNull();
+        expect(screen.getByRole('button', { name: 'part_number' }).getAttribute('title')).toContain('E38:J38');
+    });
+});