@sybilion/uilib 1.3.10 → 1.3.12

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

@@ -57,9 +57,15 @@ export type ScriptCompletePayload = {
     presetId: string;
     answers: Record<string, string>;
 };
+export type ChatAttachmentDropItem = {
+    file: File;
+    /** UTF-8 text for native text files; PDF yields extracted text. */
+    text: string;
+    kind: 'text' | 'pdf';
+};
 export interface ChatPromptProps {
     className?: string;
-    onSubmit: (message: string) => void;
+    onSubmit: (message: string, attachments?: ChatAttachmentDropItem[]) => void;
     placeholder?: string;
     presets?: ChatPreset[];
     disabled?: boolean;
@@ -68,6 +74,13 @@ export interface ChatPromptProps {
     prefillMessage?: string | null;
     /** Disclaimer above composer; default true. ChatChrome sets false when thread has messages. */
     showNotice?: boolean;
+    /** 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;

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

@@ -1,2 +1,2 @@
 import type { ChatChromeProps } from './ChatChrome.types';
-export declare function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPresets, messages, onQuickReply, suppressedQuickReplyKeys, isLoading, scriptContinueLabel, onScriptContinue, renderMessageChart, showBranchActionsRow, showSyntheticBranchButtons, unusedBranchKeys, isScriptComplete, onGenerateDashboard, generatingDashboard, onGenerateDashboardClick, showInlinePresets, isLastMessageFromUser, scrollRef, effectiveScopeId, onPromptSubmit, onChatDeleted, promptPrefill, footerClassName, emptyState, }: ChatChromeProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPresets, messages, onQuickReply, suppressedQuickReplyKeys, isLoading, scriptContinueLabel, onScriptContinue, renderMessageChart, showBranchActionsRow, showSyntheticBranchButtons, unusedBranchKeys, isScriptComplete, onGenerateDashboard, generatingDashboard, onGenerateDashboardClick, showInlinePresets, isLastMessageFromUser, scrollRef, effectiveScopeId, onPromptSubmit, onChatDeleted, promptPrefill, footerClassName, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, }: ChatChromeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react';
-import type { Message } from '#uilib/components/ui/Chat/Chat.types';
+import type { ChatAttachmentDropItem, Message } from '#uilib/components/ui/Chat/Chat.types';
 import type { ChatEmptyStateProps } from '#uilib/components/ui/Chat/ChatEmptyState/ChatEmptyState.types';
 import type { ChatPresetsLayout } from '#uilib/components/ui/Chat/ChatPresets';
 import type { ScrollRef } from '@homecode/ui';
@@ -10,6 +10,7 @@ export type ChatChromeResizeHandleConfig = {
     onDragWidth: (rawPx: number) => void;
     onDragComplete: (finalRawPx: number) => void;
 };
+export type { ChatAttachmentDropItem };
 export interface ChatChromeProps {
     showResizeHandle: boolean;
     resizeHandle: ChatChromeResizeHandleConfig | undefined;
@@ -35,10 +36,16 @@ export interface ChatChromeProps {
     isLastMessageFromUser: boolean;
     scrollRef: RefObject<ScrollRef | null>;
     effectiveScopeId: string;
-    onPromptSubmit: (message: string) => void | Promise<void>;
+    onPromptSubmit: (message: string, attachments?: ChatAttachmentDropItem[]) => void | Promise<void>;
     onChatDeleted: (sessionId: string) => void;
     /** `?prompt=` deep link text for one-shot composer pre-fill. */
     promptPrefill?: string | null;
     footerClassName?: string;
     emptyState?: ChatEmptyStateProps;
+    /** MIME types / extensions (filtered to text-only allowlist). Enables dropzone when non-empty. */
+    allowedAttachments?: readonly string[];
+    /** When true, PDF files are accepted and parsed to plain text on drop. */
+    allowPdfAttachments?: boolean;
+    /** Optional hook when attachments are sent with a message. */
+    onAttachmentsDropped?: (items: ChatAttachmentDropItem[]) => void | Promise<void>;
 }

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

@@ -1,2 +1,2 @@
 export { ChatChrome } from './ChatChrome';
-export type { ChatChromeProps, ChatChromeResizeHandleConfig, } from './ChatChrome.types';
+export type { ChatAttachmentDropItem, ChatChromeProps, ChatChromeResizeHandleConfig, } from './ChatChrome.types';

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, showNotice, }: 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/ChatPrompt/ChatPromptAttachments.d.ts

