u

src/components/chat/ChatFlowList.jsx

@@ -27,7 +27,13 @@ import CalculateIcon from '@mui/icons-material/Calculate';
 import QrCodeScannerIcon from '@mui/icons-material/QrCodeScanner';
 import DirectionsIcon from '@mui/icons-material/Directions';
 import HealingMarkdown from './HealingMarkdown';
-import { VfsAttachmentLink, parseAttachmentsFromText, stripUserEnv } from './ChatAttachmentItems';
+import {
+  VfsAttachmentLink,
+  ExtractionPill,
+  parseAttachmentsFromText,
+  parseExtractionsFromText,
+  stripUserEnv,
+} from './ChatAttachmentItems';
 import {
   CHROMA,
   SHADOW_BUBBLE_ASSISTANT,
@@ -878,7 +884,8 @@ function MessageRow({ msg, showTime = true }) {
     } catch { }
   }
 
-  const { attachments: vfsAttachments, cleanText: rawCleanText } = parseAttachmentsFromText(textContent);
+  const { extractions, cleanText: textAfterExtractions } = parseExtractionsFromText(textContent);
+  const { attachments: vfsAttachments, cleanText: rawCleanText } = parseAttachmentsFromText(textAfterExtractions);
   const cleanText = stripUserEnv(rawCleanText);
 
   if (msg.role === 'system') {
@@ -957,6 +964,26 @@ function MessageRow({ msg, showTime = true }) {
             lineHeight: 1.5,
           })}
         >
+          {extractions.length > 0 && (
+            <Box
+              sx={{
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: 0.75,
+                mb: cleanText || vfsAttachments.length > 0 ? 0.75 : 0,
+              }}
+            >
+              {extractions.map((ext, idx) => (
+                <ExtractionPill
+                  key={ext.id || idx}
+                  label={ext.label || 'parsed invoice'}
+                  text={ext.text}
+                  isUser={isUser}
+                />
+              ))}
+            </Box>
+          )}
+
           {vfsAttachments.length > 0 && (
             <Box
               sx={{