@sybilion/uilib 1.3.14 → 1.3.16

package/dist/esm/components/ui/Chat/Chat.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".Chat_root__IWt99{background-color:var(--background);display:flex;flex-direction:column;height:100%;min-height:0}.Chat_header__ZjwP-{align-items:center;display:flex;flex-shrink:0;min-height:64px;padding:var(--p-2) var(--p-6) 0}.Chat_isEmpty__b4ViB{padding-bottom:170px}";
+var css_248z = ".Chat_root__IWt99{background-color:var(--background);display:flex;flex-direction:column;height:100%;min-height:0}.Chat_header__ZjwP-{align-items:center;display:flex;flex-shrink:0;min-height:64px;padding:var(--p-2) var(--p-6) 0;padding-right:var(--p-12)}.Chat_isEmpty__b4ViB{padding-bottom:170px}";
 var S = {"root":"Chat_root__IWt99","header":"Chat_header__ZjwP-","isEmpty":"Chat_isEmpty__b4ViB"};
 styleInject(css_248z);
 

package/dist/esm/components/ui/Chat/ChatChrome/ChatChrome.js

@@ -30,6 +30,9 @@ function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPr
             if (items.length > 0) {
                 setPendingAttachments(prev => [...prev, ...items]);
             }
+        })
+            .catch(() => {
+            // Extraction failed (parse error, size limit, etc.); skip staging.
         })
             .finally(() => setIsExtractingAttachments(false));
     }, [allowPdfAttachments, promptBusy]);

package/dist/esm/components/ui/Chat/ChatMessage/AgentMessageContent.helpers.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { shouldRenderAutolinkPill, AutolinkUrl } from '../../InteractiveContent/AutolinkUrl.js';
 import logger from '../../../../lib/logger.js';
 import S from './ChatMessage.styl.js';
