@sybilion/uilib 1.3.9 → 1.3.11

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

@@ -19,21 +19,6 @@ 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)
-
-  font-size var(--text-xs)
-  text-align center
-  color var(--muted-foreground)
-  pointer-events none
-
-  @media (max-width MOBILE)
-    font-size 10px
-
 .input
   flex 1
   min-width 0
@@ -79,3 +64,14 @@ INPUT_MAX_HEIGHT = 200px
   .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,10 @@
 // Please do not change this file!
 interface CssExports {
   'attachButton': string;
+  'attachmentItem': string;
+  'attachments': string;
   'composer': string;
   'input': string;
-  'notice': string;
   'root': string;
   'submitColumn': string;
 }

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

@@ -9,6 +9,7 @@ import { Input } from '../../Input';
 import type { ChatPromptProps } from '../Chat.types';
 import { syncChatPromptTextareaHeight } from './ChatPrompt.helpers';
 import S from './ChatPrompt.styl';
+import { ChatPromptAttachments } from './ChatPromptAttachments';
 
 export function ChatPrompt({
   onSubmit,
@@ -16,7 +17,9 @@ export function ChatPrompt({
   className,
   footer,
   prefillMessage,
-  showNotice = true,
+  attachments = [],
+  onRemoveAttachment,
+  disabled = false,
 }: ChatPromptProps) {
   const [message, setMessage] = useState('');
   const inputRef = useRef<HTMLTextAreaElement>(null);
@@ -35,10 +38,11 @@ export function ChatPrompt({
 
   const handleSubmit = (e: FormEvent | KeyboardEvent) => {
     const trimmedMessage = message.trim();
+    const hasAttachments = attachments.length > 0;
 
-    if (trimmedMessage) {
+    if (trimmedMessage || hasAttachments) {
       e.preventDefault();
-      onSubmit(trimmedMessage);
+      onSubmit(trimmedMessage, hasAttachments ? attachments : undefined);
       setMessage('');
     }
   };
@@ -56,11 +60,12 @@ export function ChatPrompt({
 
   return (
     <form onSubmit={handleSubmit} className={cn(S.root, className)}>
+      <ChatPromptAttachments
+        attachments={attachments}
+        onRemove={index => onRemoveAttachment?.(index)}
+        disabled={disabled}
+      />
       <div className={S.composer}>
-        {showNotice ? (
-          <div className={S.notice}>Forecast Assistant can make mistakes.</div>
-        ) : null}
-
         <Input
           ref={inputRef}
           type="textarea"
@@ -72,7 +77,11 @@ export function ChatPrompt({
         />
 
         <div className={S.submitColumn}>
-          <Button type="submit" size="sm" disabled={!message.trim()}>
+          <Button
+            type="submit"
+            size="sm"
+            disabled={disabled || (!message.trim() && attachments.length === 0)}
+          >
             <SendHorizontalIcon size={16} />
           </Button>
         </div>

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

@@ -0,0 +1,34 @@
+import { FileChip } from '#uilib/components/ui/FileChip';
+
+import type { ChatAttachmentDropItem } from '../Chat.types';
+import S from './ChatPrompt.styl';
+
+type ChatPromptAttachmentsProps = {
+  attachments: ChatAttachmentDropItem[];
+  onRemove: (index: number) => void;
+  disabled?: boolean;
+};
+
+export function ChatPromptAttachments({
+  attachments,
+  onRemove,
+  disabled = false,
+}: ChatPromptAttachmentsProps) {
+  if (attachments.length === 0) return null;
+
+  return (
+    <div className={S.attachments}>
+      {attachments.map((item, index) => (
+        <FileChip
+          key={`${item.file.name}-${index}`}
+          className={S.attachmentItem}
+          name={item.file.name}
+          format={item.kind === 'pdf' ? 'pdf' : 'text'}
+          hint={item.kind === 'pdf' ? 'PDF' : 'Text file'}
+          onRemove={() => onRemove(index)}
+          disabled={disabled}
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -87,17 +87,18 @@ export function ChatSelector({
           </SelectContent>
         </Select>
       </div>
-      <Button
-        type="button"
-        variant="ghost"
-        size="sm"
-        className={S.deleteBtn}
-        aria-label="Delete chat"
-        disabled={!currentChatId || chats.length === 0}
-        onClick={handleDeleteChat}
-      >
-        <Trash2Icon size={16} />
-      </Button>
+      {currentChatId && chats.length > 0 && (
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className={S.deleteBtn}
+          aria-label="Delete chat"
+          onClick={handleDeleteChat}
+        >
+          <Trash2Icon size={16} />
+        </Button>
+      )}
     </div>
   );
 }

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

@@ -1,19 +1,19 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  'branchBtnWrap': string;
-  'branchRow': string;
-  'chatResizeHandle': string;
-  'content': string;
-  'footer': string;
-  'loader': string;
-  'panelClose': string;
-  'panelHeader': string;
-  'panelRoot': string;
-  'scroll': string;
-  'scrollInner': string;
-  'scrollWrapper': string;
-  'scrollbar': string;
+  branchBtnWrap: string;
+  branchRow: string;
+  chatResizeHandle: string;
+  content: string;
+  footer: string;
+  loader: string;
+  panelClose: string;
+  panelHeader: string;
+  panelRoot: string;
+  scroll: string;
+  scrollInner: string;
+  scrollWrapper: string;
+  scrollbar: string;
 }
 export const cssExports: CssExports;
 export default cssExports;

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

@@ -39,6 +39,7 @@ import { ScrollRef } from '@homecode/ui';
 import { useSidebar } from '../../Sidebar/Sidebar';
 import { Chat } from '../Chat';
 import type { ChatChromeProps } from '../ChatChrome';
+import type { ChatAttachmentDropItem } from '../ChatChrome/ChatChrome.types';
 import type { ChatEmptyStateProps } from '../ChatEmptyState/ChatEmptyState.types';
 
 export type UseChatPanelChromeModelInput = {
@@ -56,6 +57,13 @@ 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 = {
@@ -101,6 +109,9 @@ export function useChatPanelChromeModel({
   onGenerateDashboard,
   renderMessageChart,
   emptyState,
+  allowedAttachments,
+  allowPdfAttachments,
+  onAttachmentsDropped,
 }: UseChatPanelChromeModelInput): UseChatPanelChromeModelResult {
   const effectiveScopeId = scopeId ?? NO_SCOPE_FALLBACK;
   const isMobile = useIsMobile();
@@ -998,6 +1009,9 @@ export function useChatPanelChromeModel({
     onChatDeleted: endLocalDemoFlow,
     promptPrefill: promptLinkPrefill,
     emptyState,
+    allowedAttachments,
+    allowPdfAttachments,
+    onAttachmentsDropped,
   };
 
   const toggleOpen = () => onOpenChange(!isOpen);

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

@@ -11,7 +11,10 @@ export function normalizePresetMatchText(s: string): string {
   return s.trim().normalize('NFC');
 }
 
-function presetMatchesUserText(presetText: string, userTextNorm: string): boolean {
+function presetMatchesUserText(
+  presetText: string,
+  userTextNorm: string,
+): boolean {
   const presetNorm = normalizePresetMatchText(presetText);
   if (!presetNorm) return false;
   if (userTextNorm === presetNorm) return true;

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

@@ -0,0 +1,70 @@
+/** MIME types and extensions accepted for chat text attachments. */
+export const TEXT_ATTACHMENT_ACCEPT_PARTS = [
+  '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',
+] as const;
+
+export const PDF_ATTACHMENT_ACCEPT_PARTS = ['application/pdf', '.pdf'] as const;
+
+const TEXT_ATTACHMENT_ACCEPT_SET = new Set<string>(
+  TEXT_ATTACHMENT_ACCEPT_PARTS.map(part => part.toLowerCase()),
+);
+
+/** Keep only tokens from `parts` that appear in the text attachment allowlist. */
+export function filterToTextAttachments(
+  parts: readonly string[] | undefined,
+): string[] {
+  if (!parts?.length) return [];
+  return parts.filter(part =>
+    TEXT_ATTACHMENT_ACCEPT_SET.has(part.trim().toLowerCase()),
+  );
+}
+
+export function buildAcceptAttr(
+  filteredTextParts: readonly string[],
+  allowPdf: boolean,
+): string {
+  const parts = [...filteredTextParts];
+  if (allowPdf) {
+    parts.push(...PDF_ATTACHMENT_ACCEPT_PARTS);
+  }
+  return parts.join(',');
+}
+
+export function isPdfFile(file: File): boolean {
+  const type = file.type.toLowerCase();
+  if (type === 'application/pdf') return true;
+  return file.name.toLowerCase().endsWith('.pdf');
+}
+
+export function isAttachmentsDropzoneEnabled(
+  allowedAttachments: readonly string[] | undefined,
+  allowPdfAttachments: boolean | undefined,
+): boolean {
+  return (
+    filterToTextAttachments(allowedAttachments).length > 0 ||
+    Boolean(allowPdfAttachments)
+  );
+}

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

@@ -0,0 +1,33 @@
+import type { ChatAttachmentDropItem } from './Chat.types';
+import { isPdfFile } from './chatAttachmentAccept';
+import { extractPdfFileToText } from './chatPdfExtract';
+
+function readTextFile(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result ?? ''));
+    reader.onerror = () =>
+      reject(reader.error ?? new Error(`Failed to read ${file.name}`));
+    reader.readAsText(file);
+  });
+}
+
+export async function extractChatAttachmentItems(
+  files: File[],
+  allowPdfAttachments: boolean,
+): Promise<ChatAttachmentDropItem[]> {
+  const items = await Promise.all(
+    files.map(async file => {
+      if (isPdfFile(file)) {
+        if (!allowPdfAttachments) return null;
+        const text = await extractPdfFileToText(file);
+        return { file, text, kind: 'pdf' as const };
+      }
+
+      const text = await readTextFile(file);
+      return { file, text, kind: 'text' as const };
+    }),
+  );
+
+  return items.filter((item): item is ChatAttachmentDropItem => item != null);
+}

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

@@ -0,0 +1,37 @@
+let workerConfigured = false;
+
+async function configurePdfWorker(
+  pdfjs: typeof import('pdfjs-dist/legacy/build/pdf.mjs'),
+): Promise<void> {
+  if (workerConfigured) return;
+
+  const version = pdfjs.version ?? '4.10.38';
+  pdfjs.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${version}/legacy/build/pdf.worker.min.mjs`;
+  workerConfigured = true;
+}
+
+/** Best-effort plain text from PDF; pages separated with lightweight markdown headings. */
+export async function extractPdfFileToText(file: File): Promise<string> {
+  const pdfjs = await import('pdfjs-dist/legacy/build/pdf.mjs');
+  await configurePdfWorker(pdfjs);
+
+  const data = new Uint8Array(await file.arrayBuffer());
+  const doc = await pdfjs.getDocument({ data }).promise;
+  const pageTexts: string[] = [];
+
+  for (let pageNumber = 1; pageNumber <= doc.numPages; pageNumber += 1) {
+    const page = await doc.getPage(pageNumber);
+    const content = await page.getTextContent();
+    const pageText = content.items
+      .map(item => ('str' in item ? item.str : ''))
+      .join(' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    if (pageText) {
+      pageTexts.push(`## Page ${pageNumber}\n\n${pageText}`);
+    }
+  }
+
+  return pageTexts.join('\n\n');
+}

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

@@ -5,6 +5,10 @@ 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';
@@ -17,6 +21,7 @@ export { ChatPrompt } from './ChatPrompt';
 export { ChatPresets } from './ChatPresets';
 export type {
   Chat as ChatType,
+  ChatAttachmentDropItem,
   ChatSendMessagePayload,
   ChatProps,
   ChatPreset as ChatPresetType,

package/src/components/ui/DropZone/DropZone.styl

@@ -5,6 +5,14 @@
   flex-direction column
   gap var(--p-2)
 
+.rootContained
+  position relative
+  width 100%
+  height 100%
+
+.rootDragging
+  pointer-events auto
+
 .dropArea
   position relative
   border 2px dashed var(--border)
@@ -42,8 +50,24 @@
     border-color var(--primary-color)
     background-color var(--page-color-alpha-800)
 
+  &.isDraggingContained
+    position absolute
+    top 0
+    left 0
+    width 100%
+    height 100%
+    z-index 1
+    display flex
+    align-items center
+    justify-content center
+    border-radius var(--p-4)
+
+    border-color var(--primary-color)
+    background-color var(--page-color-alpha-800)
+
   &:hover:not(.disabled)
   &.isDragging
+  &.isDraggingContained
     border 2px dashed var(--muted-border)
 
     :global(.dark) &

package/src/components/ui/DropZone/DropZone.styl.d.ts

@@ -6,8 +6,11 @@ interface CssExports {
   'error': string;
   'fileInput': string;
   'isDragging': string;
+  'isDraggingContained': string;
   'label': string;
   'root': string;
+  'rootContained': string;
+  'rootDragging': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

package/src/components/ui/DropZone/DropZone.tsx

@@ -1,3 +1,4 @@
+import cn from 'classnames';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import S from './DropZone.styl';
@@ -8,6 +9,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;
 }
@@ -59,39 +62,49 @@ export function DropZone(props: DropZoneProps) {
     error,
     disabled = false,
     ghost = false,
+    overlayScope = 'viewport',
     id,
     className,
   } = props;
   const [isDragging, setIsDragging] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
   const dropAreaRef = useRef<HTMLDivElement>(null);
   const inputId =
     id || `dropzone-file-input-${Math.random().toString(36).substr(2, 9)}`;
 
-  const handleDrop = useCallback(
-    (e: React.DragEvent<HTMLDivElement>) => {
-      e.preventDefault();
-      setIsDragging(false);
+  const dropProcessedRef = useRef(false);
 
-      if (disabled) return;
+  const emitDroppedFiles = useCallback(
+    (files: FileList) => {
+      if (disabled || dropProcessedRef.current || files.length === 0) return;
+
+      const list = Array.from(files).filter(f => matchesAccept(f, accept));
+      if (list.length === 0) return;
 
-      const list = Array.from(e.dataTransfer.files).filter(f =>
-        matchesAccept(f, accept),
-      );
+      dropProcessedRef.current = true;
 
       if (props.multiple === true) {
-        if (list.length > 0) {
-          props.onFiles(list);
-        }
+        props.onFiles(list);
       } else {
-        const file = list[0];
-        if (file) {
-          props.onFile(file);
-        }
+        props.onFile(list[0]!);
       }
     },
     [accept, disabled, props],
   );
 
+  const handleDrop = useCallback(
+    (e: React.DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+
+      if (disabled) return;
+
+      emitDroppedFiles(e.dataTransfer.files);
+    },
+    [disabled, emitDroppedFiles],
+  );
+
   const handleFileInput = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       if (disabled) return;
@@ -116,12 +129,20 @@ export function DropZone(props: DropZoneProps) {
   );
 
   useEffect(() => {
-    // Find closest dialog or fall back to body
-    const dialog = dropAreaRef.current?.closest('[role="dialog"]');
-    const targetElement = (dialog as HTMLElement) || document.body;
+    const root = rootRef.current;
+    if (!root) return;
+
+    const targetElement =
+      overlayScope === 'container'
+        ? root.parentElement
+        : ((root.closest('[role="dialog"]') as HTMLElement | null) ??
+          document.body);
+
+    if (!targetElement) return;
 
     const handleGlobalDragOver = (e: DragEvent) => {
       e.preventDefault();
+      dropProcessedRef.current = false;
       setIsDragging(true);
     };
 
@@ -136,30 +157,62 @@ export function DropZone(props: DropZoneProps) {
       }
     };
 
-    const handleGlobalDrop = () => {
+    const handleGlobalDropPrevent = (e: DragEvent) => {
+      e.preventDefault();
+    };
+
+    const handleGlobalDropFinalize = (e: DragEvent) => {
+      if (overlayScope === 'container' && e.dataTransfer?.files?.length) {
+        emitDroppedFiles(e.dataTransfer.files);
+      }
       setIsDragging(false);
     };
 
     targetElement.addEventListener('dragover', handleGlobalDragOver);
     targetElement.addEventListener('dragleave', handleGlobalDragLeave);
-    targetElement.addEventListener('drop', handleGlobalDrop);
+    targetElement.addEventListener('drop', handleGlobalDropPrevent, true);
+    targetElement.addEventListener('drop', handleGlobalDropFinalize);
 
     return () => {
       targetElement.removeEventListener('dragover', handleGlobalDragOver);
       targetElement.removeEventListener('dragleave', handleGlobalDragLeave);
-      targetElement.removeEventListener('drop', handleGlobalDrop);
+      targetElement.removeEventListener('drop', handleGlobalDropPrevent, true);
+      targetElement.removeEventListener('drop', handleGlobalDropFinalize);
     };
-  }, []);
+  }, [emitDroppedFiles, overlayScope]);
 
   const shouldShowDropArea = !ghost || isDragging;
   const multiple = props.multiple === true;
 
+  const isContainerOverlay = overlayScope === 'container';
+
   return (
-    <div className={`${S.root} ${className || ''}`}>
+    <div
+      ref={rootRef}
+      className={cn(
+        S.root,
+        isContainerOverlay && S.rootContained,
+        isDragging && isContainerOverlay && S.rootDragging,
+        className,
+      )}
+      style={
+        isContainerOverlay
+          ? { pointerEvents: isDragging ? 'auto' : 'none' }
+          : undefined
+      }
+    >
       {shouldShowDropArea && (
         <div
           ref={dropAreaRef}
-          className={`${S.dropArea} ${isDragging ? S.isDragging : ''} ${disabled ? S.disabled : ''}`}
+          className={cn(
+            S.dropArea,
+            isDragging
+              ? isContainerOverlay
+                ? S.isDraggingContained
+                : S.isDragging
+              : '',
+            disabled ? S.disabled : '',
+          )}
           onDrop={handleDrop}
         >
           <input