@sybilion/uilib 1.3.12 → 1.3.15

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

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

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,50 @@
+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';
+  if (lower.endsWith('.xlsx')) return 'text';
+  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, filename: string): string {
+  const lower = filename.toLowerCase();
+  if (format === 'csv') return 'Download .CSV file';
+  if (format === 'pdf') return 'Download file';
+  if (lower.endsWith('.docx')) return 'Download Word document';
+  if (lower.endsWith('.xlsx')) return 'Download spreadsheet';
+  return 'Download text file';
+}
+
+export function UserTextFileAttachmentBubble({
+  attachment,
+}: {
+  attachment: UserTextFileAttachment;
+}) {
+  const format = formatFromFilename(attachment.filename);
+
+  return (
+    <FileChip
+      name={attachment.displayName}
+      format={format}
+      hint={hintForFormat(format, attachment.filename)}
+      onClick={() =>
+        downloadTextFile(
+          attachment.content,
+          attachment.filename,
+          mimeForFormat(format),
+        )
+      }
+    />
+  );
+}

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

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

package/src/components/ui/Chat/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,116 @@
+import type { ChatAttachmentDropItem } from './Chat.types';
+import {
+  buildChatSendMessagePayload,
+  displayTextFromSendPayload,
+  normalizeUserTextFileAttachments,
+} from './buildChatSendMessagePayload';
+
+function makeDropItem(
+  name: string,
+  text: string,
+  kind: ChatAttachmentDropItem['kind'] = '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('uses docx and xlsx extensions from kind', () => {
+    const docx = buildChatSendMessagePayload('', [
+      makeDropItem('brief.docx', 'word body', 'docx'),
+    ]);
+    const xlsx = buildChatSendMessagePayload('', [
+      makeDropItem('sheet.xlsx', 'a,b', 'xlsx'),
+    ]);
+    if (typeof docx === 'string' || typeof xlsx === 'string') {
+      throw new Error('expected payload object');
+    }
+    expect(docx.userTextFileAttachments?.[0].filename).toMatch(/\.docx$/i);
+    expect(xlsx.userTextFileAttachments?.[0].filename).toMatch(/\.xlsx$/i);
+  });
+
+  it('maps multiple attachments', () => {
+    const result = buildChatSendMessagePayload('Hi', [
+      makeDropItem('one.txt', 'first'),
+      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,82 @@
+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 (item.kind === 'docx' || name.endsWith('.docx')) return 'docx';
+  if (item.kind === 'xlsx' || name.endsWith('.xlsx')) return 'xlsx';
+  if (name.endsWith('.csv')) return 'csv';
+  if (name.endsWith('.json')) return 'json';
+  if (name.endsWith('.md') || name.endsWith('.markdown')) return 'md';
+  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/chatAttachmentAccept.test.ts

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

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

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

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

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

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

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

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

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