@sybilion/uilib 1.3.11 → 1.3.14

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

@@ -65,7 +65,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 }), jsxs("div", { className: S.content, children: [attachmentsDropzoneEnabled ? (jsx(DropZone, { accept: attachmentAccept, label: "Drop text files to attach", multiple: true, ghost: true, overlayScope: "container", disabled: promptBusy, className: S.attachmentDropzone, onFiles: handleAttachmentFiles })) : null, 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, userCsvAttachment: msg.userCsvAttachment, onQuickReply: onQuickReply, suppressedQuickReplyKeys: suppressedQuickReplyKeys, quickReplyDisabled: isLoading, isLastMessage: isLast, scriptContinue: isLast && scriptContinueLabel
+                                            return (jsx(Chat.Message, { role: msg.role, text: msg.text, userTextFileAttachments: msg.userTextFileAttachments, onQuickReply: onQuickReply, suppressedQuickReplyKeys: suppressedQuickReplyKeys, quickReplyDisabled: isLoading, isLastMessage: isLast, scriptContinue: isLast && scriptContinueLabel
                                                     ? { label: scriptContinueLabel }
                                                     : undefined, onScriptContinue: isLast && scriptContinueLabel
                                                     ? onScriptContinue
@@ -77,7 +77,7 @@ function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPr
                                                     })
                                                     : null, isScriptComplete &&
                                                     onGenerateDashboard &&
-                                                    !generatingDashboard ? (jsxs(Button, { type: "button", variant: "default", size: "lg", disabled: isLoading, onClick: onGenerateDashboardClick, children: [jsx(ChartLineIcon, {}), "Generate Dashboard"] })) : null] })), showInlinePresets && renderPresets('inline'), isLoading && isLastMessageFromUser && (jsx(TextShimmer, { duration: 1, spread: 5, className: S.loader, children: "Thinking..." }))] }) })), jsxs("div", { className: cn(S.footer, footerClassName), children: [isEmpty ? (jsx("div", { className: S.notice, children: "Forecast Assistant can make mistakes." })) : null, jsx(Chat.Prompt, { onSubmit: handlePromptSubmitWithAttachments, disabled: promptBusy, attachments: pendingAttachments, onRemoveAttachment: handleRemoveAttachment, prefillMessage: promptPrefill ?? undefined })] })] })] })] }));
+                                                    !generatingDashboard ? (jsxs(Button, { type: "button", variant: "default", size: "lg", disabled: isLoading, onClick: onGenerateDashboardClick, children: [jsx(ChartLineIcon, {}), "Generate Dashboard"] })) : null] })), showInlinePresets && renderPresets('inline'), isLoading && isLastMessageFromUser && (jsx(TextShimmer, { duration: 1, spread: 5, className: S.loader, children: "Thinking..." }))] }) })), jsxs("div", { className: cn(S.footer, footerClassName), children: [isEmpty ? (jsx("div", { className: S.notice, children: "Forecast Assistant can make mistakes." })) : null, jsx(Chat.Prompt, { onSubmit: handlePromptSubmitWithAttachments, disabled: promptBusy, attachments: pendingAttachments, onRemoveAttachment: handleRemoveAttachment, prefillMessage: promptPrefill ?? undefined, attachmentAccept: attachmentsDropzoneEnabled ? attachmentAccept : undefined, onAttachmentFiles: attachmentsDropzoneEnabled ? handleAttachmentFiles : undefined })] })] })] })] }));
 }
 
 export { ChatChrome };

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

@@ -3,14 +3,18 @@ import cn from 'classnames';
 import { InteractiveContent } from '../../InteractiveContent/InteractiveContent.js';
 import { TextShimmer } from '../../TextShimmer/TextShimmer.js';
 import { MessageRole, GENERATING_DASHBOARD_SYSTEM_TEXT } from '../Chat.types.js';
+import { userTextFileAttachmentsFromMessage } from '../userTextFileAttachments.js';
 import { AgentMessageContent } from './AgentMessageContent.js';
 import S from './ChatMessage.styl.js';
-import { UserCsvAttachmentBubble } from './UserCsvAttachmentBubble.js';
+import { UserTextFileAttachmentBubble } from './UserTextFileAttachmentBubble.js';
 
-function ChatMessage({ role, text, userCsvAttachment, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage = true, scriptContinue, onScriptContinue, renderMessageChart, }) {
+function ChatMessage({ role, text, userTextFileAttachments, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage = true, scriptContinue, onScriptContinue, renderMessageChart, }) {
+    const fileAttachments = userTextFileAttachmentsFromMessage({
+        userTextFileAttachments,
+    });
     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 })) : (jsxs("div", { className: S.userColumn, children: [jsx("div", { className: S.text, children: jsx(InteractiveContent, { text: text }) }), userCsvAttachment ? (jsx(UserCsvAttachmentBubble, { attachment: userCsvAttachment })) : null] })) }));
+    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: jsx(InteractiveContent, { text: text }) }), fileAttachments.map(attachment => (jsx(UserTextFileAttachmentBubble, { attachment: attachment }, `${attachment.displayName}:${attachment.filename}`)))] })) }));
 }
 
 export { ChatMessage };

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

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { FileChip } from '../../FileChip/FileChip.js';
+import { downloadTextFile } from '../../../../utils/downloadTextFile.js';
+
+function formatFromFilename(filename) {
+    const lower = filename.toLowerCase();
+    if (lower.endsWith('.csv'))
+        return 'csv';
+    if (lower.endsWith('.pdf'))
+        return 'pdf';
+    return 'text';
+}
+function mimeForFormat(format) {
+    if (format === 'csv')
+        return 'text/csv;charset=utf-8';
+    if (format === 'pdf')
+        return 'application/pdf';
+    return 'text/plain;charset=utf-8';
+}
+function hintForFormat(format) {
+    if (format === 'csv')
+        return 'Download .CSV file';
+    if (format === 'pdf')
+        return 'Download file';
+    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)) }));
+}
+
+export { UserTextFileAttachmentBubble };

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

@@ -1,17 +1,19 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import cn from 'classnames';
 import { useState, useRef, useLayoutEffect, useEffect } from 'react';
 import useEvent from '../../../../hooks/useEvent.js';
-import { SendHorizontalIcon } from 'lucide-react';
+import { PaperclipIcon, SendHorizontalIcon } from 'lucide-react';
 import { Button } from '../../Button/Button.js';
 import { Input } from '../../Input/Input.js';
 import { syncChatPromptTextareaHeight } from './ChatPrompt.helpers.js';
 import S from './ChatPrompt.styl.js';
 import { ChatPromptAttachments } from './ChatPromptAttachments.js';
 
