@sybilion/uilib 1.2.18 → 1.2.20

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

@@ -30,7 +30,7 @@ function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPr
     }, [isEmpty, messages.length]);
     return (jsxs("div", { className: S.root, children: [showResizeHandle && resizeHandle ? (jsx(PanelResizeHandle, { edge: "leading", isActive: resizeHandle.isActive, startWidthPx: resizeHandle.startWidthPx, getShellWidth: resizeHandle.getShellWidth, onDragWidth: resizeHandle.onDragWidth, onDragComplete: resizeHandle.onDragComplete, className: cn(SidebarStem.sidebarResizeHandle, S.chatResizeHandle) })) : null, jsx("div", { className: S.panelHeader, children: onClose ? (jsx(Button, { type: "button", variant: "ghost", icon: true, className: S.panelClose, "aria-label": "Close chat", onClick: onClose, children: jsx(X, { className: "size-4" }) })) : null }), jsx("div", { className: S.content, children: jsxs(Chat, { isEmpty: isEmpty, scopeId: effectiveScopeId, onChatDeleted: onChatDeleted, children: [isEmpty ? (jsxs(Fragment, { children: [jsx(Chat.EmptyState, { ...emptyState }), renderPresets('fixed')] })) : (jsx("div", { className: S.scrollWrapper, children: jsxs(Scroll, { y: true, yScrollbarClassName: S.scrollbar, className: S.scroll, innerClassName: S.scrollInner, offset: { y: { before: 56, after: 180 } }, fadeSize: "m", autoHide: true, ref: scrollRef, children: [messages.map((msg, index, arr) => {
                                         const isLast = index === arr.length - 1;
-                                        return (jsx(Chat.Message, { role: msg.role, text: msg.text, onQuickReply: onQuickReply, suppressedQuickReplyKeys: suppressedQuickReplyKeys, quickReplyDisabled: isLoading, isLastMessage: isLast, scriptContinue: isLast && scriptContinueLabel
+                                        return (jsx(Chat.Message, { role: msg.role, text: msg.text, userCsvAttachment: msg.userCsvAttachment, onQuickReply: onQuickReply, suppressedQuickReplyKeys: suppressedQuickReplyKeys, quickReplyDisabled: isLoading, isLastMessage: isLast, scriptContinue: isLast && scriptContinueLabel
                                                 ? { label: scriptContinueLabel }
                                                 : undefined, onScriptContinue: isLast && scriptContinueLabel
                                                 ? onScriptContinue

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

@@ -1,14 +1,15 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import cn from 'classnames';
 import { TextShimmer } from '../../TextShimmer/TextShimmer.js';
 import { MessageRole, GENERATING_DASHBOARD_SYSTEM_TEXT } from '../Chat.types.js';
 import { AgentMessageContent } from './AgentMessageContent.js';
 import S from './ChatMessage.styl.js';
+import { UserCsvAttachmentBubble } from './UserCsvAttachmentBubble.js';
 
-function ChatMessage({ role, text, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage = true, scriptContinue, onScriptContinue, renderMessageChart, }) {
+function ChatMessage({ role, text, userCsvAttachment, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage = true, scriptContinue, onScriptContinue, renderMessageChart, }) {
     const isAssistant = role === MessageRole.ASSISTANT;
     const isSystem = role === MessageRole.SYSTEM;
-    return (jsx("div", { className: cn(S.root, S[`role-${role}`]), children: isSystem ? (jsx("div", { className: S.text, children: text === GENERATING_DASHBOARD_SYSTEM_TEXT ? (jsx(TextShimmer, { as: "span", children: text })) : (text) })) : isAssistant ? (jsx(AgentMessageContent, { text: text, onQuickReply: onQuickReply, suppressedQuickReplyKeys: suppressedQuickReplyKeys, quickReplyDisabled: quickReplyDisabled, isLastMessage: isLastMessage, scriptContinue: scriptContinue, onScriptContinue: onScriptContinue, renderMessageChart: renderMessageChart })) : (jsx("div", { className: S.text, children: text })) }));
+    return (jsx("div", { className: cn(S.root, S[`role-${role}`]), children: isSystem ? (jsx("div", { className: S.text, children: text === GENERATING_DASHBOARD_SYSTEM_TEXT ? (jsx(TextShimmer, { as: "span", children: text })) : (text) })) : isAssistant ? (jsx(AgentMessageContent, { text: text, onQuickReply: onQuickReply, suppressedQuickReplyKeys: suppressedQuickReplyKeys, quickReplyDisabled: quickReplyDisabled, isLastMessage: isLastMessage, scriptContinue: scriptContinue, onScriptContinue: onScriptContinue, renderMessageChart: renderMessageChart })) : (jsxs("div", { className: S.userColumn, children: [jsx("div", { className: S.text, children: text }), userCsvAttachment ? (jsx(UserCsvAttachmentBubble, { attachment: userCsvAttachment })) : null] })) }));
 }
 
 export { ChatMessage };

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

@@ -1,7 +1,7 @@
 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_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 S = {"root":"ChatMessage_root__6rnsF","text":"ChatMessage_text__Y1XNR","role-user":"ChatMessage_role-user__u4JPV","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"};
+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-user__u4JPV .ChatMessage_userCsvCard__D1M7y{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--sb-slate-100);border:0;border-radius:var(--p-4);border-bottom-right-radius:0;box-shadow:0 0 0 1px var(--border);color:var(--sb-green-600);cursor:pointer;display:flex;font:inherit;gap:var(--p-4);margin:0;max-width:100%;padding:var(--p-3);padding-right:var(--p-4);text-align:left;transition:background-color .15s;width:-moz-fit-content;width:fit-content}.ChatMessage_role-user__u4JPV .ChatMessage_userCsvCard__D1M7y:hover{background-color:var(--sb-gray-50)}.ChatMessage_role-user__u4JPV .ChatMessage_userCsvCard__D1M7y:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.dark .ChatMessage_role-user__u4JPV .ChatMessage_userCsvCard__D1M7y{background-color:var(--sb-gray-800);color:var(--sb-green-400)}.dark .ChatMessage_role-user__u4JPV .ChatMessage_userCsvCard__D1M7y:hover{background-color:var(--sb-gray-900)}.ChatMessage_role-user__u4JPV .ChatMessage_userCsvCardIcon__0-KS6{align-items:center;display:flex;flex-shrink:0;height:32px;justify-content:center;width:32px}.ChatMessage_role-user__u4JPV .ChatMessage_userCsvCardContent__LoMGE{display:flex;flex:1;flex-direction:column;min-width:0}.ChatMessage_role-user__u4JPV .ChatMessage_userCsvCardTitle__9W76E{color:var(--text-secondary);font-size:var(--text-base);font-weight:600;line-height:1.4}.ChatMessage_role-user__u4JPV .ChatMessage_userCsvCardSubtitle__YZeHv{color:var(--muted-foreground);font-size:var(--text-sm);line-height:1.4}.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-","userCsvCard":"ChatMessage_userCsvCard__D1M7y","userCsvCardIcon":"ChatMessage_userCsvCardIcon__0-KS6","userCsvCardContent":"ChatMessage_userCsvCardContent__LoMGE","userCsvCardTitle":"ChatMessage_userCsvCardTitle__9W76E","userCsvCardSubtitle":"ChatMessage_userCsvCardSubtitle__YZeHv","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);
 
 export { S as default };

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

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { downloadTextFile } from '../../../../utils/downloadTextFile.js';
+import { CsvIcon } from './icons/CsvIcon.js';
+import S from './ChatMessage.styl.js';
+
+const CSV_DOWNLOAD_HINT = 'Download .CSV file';
+function UserCsvAttachmentBubble({ attachment, }) {
+    return (jsxs("button", { type: "button", className: S.userCsvCard, "aria-label": `${CSV_DOWNLOAD_HINT}: ${attachment.displayName}`, onClick: () => downloadTextFile(attachment.content, attachment.filename, 'text/csv;charset=utf-8'), children: [jsx("div", { className: S.userCsvCardIcon, children: jsx(CsvIcon, { size: 32 }) }), jsxs("div", { className: S.userCsvCardContent, children: [jsx("div", { className: S.userCsvCardTitle, children: attachment.displayName }), jsx("div", { className: S.userCsvCardSubtitle, children: CSV_DOWNLOAD_HINT })] })] }));
+}
+
+export { UserCsvAttachmentBubble };

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

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { FileSpreadsheet } from 'lucide-react';
+
+function CsvIcon({ size = 32 }) {
+    return (jsx(FileSpreadsheet, { size: size, "aria-hidden": true, strokeWidth: 1.75, color: "currentColor" }));
+}
+
+export { CsvIcon };

package/dist/esm/components/ui/Chat/chat-preset-utils.js

@@ -8,14 +8,23 @@ function formatChatTranscript(messages) {
 function normalizePresetMatchText(s) {
     return s.trim().normalize('NFC');
 }
+function presetMatchesUserText(presetText, userTextNorm) {
+    const presetNorm = normalizePresetMatchText(presetText);
+    if (!presetNorm)
+        return false;
+    if (userTextNorm === presetNorm)
+        return true;
+    const prefix = `${presetNorm} `;
+    return userTextNorm.startsWith(prefix);
+}
 function usedPresetIdsFromMessages(messages, presets) {
     if (!messages?.length || !presets?.length)
         return [];
-    const userTexts = new Set(messages
+    const userTexts = messages
         .filter(m => m.role === MessageRole.USER)
-        .map(m => normalizePresetMatchText(m.text)));
+        .map(m => normalizePresetMatchText(m.text));
     return presets
-        .filter(p => userTexts.has(normalizePresetMatchText(p.text)))
+        .filter(p => userTexts.some(ut => presetMatchesUserText(p.text, ut)))
         .map(p => p.id);
 }
 

package/dist/esm/contexts/chat-context.js

@@ -152,16 +152,18 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
             return { ...prev, [scopeId]: updatedChats };
         });
     }, []);
-    const addMessage = useCallback((scopeId, chatId, role, text) => {
+    const addMessage = useCallback((scopeId, chatId, role, text, options) => {
         if (userSwitchKey === null)
             return undefined;
         addScopeIdToRegistry(scopeId);
         const storedText = stripJsonDashboardFences(text);
+        const attachment = role === MessageRole.USER ? options?.userCsvAttachment : undefined;
         const newMessage = {
             id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
             role,
             text: storedText,
             timestamp: Date.now(),
+            ...(attachment ? { userCsvAttachment: attachment } : {}),
         };
         setChats(prev => {
             const scopeChats = prev[scopeId] ?? [];
@@ -200,9 +202,17 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
         if (targetChatId === null || targetChatId === '') {
             throw new Error('No chat selected');
         }
-        addMessage(scopeId, targetChatId, MessageRole.USER, message);
+        const apiPayload = typeof message === 'string' ? message : message.apiMessage;
+        if (typeof message === 'string') {
+            addMessage(scopeId, targetChatId, MessageRole.USER, message);
+        }
+        else {
+            addMessage(scopeId, targetChatId, MessageRole.USER, message.displayText, {
+                userCsvAttachment: message.userCsvAttachment,
+            });
+        }
         try {
-            const data = await sendChatMessageFn(message, targetChatId);
+            const data = await sendChatMessageFn(apiPayload, targetChatId);
             if (data.session_id && data.session_id !== targetChatId) {
                 setChats(prev => {
                     const scopeChats = prev[scopeId] ?? [];
@@ -283,7 +293,7 @@ function useChatsForScopeId(scopeId) {
         currentChatId,
         setCurrentChatId: (targetId) => setCurrentChatId(scopeId, targetId),
         newChat: () => newChat(scopeId),
-        addMessage: (chatId, role, text) => addMessage(scopeId, chatId, role, text),
+        addMessage: (chatId, role, text, options) => addMessage(scopeId, chatId, role, text, options),
         removeMessageById: (chatId, messageId) => removeMessageById(scopeId, chatId, messageId),
         sendMessage: (message, chatId) => sendMessage(scopeId, message, chatId),
         deleteChat: (sessionId) => deleteChat(scopeId, sessionId),

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

@@ -7,11 +7,24 @@ export declare enum MessageRole {
 }
 /** System placeholder while dashboard generation runs (must match ChatSheet `addMessage` text). */
 export declare const GENERATING_DASHBOARD_SYSTEM_TEXT = "Generating dashboard\u2026";
+/** USER-only: sample CSV attached to a preset message; shown as a file row + client-side download. */
+export type UserCsvAttachment = {
+    displayName: string;
+    filename: string;
+    content: string;
+};
+/** Send full text to the chat API while showing `displayText` + optional CSV attachment in the UI. */
+export type ChatSendMessagePayload = {
+    apiMessage: string;
+    displayText: string;
+    userCsvAttachment?: UserCsvAttachment;
+};
 export interface Message {
     id: string;
     role: MessageRole;
     text: string;
     timestamp: number;
+    userCsvAttachment?: UserCsvAttachment;
 }
 export interface Chat {
     session_id: string;
@@ -57,6 +70,7 @@ export interface ChatPromptProps {
 export interface ChatMessageProps {
     role: MessageRole;
     text: string;
+    userCsvAttachment?: UserCsvAttachment;
     onQuickReply?: (branchKey: string, displayLabel: string) => void;
     /** Branch keys already taken (e.g. from chat history); hide quick-reply buttons for these. */
     suppressedQuickReplyKeys?: ReadonlySet<string>;

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

@@ -1,2 +1,2 @@
 import { type ChatMessageProps } from '../Chat.types';
-export declare function ChatMessage({ role, text, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage, scriptContinue, onScriptContinue, renderMessageChart, }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatMessage({ role, text, userCsvAttachment, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage, scriptContinue, onScriptContinue, renderMessageChart, }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+import type { UserCsvAttachment } from '../Chat.types';
+export declare function UserCsvAttachmentBubble({ attachment, }: {
+    attachment: UserCsvAttachment;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+export declare function CsvIcon({ size }: {
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -9,5 +9,5 @@ export type { UseChatPanelChromeModelInput, UseChatPanelChromeModelResult, } fro
 export { ChatMessage } from './ChatMessage';
 export { ChatPrompt } from './ChatPrompt';
 export { ChatPresets } from './ChatPresets';
-export type { Chat as ChatType, Message, ChatProps, ChatPreset as ChatPresetType, } from './Chat.types';
+export type { Chat as ChatType, ChatSendMessagePayload, ChatProps, ChatPreset as ChatPresetType, Message, UserCsvAttachment, } from './Chat.types';
 export { MessageRole } from './Chat.types';

package/dist/esm/types/src/contexts/chat-context.d.ts

@@ -1,14 +1,18 @@
 import { ReactNode } from 'react';
-import { type Chat, MessageRole } from '#uilib/components/ui/Chat/Chat.types';
+import { type Chat, type ChatSendMessagePayload, type UserCsvAttachment, MessageRole } from '#uilib/components/ui/Chat/Chat.types';
 import type { ChatResponse } from '#uilib/types/chat-api.types';
 export type SendChatMessageFn = (message: string, targetChatId: string) => Promise<ChatResponse>;
+export type { ChatSendMessagePayload, UserCsvAttachment } from '#uilib/components/ui/Chat/Chat.types';
+export type AddChatMessageOptions = {
+    userCsvAttachment?: UserCsvAttachment;
+};
 export interface ChatContextType {
     /** Returns the new session id, or undefined if no user / not created. */
     newChat: (scopeId: string) => string | undefined;
     setCurrentChatId: (currScopeId: string, sessionId: string) => void;
-    addMessage: (scopeId: string, chatId: string, role: MessageRole, text: string) => string | undefined;
+    addMessage: (scopeId: string, chatId: string, role: MessageRole, text: string, options?: AddChatMessageOptions) => string | undefined;
     removeMessageById: (scopeId: string, chatId: string, messageId: string) => void;
-    sendMessage: (scopeId: string, message: string, chatId?: string) => Promise<string>;
+    sendMessage: (scopeId: string, message: string | ChatSendMessagePayload, chatId?: string) => Promise<string>;
     getChatsForScopeId: (scopeId: string) => Chat[];
     getCurrentChatId: (scopeId: string) => string | null;
     deleteChat: (scopeId: string, sessionId: string) => void;
@@ -30,9 +34,9 @@ export declare function useChatsForScopeId(scopeId: string): {
     currentChatId: string;
     setCurrentChatId: (targetId: string) => void;
     newChat: () => string;
-    addMessage: (chatId: string, role: MessageRole, text: string) => string;
+    addMessage: (chatId: string, role: MessageRole, text: string, options?: AddChatMessageOptions) => string;
     removeMessageById: (chatId: string, messageId: string) => void;
-    sendMessage: (message: string, chatId?: string) => Promise<string>;
+    sendMessage: (message: string | ChatSendMessagePayload, chatId?: string) => Promise<string>;
     deleteChat: (sessionId: string) => void;
 };
 /** @deprecated Use useChatsForScopeId */
@@ -42,9 +46,9 @@ export declare function useChatsForDataset(scopeId: string): {
     currentChatId: string;
     setCurrentChatId: (targetId: string) => void;
     newChat: () => string;
-    addMessage: (chatId: string, role: MessageRole, text: string) => string;
+    addMessage: (chatId: string, role: MessageRole, text: string, options?: AddChatMessageOptions) => string;
     removeMessageById: (chatId: string, messageId: string) => void;
-    sendMessage: (message: string, chatId?: string) => Promise<string>;
+    sendMessage: (message: string | ChatSendMessagePayload, chatId?: string) => Promise<string>;
     deleteChat: (sessionId: string) => void;
 };
 export declare function useCurrentChat(scopeId: string): Chat;

package/dist/esm/types/src/docs/pages/ChatUserCsvAttachmentPage.d.ts

@@ -0,0 +1 @@
+export default function ChatUserCsvAttachmentPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/utils/downloadTextFile.d.ts

@@ -0,0 +1,2 @@
+/** Trigger a browser download for text/binary content (no backend). */
+export declare function downloadTextFile(content: string, filename: string, mimeType: string): void;

package/dist/esm/utils/downloadTextFile.js

@@ -0,0 +1,14 @@
+/** Trigger a browser download for text/binary content (no backend). */
+function downloadTextFile(content, filename, mimeType) {
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+}
+
+export { downloadTextFile };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.2.18",
+  "version": "1.2.20",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

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

@@ -11,11 +11,26 @@ export enum MessageRole {
 /** System placeholder while dashboard generation runs (must match ChatSheet `addMessage` text). */
 export const GENERATING_DASHBOARD_SYSTEM_TEXT = 'Generating dashboard…';
 
+/** USER-only: sample CSV attached to a preset message; shown as a file row + client-side download. */
+export type UserCsvAttachment = {
+  displayName: string;
+  filename: string;
+  content: string;
+};
+
+/** Send full text to the chat API while showing `displayText` + optional CSV attachment in the UI. */
+export type ChatSendMessagePayload = {
+  apiMessage: string;
+  displayText: string;
+  userCsvAttachment?: UserCsvAttachment;
+};
+
 export interface Message {
   id: string;
   role: MessageRole;
   text: string;
   timestamp: number;
+  userCsvAttachment?: UserCsvAttachment;
 }
 
 export interface Chat {
@@ -66,6 +81,7 @@ export interface ChatPromptProps {
 export interface ChatMessageProps {
   role: MessageRole;
   text: string;
+  userCsvAttachment?: UserCsvAttachment;
   onQuickReply?: (branchKey: string, displayLabel: string) => void;
   /** Branch keys already taken (e.g. from chat history); hide quick-reply buttons for these. */
   suppressedQuickReplyKeys?: ReadonlySet<string>;

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

@@ -120,6 +120,7 @@ export function ChatChrome({
                       key={msg.id}
                       role={msg.role}
                       text={msg.text}
+                      userCsvAttachment={msg.userCsvAttachment}
                       onQuickReply={onQuickReply}
                       suppressedQuickReplyKeys={suppressedQuickReplyKeys}
                       quickReplyDisabled={isLoading}

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

@@ -17,6 +17,13 @@
 .role-user
   align-items flex-end
 
+  .userColumn
+    display flex
+    flex-direction column
+    align-items flex-end
+    gap var(--p-2)
+    max-width 100%
+
   .text
     padding var(--p-3) var(--p-4)
 
@@ -29,6 +36,66 @@
     :global(.dark) &
       background-color var(--sb-gray-800)
 
+  .userCsvCard
+    appearance none
+    border 0
+    margin 0
+    font inherit
+    display flex
+    align-items center
+    gap var(--p-4)
+    padding var(--p-3)
+    padding-right var(--p-4)
+    background-color var(--sb-slate-100)
+    box-shadow 0 0 0 1px var(--border)
+    border-radius var(--p-4)
+    border-bottom-right-radius 0
+    width fit-content
+    max-width 100%
+    text-align left
+    cursor pointer
+    transition background-color 150ms
+    color var(--sb-green-600)
+
+    &:hover
+      background-color var(--sb-gray-50)
+
+    &:focus-visible
+      outline 2px solid var(--ring)
+      outline-offset 2px
+
+    :global(.dark) &
+      background-color var(--sb-gray-800)
+      color var(--sb-green-400)
+
+      &:hover
+        background-color var(--sb-gray-900)
+
+  .userCsvCardIcon
+    display flex
+    align-items center
+    justify-content center
+    width 32px
+    height 32px
+    flex-shrink 0
+
+  .userCsvCardContent
+    display flex
+    flex-direction column
+    flex 1
+    min-width 0
+
+  .userCsvCardTitle
+    font-size var(--text-base)
+    font-weight 600
+    line-height 1.4
+    color var(--text-secondary)
+
+  .userCsvCardSubtitle
+    font-size var(--text-sm)
+    color var(--muted-foreground)
+    line-height 1.4
+
 .role-system
   align-items center
 

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

@@ -17,6 +17,12 @@ interface CssExports {
   'root': string;
   'scrollHorizontal': string;
   'text': string;
+  'userColumn': string;
+  'userCsvCard': string;
+  'userCsvCardContent': string;
+  'userCsvCardIcon': string;
+  'userCsvCardSubtitle': string;
+  'userCsvCardTitle': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

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

@@ -8,10 +8,12 @@ import {
 } from '../Chat.types';
 import { AgentMessageContent } from './AgentMessageContent';
 import S from './ChatMessage.styl';
+import { UserCsvAttachmentBubble } from './UserCsvAttachmentBubble';
 
 export function ChatMessage({
   role,
   text,
+  userCsvAttachment,
   onQuickReply,
   suppressedQuickReplyKeys,
   quickReplyDisabled,
@@ -45,7 +47,12 @@ export function ChatMessage({
           renderMessageChart={renderMessageChart}
         />
       ) : (
-        <div className={S.text}>{text}</div>
+        <div className={S.userColumn}>
+          <div className={S.text}>{text}</div>
+          {userCsvAttachment ? (
+            <UserCsvAttachmentBubble attachment={userCsvAttachment} />
+          ) : null}
+        </div>
       )}
     </div>
   );

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

@@ -0,0 +1,36 @@
+import type { UserCsvAttachment } from '../Chat.types';
+import { downloadTextFile } from '#uilib/utils/downloadTextFile';
+
+import { CsvIcon } from './icons/CsvIcon';
+import S from './ChatMessage.styl';
+
+const CSV_DOWNLOAD_HINT = 'Download .CSV file';
+
+export function UserCsvAttachmentBubble({
+  attachment,
+}: {
+  attachment: UserCsvAttachment;
+}) {
+  return (
+    <button
+      type="button"
+      className={S.userCsvCard}
+      aria-label={`${CSV_DOWNLOAD_HINT}: ${attachment.displayName}`}
+      onClick={() =>
+        downloadTextFile(
+          attachment.content,
+          attachment.filename,
+          'text/csv;charset=utf-8',
+        )
+      }
+    >
+      <div className={S.userCsvCardIcon}>
+        <CsvIcon size={32} />
+      </div>
+      <div className={S.userCsvCardContent}>
+        <div className={S.userCsvCardTitle}>{attachment.displayName}</div>
+        <div className={S.userCsvCardSubtitle}>{CSV_DOWNLOAD_HINT}</div>
+      </div>
+    </button>
+  );
+}

package/src/components/ui/Chat/ChatMessage/icons/CsvIcon.tsx

@@ -0,0 +1,7 @@
+import { FileSpreadsheet } from 'lucide-react';
+
+export function CsvIcon({ size = 32 }: { size?: number }) {
+  return (
+    <FileSpreadsheet size={size} aria-hidden strokeWidth={1.75} color="currentColor" />
+  );
+}

package/src/components/ui/Chat/chat-preset-utils.ts

@@ -11,17 +11,23 @@ export function normalizePresetMatchText(s: string): string {
   return s.trim().normalize('NFC');
 }
 
+function presetMatchesUserText(presetText: string, userTextNorm: string): boolean {
+  const presetNorm = normalizePresetMatchText(presetText);
+  if (!presetNorm) return false;
+  if (userTextNorm === presetNorm) return true;
+  const prefix = `${presetNorm} `;
+  return userTextNorm.startsWith(prefix);
+}
+
 export function usedPresetIdsFromMessages(
   messages: Message[] | undefined,
   presets: ChatPreset[] | undefined,
 ): string[] {
   if (!messages?.length || !presets?.length) return [];
-  const userTexts = new Set(
-    messages
-      .filter(m => m.role === MessageRole.USER)
-      .map(m => normalizePresetMatchText(m.text)),
-  );
+  const userTexts = messages
+    .filter(m => m.role === MessageRole.USER)
+    .map(m => normalizePresetMatchText(m.text));
   return presets
-    .filter(p => userTexts.has(normalizePresetMatchText(p.text)))
+    .filter(p => userTexts.some(ut => presetMatchesUserText(p.text, ut)))
     .map(p => p.id);
 }

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

@@ -17,8 +17,10 @@ export { ChatPrompt } from './ChatPrompt';
 export { ChatPresets } from './ChatPresets';
 export type {
   Chat as ChatType,
-  Message,
+  ChatSendMessagePayload,
   ChatProps,
   ChatPreset as ChatPresetType,
+  Message,
+  UserCsvAttachment,
 } from './Chat.types';
 export { MessageRole } from './Chat.types';

package/src/contexts/chat-context.tsx

@@ -10,7 +10,9 @@ import {
 
 import {
   type Chat,
+  type ChatSendMessagePayload,
   type Message,
+  type UserCsvAttachment,
   MessageRole,
 } from '#uilib/components/ui/Chat/Chat.types';
 import { stripJsonDashboardFences } from '#uilib/lib/dashboard-spec/stripJsonDashboardFences';
@@ -22,9 +24,15 @@ export type SendChatMessageFn = (
   targetChatId: string,
 ) => Promise<ChatResponse>;
 
+export type { ChatSendMessagePayload, UserCsvAttachment } from '#uilib/components/ui/Chat/Chat.types';
+
 const CHATS_PREFIX = 'chats-';
 const CHAT_SCOPE_IDS_REGISTRY_KEY = 'chat-scope-ids';
 
+export type AddChatMessageOptions = {
+  userCsvAttachment?: UserCsvAttachment;
+};
+
 export interface ChatContextType {
   /** Returns the new session id, or undefined if no user / not created. */
   newChat: (scopeId: string) => string | undefined;
@@ -34,6 +42,7 @@ export interface ChatContextType {
     chatId: string,
     role: MessageRole,
     text: string,
+    options?: AddChatMessageOptions,
   ) => string | undefined;
   removeMessageById: (
     scopeId: string,
@@ -42,7 +51,7 @@ export interface ChatContextType {
   ) => void;
   sendMessage: (
     scopeId: string,
-    message: string,
+    message: string | ChatSendMessagePayload,
     chatId?: string,
   ) => Promise<string>;
   getChatsForScopeId: (scopeId: string) => Chat[];
@@ -239,15 +248,24 @@ export function ChatProvider({
   }, []);
 
   const addMessage = useCallback(
-    (scopeId: string, chatId: string, role: MessageRole, text: string) => {
+    (
+      scopeId: string,
+      chatId: string,
+      role: MessageRole,
+      text: string,
+      options?: AddChatMessageOptions,
+    ) => {
       if (userSwitchKey === null) return undefined;
       addScopeIdToRegistry(scopeId);
       const storedText = stripJsonDashboardFences(text);
+      const attachment =
+        role === MessageRole.USER ? options?.userCsvAttachment : undefined;
       const newMessage: Message = {
         id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
         role,
         text: storedText,
         timestamp: Date.now(),
+        ...(attachment ? { userCsvAttachment: attachment } : {}),
       };
 
       setChats(prev => {
@@ -292,7 +310,7 @@ export function ChatProvider({
   const sendMessage = useCallback(
     async (
       scopeId: string,
-      message: string,
+      message: string | ChatSendMessagePayload,
       chatId?: string,
     ): Promise<string> => {
       const targetChatId = chatId ?? getCurrentChatId(scopeId);
@@ -300,10 +318,19 @@ export function ChatProvider({
         throw new Error('No chat selected');
       }
 
-      addMessage(scopeId, targetChatId, MessageRole.USER, message);
+      const apiPayload =
+        typeof message === 'string' ? message : message.apiMessage;
+
+      if (typeof message === 'string') {
+        addMessage(scopeId, targetChatId, MessageRole.USER, message);
+      } else {
+        addMessage(scopeId, targetChatId, MessageRole.USER, message.displayText, {
+          userCsvAttachment: message.userCsvAttachment,
+        });
+      }
 
       try {
-        const data = await sendChatMessageFn(message, targetChatId);
+        const data = await sendChatMessageFn(apiPayload, targetChatId);
 
         if (data.session_id && data.session_id !== targetChatId) {
           setChats(prev => {
@@ -430,11 +457,15 @@ export function useChatsForScopeId(scopeId: string) {
     currentChatId,
     setCurrentChatId: (targetId: string) => setCurrentChatId(scopeId, targetId),
     newChat: () => newChat(scopeId),
-    addMessage: (chatId: string, role: MessageRole, text: string) =>
-      addMessage(scopeId, chatId, role, text),
+    addMessage: (
+      chatId: string,
+      role: MessageRole,
+      text: string,
+      options?: AddChatMessageOptions,
+    ) => addMessage(scopeId, chatId, role, text, options),
     removeMessageById: (chatId: string, messageId: string) =>
       removeMessageById(scopeId, chatId, messageId),
-    sendMessage: (message: string, chatId?: string) =>
+    sendMessage: (message: string | ChatSendMessagePayload, chatId?: string) =>
       sendMessage(scopeId, message, chatId),
     deleteChat: (sessionId: string) => deleteChat(scopeId, sessionId),
   };

package/src/docs/pages/ChatUserCsvAttachmentPage.tsx

@@ -0,0 +1,171 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { Button } from '#uilib/components/ui/Button';
+import {
+  ChatChrome,
+  type Message,
+  MessageRole,
+} from '#uilib/components/ui/Chat';
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { ScrollRef } from '@homecode/ui';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const NO_QUICK_REPLY_KEYS: ReadonlySet<string> = new Set();
+
+const SAMPLE_CSV = `Name,Score
+Alice,10
+Bob,20`;
+
+const ASSISTANT_ACK =
+  'Received your message. Use the file row below the text bubble to download the CSV sample.';
+
+const ASSISTANT_REPLY_TYPED =
+  'Plain reply for typed messages. Use “Load preset-style…” for the CSV attachment demo.';
+
+function makeMessage(role: MessageRole, text: string): Message {
+  return {
+    id: crypto.randomUUID(),
+    role,
+    text,
+    timestamp: Date.now(),
+  };
+}
+
+function makeUserMessageWithCsv(
+  displayText: string,
+  displayName: string,
+): Message {
+  return {
+    id: crypto.randomUUID(),
+    role: MessageRole.USER,
+    text: displayText,
+    timestamp: Date.now(),
+    userCsvAttachment: {
+      displayName,
+      filename: 'docs-sample.csv',
+      content: SAMPLE_CSV,
+    },
+  };
+}
+
+export default function ChatUserCsvAttachmentPage() {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const replyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const scrollRef = useRef<ScrollRef>(null);
+
+  useEffect(() => {
+    return () => {
+      if (replyTimeoutRef.current != null) {
+        clearTimeout(replyTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const isEmpty = messages.length === 0 && !isLoading;
+  const isLastMessageFromUser =
+    messages.length > 0 &&
+    messages[messages.length - 1]?.role === MessageRole.USER;
+
+  const addCsvDemo = useCallback(() => {
+    if (isLoading) return;
+    const displayText =
+      'Open procurement buys analysis "Am I overpaying on my open orders?" Open buys (sample)';
+
+    setMessages(prev => [
+      ...prev,
+      makeUserMessageWithCsv(displayText, 'Open buys (sample)'),
+    ]);
+    setIsLoading(true);
+
+    if (replyTimeoutRef.current != null) clearTimeout(replyTimeoutRef.current);
+
+    replyTimeoutRef.current = setTimeout(() => {
+      replyTimeoutRef.current = null;
+      setMessages(prev => [
+        ...prev,
+        makeMessage(MessageRole.ASSISTANT, ASSISTANT_ACK),
+      ]);
+      setIsLoading(false);
+    }, 500);
+  }, [isLoading]);
+
+  const onSubmit = useCallback(
+    (raw: string) => {
+      const text = raw.trim();
+      if (!text || isLoading) return;
+
+      setMessages(prev => [...prev, makeMessage(MessageRole.USER, text)]);
+      setIsLoading(true);
+
+      if (replyTimeoutRef.current != null) {
+        clearTimeout(replyTimeoutRef.current);
+      }
+      replyTimeoutRef.current = setTimeout(() => {
+        replyTimeoutRef.current = null;
+        setMessages(prev => [
+          ...prev,
+          makeMessage(MessageRole.ASSISTANT, ASSISTANT_REPLY_TYPED),
+        ]);
+        setIsLoading(false);
+      }, 900);
+    },
+    [isLoading],
+  );
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Chat' }, { label: 'User CSV attachment' }]}
+        title="Chat — user CSV attachment"
+        subheader="USER bubble with separate downloadable CSV row (dashboard preset pattern)."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <p style={{ marginBottom: 16 }}>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={addCsvDemo}
+          >
+            Load preset-style message + CSV attachment
+          </Button>
+        </p>
+        <ChatChrome
+          showResizeHandle={false}
+          resizeHandle={undefined}
+          onClose={undefined}
+          isEmpty={isEmpty}
+          renderPresets={() => null}
+          messages={messages}
+          onQuickReply={() => {}}
+          suppressedQuickReplyKeys={NO_QUICK_REPLY_KEYS}
+          isLoading={isLoading}
+          scriptContinueLabel={undefined}
+          onScriptContinue={undefined}
+          showBranchActionsRow={false}
+          showSyntheticBranchButtons={false}
+          unusedBranchKeys={[]}
+          isScriptComplete={false}
+          onGenerateDashboard={undefined}
+          generatingDashboard={false}
+          onGenerateDashboardClick={() => {}}
+          showInlinePresets={false}
+          isLastMessageFromUser={isLastMessageFromUser}
+          scrollRef={scrollRef}
+          effectiveScopeId="docs-chat-user-csv"
+          onPromptSubmit={onSubmit}
+          onChatDeleted={() => {}}
+          emptyState={{
+            title: 'CSV attachment demo',
+            description:
+              'Click the button above or send any message. The CSV row uses the same UI as dashboard presets.',
+          }}
+        />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/registry.ts

@@ -96,6 +96,12 @@ export const DOC_REGISTRY: DocEntry[] = [
     section: 'Chat',
     load: () => import('./pages/ChatPage'),
   },
+  {
+    slug: 'chat-user-csv-attachment',
+    title: 'Chat user CSV attachment',
+    section: 'Chat',
+    load: () => import('./pages/ChatUserCsvAttachmentPage'),
+  },
   {
     slug: 'checkbox',
     title: 'Checkbox',

package/src/utils/downloadTextFile.ts

@@ -0,0 +1,16 @@
+/** Trigger a browser download for text/binary content (no backend). */
+export function downloadTextFile(
+  content: string,
+  filename: string,
+  mimeType: string,
+): void {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}