@sybilion/uilib 1.3.11 → 1.3.12

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

@@ -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/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/types/src/components/ui/Chat/Chat.types.d.ts

@@ -77,6 +77,10 @@ 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;

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/package.json

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

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

@@ -88,6 +88,10 @@ 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 {

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

@@ -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/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}