-function ChatPrompt({ onSubmit, placeholder, className, footer, prefillMessage, attachments = [], onRemoveAttachment, disabled = false, }) {
+function ChatPrompt({ onSubmit, placeholder, className, footer, prefillMessage, attachments = [], onRemoveAttachment, disabled = false, attachmentAccept, onAttachmentFiles, }) {
     const [message, setMessage] = useState('');
     const inputRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const showAttachButton = Boolean(attachmentAccept && onAttachmentFiles);
     useLayoutEffect(() => {
         const el = inputRef.current;
         if (!el)
@@ -32,6 +34,13 @@ function ChatPrompt({ onSubmit, placeholder, className, footer, prefillMessage,
             setMessage('');
         }
     };
+    const handleFileInputChange = (e) => {
+        const files = Array.from(e.target.files ?? []);
+        e.target.value = '';
+        if (files.length > 0) {
+            onAttachmentFiles?.(files);
+        }
+    };
     useEvent({
         event: 'keydown',
         callback: (e) => {
@@ -42,7 +51,10 @@ function ChatPrompt({ onSubmit, placeholder, className, footer, prefillMessage,
             }
         },
     });
-    return (jsxs("form", { onSubmit: handleSubmit, className: cn(S.root, className), children: [jsx(ChatPromptAttachments, { attachments: attachments, onRemove: index => onRemoveAttachment?.(index), disabled: disabled }), jsxs("div", { className: S.composer, children: [jsx(Input, { ref: inputRef, type: "textarea", rows: 1, value: message, onChange: e => setMessage(e.target.value), placeholder: placeholder || 'Type a message...', className: cn(S.input) }), jsx("div", { className: S.submitColumn, children: jsx(Button, { type: "submit", size: "sm", disabled: disabled || (!message.trim() && attachments.length === 0), children: jsx(SendHorizontalIcon, { size: 16 }) }) })] }), footer] }));
+    return (jsxs("form", { onSubmit: handleSubmit, className: cn(S.root, className), children: [jsx(ChatPromptAttachments, { attachments: attachments, onRemove: index => onRemoveAttachment?.(index), disabled: disabled }), jsxs("div", { className: S.composer, children: [showAttachButton ? (jsxs(Fragment, { children: [jsx("input", { ref: fileInputRef, type: "file", accept: attachmentAccept, multiple: true, className: S.fileInput, disabled: disabled, onChange: handleFileInputChange }), jsx(Button, { type: "button", variant: "ghost", icon: true, size: "sm", className: S.attachButton, "aria-label": "Attach file", disabled: disabled, onClick: e => {
+                                    e.preventDefault();
+                                    fileInputRef.current?.click();
+                                }, children: jsx(PaperclipIcon, { size: 16 }) })] })) : null, jsx(Input, { ref: inputRef, type: "textarea", rows: 1, value: message, onChange: e => setMessage(e.target.value), placeholder: placeholder || 'Type a message...', className: cn(S.input) }), jsx("div", { className: S.submitColumn, children: jsx(Button, { type: "submit", size: "sm", disabled: disabled || (!message.trim() && attachments.length === 0), children: jsx(SendHorizontalIcon, { size: 16 }) }) })] }), footer] }));
 }
 
 export { ChatPrompt };

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

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChatPrompt_root__5G5bq{align-items:stretch;display:flex;flex-direction:column;gap:var(--p-2);padding:var(--p-6);padding-top:var(--p-5);position:relative}.ChatPrompt_composer__H3c3N{align-items:flex-end;display:flex;flex-direction:row;gap:var(--p-3);position:relative;width:100%}.ChatPrompt_input__QPKBV{border:none;border-radius:0!important;flex:1;max-height:200px;min-height:40px;min-width:0;overflow-y:auto;padding:var(--p-2) 0 0!important;resize:none}.ChatPrompt_input__QPKBV,.ChatPrompt_input__QPKBV:focus{box-shadow:none!important}.ChatPrompt_submitColumn__0rY1R{align-items:center;display:flex;flex-direction:column;flex-shrink:0;justify-content:flex-end}.ChatPrompt_submitColumn__0rY1R>button:focus{box-shadow:0 0 0 2px var(--brand-color-500)!important}.ChatPrompt_submitColumn__0rY1R>button:first-child{border:none;position:relative;transition:all .2s}.ChatPrompt_submitColumn__0rY1R>button:first-child:focus{transform:scale(1.2)}.ChatPrompt_submitColumn__0rY1R>button:first-child:before{bottom:-100%;content:\"\";left:-100%;position:absolute;right:-100%;top:-100%}.ChatPrompt_submitColumn__0rY1R .ChatPrompt_attachButton__gi-qF{background-color:var(--page-color);box-shadow:0 0 20px var(--background)}.ChatPrompt_attachments__KG-fG{display:flex;flex-wrap:wrap;gap:var(--p-2);margin-bottom:var(--p-2)}.ChatPrompt_attachmentItem__QJk7J{flex:1 1 300px;max-width:300px;min-width:0}";
-var S = {"root":"ChatPrompt_root__5G5bq","composer":"ChatPrompt_composer__H3c3N","input":"ChatPrompt_input__QPKBV","submitColumn":"ChatPrompt_submitColumn__0rY1R","attachButton":"ChatPrompt_attachButton__gi-qF","attachments":"ChatPrompt_attachments__KG-fG","attachmentItem":"ChatPrompt_attachmentItem__QJk7J"};
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChatPrompt_root__5G5bq{align-items:stretch;display:flex;flex-direction:column;gap:var(--p-2);padding:var(--p-6);padding-top:var(--p-5);position:relative}.ChatPrompt_composer__H3c3N{align-items:flex-end;display:flex;flex-direction:row;gap:var(--p-3);position:relative;width:100%}.ChatPrompt_fileInput__xdgPn{display:none}.ChatPrompt_attachButton__gi-qF{align-self:flex-end;flex-shrink:0}.ChatPrompt_input__QPKBV{border:none;border-radius:0!important;flex:1;max-height:200px;min-height:40px;min-width:0;overflow-y:auto;padding:var(--p-2) 0 0!important;resize:none}.ChatPrompt_input__QPKBV,.ChatPrompt_input__QPKBV:focus{box-shadow:none!important}.ChatPrompt_submitColumn__0rY1R{align-items:center;display:flex;flex-direction:column;flex-shrink:0;justify-content:flex-end}.ChatPrompt_submitColumn__0rY1R>button:focus{box-shadow:0 0 0 2px var(--brand-color-500)!important}.ChatPrompt_submitColumn__0rY1R>button:first-child{border:none;position:relative;transition:all .2s}.ChatPrompt_submitColumn__0rY1R>button:first-child:focus{transform:scale(1.2)}.ChatPrompt_submitColumn__0rY1R>button:first-child:before{bottom:-100%;content:\"\";left:-100%;position:absolute;right:-100%;top:-100%}.ChatPrompt_attachments__KG-fG{display:flex;flex-wrap:wrap;gap:var(--p-2);margin-bottom:var(--p-2)}.ChatPrompt_attachmentItem__QJk7J{flex:1 1 300px;max-width:300px;min-width:0}";
+var S = {"root":"ChatPrompt_root__5G5bq","composer":"ChatPrompt_composer__H3c3N","fileInput":"ChatPrompt_fileInput__xdgPn","attachButton":"ChatPrompt_attachButton__gi-qF","input":"ChatPrompt_input__QPKBV","submitColumn":"ChatPrompt_submitColumn__0rY1R","attachments":"ChatPrompt_attachments__KG-fG","attachmentItem":"ChatPrompt_attachmentItem__QJk7J"};
 styleInject(css_248z);
 
 export { S as default };

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

@@ -4,7 +4,7 @@ import { Button } from '../../Button/Button.js';
 import { ChatChrome } from '../ChatChrome/ChatChrome.js';
 import { useChatPanelChromeModel } from './useChatPanelChromeModel.js';
 
-function ChatSheet({ triggerLabel = 'Open Chat', triggerAriaLabel, actionsRef, renderTrigger, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, emptyState, inline = false, }) {
+function ChatSheet({ triggerLabel = 'Open Chat', triggerAriaLabel, actionsRef, renderTrigger, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, inline = false, }) {
     const model = useChatPanelChromeModel({
         embedAsPage: inline,
         presets,
@@ -14,6 +14,9 @@ function ChatSheet({ triggerLabel = 'Open Chat', triggerAriaLabel, actionsRef, r
         onGenerateDashboard,
         renderMessageChart,
         emptyState,
+        allowedAttachments,
+        allowPdfAttachments,
+        onAttachmentsDropped,
     });
     if (actionsRef) {
         actionsRef.current = {

package/dist/esm/components/ui/Chat/ChatSheet/useChatPanelChromeModel.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { MessageRole, GENERATING_DASHBOARD_SYSTEM_TEXT } from '../Chat.types.js';
 import { isGraphIntakeAssistantStepComplete, matchUserTextToQuickReply, parseScriptLine, textHasQuickReplyMarkers, branchKeysUsedFromChatHistory, branchKeysUsedByUserMessages, extractQuickReplyLabelKeyPairsFromText, entryBranchKeyBeforeLastAssistant, isPresetScriptGraph, branchesFromPresetScriptGraph } from '../ChatMessage/presetScript.js';
+import { buildChatSendMessagePayload, displayTextFromSendPayload } from '../buildChatSendMessagePayload.js';
 import { usedPresetIdsFromMessages, formatChatTranscript } from '../chat-preset-utils.js';
 import { useChatsForScopeId, useChat, useChatOutboundPending, isChatEmpty } from '../../../../contexts/chat-context.js';
 import useEvent from '../../../../hooks/useEvent.js';
@@ -296,10 +297,11 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         onMessage,
         onScriptComplete,
     ]);
-    const handlePromptSubmit = useCallback(async (message) => {
+    const handlePromptSubmit = useCallback(async (message, attachments) => {
         const chatId = currentChatId;
         if (!chatId)
             return;
+        const stagedAttachments = attachments ?? [];
         const quickBranches = quickReplyBranchesByChat[chatId];
         const graphActive = Boolean(quickBranches && Object.keys(quickBranches).length > 0);
         const intake = intakeByChatId[chatId];
@@ -402,8 +404,9 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         try {
             if (chatId)
                 endLocalDemoFlow(chatId);
-            await sendMessage(message);
-            onMessage?.(message);
+            const payload = buildChatSendMessagePayload(message, stagedAttachments);
+            await sendMessage(payload);
+            onMessage?.(displayTextFromSendPayload(payload));
         }
         catch (error) {
             logger.error('Error sending chat message:', error);

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

@@ -0,0 +1,66 @@
+import { sanitizeAttachmentFilename } from './sanitizeAttachmentFilename.js';
+
+function defaultExtForAttachment(item) {
+    const name = item.file.name.toLowerCase();
+    if (item.kind === 'pdf' || name.endsWith('.pdf'))
+        return 'pdf';
+    if (name.endsWith('.csv'))
+        return 'csv';
+    if (name.endsWith('.json'))
+        return 'json';
+    if (name.endsWith('.md') || name.endsWith('.markdown'))
+        return 'md';
+    if (name.endsWith('.html') || name.endsWith('.htm'))
+        return 'html';
+    if (name.endsWith('.xml'))
+        return 'xml';
+    if (name.endsWith('.yaml') || name.endsWith('.yml'))
+        return 'yaml';
+    if (name.endsWith('.tsv'))
+        return 'tsv';
+    if (name.endsWith('.ics'))
+        return 'ics';
+    return 'txt';
+}
+function dropItemToUserAttachment(item) {
+    const ext = defaultExtForAttachment(item);
+    return {
+        displayName: item.file.name,
+        filename: sanitizeAttachmentFilename(item.file.name, ext),
+        content: item.text,
+    };
+}
+function buildApiMessage(displayText, attachments) {
+    const parts = [
+        displayText,
+        ...attachments.map(item => item.text.trim()).filter(Boolean),
+    ].filter(Boolean);
+    return parts.join('\n\n');
+}
+/** Resolve file attachments on a send payload. */
+function normalizeUserTextFileAttachments(payload) {
+    return payload.userTextFileAttachments ?? [];
+}
+/**
+ * Build `sendMessage` input from composer text and staged drop items.
+ * Returns a plain string when there are no attachments.
+ */
+function buildChatSendMessagePayload(displayText, attachments) {
+    const trimmed = displayText.trim();
+    if (attachments.length === 0) {
+        return trimmed;
+    }
+    const userTextFileAttachments = attachments.map(dropItemToUserAttachment);
+    const resolvedDisplayText = trimmed.length > 0 ? trimmed : userTextFileAttachments[0].displayName;
+    return {
+        apiMessage: buildApiMessage(resolvedDisplayText, attachments),
+        displayText: resolvedDisplayText,
+        userTextFileAttachments,
+    };
+}
+/** Display text from a string or structured send payload. */
+function displayTextFromSendPayload(message) {
+    return typeof message === 'string' ? message : message.displayText;
+}
+
+export { buildChatSendMessagePayload, displayTextFromSendPayload, normalizeUserTextFileAttachments };

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

@@ -0,0 +1,14 @@
+/** Safe download filename from a display title or original file name. */
+function sanitizeAttachmentFilename(displayTitle, defaultExt = 'txt') {
+    const cleaned = displayTitle
+        .replace(/[/\\?%*:|"<>]/g, '-')
+        .replace(/\s+/g, ' ')
+        .trim()
+        .slice(0, 120);
+    const base = cleaned.length > 0 ? cleaned : 'attachment';
+    const ext = defaultExt.startsWith('.') ? defaultExt : `.${defaultExt}`;
+    const pattern = new RegExp(`${ext.replace('.', '\\.')}$`, 'i');
+    return pattern.test(base) ? base : `${base}${ext}`;
+}
+
+export { sanitizeAttachmentFilename };

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

@@ -0,0 +1,6 @@
+/** File attachments on a stored message. */
+function userTextFileAttachmentsFromMessage(message) {
+    return message.userTextFileAttachments ?? [];
+}
+
+export { userTextFileAttachmentsFromMessage };

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

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useState, useCallback, useEffect, useContext, useMemo } from 'react';
 import { MessageRole } from '../components/ui/Chat/Chat.types.js';
+import { normalizeUserTextFileAttachments } from '../components/ui/Chat/buildChatSendMessagePayload.js';
 import { stripJsonDashboardFences } from '../lib/dashboard-spec/stripJsonDashboardFences.js';
 import { LS } from '@homecode/ui';
 
@@ -181,13 +182,17 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
             return undefined;
         addScopeIdToRegistry(scopeId);
         const storedText = stripJsonDashboardFences(text);
-        const attachment = role === MessageRole.USER ? options?.userCsvAttachment : undefined;
+        const attachments = role === MessageRole.USER
+            ? options?.userTextFileAttachments
+            : undefined;
         const newMessage = {
             id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
             role,
             text: storedText,
             timestamp: Date.now(),
-            ...(attachment ? { userCsvAttachment: attachment } : {}),
+            ...(attachments?.length
+                ? { userTextFileAttachments: attachments }
+                : {}),
         };
         setChats(prev => {
             const scopeChats = prev[scopeId] ?? [];
@@ -232,7 +237,7 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
         }
         else {
             addMessage(scopeId, targetChatId, MessageRole.USER, message.displayText, {
-                userCsvAttachment: message.userCsvAttachment,
+                userTextFileAttachments: normalizeUserTextFileAttachments(message),
             });
         }
         const pendingChatSessionId = targetChatId;

package/dist/esm/index.js

@@ -23,6 +23,8 @@ export { Chat } from './components/ui/Chat/Chat.js';
 export { usedPresetIdsFromMessages } from './components/ui/Chat/chat-preset-utils.js';
 export { ChatChrome } from './components/ui/Chat/ChatChrome/ChatChrome.js';
 export { TEXT_ATTACHMENT_ACCEPT_PARTS, filterToTextAttachments } from './components/ui/Chat/chatAttachmentAccept.js';
+export { buildChatSendMessagePayload, displayTextFromSendPayload, normalizeUserTextFileAttachments } from './components/ui/Chat/buildChatSendMessagePayload.js';
+export { sanitizeAttachmentFilename } from './components/ui/Chat/sanitizeAttachmentFilename.js';
 export { ChatSheet } from './components/ui/Chat/ChatSheet/ChatSheet.js';
 export { useChatPanelChromeModel } from './components/ui/Chat/ChatSheet/useChatPanelChromeModel.js';
 export { ChatMessage } from './components/ui/Chat/ChatMessage/ChatMessage.js';

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

@@ -7,24 +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 = {
+/** USER-only: text file attached to a message; shown as downloadable file row(s). */
+export type UserTextFileAttachment = {
     displayName: string;
     filename: string;
     content: string;
 };
-/** Send full text to the chat API while showing `displayText` + optional CSV attachment in the UI. */
+/** Send full text to the chat API while showing `displayText` + optional file attachment(s) in the UI. */
 export type ChatSendMessagePayload = {
     apiMessage: string;
     displayText: string;
-    userCsvAttachment?: UserCsvAttachment;
+    userTextFileAttachments?: UserTextFileAttachment[];
 };
 export interface Message {
     id: string;
     role: MessageRole;
     text: string;
     timestamp: number;
-    userCsvAttachment?: UserCsvAttachment;
+    userTextFileAttachments?: UserTextFileAttachment[];
 }
 export interface Chat {
     session_id: string;
@@ -77,11 +77,15 @@ export interface ChatPromptProps {
     /** Staged files shown above the composer until send. */
     attachments?: ChatAttachmentDropItem[];
     onRemoveAttachment?: (index: number) => void;
+    /** HTML `accept` for the attach file picker; set with `onAttachmentFiles`. */
+    attachmentAccept?: string;
+    /** Called when the user picks files via the attach button. */
+    onAttachmentFiles?: (files: File[]) => void;
 }
 export interface ChatMessageProps {
     role: MessageRole;
     text: string;
-    userCsvAttachment?: UserCsvAttachment;
+    userTextFileAttachments?: UserTextFileAttachment[];
     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, userCsvAttachment, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage, scriptContinue, onScriptContinue, renderMessageChart, }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatMessage({ role, text, userTextFileAttachments, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage, scriptContinue, onScriptContinue, renderMessageChart, }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,2 +1,2 @@
 import type { ChatPromptProps } from '../Chat.types';
-export declare function ChatPrompt({ onSubmit, placeholder, className, footer, prefillMessage, attachments, onRemoveAttachment, disabled, }: ChatPromptProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatPrompt({ onSubmit, placeholder, className, footer, prefillMessage, attachments, onRemoveAttachment, disabled, attachmentAccept, onAttachmentFiles, }: ChatPromptProps): import("react/jsx-runtime").JSX.Element;

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

@@ -19,4 +19,4 @@ export interface ChatSheetProps extends Omit<UseChatPanelChromeModelInput, 'embe
      */
     inline?: boolean;
 }
-export declare function ChatSheet({ triggerLabel, triggerAriaLabel, actionsRef, renderTrigger, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, emptyState, inline, }: ChatSheetProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatSheet({ triggerLabel, triggerAriaLabel, actionsRef, renderTrigger, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, inline, }: ChatSheetProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+import type { ChatAttachmentDropItem, ChatSendMessagePayload, UserTextFileAttachment } from './Chat.types';
+/** Resolve file attachments on a send payload. */
+export declare function normalizeUserTextFileAttachments(payload: ChatSendMessagePayload): UserTextFileAttachment[];
+/**
+ * Build `sendMessage` input from composer text and staged drop items.
+ * Returns a plain string when there are no attachments.
+ */
+export declare function buildChatSendMessagePayload(displayText: string, attachments: readonly ChatAttachmentDropItem[]): string | ChatSendMessagePayload;
+/** Display text from a string or structured send payload. */
+export declare function displayTextFromSendPayload(message: string | ChatSendMessagePayload): string;

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

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

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

@@ -3,6 +3,8 @@ export { usedPresetIdsFromMessages } from './chat-preset-utils';
 export { ChatChrome } from './ChatChrome';
 export type { ChatChromeProps, ChatChromeResizeHandleConfig, } from './ChatChrome';
 export { TEXT_ATTACHMENT_ACCEPT_PARTS, filterToTextAttachments, } from './chatAttachmentAccept';
+export { buildChatSendMessagePayload, displayTextFromSendPayload, normalizeUserTextFileAttachments, } from './buildChatSendMessagePayload';
+export { sanitizeAttachmentFilename } from './sanitizeAttachmentFilename';
 export { ChatSheet } from './ChatSheet/ChatSheet';
 export { useChatPanelChromeModel } from './ChatSheet/useChatPanelChromeModel';
 export type { ChatSheetActions, ChatSheetProps } from './ChatSheet/ChatSheet';
@@ -10,6 +12,6 @@ export type { UseChatPanelChromeModelInput, UseChatPanelChromeModelResult, } fro
 export { ChatMessage } from './ChatMessage';
 export { ChatPrompt } from './ChatPrompt';
 export { ChatPresets } from './ChatPresets';
-export type { Chat as ChatType, ChatAttachmentDropItem, ChatSendMessagePayload, ChatProps, ChatPreset as ChatPresetType, Message, UserCsvAttachment, } from './Chat.types';
+export type { Chat as ChatType, ChatAttachmentDropItem, ChatSendMessagePayload, ChatProps, ChatPreset as ChatPresetType, Message, UserTextFileAttachment, } from './Chat.types';
 export { MessageRole } from './Chat.types';
 export { CsvIcon } from '../../icons/CsvIcon/CsvIcon';

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

@@ -0,0 +1,2 @@
+/** Safe download filename from a display title or original file name. */
+export declare function sanitizeAttachmentFilename(displayTitle: string, defaultExt?: string): string;

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

@@ -0,0 +1,3 @@
+import type { Message, UserTextFileAttachment } from './Chat.types';
+/** File attachments on a stored message. */
+export declare function userTextFileAttachmentsFromMessage(message: Pick<Message, 'userTextFileAttachments'>): UserTextFileAttachment[];

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

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
-import { type Chat, type ChatSendMessagePayload, MessageRole, type UserCsvAttachment } from '#uilib/components/ui/Chat/Chat.types';
+import { type Chat, type ChatSendMessagePayload, MessageRole, type UserTextFileAttachment } 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 { ChatSendMessagePayload, UserTextFileAttachment, } from '#uilib/components/ui/Chat/Chat.types';
 export type AddChatMessageOptions = {
-    userCsvAttachment?: UserCsvAttachment;
+    userTextFileAttachments?: UserTextFileAttachment[];
 };
 export interface ChatContextType {
     /** Returns the new session id, or undefined if no user / not created. */

package/package.json

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

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

@@ -11,18 +11,18 @@ 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 = {
+/** USER-only: text file attached to a message; shown as downloadable file row(s). */
+export type UserTextFileAttachment = {
   displayName: string;
   filename: string;
   content: string;
 };
 
-/** Send full text to the chat API while showing `displayText` + optional CSV attachment in the UI. */
+/** Send full text to the chat API while showing `displayText` + optional file attachment(s) in the UI. */
 export type ChatSendMessagePayload = {
   apiMessage: string;
   displayText: string;
-  userCsvAttachment?: UserCsvAttachment;
+  userTextFileAttachments?: UserTextFileAttachment[];
 };
 
 export interface Message {
@@ -30,7 +30,7 @@ export interface Message {
   role: MessageRole;
   text: string;
   timestamp: number;
-  userCsvAttachment?: UserCsvAttachment;
+  userTextFileAttachments?: UserTextFileAttachment[];
 }
 
 export interface Chat {
@@ -88,12 +88,16 @@ export interface ChatPromptProps {
   /** Staged files shown above the composer until send. */
   attachments?: ChatAttachmentDropItem[];
   onRemoveAttachment?: (index: number) => void;
+  /** HTML `accept` for the attach file picker; set with `onAttachmentFiles`. */
+  attachmentAccept?: string;
+  /** Called when the user picks files via the attach button. */
+  onAttachmentFiles?: (files: File[]) => void;
 }
 
 export interface ChatMessageProps {
   role: MessageRole;
   text: string;
-  userCsvAttachment?: UserCsvAttachment;
+  userTextFileAttachments?: UserTextFileAttachment[];
   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

@@ -198,7 +198,7 @@ export function ChatChrome({
                       key={msg.id}
                       role={msg.role}
                       text={msg.text}
-                      userCsvAttachment={msg.userCsvAttachment}
+                      userTextFileAttachments={msg.userTextFileAttachments}
                       onQuickReply={onQuickReply}
                       suppressedQuickReplyKeys={suppressedQuickReplyKeys}
                       quickReplyDisabled={isLoading}
@@ -284,6 +284,12 @@ export function ChatChrome({
               attachments={pendingAttachments}
               onRemoveAttachment={handleRemoveAttachment}
               prefillMessage={promptPrefill ?? undefined}
+              attachmentAccept={
+                attachmentsDropzoneEnabled ? attachmentAccept : undefined
+              }
+              onAttachmentFiles={
+                attachmentsDropzoneEnabled ? handleAttachmentFiles : undefined
+              }
             />
           </div>
         </Chat>

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

@@ -8,14 +8,15 @@ import {
   GENERATING_DASHBOARD_SYSTEM_TEXT,
   MessageRole,
 } from '../Chat.types';
+import { userTextFileAttachmentsFromMessage } from '../userTextFileAttachments';
 import { AgentMessageContent } from './AgentMessageContent';
 import S from './ChatMessage.styl';
-import { UserCsvAttachmentBubble } from './UserCsvAttachmentBubble';
+import { UserTextFileAttachmentBubble } from './UserTextFileAttachmentBubble';
 
 export function ChatMessage({
   role,
   text,
-  userCsvAttachment,
+  userTextFileAttachments,
   onQuickReply,
   suppressedQuickReplyKeys,
   quickReplyDisabled,
@@ -24,6 +25,9 @@ export function ChatMessage({
   onScriptContinue,
   renderMessageChart,
 }: ChatMessageProps) {
+  const fileAttachments = userTextFileAttachmentsFromMessage({
+    userTextFileAttachments,
+  });
   const isAssistant = role === MessageRole.ASSISTANT;
   const isSystem = role === MessageRole.SYSTEM;
 
@@ -53,9 +57,12 @@ export function ChatMessage({
           <div className={S.text}>
             <InteractiveContent text={text} />
           </div>
-          {userCsvAttachment ? (
-            <UserCsvAttachmentBubble attachment={userCsvAttachment} />
-          ) : null}
+          {fileAttachments.map(attachment => (
+            <UserTextFileAttachmentBubble
+              key={`${attachment.displayName}:${attachment.filename}`}
+              attachment={attachment}
+            />
+          ))}
         </div>
       )}
     </div>

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

@@ -0,0 +1,46 @@
+import { FileChip, type FileChipFormat } from '#uilib/components/ui/FileChip';
+import { downloadTextFile } from '#uilib/utils/downloadTextFile';
+
+import type { UserTextFileAttachment } from '../Chat.types';
+
+function formatFromFilename(filename: string): FileChipFormat {
+  const lower = filename.toLowerCase();
+  if (lower.endsWith('.csv')) return 'csv';
+  if (lower.endsWith('.pdf')) return 'pdf';
+  return 'text';
+}
+
+function mimeForFormat(format: FileChipFormat): string {
+  if (format === 'csv') return 'text/csv;charset=utf-8';
+  if (format === 'pdf') return 'application/pdf';
+  return 'text/plain;charset=utf-8';
+}
+
+function hintForFormat(format: FileChipFormat): string {
+  if (format === 'csv') return 'Download .CSV file';
+  if (format === 'pdf') return 'Download file';
+  return 'Download text file';
+}
+
+export function UserTextFileAttachmentBubble({
+  attachment,
+}: {
+  attachment: UserTextFileAttachment;
+}) {
+  const format = formatFromFilename(attachment.filename);
+
+  return (
+    <FileChip
+      name={attachment.displayName}
+      format={format}
+      hint={hintForFormat(format)}
+      onClick={() =>
+        downloadTextFile(
+          attachment.content,
+          attachment.filename,
+          mimeForFormat(format),
+        )
+      }
+    />
+  );
+}

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

@@ -19,6 +19,13 @@ INPUT_MAX_HEIGHT = 200px
   gap var(--p-3)
   width 100%
 
+.fileInput
+  display none
+
+.attachButton
+  flex-shrink 0
+  align-self flex-end
+
 .input
   flex 1
   min-width 0
@@ -61,10 +68,6 @@ INPUT_MAX_HEIGHT = 200px
       right -100%
       bottom -100%
 
-  .attachButton
-    background-color var(--page-color)
-    box-shadow 0 0 20px var(--background)
-
 .attachments
   display flex
   flex-wrap wrap

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

@@ -5,6 +5,7 @@ interface CssExports {
   'attachmentItem': string;
   'attachments': string;
   'composer': string;
+  'fileInput': string;
   'input': string;
   'root': string;
   'submitColumn': string;

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

@@ -1,8 +1,15 @@
 import cn from 'classnames';
-import { FormEvent, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import {
+  ChangeEvent,
+  FormEvent,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import useEvent from '#uilib/hooks/useEvent';
-import { SendHorizontalIcon } from 'lucide-react';
+import { PaperclipIcon, SendHorizontalIcon } from 'lucide-react';
 
 import { Button } from '../../Button';
 import { Input } from '../../Input';
@@ -20,9 +27,13 @@ export function ChatPrompt({
   attachments = [],
   onRemoveAttachment,
   disabled = false,
+  attachmentAccept,
+  onAttachmentFiles,
 }: ChatPromptProps) {
   const [message, setMessage] = useState('');
   const inputRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const showAttachButton = Boolean(attachmentAccept && onAttachmentFiles);
 
   useLayoutEffect(() => {
     const el = inputRef.current;
@@ -47,6 +58,14 @@ export function ChatPrompt({
     }
   };
 
+  const handleFileInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files ?? []);
+    e.target.value = '';
+    if (files.length > 0) {
+      onAttachmentFiles?.(files);
+    }
+  };
+
   useEvent({
     event: 'keydown',
     callback: (e: KeyboardEvent) => {
@@ -66,6 +85,35 @@ export function ChatPrompt({
         disabled={disabled}
       />
       <div className={S.composer}>
+        {showAttachButton ? (
+          <>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept={attachmentAccept}
+              multiple
+              className={S.fileInput}
+              disabled={disabled}
+              onChange={handleFileInputChange}
+            />
+            <Button
+              type="button"
+              variant="ghost"
+              icon
+              size="sm"
+              className={S.attachButton}
+              aria-label="Attach file"
+              disabled={disabled}
+              onClick={e => {
+                e.preventDefault();
+                fileInputRef.current?.click();
+              }}
+            >
+              <PaperclipIcon size={16} />
+            </Button>
+          </>
+        ) : null}
+
         <Input
           ref={inputRef}
           type="textarea"
@@ -85,15 +133,6 @@ export function ChatPrompt({
             <SendHorizontalIcon size={16} />
           </Button>
         </div>
-
-        {/* <Button
-          variant="outline"
-          size="sm"
-          onClick={e => e.preventDefault()}
-          className={S.attachButton}
-          >
-          <PaperclipIcon size={16} />
-          </Button> */}
       </div>
 
       {footer}

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

@@ -44,6 +44,9 @@ export function ChatSheet({
   onGenerateDashboard,
   renderMessageChart,
   emptyState,
+  allowedAttachments,
+  allowPdfAttachments,
+  onAttachmentsDropped,
   inline = false,
 }: ChatSheetProps) {
   const model = useChatPanelChromeModel({
@@ -55,6 +58,9 @@ export function ChatSheet({
     onGenerateDashboard,
     renderMessageChart,
     emptyState,
+    allowedAttachments,
+    allowPdfAttachments,
+    onAttachmentsDropped,
   });
 
   if (actionsRef) {

package/src/components/ui/Chat/ChatSheet/useChatPanelChromeModel.tsx

@@ -19,6 +19,10 @@ import {
   textHasQuickReplyMarkers,
 } from '#uilib/components/ui/Chat/ChatMessage/presetScript';
 import type { ChatPresetsLayout } from '#uilib/components/ui/Chat/ChatPresets';
+import {
+  buildChatSendMessagePayload,
+  displayTextFromSendPayload,
+} from '#uilib/components/ui/Chat/buildChatSendMessagePayload';
 import {
   formatChatTranscript,
   usedPresetIdsFromMessages,
@@ -462,10 +466,12 @@ export function useChatPanelChromeModel({
   );
 
   const handlePromptSubmit = useCallback(
-    async (message: string) => {
+    async (message: string, attachments?: ChatAttachmentDropItem[]) => {
       const chatId = currentChatId;
       if (!chatId) return;
 
+      const stagedAttachments = attachments ?? [];
+
       const quickBranches = quickReplyBranchesByChat[chatId];
       const graphActive = Boolean(
         quickBranches && Object.keys(quickBranches).length > 0,
@@ -585,8 +591,9 @@ export function useChatPanelChromeModel({
 
       try {
         if (chatId) endLocalDemoFlow(chatId);
-        await sendMessage(message);
-        onMessage?.(message);
+        const payload = buildChatSendMessagePayload(message, stagedAttachments);
+        await sendMessage(payload);
+        onMessage?.(displayTextFromSendPayload(payload));
       } catch (error) {
         logger.error('Error sending chat message:', error);
       }

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

@@ -0,0 +1,102 @@
+import type { ChatAttachmentDropItem } from './Chat.types';
+import {
+  buildChatSendMessagePayload,
+  displayTextFromSendPayload,
+  normalizeUserTextFileAttachments,
+} from './buildChatSendMessagePayload';
+
+function makeDropItem(
+  name: string,
+  text: string,
+  kind: 'text' | 'pdf' = 'text',
+): ChatAttachmentDropItem {
+  return {
+    file: { name } as File,
+    text,
+    kind,
+  };
+}
+
+describe('buildChatSendMessagePayload', () => {
+  it('returns trimmed string when there are no attachments', () => {
+    expect(buildChatSendMessagePayload('  hello  ', [])).toBe('hello');
+  });
+
+  it('builds payload with user text and full file bodies in apiMessage', () => {
+    const result = buildChatSendMessagePayload('Question', [
+      makeDropItem('data.csv', 'a,b\n1,2'),
+    ]);
+    expect(typeof result).toBe('object');
+    if (typeof result === 'string') {
+      throw new Error('expected payload object');
+    }
+    expect(result.displayText).toBe('Question');
+    expect(result.apiMessage).toBe('Question\n\na,b\n1,2');
+    expect(result.userTextFileAttachments).toHaveLength(1);
+    expect(result.userTextFileAttachments?.[0].displayName).toBe('data.csv');
+    expect(result.userTextFileAttachments?.[0].content).toBe('a,b\n1,2');
+    expect(result.userTextFileAttachments?.[0].filename).toMatch(/\.csv$/i);
+  });
+
+  it('uses first file name as displayText when message is empty', () => {
+    const result = buildChatSendMessagePayload('', [
+      makeDropItem('report.pdf', 'pdf text', 'pdf'),
+    ]);
+    if (typeof result === 'string') {
+      throw new Error('expected payload object');
+    }
+    expect(result.displayText).toBe('report.pdf');
+    expect(result.apiMessage).toBe('report.pdf\n\npdf text');
+    expect(result.userTextFileAttachments?.[0].filename).toMatch(/\.pdf$/i);
+  });
+
+  it('maps multiple attachments', () => {
+    const result = buildChatSendMessagePayload('Hi', [
+      makeDropItem('one.txt', 'first'),
+      makeDropItem('two.txt', 'second'),
+    ]);
+    if (typeof result === 'string') {
+      throw new Error('expected payload object');
+    }
+    expect(result.userTextFileAttachments).toHaveLength(2);
+    expect(result.apiMessage).toBe('Hi\n\nfirst\n\nsecond');
+  });
+});
+
+describe('normalizeUserTextFileAttachments', () => {
+  it('returns userTextFileAttachments or empty array', () => {
+    const attachment = {
+      displayName: 'data.csv',
+      filename: 'data.csv',
+      content: 'x',
+    };
+    expect(
+      normalizeUserTextFileAttachments({
+        apiMessage: 'a',
+        displayText: 'b',
+        userTextFileAttachments: [attachment],
+      }),
+    ).toEqual([attachment]);
+    expect(
+      normalizeUserTextFileAttachments({
+        apiMessage: 'a',
+        displayText: 'b',
+      }),
+    ).toEqual([]);
+  });
+});
+
+describe('displayTextFromSendPayload', () => {
+  it('returns string as-is', () => {
+    expect(displayTextFromSendPayload('plain')).toBe('plain');
+  });
+
+  it('returns displayText from payload', () => {
+    expect(
+      displayTextFromSendPayload({
+        apiMessage: 'full',
+        displayText: 'short',
+      }),
+    ).toBe('short');
+  });
+});

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

@@ -0,0 +1,80 @@
+import type {
+  ChatAttachmentDropItem,
+  ChatSendMessagePayload,
+  UserTextFileAttachment,
+} from './Chat.types';
+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 (name.endsWith('.csv')) return 'csv';
+  if (name.endsWith('.json')) return 'json';
+  if (name.endsWith('.md') || name.endsWith('.markdown')) return 'md';
+  if (name.endsWith('.html') || name.endsWith('.htm')) return 'html';
+  if (name.endsWith('.xml')) return 'xml';
+  if (name.endsWith('.yaml') || name.endsWith('.yml')) return 'yaml';
+  if (name.endsWith('.tsv')) return 'tsv';
+  if (name.endsWith('.ics')) return 'ics';
+  return 'txt';
+}
+
+function dropItemToUserAttachment(
+  item: ChatAttachmentDropItem,
+): UserTextFileAttachment {
+  const ext = defaultExtForAttachment(item);
+  return {
+    displayName: item.file.name,
+    filename: sanitizeAttachmentFilename(item.file.name, ext),
+    content: item.text,
+  };
+}
+
+function buildApiMessage(
+  displayText: string,
+  attachments: readonly ChatAttachmentDropItem[],
+): string {
+  const parts = [
+    displayText,
+    ...attachments.map(item => item.text.trim()).filter(Boolean),
+  ].filter(Boolean);
+  return parts.join('\n\n');
+}
+
+/** Resolve file attachments on a send payload. */
+export function normalizeUserTextFileAttachments(
+  payload: ChatSendMessagePayload,
+): UserTextFileAttachment[] {
+  return payload.userTextFileAttachments ?? [];
+}
+
+/**
+ * Build `sendMessage` input from composer text and staged drop items.
+ * Returns a plain string when there are no attachments.
+ */
+export function buildChatSendMessagePayload(
+  displayText: string,
+  attachments: readonly ChatAttachmentDropItem[],
+): string | ChatSendMessagePayload {
+  const trimmed = displayText.trim();
+  if (attachments.length === 0) {
+    return trimmed;
+  }
+
+  const userTextFileAttachments = attachments.map(dropItemToUserAttachment);
+  const resolvedDisplayText =
+    trimmed.length > 0 ? trimmed : userTextFileAttachments[0].displayName;
+
+  return {
+    apiMessage: buildApiMessage(resolvedDisplayText, attachments),
+    displayText: resolvedDisplayText,
+    userTextFileAttachments,
+  };
+}
+
+/** Display text from a string or structured send payload. */
+export function displayTextFromSendPayload(
+  message: string | ChatSendMessagePayload,
+): string {
+  return typeof message === 'string' ? message : message.displayText;
+}

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

@@ -9,6 +9,12 @@ export {
   TEXT_ATTACHMENT_ACCEPT_PARTS,
   filterToTextAttachments,
 } from './chatAttachmentAccept';
+export {
+  buildChatSendMessagePayload,
+  displayTextFromSendPayload,
+  normalizeUserTextFileAttachments,
+} from './buildChatSendMessagePayload';
+export { sanitizeAttachmentFilename } from './sanitizeAttachmentFilename';
 export { ChatSheet } from './ChatSheet/ChatSheet';
 export { useChatPanelChromeModel } from './ChatSheet/useChatPanelChromeModel';
 export type { ChatSheetActions, ChatSheetProps } from './ChatSheet/ChatSheet';
@@ -26,7 +32,7 @@ export type {
   ChatProps,
   ChatPreset as ChatPresetType,
   Message,
-  UserCsvAttachment,
+  UserTextFileAttachment,
 } from './Chat.types';
 export { MessageRole } from './Chat.types';
 export { CsvIcon } from '../../icons/CsvIcon/CsvIcon';

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

@@ -0,0 +1,15 @@
+/** Safe download filename from a display title or original file name. */
+export function sanitizeAttachmentFilename(
+  displayTitle: string,
+  defaultExt = 'txt',
+): string {
+  const cleaned = displayTitle
+    .replace(/[/\\?%*:|"<>]/g, '-')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .slice(0, 120);
+  const base = cleaned.length > 0 ? cleaned : 'attachment';
+  const ext = defaultExt.startsWith('.') ? defaultExt : `.${defaultExt}`;
+  const pattern = new RegExp(`${ext.replace('.', '\\.')}$`, 'i');
+  return pattern.test(base) ? base : `${base}${ext}`;
+}

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

@@ -0,0 +1,8 @@
+import type { Message, UserTextFileAttachment } from './Chat.types';
+
+/** File attachments on a stored message. */
+export function userTextFileAttachmentsFromMessage(
+  message: Pick<Message, 'userTextFileAttachments'>,
+): UserTextFileAttachment[] {
+  return message.userTextFileAttachments ?? [];
+}

package/src/contexts/chat-context.tsx

@@ -13,8 +13,9 @@ import {
   type ChatSendMessagePayload,
   type Message,
   MessageRole,
-  type UserCsvAttachment,
+  type UserTextFileAttachment,
 } from '#uilib/components/ui/Chat/Chat.types';
+import { normalizeUserTextFileAttachments } from '#uilib/components/ui/Chat/buildChatSendMessagePayload';
 import { stripJsonDashboardFences } from '#uilib/lib/dashboard-spec/stripJsonDashboardFences';
 import type { ChatResponse } from '#uilib/types/chat-api.types';
 import { LS } from '@homecode/ui';
@@ -26,14 +27,14 @@ export type SendChatMessageFn = (
 
 export type {
   ChatSendMessagePayload,
-  UserCsvAttachment,
+  UserTextFileAttachment,
 } 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;
+  userTextFileAttachments?: UserTextFileAttachment[];
 };
 
 export interface ChatContextType {
@@ -300,14 +301,18 @@ export function ChatProvider({
       if (userSwitchKey === null) return undefined;
       addScopeIdToRegistry(scopeId);
       const storedText = stripJsonDashboardFences(text);
-      const attachment =
-        role === MessageRole.USER ? options?.userCsvAttachment : undefined;
+      const attachments =
+        role === MessageRole.USER
+          ? options?.userTextFileAttachments
+          : undefined;
       const newMessage: Message = {
         id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
         role,
         text: storedText,
         timestamp: Date.now(),
-        ...(attachment ? { userCsvAttachment: attachment } : {}),
+        ...(attachments?.length
+          ? { userTextFileAttachments: attachments }
+          : {}),
       };
 
       setChats(prev => {
@@ -372,7 +377,7 @@ export function ChatProvider({
           MessageRole.USER,
           message.displayText,
           {
-            userCsvAttachment: message.userCsvAttachment,
+            userTextFileAttachments: normalizeUserTextFileAttachments(message),
           },
         );
       }

package/src/docs/pages/ChatUserCsvAttachmentPage.tsx

@@ -42,11 +42,13 @@ function makeUserMessageWithCsv(
     role: MessageRole.USER,
     text: displayText,
     timestamp: Date.now(),
-    userCsvAttachment: {
-      displayName,
-      filename: 'docs-sample.csv',
-      content: SAMPLE_CSV,
-    },
+    userTextFileAttachments: [
+      {
+        displayName,
+        filename: 'docs-sample.csv',
+        content: SAMPLE_CSV,
+      },
+    ],
   };
 }
 

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

@@ -1,10 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { FileChip } from '../../FileChip/FileChip.js';
-import { downloadTextFile } from '../../../../utils/downloadTextFile.js';
-
-const CSV_DOWNLOAD_HINT = 'Download .CSV file';
-function UserCsvAttachmentBubble({ attachment, }) {
-    return (jsx(FileChip, { name: attachment.displayName, format: "csv", hint: CSV_DOWNLOAD_HINT, onClick: () => downloadTextFile(attachment.content, attachment.filename, 'text/csv;charset=utf-8') }));
-}
-
-export { UserCsvAttachmentBubble };

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

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

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

@@ -1,27 +0,0 @@
-import { FileChip } from '#uilib/components/ui/FileChip';
-import { downloadTextFile } from '#uilib/utils/downloadTextFile';
-
-import type { UserCsvAttachment } from '../Chat.types';
-
-const CSV_DOWNLOAD_HINT = 'Download .CSV file';
-
-export function UserCsvAttachmentBubble({
-  attachment,
-}: {
-  attachment: UserCsvAttachment;
-}) {
-  return (
-    <FileChip
-      name={attachment.displayName}
-      format="csv"
-      hint={CSV_DOWNLOAD_HINT}
-      onClick={() =>
-        downloadTextFile(
-          attachment.content,
-          attachment.filename,
-          'text/csv;charset=utf-8',
-        )
-      }
-    />
-  );
-}