@@ -0,0 +1,8 @@
+import type { ChatAttachmentDropItem } from '../Chat.types';
+type ChatPromptAttachmentsProps = {
+    attachments: ChatAttachmentDropItem[];
+    onRemove: (index: number) => void;
+    disabled?: boolean;
+};
+export declare function ChatPromptAttachments({ attachments, onRemove, disabled, }: ChatPromptAttachmentsProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,5 +1,6 @@
 import { ChatPreset, type ScriptCompletePayload } from '#uilib/components/ui/Chat/Chat.types';
 import type { ChatChromeProps } from '../ChatChrome';
+import type { ChatAttachmentDropItem } from '../ChatChrome/ChatChrome.types';
 import type { ChatEmptyStateProps } from '../ChatEmptyState/ChatEmptyState.types';
 export type UseChatPanelChromeModelInput = {
     /** When true, skip sidebar chat slot, URL `?chat=`, and portal behavior (e.g. page main content). */
@@ -16,6 +17,11 @@ export type UseChatPanelChromeModelInput = {
     renderMessageChart?: () => React.ReactNode;
     /** Forwarded to `ChatChrome` when the thread is empty. */
     emptyState?: ChatEmptyStateProps;
+    /** MIME types / extensions for text-only chat attachments (filtered by uilib allowlist). */
+    allowedAttachments?: readonly string[];
+    /** When true, PDF drops are accepted and parsed to plain text. */
+    allowPdfAttachments?: boolean;
+    onAttachmentsDropped?: (items: ChatAttachmentDropItem[]) => void | Promise<void>;
 };
 export type UseChatPanelChromeModelResult = {
     chromeProps: ChatChromeProps;
@@ -25,4 +31,4 @@ export type UseChatPanelChromeModelResult = {
     newChat: () => void;
     chatPanelContainer: HTMLElement | null;
 };
-export declare function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, emptyState, }: UseChatPanelChromeModelInput): UseChatPanelChromeModelResult;
+export declare function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, }: UseChatPanelChromeModelInput): UseChatPanelChromeModelResult;

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

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

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

@@ -0,0 +1,2 @@
+import type { ChatAttachmentDropItem } from './Chat.types';
+export declare function extractChatAttachmentItems(files: File[], allowPdfAttachments: boolean): Promise<ChatAttachmentDropItem[]>;

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

@@ -0,0 +1,2 @@
+/** Best-effort plain text from PDF; pages separated with lightweight markdown headings. */
+export declare function extractPdfFileToText(file: File): Promise<string>;

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

@@ -2,6 +2,7 @@ export { Chat } from './Chat';
 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 { ChatSheet } from './ChatSheet/ChatSheet';
 export { useChatPanelChromeModel } from './ChatSheet/useChatPanelChromeModel';
 export type { ChatSheetActions, ChatSheetProps } from './ChatSheet/ChatSheet';
@@ -9,6 +10,6 @@ export type { UseChatPanelChromeModelInput, UseChatPanelChromeModelResult, } fro
 export { ChatMessage } from './ChatMessage';
 export { ChatPrompt } from './ChatPrompt';
 export { ChatPresets } from './ChatPresets';
-export type { Chat as ChatType, ChatSendMessagePayload, ChatProps, ChatPreset as ChatPresetType, Message, UserCsvAttachment, } from './Chat.types';
+export type { Chat as ChatType, ChatAttachmentDropItem, ChatSendMessagePayload, ChatProps, ChatPreset as ChatPresetType, Message, UserCsvAttachment, } from './Chat.types';
 export { MessageRole } from './Chat.types';
 export { CsvIcon } from '../../icons/CsvIcon/CsvIcon';

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

@@ -4,6 +4,8 @@ interface DropZoneBaseProps {
     error?: string | null;
     disabled?: boolean;
     ghost?: boolean;
+    /** When `container`, drag overlay fills the parent bounds instead of the viewport. */
+    overlayScope?: 'viewport' | 'container';
     id?: string;
     className?: string;
 }

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