+import S$1 from '../../InteractiveContent/InteractiveContent.styl.js';
 
 const injectHeaders = (content) => {
     // Match #, ##, ###, or #### headers at start of line
@@ -320,7 +322,7 @@ const injectMarkdownLink = (content) => {
     const { target, rel } = linkTargetRelForHref(href, undefined);
     const label = matches[1];
     return {
-        elem: (jsx("a", { href: href, target: target, rel: rel, children: runFormattingPipeline(label, linkLabelInjectors) })),
+        elem: shouldRenderAutolinkPill(label, href) ? (jsx(AutolinkUrl, { href: href, display: label, target: target, rel: rel })) : (jsx("a", { href: href, target: target, rel: rel, className: S$1.textLink, children: runFormattingPipeline(label, linkLabelInjectors) })),
         index: matches.index,
         length: matches[0].length,
     };
@@ -366,7 +368,7 @@ const injectAutolinkUrl = (content) => {
     }
     const { target, rel } = linkTargetRelForHref(c.href, undefined);
     return {
-        elem: (jsx("a", { href: c.href, target: target, rel: rel, children: c.display })),
+        elem: (jsx(AutolinkUrl, { href: c.href, display: c.display, target: target, rel: rel })),
         index: c.index,
         length: c.length,
     };
@@ -393,8 +395,9 @@ const injectAnchor = (content) => {
         return null;
     }
     const { target, rel } = linkTargetRelForHref(href, targetRaw || undefined);
+    const innerTrimmed = inner.trim();
     return {
-        elem: (jsx("a", { href: href, target: target, rel: rel, children: runFormattingPipeline(inner, linkLabelInjectors) })),
+        elem: shouldRenderAutolinkPill(innerTrimmed, href) ? (jsx(AutolinkUrl, { href: href, display: innerTrimmed, target: target, rel: rel })) : (jsx("a", { href: href, target: target, rel: rel, className: S$1.textLink, children: runFormattingPipeline(inner, linkLabelInjectors) })),
         index: matches.index,
         length: matches[0].length,
     };

package/dist/esm/components/ui/Chat/ChatMessage/AgentMessageContent.js

@@ -2,10 +2,11 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useMemo } from 'react';
 import { Button } from '../../Button/Button.js';
 import { InteractiveContent } from '../../InteractiveContent/InteractiveContent.js';
+import { Presentation } from 'lucide-react';
+import '../../InteractiveContent/InteractiveContent.styl.js';
 import { parseDatasetAppToken } from '../../../../utils/datasetApplicationLink.js';
 import { Scroll } from '@homecode/ui';
 import { PaperPlaneRightIcon } from '@phosphor-icons/react';
-import { Presentation } from 'lucide-react';
 import { convertMarkdownTableToHTML } from './AgentMessageContent.helpers.js';
 import { ChatDatasetApplicationLink } from './ChatDatasetApplicationLink.js';
 import S from './ChatMessage.styl.js';

package/dist/esm/components/ui/Chat/ChatMessage/ChatMessage.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import cn from 'classnames';
 import { InteractiveContent } from '../../InteractiveContent/InteractiveContent.js';
+import 'lucide-react';
+import '../../InteractiveContent/InteractiveContent.styl.js';
 import { TextShimmer } from '../../TextShimmer/TextShimmer.js';
 import { MessageRole, GENERATING_DASHBOARD_SYSTEM_TEXT } from '../Chat.types.js';
 import { userTextFileAttachmentsFromMessage } from '../userTextFileAttachments.js';

package/dist/esm/components/ui/Chat/ChatMessage/ChatMessage.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".ChatMessage_root__6rnsF{background:var(--bg-secondary);display:flex;flex-direction:column;gap:var(--p-1);padding:var(--p-6)}.ChatMessage_text__Y1XNR{color:var(--text-secondary);font-size:var(--text-sm);max-width:100%;-webkit-user-select:text;-moz-user-select:text;user-select:text;width:-moz-fit-content;width:fit-content}.ChatMessage_role-user__u4JPV{align-items:flex-end}.ChatMessage_role-user__u4JPV .ChatMessage_userColumn__cQM6-{align-items:flex-end;display:flex;flex-direction:column;gap:var(--p-2);max-width:100%}.ChatMessage_role-user__u4JPV .ChatMessage_text__Y1XNR{background-color:var(--sb-slate-100);border-radius:var(--p-4);border-bottom-right-radius:0;padding:var(--p-3) var(--p-4);white-space:pre-wrap}.dark .ChatMessage_role-user__u4JPV .ChatMessage_text__Y1XNR{background-color:var(--sb-gray-800)}.ChatMessage_role-system__g13OP{align-items:center}.ChatMessage_role-system__g13OP .ChatMessage_text__Y1XNR{color:var(--muted-foreground);font-size:var(--text-xs);width:100%}.ChatMessage_role-assistant__wketE .ChatMessage_text__Y1XNR{width:100%}.ChatMessage_role-assistant__wketE h3{line-height:2.4}.ChatMessage_role-assistant__wketE h4{font-size:1.1em;font-weight:600;line-height:2.2}.ChatMessage_role-assistant__wketE .ChatMessage_bullet__6vAhq{display:inline-block;margin-left:4px;margin-right:6px}.ChatMessage_role-assistant__wketE .ChatMessage_bullet__6vAhq:before{color:var(--text-secondary);content:\"•\";display:inline-block}.ChatMessage_role-assistant__wketE .ChatMessage_scrollHorizontal__Rms9n{max-width:100%}.ChatMessage_role-assistant__wketE table{border:1px solid var(--border);border-collapse:collapse;border-radius:var(--p-2);border-spacing:0;margin:var(--p-4) 0;overflow:hidden}.ChatMessage_role-assistant__wketE table td,.ChatMessage_role-assistant__wketE table th{border:1px solid var(--border);min-width:100px;padding:var(--p-1)}.ChatMessage_role-assistant__wketE table th{text-align:left}.ChatMessage_role-assistant__wketE ol,.ChatMessage_role-assistant__wketE ul{padding-left:var(--p-4)}.ChatMessage_role-assistant__wketE ul{list-style-type:disc}.ChatMessage_role-assistant__wketE ol{list-style-type:decimal}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T{align-items:center;border:1px dashed var(--sb-slate-300);border-radius:8px;color:var(--foreground);display:inline-flex;font-size:var(--text-xs);gap:6px;margin:1px;max-width:100%;padding:2px 6px 2px 4px;text-decoration:none;vertical-align:middle}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T:hover{background-color:var(--sb-slate-50);border-color:var(--sb-slate-400);border-style:solid}.dark .ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T{border-color:var(--sb-gray-600)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T:hover{background-color:var(--sb-gray-900)}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLinkLabel__PMU7e{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ChatMessage_role-assistant__wketE .ChatMessage_quickReplyWrap__1UFyD{display:inline-block;margin:var(--p-1) var(--p-1) var(--p-1) 0;vertical-align:middle}.ChatMessage_role-assistant__wketE .ChatMessage_downloadButtons__RygM-{display:flex;gap:var(--p-2);margin-top:var(--p-4)}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa{align-items:center;background-color:var(--background);border-radius:var(--p-3);box-shadow:0 0 0 1px var(--border);cursor:pointer;display:flex;gap:var(--p-4);margin-top:var(--p-3);padding:var(--p-3);padding-right:var(--p-4);transition:all .15s;width:-moz-fit-content;width:fit-content}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa:hover{background-color:var(--sb-gray-50);border-color:var(--border)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa{background-color:var(--sb-gray-900);border-color:var(--border)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa:hover{background-color:var(--sb-gray-800)}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardIcon__jkxDJ{align-items:center;border-radius:var(--p-2);display:flex;flex-shrink:0;height:32px;justify-content:center;width:32px}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardContent__PTPwz{display:flex;flex:1;flex-direction:column;min-width:0}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardTitle__K1wqr{font-size:var(--text-base);font-weight:600;line-height:1.4}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardSubtitle__fVeF2{color:var(--muted-foreground);font-size:var(--text-sm);line-height:1.4}";
+var css_248z = ".ChatMessage_root__6rnsF{background:var(--bg-secondary);display:flex;flex-direction:column;gap:var(--p-1);padding:var(--p-6)}.ChatMessage_text__Y1XNR{color:var(--text-secondary);font-size:var(--text-sm);max-width:100%;min-width:0;overflow-wrap:anywhere;-webkit-user-select:text;-moz-user-select:text;user-select:text;width:-moz-fit-content;width:fit-content;word-break:break-word}.ChatMessage_role-user__u4JPV{align-items:flex-end;max-width:100%;min-width:0}.ChatMessage_role-user__u4JPV .ChatMessage_userColumn__cQM6-{align-items:flex-end;display:flex;flex-direction:column;gap:var(--p-2);max-width:100%;min-width:0}.ChatMessage_role-user__u4JPV .ChatMessage_text__Y1XNR{background-color:var(--sb-slate-100);border-radius:var(--p-4);border-bottom-right-radius:0;box-sizing:border-box;overflow:hidden;padding:var(--p-3) var(--p-4);white-space:pre-wrap}.dark .ChatMessage_role-user__u4JPV .ChatMessage_text__Y1XNR{background-color:var(--sb-gray-800)}.ChatMessage_role-system__g13OP{align-items:center}.ChatMessage_role-system__g13OP .ChatMessage_text__Y1XNR{color:var(--muted-foreground);font-size:var(--text-xs);width:100%}.ChatMessage_role-assistant__wketE .ChatMessage_text__Y1XNR{width:100%}.ChatMessage_role-assistant__wketE h3{line-height:2.4}.ChatMessage_role-assistant__wketE h4{font-size:1.1em;font-weight:600;line-height:2.2}.ChatMessage_role-assistant__wketE .ChatMessage_bullet__6vAhq{display:inline-block;margin-left:4px;margin-right:6px}.ChatMessage_role-assistant__wketE .ChatMessage_bullet__6vAhq:before{color:var(--text-secondary);content:\"•\";display:inline-block}.ChatMessage_role-assistant__wketE .ChatMessage_scrollHorizontal__Rms9n{max-width:100%}.ChatMessage_role-assistant__wketE table{border:1px solid var(--border);border-collapse:collapse;border-radius:var(--p-2);border-spacing:0;margin:var(--p-4) 0;overflow:hidden}.ChatMessage_role-assistant__wketE table td,.ChatMessage_role-assistant__wketE table th{border:1px solid var(--border);min-width:100px;padding:var(--p-1)}.ChatMessage_role-assistant__wketE table th{text-align:left}.ChatMessage_role-assistant__wketE ol,.ChatMessage_role-assistant__wketE ul{padding-left:var(--p-4)}.ChatMessage_role-assistant__wketE ul{list-style-type:disc}.ChatMessage_role-assistant__wketE ol{list-style-type:decimal}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T{align-items:center;border:1px dashed var(--sb-slate-300);border-radius:8px;color:var(--foreground);display:inline-flex;font-size:var(--text-xs);gap:6px;margin:1px;max-width:100%;padding:2px 6px 2px 4px;text-decoration:none;vertical-align:middle}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T:hover{background-color:var(--sb-slate-50);border-color:var(--sb-slate-400);border-style:solid}.dark .ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T{border-color:var(--sb-gray-600)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T:hover{background-color:var(--sb-gray-900)}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLinkLabel__PMU7e{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ChatMessage_role-assistant__wketE .ChatMessage_quickReplyWrap__1UFyD{display:inline-block;margin:var(--p-1) var(--p-1) var(--p-1) 0;vertical-align:middle}.ChatMessage_role-assistant__wketE .ChatMessage_downloadButtons__RygM-{display:flex;gap:var(--p-2);margin-top:var(--p-4)}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa{align-items:center;background-color:var(--background);border-radius:var(--p-3);box-shadow:0 0 0 1px var(--border);cursor:pointer;display:flex;gap:var(--p-4);margin-top:var(--p-3);padding:var(--p-3);padding-right:var(--p-4);transition:all .15s;width:-moz-fit-content;width:fit-content}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa:hover{background-color:var(--sb-gray-50);border-color:var(--border)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa{background-color:var(--sb-gray-900);border-color:var(--border)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa:hover{background-color:var(--sb-gray-800)}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardIcon__jkxDJ{align-items:center;border-radius:var(--p-2);display:flex;flex-shrink:0;height:32px;justify-content:center;width:32px}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardContent__PTPwz{display:flex;flex:1;flex-direction:column;min-width:0}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardTitle__K1wqr{font-size:var(--text-base);font-weight:600;line-height:1.4}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardSubtitle__fVeF2{color:var(--muted-foreground);font-size:var(--text-sm);line-height:1.4}";
 var S = {"root":"ChatMessage_root__6rnsF","text":"ChatMessage_text__Y1XNR","role-user":"ChatMessage_role-user__u4JPV","userColumn":"ChatMessage_userColumn__cQM6-","role-system":"ChatMessage_role-system__g13OP","role-assistant":"ChatMessage_role-assistant__wketE","bullet":"ChatMessage_bullet__6vAhq","scrollHorizontal":"ChatMessage_scrollHorizontal__Rms9n","datasetAppLink":"ChatMessage_datasetAppLink__Pxy-T","datasetAppLinkLabel":"ChatMessage_datasetAppLinkLabel__PMU7e","quickReplyWrap":"ChatMessage_quickReplyWrap__1UFyD","downloadButtons":"ChatMessage_downloadButtons__RygM-","downloadCard":"ChatMessage_downloadCard__NsNRa","downloadCardIcon":"ChatMessage_downloadCardIcon__jkxDJ","downloadCardContent":"ChatMessage_downloadCardContent__PTPwz","downloadCardTitle":"ChatMessage_downloadCardTitle__K1wqr","downloadCardSubtitle":"ChatMessage_downloadCardSubtitle__fVeF2"};
 styleInject(css_248z);
 

package/dist/esm/components/ui/Chat/ChatMessage/UserTextFileAttachmentBubble.js

@@ -8,6 +8,8 @@ function formatFromFilename(filename) {
         return 'csv';
     if (lower.endsWith('.pdf'))
         return 'pdf';
+    if (lower.endsWith('.xlsx'))
+        return 'text';
     return 'text';
 }
 function mimeForFormat(format) {
@@ -17,16 +19,21 @@ function mimeForFormat(format) {
         return 'application/pdf';
     return 'text/plain;charset=utf-8';
 }
-function hintForFormat(format) {
+function hintForFormat(format, filename) {
+    const lower = filename.toLowerCase();
     if (format === 'csv')
         return 'Download .CSV file';
     if (format === 'pdf')
         return 'Download file';
+    if (lower.endsWith('.docx'))
+        return 'Download Word document';
+    if (lower.endsWith('.xlsx'))
+        return 'Download spreadsheet';
     return 'Download text file';
 }
 function UserTextFileAttachmentBubble({ attachment, }) {
     const format = formatFromFilename(attachment.filename);
-    return (jsx(FileChip, { name: attachment.displayName, format: format, hint: hintForFormat(format), onClick: () => downloadTextFile(attachment.content, attachment.filename, mimeForFormat(format)) }));
+    return (jsx(FileChip, { name: attachment.displayName, format: format, hint: hintForFormat(format, attachment.filename), onClick: () => downloadTextFile(attachment.content, attachment.filename, mimeForFormat(format)) }));
 }
 
 export { UserTextFileAttachmentBubble };

package/dist/esm/components/ui/Chat/ChatPrompt/ChatPromptAttachments.js

@@ -5,7 +5,13 @@ import S from './ChatPrompt.styl.js';
 function ChatPromptAttachments({ attachments, onRemove, disabled = false, }) {
     if (attachments.length === 0)
         return null;
-    return (jsx("div", { className: S.attachments, children: attachments.map((item, index) => (jsx(FileChip, { className: S.attachmentItem, name: item.file.name, format: item.kind === 'pdf' ? 'pdf' : 'text', hint: item.kind === 'pdf' ? 'PDF' : 'Text file', onRemove: () => onRemove(index), disabled: disabled }, `${item.file.name}-${index}`))) }));
+    return (jsx("div", { className: S.attachments, children: attachments.map((item, index) => (jsx(FileChip, { className: S.attachmentItem, name: item.file.name, format: item.kind === 'pdf' ? 'pdf' : 'text', hint: item.kind === 'pdf'
+                ? 'PDF'
+                : item.kind === 'docx'
+                    ? 'Word document'
+                    : item.kind === 'xlsx'
+                        ? 'Spreadsheet'
+                        : 'Text file', onRemove: () => onRemove(index), disabled: disabled }, `${item.file.name}-${index}`))) }));
 }
 
 export { ChatPromptAttachments };

package/dist/esm/components/ui/Chat/buildChatSendMessagePayload.js

@@ -4,6 +4,10 @@ function defaultExtForAttachment(item) {
     const name = item.file.name.toLowerCase();
     if (item.kind === 'pdf' || name.endsWith('.pdf'))
         return 'pdf';
+    if (item.kind === 'docx' || name.endsWith('.docx'))
+        return 'docx';
+    if (item.kind === 'xlsx' || name.endsWith('.xlsx'))
+        return 'xlsx';
     if (name.endsWith('.csv'))
         return 'csv';
     if (name.endsWith('.json'))

package/dist/esm/components/ui/Chat/chatAttachmentAccept.js

@@ -24,6 +24,10 @@ const TEXT_ATTACHMENT_ACCEPT_PARTS = [
     '.tsv',
     'text/calendar',
     '.ics',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    '.docx',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    '.xlsx',
 ];
 const PDF_ATTACHMENT_ACCEPT_PARTS = ['application/pdf', '.pdf'];
 const TEXT_ATTACHMENT_ACCEPT_SET = new Set(TEXT_ATTACHMENT_ACCEPT_PARTS.map(part => part.toLowerCase()));
@@ -46,9 +50,24 @@ function isPdfFile(file) {
         return true;
     return file.name.toLowerCase().endsWith('.pdf');
 }
+function isDocxFile(file) {
+    const type = file.type.toLowerCase();
+    if (type ===
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
+        return true;
+    }
+    return file.name.toLowerCase().endsWith('.docx');
+}
+function isXlsxFile(file) {
+    const type = file.type.toLowerCase();
+    if (type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
+        return true;
+    }
+    return file.name.toLowerCase().endsWith('.xlsx');
+}
 function isAttachmentsDropzoneEnabled(allowedAttachments, allowPdfAttachments) {
     return (filterToTextAttachments(allowedAttachments).length > 0 ||
         Boolean(allowPdfAttachments));
 }
 
-export { PDF_ATTACHMENT_ACCEPT_PARTS, TEXT_ATTACHMENT_ACCEPT_PARTS, buildAcceptAttr, filterToTextAttachments, isAttachmentsDropzoneEnabled, isPdfFile };
+export { PDF_ATTACHMENT_ACCEPT_PARTS, TEXT_ATTACHMENT_ACCEPT_PARTS, buildAcceptAttr, filterToTextAttachments, isAttachmentsDropzoneEnabled, isDocxFile, isPdfFile, isXlsxFile };

package/dist/esm/components/ui/Chat/chatAttachmentExtract.js

@@ -1,5 +1,7 @@
-import { isPdfFile } from './chatAttachmentAccept.js';
+import { isPdfFile, isDocxFile, isXlsxFile } from './chatAttachmentAccept.js';
+import { extractDocxFileToText } from './chatDocxExtract.js';
 import { extractPdfFileToText } from './chatPdfExtract.js';
+import { extractXlsxFileToText } from './chatXlsxExtract.js';
 
 function readTextFile(file) {
     return new Promise((resolve, reject) => {
@@ -17,6 +19,14 @@ async function extractChatAttachmentItems(files, allowPdfAttachments) {
             const text = await extractPdfFileToText(file);
             return { file, text, kind: 'pdf' };
         }
+        if (isDocxFile(file)) {
+            const text = await extractDocxFileToText(file);
+            return { file, text, kind: 'docx' };
+        }
+        if (isXlsxFile(file)) {
+            const text = await extractXlsxFileToText(file);
+            return { file, text, kind: 'xlsx' };
+        }
         const text = await readTextFile(file);
         return { file, text, kind: 'text' };
     }));

package/dist/esm/components/ui/Chat/chatDocxExtract.js

@@ -0,0 +1,17 @@
+/** Best-effort plain text from DOCX via mammoth (loaded on demand). */
+async function extractDocxFileToText(file) {
+    const mammoth = await import('mammoth');
+    const result = await mammoth.extractRawText({
+        arrayBuffer: await file.arrayBuffer(),
+    });
+    const errors = result.messages.filter(m => m.type === 'error');
+    if (errors.length > 0) {
+        const detail = errors.map(m => m.message).join('; ');
+        throw new Error(detail
+            ? `Failed to read ${file.name}: ${detail}`
+            : `Failed to read ${file.name}`);
+    }
+    return result.value.trim();
+}
+
+export { extractDocxFileToText };

package/dist/esm/components/ui/Chat/chatXlsxExtract.js

@@ -0,0 +1,34 @@
+const MAX_FILE_BYTES = 10 * 1024 * 1024;
+const MAX_SHEETS = 20;
+const MAX_CSV_CHARS_PER_SHEET = 500_000;
+function truncateCsv(csv) {
+    if (csv.length <= MAX_CSV_CHARS_PER_SHEET)
+        return csv;
+    return `${csv.slice(0, MAX_CSV_CHARS_PER_SHEET).trimEnd()}…`;
+}
+/** Best-effort plain text from XLSX; one CSV block per sheet (xlsx loaded on demand). */
+async function extractXlsxFileToText(file) {
+    const buffer = new Uint8Array(await file.arrayBuffer());
+    if (buffer.byteLength > MAX_FILE_BYTES) {
+        throw new Error(`${file.name} is too large (max ${MAX_FILE_BYTES / (1024 * 1024)} MB)`);
+    }
+    const XLSX = await import('xlsx');
+    const workbook = XLSX.read(buffer, { type: 'array' });
+    const sheetNames = workbook.SheetNames.slice(0, MAX_SHEETS);
+    const sheetTexts = [];
+    for (const sheetName of sheetNames) {
+        const sheet = workbook.Sheets[sheetName];
+        if (!sheet)
+            continue;
+        const csv = truncateCsv(XLSX.utils.sheet_to_csv(sheet, { blankrows: false }).trim());
+        if (csv) {
+            sheetTexts.push(`## Sheet ${sheetName}\n\n${csv}`);
+        }
+    }
+    if (workbook.SheetNames.length > MAX_SHEETS) {
+        sheetTexts.push(`_(Only the first ${MAX_SHEETS} of ${workbook.SheetNames.length} sheets were included.)_`);
+    }
+    return sheetTexts.join('\n\n');
+}
+
+export { extractXlsxFileToText };

package/dist/esm/components/ui/InteractiveContent/AutolinkUrl.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { LinkIcon } from 'lucide-react';
+import S from './InteractiveContent.styl.js';
+
+function displayUrlForAutolink(display) {
+    if (display.startsWith('https://'))
+        return display.slice(8);
+    if (display.startsWith('http://'))
+        return display.slice(7);
+    return display;
+}
+function shouldRenderAutolinkPill(label, href) {
+    const normalizedLabel = label.trim();
+    const normalizedHref = href.trim();
+    if (!normalizedLabel || !normalizedHref)
+        return false;
+    const labelAsHref = normalizeWwwToHttps(normalizedLabel);
+    if (labelAsHref === normalizedHref)
+        return true;
+    return (/^https?:\/\//i.test(normalizedLabel) ||
+        /^www\./i.test(normalizedLabel) ||
+        normalizedLabel === displayUrlForAutolink(normalizedHref));
+}
+const normalizeWwwToHttps = (raw) => {
+    const t = raw.trim();
+    if (/^www\./i.test(t))
+        return `https://${t}`;
+    return t;
+};
+function AutolinkUrl({ href, display, target, rel }) {
+    return (jsxs("a", { href: href, target: target, rel: rel, className: S.autolinkUrl, children: [jsx(LinkIcon, { size: 12, "aria-hidden": true, className: S.autolinkUrlIcon }), jsx("span", { className: S.autolinkUrlLabel, title: displayUrlForAutolink(display), children: displayUrlForAutolink(display) })] }));
+}
+
+export { AutolinkUrl, S as autolinkStyles, displayUrlForAutolink, shouldRenderAutolinkPill };

package/dist/esm/components/ui/InteractiveContent/InteractiveContent.styl.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".InteractiveContent_root__FHnlY strong{font-weight:600}.InteractiveContent_root__FHnlY em{font-style:italic}.InteractiveContent_root__FHnlY a{color:var(--sb-green-600);text-decoration:underline;text-underline-offset:2px}.InteractiveContent_root__FHnlY a:hover{color:var(--sb-green-700)}.dark .InteractiveContent_root__FHnlY a{color:var(--sb-green-400)}.dark .InteractiveContent_root__FHnlY a:hover{color:var(--sb-green-300)}";
-var S = {"root":"InteractiveContent_root__FHnlY"};
+var css_248z = ".InteractiveContent_root__FHnlY{box-sizing:border-box;display:inline-block;max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word}.InteractiveContent_root__FHnlY strong{font-weight:600}.InteractiveContent_root__FHnlY em{font-style:italic}.InteractiveContent_textLink__Ubh4i{color:var(--sb-green-600);text-decoration:underline;text-underline-offset:2px}.InteractiveContent_textLink__Ubh4i:hover{color:var(--sb-green-700)}.dark .InteractiveContent_textLink__Ubh4i{color:var(--sb-green-400)}.dark .InteractiveContent_textLink__Ubh4i:hover{color:var(--sb-green-300)}.InteractiveContent_autolinkUrl__W0tQH{align-items:center;border-radius:var(--p-2);box-sizing:border-box;color:var(--link-color);display:inline-flex;font-size:var(--text-xs);gap:6px;line-height:1.4;margin:0 1px;max-width:100%;padding:2px 8px 2px 6px;position:relative;text-decoration:none;vertical-align:middle}.InteractiveContent_autolinkUrl__W0tQH:before{background-color:var(--link-color);border-radius:inherit;content:\"\";display:inline-block;height:100%;left:0;opacity:.1;position:absolute;top:0;width:100%}.InteractiveContent_autolinkUrl__W0tQH:hover:before{opacity:.2}.InteractiveContent_autolinkUrlIcon__QoqlQ{flex-shrink:0}.InteractiveContent_autolinkUrlLabel__CcJOG{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
+var S = {"root":"InteractiveContent_root__FHnlY","textLink":"InteractiveContent_textLink__Ubh4i","autolinkUrl":"InteractiveContent_autolinkUrl__W0tQH","autolinkUrlIcon":"InteractiveContent_autolinkUrlIcon__QoqlQ","autolinkUrlLabel":"InteractiveContent_autolinkUrlLabel__CcJOG"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/index.js

@@ -47,6 +47,7 @@ export { Image } from './components/ui/Image/Image.js';
 export { ImageWithFallback } from './components/ui/ImageWithFallback/ImageWithFallback.js';
 export { Input } from './components/ui/Input/Input.js';
 export { InteractiveContent } from './components/ui/InteractiveContent/InteractiveContent.js';
+export { AutolinkUrl, displayUrlForAutolink } from './components/ui/InteractiveContent/AutolinkUrl.js';
 export { Label } from './components/ui/Label/Label.js';
 export { LabeledInput } from './components/ui/LabeledInput/LabeledInput.js';
 export { AltKeyProvider } from './components/ui/LabelWithId/AltKeyProvider.js';

package/dist/esm/types/src/components/ui/Chat/Chat.types.d.ts

@@ -59,9 +59,9 @@ export type ScriptCompletePayload = {
 };
 export type ChatAttachmentDropItem = {
     file: File;
-    /** UTF-8 text for native text files; PDF yields extracted text. */
+    /** UTF-8 text for native text files; PDF/DOCX/XLSX yield extracted text. */
     text: string;
-    kind: 'text' | 'pdf';
+    kind: 'text' | 'pdf' | 'docx' | 'xlsx';
 };
 export interface ChatPromptProps {
     className?: string;

package/dist/esm/types/src/components/ui/Chat/chatAttachmentAccept.d.ts

@@ -1,8 +1,10 @@
 /** MIME types and extensions accepted for chat text attachments. */
-export declare const TEXT_ATTACHMENT_ACCEPT_PARTS: readonly ["text/plain", ".txt", "text/csv", ".csv", "text/markdown", ".md", ".markdown", "application/json", ".json", "text/html", ".html", ".htm", "text/xml", "application/xml", ".xml", "text/yaml", "application/yaml", "application/x-yaml", ".yaml", ".yml", "text/tab-separated-values", ".tsv", "text/calendar", ".ics"];
+export declare const TEXT_ATTACHMENT_ACCEPT_PARTS: readonly ["text/plain", ".txt", "text/csv", ".csv", "text/markdown", ".md", ".markdown", "application/json", ".json", "text/html", ".html", ".htm", "text/xml", "application/xml", ".xml", "text/yaml", "application/yaml", "application/x-yaml", ".yaml", ".yml", "text/tab-separated-values", ".tsv", "text/calendar", ".ics", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", ".docx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", ".xlsx"];
 export declare const PDF_ATTACHMENT_ACCEPT_PARTS: readonly ["application/pdf", ".pdf"];
 /** Keep only tokens from `parts` that appear in the text attachment allowlist. */
 export declare function filterToTextAttachments(parts: readonly string[] | undefined): string[];
 export declare function buildAcceptAttr(filteredTextParts: readonly string[], allowPdf: boolean): string;
 export declare function isPdfFile(file: File): boolean;
+export declare function isDocxFile(file: File): boolean;
+export declare function isXlsxFile(file: File): boolean;
 export declare function isAttachmentsDropzoneEnabled(allowedAttachments: readonly string[] | undefined, allowPdfAttachments: boolean | undefined): boolean;

package/dist/esm/types/src/components/ui/Chat/chatAttachmentAccept.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/src/components/ui/Chat/chatDocxExtract.d.ts

@@ -0,0 +1,2 @@
+/** Best-effort plain text from DOCX via mammoth (loaded on demand). */
+export declare function extractDocxFileToText(file: File): Promise<string>;

package/dist/esm/types/src/components/ui/Chat/chatDocxExtract.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/src/components/ui/Chat/chatXlsxExtract.d.ts

@@ -0,0 +1,2 @@
+/** Best-effort plain text from XLSX; one CSV block per sheet (xlsx loaded on demand). */
+export declare function extractXlsxFileToText(file: File): Promise<string>;

package/dist/esm/types/src/components/ui/Chat/chatXlsxExtract.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/src/components/ui/InteractiveContent/AutolinkUrl.d.ts

@@ -0,0 +1,11 @@
+import S from './InteractiveContent.styl';
+type AutolinkUrlProps = {
+    href: string;
+    display: string;
+    target?: string;
+    rel?: string;
+};
+export declare function displayUrlForAutolink(display: string): string;
+export declare function shouldRenderAutolinkPill(label: string, href: string): boolean;
+export declare function AutolinkUrl({ href, display, target, rel }: AutolinkUrlProps): import("react/jsx-runtime").JSX.Element;
+export { S as autolinkStyles };

package/dist/esm/types/src/components/ui/InteractiveContent/index.d.ts

@@ -1 +1,2 @@
 export { InteractiveContent } from './InteractiveContent';
+export { AutolinkUrl, displayUrlForAutolink } from './AutolinkUrl';

package/dist/esm/types/tests/setup.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.14",
+  "version": "1.3.16",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",
@@ -102,6 +102,7 @@
     "classnames": "^2.3.2",
     "lightweight-charts": "^5.0.9",
     "lucide-react": "^0.546.0",
+    "mammoth": "^1.9.0",
     "motion": "^12.23.12",
     "pdfjs-dist": "^4.10.38",
     "recharts": "^3.2.1",
@@ -109,7 +110,8 @@
     "style-inject": "^0.3.0",
     "tailwindcss": "^4.2.2",
     "tslib": "^2.8.1",
-    "vaul": "^1.1.2"
+    "vaul": "^1.1.2",
+    "xlsx": "^0.18.5"
   },
   "peerDependencies": {
     "@auth0/auth0-react": "^2.3.1",

package/src/components/ui/Chat/Chat.styl

@@ -12,6 +12,7 @@
   align-items center
   min-height 64px
   padding var(--p-2) var(--p-6) 0
+  padding-right var(--p-12) // to not overlap with ChatSheet close button
 
 .isEmpty
   padding-bottom 170px // goes under prompt

package/src/components/ui/Chat/Chat.types.ts

@@ -69,9 +69,9 @@ export type ScriptCompletePayload = {
 
 export type ChatAttachmentDropItem = {
   file: File;
-  /** UTF-8 text for native text files; PDF yields extracted text. */
+  /** UTF-8 text for native text files; PDF/DOCX/XLSX yield extracted text. */
   text: string;
-  kind: 'text' | 'pdf';
+  kind: 'text' | 'pdf' | 'docx' | 'xlsx';
 };
 
 export interface ChatPromptProps {

package/src/components/ui/Chat/ChatChrome/ChatChrome.tsx

@@ -86,6 +86,9 @@ export function ChatChrome({
             setPendingAttachments(prev => [...prev, ...items]);
           }
         })
+        .catch(() => {
+          // Extraction failed (parse error, size limit, etc.); skip staging.
+        })
         .finally(() => setIsExtractingAttachments(false));
     },
     [allowPdfAttachments, promptBusy],

package/src/components/ui/Chat/ChatMessage/AgentMessageContent.helpers.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
 
+import {
+  AutolinkUrl,
+  autolinkStyles,
+  shouldRenderAutolinkPill,
+} from '#uilib/components/ui/InteractiveContent/AutolinkUrl';
 import logger from '#uilib/lib/logger';
 
 import S from './ChatMessage.styl';
@@ -397,8 +402,15 @@ const injectMarkdownLink: Injector = (content: string) => {
   const label = matches[1];
 
   return {
-    elem: (
-      <a href={href} target={target} rel={rel}>
+    elem: shouldRenderAutolinkPill(label, href) ? (
+      <AutolinkUrl href={href} display={label} target={target} rel={rel} />
+    ) : (
+      <a
+        href={href}
+        target={target}
+        rel={rel}
+        className={autolinkStyles.textLink}
+      >
         {runFormattingPipeline(label, linkLabelInjectors)}
       </a>
     ),
@@ -459,9 +471,12 @@ const injectAutolinkUrl: Injector = (content: string) => {
 
   return {
     elem: (
-      <a href={c.href} target={target} rel={rel}>
-        {c.display}
-      </a>
+      <AutolinkUrl
+        href={c.href}
+        display={c.display}
+        target={target}
+        rel={rel}
+      />
     ),
     index: c.index,
     length: c.length,
@@ -500,10 +515,23 @@ const injectAnchor: Injector = (content: string) => {
   }
 
   const { target, rel } = linkTargetRelForHref(href, targetRaw || undefined);
+  const innerTrimmed = inner.trim();
 
   return {
-    elem: (
-      <a href={href} target={target} rel={rel}>
+    elem: shouldRenderAutolinkPill(innerTrimmed, href) ? (
+      <AutolinkUrl
+        href={href}
+        display={innerTrimmed}
+        target={target}
+        rel={rel}
+      />
+    ) : (
+      <a
+        href={href}
+        target={target}
+        rel={rel}
+        className={autolinkStyles.textLink}
+      >
         {runFormattingPipeline(inner, linkLabelInjectors)}
       </a>
     ),

package/src/components/ui/Chat/ChatMessage/ChatMessage.styl

@@ -8,13 +8,18 @@
 
 .text
   max-width 100%
+  min-width 0
   font-size var(--text-sm)
   color var(--text-secondary)
   width fit-content
   user-select text
+  overflow-wrap anywhere
+  word-break break-word
 
 .role-user
   align-items flex-end
+  max-width 100%
+  min-width 0
 
   .userColumn
     display flex
@@ -22,6 +27,7 @@
     align-items flex-end
     gap var(--p-2)
     max-width 100%
+    min-width 0
 
   .text
     padding var(--p-3) var(--p-4)
@@ -31,6 +37,8 @@
     border-bottom-right-radius 0
 
     white-space pre-wrap
+    overflow hidden
+    box-sizing border-box
 
     :global(.dark) &
       background-color var(--sb-gray-800)

package/src/components/ui/Chat/ChatMessage/UserTextFileAttachmentBubble.tsx

@@ -7,6 +7,7 @@ function formatFromFilename(filename: string): FileChipFormat {
   const lower = filename.toLowerCase();
   if (lower.endsWith('.csv')) return 'csv';
   if (lower.endsWith('.pdf')) return 'pdf';
+  if (lower.endsWith('.xlsx')) return 'text';
   return 'text';
 }
 
@@ -16,9 +17,12 @@ function mimeForFormat(format: FileChipFormat): string {
   return 'text/plain;charset=utf-8';
 }
 
-function hintForFormat(format: FileChipFormat): string {
+function hintForFormat(format: FileChipFormat, filename: string): string {
+  const lower = filename.toLowerCase();
   if (format === 'csv') return 'Download .CSV file';
   if (format === 'pdf') return 'Download file';
+  if (lower.endsWith('.docx')) return 'Download Word document';
+  if (lower.endsWith('.xlsx')) return 'Download spreadsheet';
   return 'Download text file';
 }
 
@@ -33,7 +37,7 @@ export function UserTextFileAttachmentBubble({
     <FileChip
       name={attachment.displayName}
       format={format}
-      hint={hintForFormat(format)}
+      hint={hintForFormat(format, attachment.filename)}
       onClick={() =>
         downloadTextFile(
           attachment.content,

package/src/components/ui/Chat/ChatPrompt/ChatPromptAttachments.tsx

@@ -24,7 +24,15 @@ export function ChatPromptAttachments({
           className={S.attachmentItem}
           name={item.file.name}
           format={item.kind === 'pdf' ? 'pdf' : 'text'}
-          hint={item.kind === 'pdf' ? 'PDF' : 'Text file'}
+          hint={
+            item.kind === 'pdf'
+              ? 'PDF'
+              : item.kind === 'docx'
+                ? 'Word document'
+                : item.kind === 'xlsx'
+                  ? 'Spreadsheet'
+                  : 'Text file'
+          }
           onRemove={() => onRemove(index)}
           disabled={disabled}
         />

package/src/components/ui/Chat/buildChatSendMessagePayload.test.ts

@@ -8,7 +8,7 @@ import {
 function makeDropItem(
   name: string,
   text: string,
-  kind: 'text' | 'pdf' = 'text',
+  kind: ChatAttachmentDropItem['kind'] = 'text',
 ): ChatAttachmentDropItem {
   return {
     file: { name } as File,
@@ -50,6 +50,20 @@ describe('buildChatSendMessagePayload', () => {
     expect(result.userTextFileAttachments?.[0].filename).toMatch(/\.pdf$/i);
   });
 
+  it('uses docx and xlsx extensions from kind', () => {
+    const docx = buildChatSendMessagePayload('', [
+      makeDropItem('brief.docx', 'word body', 'docx'),
+    ]);
+    const xlsx = buildChatSendMessagePayload('', [
+      makeDropItem('sheet.xlsx', 'a,b', 'xlsx'),
+    ]);
+    if (typeof docx === 'string' || typeof xlsx === 'string') {
+      throw new Error('expected payload object');
+    }
+    expect(docx.userTextFileAttachments?.[0].filename).toMatch(/\.docx$/i);
+    expect(xlsx.userTextFileAttachments?.[0].filename).toMatch(/\.xlsx$/i);
+  });
+
   it('maps multiple attachments', () => {
     const result = buildChatSendMessagePayload('Hi', [
       makeDropItem('one.txt', 'first'),

package/src/components/ui/Chat/buildChatSendMessagePayload.ts

@@ -8,6 +8,8 @@ import { sanitizeAttachmentFilename } from './sanitizeAttachmentFilename';
 function defaultExtForAttachment(item: ChatAttachmentDropItem): string {
   const name = item.file.name.toLowerCase();
   if (item.kind === 'pdf' || name.endsWith('.pdf')) return 'pdf';
+  if (item.kind === 'docx' || name.endsWith('.docx')) return 'docx';
+  if (item.kind === 'xlsx' || name.endsWith('.xlsx')) return 'xlsx';
   if (name.endsWith('.csv')) return 'csv';
   if (name.endsWith('.json')) return 'json';
   if (name.endsWith('.md') || name.endsWith('.markdown')) return 'md';

package/src/components/ui/Chat/chatAttachmentAccept.test.ts

@@ -0,0 +1,78 @@
+import {
+  TEXT_ATTACHMENT_ACCEPT_PARTS,
+  buildAcceptAttr,
+  filterToTextAttachments,
+  isDocxFile,
+  isPdfFile,
+  isXlsxFile,
+} from './chatAttachmentAccept';
+
+function makeFile(name: string, type = ''): File {
+  return { name, type } as File;
+}
+
+describe('TEXT_ATTACHMENT_ACCEPT_PARTS', () => {
+  it('includes docx and xlsx MIME types and extensions', () => {
+    expect(TEXT_ATTACHMENT_ACCEPT_PARTS).toContain('.docx');
+    expect(TEXT_ATTACHMENT_ACCEPT_PARTS).toContain('.xlsx');
+    expect(TEXT_ATTACHMENT_ACCEPT_PARTS).toContain(
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    );
+    expect(TEXT_ATTACHMENT_ACCEPT_PARTS).toContain(
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    );
+  });
+});
+
+describe('isDocxFile', () => {
+  it('detects by extension and MIME type', () => {
+    expect(
+      isDocxFile(
+        makeFile(
+          'notes.docx',
+          'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        ),
+      ),
+    ).toBe(true);
+    expect(isDocxFile(makeFile('notes.docx'))).toBe(true);
+    expect(isDocxFile(makeFile('notes.txt'))).toBe(false);
+  });
+});
+
+describe('isXlsxFile', () => {
+  it('detects by extension and MIME type', () => {
+    expect(
+      isXlsxFile(
+        makeFile(
+          'data.xlsx',
+          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        ),
+      ),
+    ).toBe(true);
+    expect(isXlsxFile(makeFile('data.xlsx'))).toBe(true);
+    expect(isXlsxFile(makeFile('data.csv'))).toBe(false);
+  });
+});
+
+describe('isPdfFile', () => {
+  it('does not treat docx or xlsx as pdf', () => {
+    expect(isPdfFile(makeFile('file.docx'))).toBe(false);
+    expect(isPdfFile(makeFile('file.xlsx'))).toBe(false);
+  });
+});
+
+describe('filterToTextAttachments', () => {
+  it('keeps docx and xlsx tokens from the allowlist', () => {
+    expect(
+      filterToTextAttachments(['.docx', '.xlsx', 'application/pdf']),
+    ).toEqual(['.docx', '.xlsx']);
+  });
+});
+
+describe('buildAcceptAttr', () => {
+  it('includes filtered text parts and optional pdf', () => {
+    expect(buildAcceptAttr(['.docx', '.txt'], false)).toBe('.docx,.txt');
+    expect(buildAcceptAttr(['.docx'], true)).toContain('.docx');
+    expect(buildAcceptAttr(['.docx'], true)).toContain('.pdf');
+  });
+});

package/src/components/ui/Chat/chatAttachmentAccept.ts

@@ -24,6 +24,10 @@ export const TEXT_ATTACHMENT_ACCEPT_PARTS = [
   '.tsv',
   'text/calendar',
   '.ics',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  '.docx',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  '.xlsx',
 ] as const;
 
 export const PDF_ATTACHMENT_ACCEPT_PARTS = ['application/pdf', '.pdf'] as const;
@@ -59,6 +63,27 @@ export function isPdfFile(file: File): boolean {
   return file.name.toLowerCase().endsWith('.pdf');
 }
 
+export function isDocxFile(file: File): boolean {
+  const type = file.type.toLowerCase();
+  if (
+    type ===
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+  ) {
+    return true;
+  }
+  return file.name.toLowerCase().endsWith('.docx');
+}
+
+export function isXlsxFile(file: File): boolean {
+  const type = file.type.toLowerCase();
+  if (
+    type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+  ) {
+    return true;
+  }
+  return file.name.toLowerCase().endsWith('.xlsx');
+}
+
 export function isAttachmentsDropzoneEnabled(
   allowedAttachments: readonly string[] | undefined,
   allowPdfAttachments: boolean | undefined,

package/src/components/ui/Chat/chatAttachmentExtract.ts

@@ -1,6 +1,8 @@
 import type { ChatAttachmentDropItem } from './Chat.types';
-import { isPdfFile } from './chatAttachmentAccept';
+import { isDocxFile, isPdfFile, isXlsxFile } from './chatAttachmentAccept';
+import { extractDocxFileToText } from './chatDocxExtract';
 import { extractPdfFileToText } from './chatPdfExtract';
+import { extractXlsxFileToText } from './chatXlsxExtract';
 
 function readTextFile(file: File): Promise<string> {
   return new Promise((resolve, reject) => {
@@ -24,6 +26,16 @@ export async function extractChatAttachmentItems(
         return { file, text, kind: 'pdf' as const };
       }
 
+      if (isDocxFile(file)) {
+        const text = await extractDocxFileToText(file);
+        return { file, text, kind: 'docx' as const };
+      }
+
+      if (isXlsxFile(file)) {
+        const text = await extractXlsxFileToText(file);
+        return { file, text, kind: 'xlsx' as const };
+      }
+
       const text = await readTextFile(file);
       return { file, text, kind: 'text' as const };
     }),

package/src/components/ui/Chat/chatDocxExtract.test.ts

@@ -0,0 +1,40 @@
+import { extractDocxFileToText } from './chatDocxExtract';
+
+const extractRawText = jest.fn();
+
+jest.mock('mammoth', () => ({
+  extractRawText: (...args: unknown[]) => extractRawText(...args),
+}));
+
+describe('extractDocxFileToText', () => {
+  beforeEach(() => {
+    extractRawText.mockReset();
+  });
+
+  it('returns trimmed text from mammoth', async () => {
+    extractRawText.mockResolvedValue({
+      value: '  Hello from Word  ',
+      messages: [],
+    });
+
+    const file = new File([new Uint8Array(8)], 'doc.docx', {
+      type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    });
+
+    await expect(extractDocxFileToText(file)).resolves.toBe('Hello from Word');
+    expect(extractRawText).toHaveBeenCalledTimes(1);
+  });
+
+  it('throws when mammoth reports errors', async () => {
+    extractRawText.mockResolvedValue({
+      value: '',
+      messages: [{ type: 'error', message: 'corrupt file' }],
+    });
+
+    const file = new File([new Uint8Array(8)], 'bad.docx', {
+      type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    });
+
+    await expect(extractDocxFileToText(file)).rejects.toThrow(/corrupt file/i);
+  });
+});

package/src/components/ui/Chat/chatDocxExtract.ts

@@ -0,0 +1,19 @@
+/** Best-effort plain text from DOCX via mammoth (loaded on demand). */
+export async function extractDocxFileToText(file: File): Promise<string> {
+  const mammoth = await import('mammoth');
+  const result = await mammoth.extractRawText({
+    arrayBuffer: await file.arrayBuffer(),
+  });
+
+  const errors = result.messages.filter(m => m.type === 'error');
+  if (errors.length > 0) {
+    const detail = errors.map(m => m.message).join('; ');
+    throw new Error(
+      detail
+        ? `Failed to read ${file.name}: ${detail}`
+        : `Failed to read ${file.name}`,
+    );
+  }
+
+  return result.value.trim();
+}

package/src/components/ui/Chat/chatXlsxExtract.test.ts

@@ -0,0 +1,72 @@
+import * as XLSX from 'xlsx';
+
+import { extractXlsxFileToText } from './chatXlsxExtract';
+
+function makeXlsxFile(
+  sheets: Record<string, (string | number)[][]>,
+  name = 'test.xlsx',
+): File {
+  const workbook = XLSX.utils.book_new();
+  for (const [sheetName, rows] of Object.entries(sheets)) {
+    XLSX.utils.book_append_sheet(
+      workbook,
+      XLSX.utils.aoa_to_sheet(rows),
+      sheetName,
+    );
+  }
+  const buffer = new Uint8Array(
+    XLSX.write(workbook, { type: 'array', bookType: 'xlsx' }),
+  );
+  return new File([buffer], name, {
+    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  });
+}
+
+describe('extractXlsxFileToText', () => {
+  it('extracts non-empty sheets as CSV with headings', async () => {
+    const file = makeXlsxFile({
+      Data: [
+        ['name', 'value'],
+        ['a', 1],
+      ],
+    });
+
+    const text = await extractXlsxFileToText(file);
+    expect(text).toContain('## Sheet Data');
+    expect(text).toContain('name,value');
+    expect(text).toContain('a,1');
+  });
+
+  it('skips empty sheets', async () => {
+    const workbook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(
+      workbook,
+      XLSX.utils.aoa_to_sheet([]),
+      'Empty',
+    );
+    XLSX.utils.book_append_sheet(
+      workbook,
+      XLSX.utils.aoa_to_sheet([['x']]),
+      'Filled',
+    );
+    const buffer = new Uint8Array(
+      XLSX.write(workbook, { type: 'array', bookType: 'xlsx' }),
+    );
+    const file = new File([buffer], 'mixed.xlsx', {
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    });
+
+    const text = await extractXlsxFileToText(file);
+    expect(text).not.toContain('## Sheet Empty');
+    expect(text).toContain('## Sheet Filled');
+  });
+
+  it('rejects files over the size limit', async () => {
+    const huge = new Uint8Array(10 * 1024 * 1024 + 1);
+    const file = new File([huge], 'huge.xlsx', {
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    });
+
+    await expect(extractXlsxFileToText(file)).rejects.toThrow(/too large/i);
+  });
+});

package/src/components/ui/Chat/chatXlsxExtract.ts

@@ -0,0 +1,43 @@
+const MAX_FILE_BYTES = 10 * 1024 * 1024;
+const MAX_SHEETS = 20;
+const MAX_CSV_CHARS_PER_SHEET = 500_000;
+
+function truncateCsv(csv: string): string {
+  if (csv.length <= MAX_CSV_CHARS_PER_SHEET) return csv;
+  return `${csv.slice(0, MAX_CSV_CHARS_PER_SHEET).trimEnd()}…`;
+}
+
+/** Best-effort plain text from XLSX; one CSV block per sheet (xlsx loaded on demand). */
+export async function extractXlsxFileToText(file: File): Promise<string> {
+  const buffer = new Uint8Array(await file.arrayBuffer());
+  if (buffer.byteLength > MAX_FILE_BYTES) {
+    throw new Error(
+      `${file.name} is too large (max ${MAX_FILE_BYTES / (1024 * 1024)} MB)`,
+    );
+  }
+
+  const XLSX = await import('xlsx');
+  const workbook = XLSX.read(buffer, { type: 'array' });
+  const sheetNames = workbook.SheetNames.slice(0, MAX_SHEETS);
+  const sheetTexts: string[] = [];
+
+  for (const sheetName of sheetNames) {
+    const sheet = workbook.Sheets[sheetName];
+    if (!sheet) continue;
+
+    const csv = truncateCsv(
+      XLSX.utils.sheet_to_csv(sheet, { blankrows: false }).trim(),
+    );
+    if (csv) {
+      sheetTexts.push(`## Sheet ${sheetName}\n\n${csv}`);
+    }
+  }
+
+  if (workbook.SheetNames.length > MAX_SHEETS) {
+    sheetTexts.push(
+      `_(Only the first ${MAX_SHEETS} of ${workbook.SheetNames.length} sheets were included.)_`,
+    );
+  }
+
+  return sheetTexts.join('\n\n');
+}

package/src/components/ui/InteractiveContent/AutolinkUrl.tsx

@@ -0,0 +1,53 @@
+import { LinkIcon } from 'lucide-react';
+
+import S from './InteractiveContent.styl';
+
+type AutolinkUrlProps = {
+  href: string;
+  display: string;
+  target?: string;
+  rel?: string;
+};
+
+export function displayUrlForAutolink(display: string): string {
+  if (display.startsWith('https://')) return display.slice(8);
+  if (display.startsWith('http://')) return display.slice(7);
+  return display;
+}
+
+export function shouldRenderAutolinkPill(label: string, href: string): boolean {
+  const normalizedLabel = label.trim();
+  const normalizedHref = href.trim();
+  if (!normalizedLabel || !normalizedHref) return false;
+
+  const labelAsHref = normalizeWwwToHttps(normalizedLabel);
+  if (labelAsHref === normalizedHref) return true;
+
+  return (
+    /^https?:\/\//i.test(normalizedLabel) ||
+    /^www\./i.test(normalizedLabel) ||
+    normalizedLabel === displayUrlForAutolink(normalizedHref)
+  );
+}
+
+const normalizeWwwToHttps = (raw: string): string => {
+  const t = raw.trim();
+  if (/^www\./i.test(t)) return `https://${t}`;
+  return t;
+};
+
+export function AutolinkUrl({ href, display, target, rel }: AutolinkUrlProps) {
+  return (
+    <a href={href} target={target} rel={rel} className={S.autolinkUrl}>
+      <LinkIcon size={12} aria-hidden className={S.autolinkUrlIcon} />
+      <span
+        className={S.autolinkUrlLabel}
+        title={displayUrlForAutolink(display)}
+      >
+        {displayUrlForAutolink(display)}
+      </span>
+    </a>
+  );
+}
+
+export { S as autolinkStyles };

package/src/components/ui/InteractiveContent/InteractiveContent.styl

@@ -1,20 +1,71 @@
 .root
+  display inline-block
+  max-width 100%
+  min-width 0
+  box-sizing border-box
+  overflow-wrap anywhere
+  word-break break-word
+
   strong
     font-weight 600
 
   em
     font-style italic
 
-  a
-    color var(--sb-green-600)
-    text-decoration underline
-    text-underline-offset 2px
+.textLink
+  color var(--sb-green-600)
+  text-decoration underline
+  text-underline-offset 2px
+
+  &:hover
+    color var(--sb-green-700)
+
+  :global(.dark) &
+    color var(--sb-green-400)
 
     &:hover
-      color var(--sb-green-700)
+      color var(--sb-green-300)
+
+.autolinkUrl
+  position relative
+  display inline-flex
+  align-items center
+  gap 6px
+
+  max-width 100%
+  box-sizing border-box
+  vertical-align middle
+
+  padding 2px 8px 2px 6px
+  margin 0 1px
+
+  border-radius var(--p-2)
+
+  color var(--link-color)
+  font-size var(--text-xs)
+  line-height 1.4
+  text-decoration none
+
+  &::before
+    position absolute
+    top 0
+    left 0
+    content ''
+    display inline-block
+    width 100%
+    height 100%
+    background-color var(--link-color)
+    border-radius inherit
+    opacity .1
+
+  &:hover::before
+    opacity .2
 
-    :global(.dark) &
-      color var(--sb-green-400)
+.autolinkUrlIcon
+  flex-shrink 0
 
-      &:hover
-        color var(--sb-green-300)
+.autolinkUrlLabel
+  min-width 0
+  overflow hidden
+  text-overflow ellipsis
+  white-space nowrap

package/src/components/ui/InteractiveContent/InteractiveContent.styl.d.ts

@@ -1,7 +1,11 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'autolinkUrl': string;
+  'autolinkUrlIcon': string;
+  'autolinkUrlLabel': string;
   'root': string;
+  'textLink': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

package/src/components/ui/InteractiveContent/index.ts

@@ -1 +1,2 @@
 export { InteractiveContent } from './InteractiveContent';
+export { AutolinkUrl, displayUrlForAutolink } from './AutolinkUrl';

package/src/docs/pages/ChatAttachmentsDropzonePage.tsx

@@ -97,16 +97,16 @@ export default function ChatAttachmentsDropzonePage() {
       <AppPageHeader
         breadcrumbs={[{ label: 'Chat' }, { label: 'Attachments dropzone' }]}
         title="Chat — attachments dropzone"
-        subheader="Drop text files onto the chat shell; they appear on the prompt until you send."
+        subheader="Drop text, Office, or PDF files onto the chat shell; they appear on the prompt until you send."
         actions={<DocsHeaderActions />}
       />
       <PageContentSection>
         <p style={{ marginBottom: 16, fontSize: 14, lineHeight: 1.5 }}>
-          Drop a <code>.txt</code>, <code>.csv</code>, <code>.md</code>, or{' '}
-          <code>.pdf</code> file anywhere on the chat panel. The file shows
-          above the composer; press send to post it. Only MIME types from the
-          text allowlist are accepted; PDF parsing is optional via{' '}
-          <code>allowPdfAttachments</code>.
+          Drop a <code>.txt</code>, <code>.csv</code>, <code>.md</code>,{' '}
+          <code>.docx</code>, <code>.xlsx</code>, or <code>.pdf</code> file
+          anywhere on the chat panel. The file shows above the composer; press
+          send to post it. Office and PDF parsers load on demand when you attach
+          those types; PDF also requires <code>allowPdfAttachments</code>.
         </p>
         <ChatChrome
           showResizeHandle={false}
@@ -133,25 +133,19 @@ export default function ChatAttachmentsDropzonePage() {
           effectiveScopeId="docs-chat-attachments-dropzone"
           onPromptSubmit={onPromptSubmit}
           onChatDeleted={() => {}}
-          allowedAttachments={[
-            'text/plain',
-            '.txt',
-            'text/csv',
-            '.csv',
-            'text/markdown',
-            '.md',
-            'application/json',
-            '.json',
-          ]}
+          allowedAttachments={TEXT_ATTACHMENT_ACCEPT_PARTS}
           allowPdfAttachments
           emptyState={{
-            title: 'Drop a text file or PDF',
+            title: 'Drop a text, Office, or PDF file',
             description:
-              'Drag a file onto this panel, review it above the composer, then send.',
+              'Drag a file onto this panel, review it above the composer, then send. DOCX and XLSX are parsed in the browser.',
             additionalContent: (
               <p style={{ fontSize: 13, opacity: 0.85 }}>
-                Base allowlist includes{' '}
-                {TEXT_ATTACHMENT_ACCEPT_PARTS.slice(0, 6).join(', ')}…
+                Accepted types include <code>.txt</code>, <code>.csv</code>,{' '}
+                <code>.md</code>, <code>.json</code>, <code>.docx</code>,{' '}
+                <code>.xlsx</code>, and more (
+                {TEXT_ATTACHMENT_ACCEPT_PARTS.length} entries in the text
+                allowlist).
               </p>
             ),
           }}

package/src/docs/pages/InteractiveContentPage.tsx

@@ -4,7 +4,8 @@ import { PageContentSection } from '#uilib/components/ui/Page';
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
-const SAMPLE = 'Use **bold** and *italic* in formatted text.';
+const SAMPLE =
+  'Use **bold** and *italic* in formatted text. See https://www.theguardian.com/business/ng-interactive/2026/may/14/us-stock-market-war-inflation-tariffs-trump for context.';
 
 export default function InteractiveContentPage() {
   return (