@sybilion/uilib 1.3.12 → 1.3.15

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

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

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

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

package/src/components/ui/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/ChatAttachmentsDropzonePage.tsx

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

package/src/docs/pages/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',
-        )
-      }
-    />
-  );
-}