@@ -0,0 +1,2 @@
+import type { FileChipProps } from './FileChip.types';
+export declare function FileChip({ name, format, hint, onClick, onRemove, className, }: FileChipProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+export type FileChipFormat = 'csv' | 'pdf' | 'text';
+export type FileChipProps = {
+    name: string;
+    format: FileChipFormat;
+    hint: string;
+    onClick?: () => void;
+    onRemove?: () => void;
+    disabled?: boolean;
+    className?: string;
+};

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

@@ -0,0 +1,2 @@
+export { FileChip } from './FileChip';
+export type { FileChipProps, FileChipFormat } from './FileChip.types';

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

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

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

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

package/dist/esm/types/src/index.d.ts

@@ -24,6 +24,7 @@ export * from './components/ui/Dialog';
 export * from './components/ui/Drawer';
 export * from './components/ui/DropdownMenu';
 export * from './components/ui/DropZone/DropZone';
+export * from './components/ui/FileChip';
 export * from './components/ui/FlickeringGrid';
 export * from './components/ui/Foldable';
 export * from './components/ui/Gap/Gap';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.10",
+  "version": "1.3.12",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",
@@ -103,6 +103,7 @@
     "lightweight-charts": "^5.0.9",
     "lucide-react": "^0.546.0",
     "motion": "^12.23.12",
+    "pdfjs-dist": "^4.10.38",
     "recharts": "^3.2.1",
     "standard-version": "^9.5.0",
     "style-inject": "^0.3.0",

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

@@ -67,9 +67,16 @@ export type ScriptCompletePayload = {
   answers: Record<string, string>;
 };
 
+export type ChatAttachmentDropItem = {
+  file: File;
+  /** UTF-8 text for native text files; PDF yields extracted text. */
+  text: string;
+  kind: 'text' | 'pdf';
+};
+
 export interface ChatPromptProps {
   className?: string;
-  onSubmit: (message: string) => void;
+  onSubmit: (message: string, attachments?: ChatAttachmentDropItem[]) => void;
   placeholder?: string;
   presets?: ChatPreset[];
   disabled?: boolean;
@@ -78,6 +85,13 @@ export interface ChatPromptProps {
   prefillMessage?: string | null;
   /** Disclaimer above composer; default true. ChatChrome sets false when thread has messages. */
   showNotice?: boolean;
+  /** 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 {

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

@@ -57,6 +57,11 @@
   flex-direction column
   position relative
 
+.attachmentDropzone
+  position absolute
+  inset 0
+  z-index 200
+
 .scrollWrapper
   position relative
   flex 1
@@ -102,6 +107,21 @@
   border-top 1px solid var(--border)
   box-shadow 0 0 20px 16px var(--background)
 
+.notice
+  position absolute
+  top calc(-1 * var(--p-7))
+  left 0
+  right 0
+  margin-bottom var(--p-1)
+
+  font-size var(--text-xs)
+  text-align center
+  color var(--muted-foreground)
+  pointer-events none
+
+  @media (max-width MOBILE)
+    font-size 10px
+
 .loader
   // z-index 1
   // position absolute

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

@@ -1,12 +1,14 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'attachmentDropzone': string;
   'branchBtnWrap': string;
   'branchRow': string;
   'chatResizeHandle': string;
   'content': string;
   'footer': string;
   'loader': string;
+  'notice': string;
   'panelClose': string;
   'panelHeader': string;
   'root': string;

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

@@ -1,5 +1,5 @@
 import cn from 'classnames';
-import { useEffect } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import {
   displayLabelForBranchKeyFromMessages,
@@ -10,9 +10,17 @@ import { Scroll } from '@homecode/ui';
 import { ChartLineIcon, PaperPlaneRightIcon, X } from '@phosphor-icons/react';
 
 import { Button } from '../../Button';
+import { DropZone } from '../../DropZone/DropZone';
 import { PanelResizeHandle } from '../../Sidebar/Sidebar';
 import SidebarStem from '../../Sidebar/Sidebar.styl';
 import { Chat } from '../Chat';
+import type { ChatAttachmentDropItem } from '../Chat.types';
+import {
+  buildAcceptAttr,
+  filterToTextAttachments,
+  isAttachmentsDropzoneEnabled,
+} from '../chatAttachmentAccept';
+import { extractChatAttachmentItems } from '../chatAttachmentExtract';
 import S from './ChatChrome.styl';
 import type { ChatChromeProps } from './ChatChrome.types';
 
@@ -45,7 +53,65 @@ export function ChatChrome({
   promptPrefill,
   footerClassName,
   emptyState,
+  allowedAttachments,
+  allowPdfAttachments = false,
+  onAttachmentsDropped,
 }: ChatChromeProps) {
+  const filteredAllowedAttachments = useMemo(
+    () => filterToTextAttachments(allowedAttachments),
+    [allowedAttachments],
+  );
+  const attachmentsDropzoneEnabled = isAttachmentsDropzoneEnabled(
+    allowedAttachments,
+    allowPdfAttachments,
+  );
+  const attachmentAccept = useMemo(
+    () => buildAcceptAttr(filteredAllowedAttachments, allowPdfAttachments),
+    [filteredAllowedAttachments, allowPdfAttachments],
+  );
+  const [pendingAttachments, setPendingAttachments] = useState<
+    ChatAttachmentDropItem[]
+  >([]);
+  const [isExtractingAttachments, setIsExtractingAttachments] = useState(false);
+  const promptBusy = isLoading || isExtractingAttachments;
+
+  const handleAttachmentFiles = useCallback(
+    (files: File[]) => {
+      if (promptBusy || files.length === 0) return;
+
+      setIsExtractingAttachments(true);
+      void extractChatAttachmentItems(files, allowPdfAttachments)
+        .then(items => {
+          if (items.length > 0) {
+            setPendingAttachments(prev => [...prev, ...items]);
+          }
+        })
+        .finally(() => setIsExtractingAttachments(false));
+    },
+    [allowPdfAttachments, promptBusy],
+  );
+
+  const handleRemoveAttachment = useCallback((index: number) => {
+    setPendingAttachments(prev => prev.filter((_, i) => i !== index));
+  }, []);
+
+  const handlePromptSubmitWithAttachments = useCallback(
+    (message: string, submittedAttachments?: ChatAttachmentDropItem[]) => {
+      const trimmed = message.trim();
+      const attachments = submittedAttachments ?? [];
+      if (!trimmed && attachments.length === 0) return;
+
+      void onPromptSubmit(trimmed, attachments);
+
+      if (attachments.length > 0 && onAttachmentsDropped) {
+        void onAttachmentsDropped(attachments);
+      }
+
+      setPendingAttachments([]);
+    },
+    [onAttachmentsDropped, onPromptSubmit],
+  );
+
   useEffect(() => {
     if (isEmpty) return;
 
@@ -91,6 +157,18 @@ export function ChatChrome({
         ) : null}
       </div>
       <div className={S.content}>
+        {attachmentsDropzoneEnabled ? (
+          <DropZone
+            accept={attachmentAccept}
+            label="Drop text files to attach"
+            multiple
+            ghost
+            overlayScope="container"
+            disabled={promptBusy}
+            className={S.attachmentDropzone}
+            onFiles={handleAttachmentFiles}
+          />
+        ) : null}
         <Chat
           isEmpty={isEmpty}
           scopeId={effectiveScopeId}
@@ -195,11 +273,23 @@ export function ChatChrome({
           )}
 
           <div className={cn(S.footer, footerClassName)}>
+            {isEmpty ? (
+              <div className={S.notice}>
+                Forecast Assistant can make mistakes.
+              </div>
+            ) : null}
             <Chat.Prompt
-              onSubmit={onPromptSubmit}
-              disabled={isLoading}
+              onSubmit={handlePromptSubmitWithAttachments}
+              disabled={promptBusy}
+              attachments={pendingAttachments}
+              onRemoveAttachment={handleRemoveAttachment}
               prefillMessage={promptPrefill ?? undefined}
-              showNotice={isEmpty}
+              attachmentAccept={
+                attachmentsDropzoneEnabled ? attachmentAccept : undefined
+              }
+              onAttachmentFiles={
+                attachmentsDropzoneEnabled ? handleAttachmentFiles : undefined
+              }
             />
           </div>
         </Chat>

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

@@ -1,6 +1,9 @@
 import type { RefObject } from 'react';
 
-import type { Message } from '#uilib/components/ui/Chat/Chat.types';
+import type {
+  ChatAttachmentDropItem,
+  Message,
+} from '#uilib/components/ui/Chat/Chat.types';
 import type { ChatEmptyStateProps } from '#uilib/components/ui/Chat/ChatEmptyState/ChatEmptyState.types';
 import type { ChatPresetsLayout } from '#uilib/components/ui/Chat/ChatPresets';
 import type { ScrollRef } from '@homecode/ui';
@@ -13,6 +16,8 @@ export type ChatChromeResizeHandleConfig = {
   onDragComplete: (finalRawPx: number) => void;
 };
 
+export type { ChatAttachmentDropItem };
+
 export interface ChatChromeProps {
   showResizeHandle: boolean;
   resizeHandle: ChatChromeResizeHandleConfig | undefined;
@@ -40,10 +45,21 @@ export interface ChatChromeProps {
   isLastMessageFromUser: boolean;
   scrollRef: RefObject<ScrollRef | null>;
   effectiveScopeId: string;
-  onPromptSubmit: (message: string) => void | Promise<void>;
+  onPromptSubmit: (
+    message: string,
+    attachments?: ChatAttachmentDropItem[],
+  ) => void | Promise<void>;
   onChatDeleted: (sessionId: string) => void;
   /** `?prompt=` deep link text for one-shot composer pre-fill. */
   promptPrefill?: string | null;
   footerClassName?: string;
   emptyState?: ChatEmptyStateProps;
+  /** MIME types / extensions (filtered to text-only allowlist). Enables dropzone when non-empty. */
+  allowedAttachments?: readonly string[];
+  /** When true, PDF files are accepted and parsed to plain text on drop. */
+  allowPdfAttachments?: boolean;
+  /** Optional hook when attachments are sent with a message. */
+  onAttachmentsDropped?: (
+    items: ChatAttachmentDropItem[],
+  ) => void | Promise<void>;
 }

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

@@ -1,5 +1,6 @@
 export { ChatChrome } from './ChatChrome';
 export type {
+  ChatAttachmentDropItem,
   ChatChromeProps,
   ChatChromeResizeHandleConfig,
 } from './ChatChrome.types';

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

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

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

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

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

@@ -1,8 +1,7 @@
+import { FileChip } from '#uilib/components/ui/FileChip';
 import { downloadTextFile } from '#uilib/utils/downloadTextFile';
 
-import { CsvIcon } from '../../../icons/CsvIcon/CsvIcon';
 import type { UserCsvAttachment } from '../Chat.types';
-import S from './ChatMessage.styl';
 
 const CSV_DOWNLOAD_HINT = 'Download .CSV file';
 
@@ -12,10 +11,10 @@ export function UserCsvAttachmentBubble({
   attachment: UserCsvAttachment;
 }) {
   return (
-    <button
-      type="button"
-      className={S.userCsvCard}
-      aria-label={`${CSV_DOWNLOAD_HINT}: ${attachment.displayName}`}
+    <FileChip
+      name={attachment.displayName}
+      format="csv"
+      hint={CSV_DOWNLOAD_HINT}
       onClick={() =>
         downloadTextFile(
           attachment.content,
@@ -23,14 +22,6 @@ export function UserCsvAttachmentBubble({
           'text/csv;charset=utf-8',
         )
       }
-    >
-      <div className={S.userCsvCardIcon}>
-        <CsvIcon size={32} />
-      </div>
-      <div className={S.userCsvCardContent}>
-        <div className={S.userCsvCardTitle}>{attachment.displayName}</div>
-        <div className={S.userCsvCardSubtitle}>{CSV_DOWNLOAD_HINT}</div>
-      </div>
-    </button>
+    />
   );
 }

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

@@ -19,20 +19,12 @@ INPUT_MAX_HEIGHT = 200px
   gap var(--p-3)
   width 100%
 
-.notice
-  position absolute
-  top calc(-1 * var(--p-12))
-  left 0
-  right 0
-  margin-bottom var(--p-1)
+.fileInput
+  display none
 
-  font-size var(--text-xs)
-  text-align center
-  color var(--muted-foreground)
-  pointer-events none
-
-  @media (max-width MOBILE)
-    font-size 10px
+.attachButton
+  flex-shrink 0
+  align-self flex-end
 
 .input
   flex 1
@@ -76,6 +68,13 @@ 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
+  gap var(--p-2)
+  margin-bottom var(--p-2)
+
+.attachmentItem
+  flex 1 1 300px
+  max-width 300px
+  min-width 0

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

@@ -2,9 +2,11 @@
 // Please do not change this file!
 interface CssExports {
   'attachButton': string;
+  'attachmentItem': string;
+  'attachments': string;
   'composer': string;
+  'fileInput': string;
   'input': string;
-  'notice': string;
   'root': string;
   'submitColumn': string;
 }