@melony/react 0.1.23 → 0.1.24

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
 import { ClientState, MelonyClient } from 'melony/client';
-import { Role, Event, UINode } from 'melony';
+import { Role, Event, Config, UINode } from 'melony';
 import { QueryClient } from '@tanstack/react-query';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -65,10 +65,7 @@ interface MelonyContextValue extends ClientState {
     }) => Promise<void>;
     reset: (events?: Event[]) => void;
     client: MelonyClient;
-    config?: {
-        starterPrompts: any[];
-        options: any[];
-    };
+    config?: Config;
 }
 declare const MelonyContext: React__default.Context<MelonyContextValue | undefined>;
 interface MelonyClientProviderProps {
@@ -156,8 +153,17 @@ interface ComposerProps {
     options?: ComposerOptionGroup[];
     autoFocus?: boolean;
     defaultSelectedIds?: string[];
+    fileAttachments?: {
+        enabled?: boolean;
+        accept?: string;
+        maxFiles?: number;
+        maxFileSize?: number;
+    };
+    accept?: string;
+    maxFiles?: number;
+    maxFileSize?: number;
 }
-declare function Composer({ value, onChange, onSubmit, placeholder, isLoading, className, options, autoFocus, defaultSelectedIds, }: ComposerProps): react_jsx_runtime.JSX.Element;
+declare function Composer({ value, onChange, onSubmit, placeholder, isLoading, className, options, autoFocus, defaultSelectedIds, fileAttachments, accept: legacyAccept, maxFiles: legacyMaxFiles, maxFileSize: legacyMaxFileSize, }: ComposerProps): react_jsx_runtime.JSX.Element;
 
 interface ChatHeaderProps {
     /**

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
 import { ClientState, MelonyClient } from 'melony/client';
-import { Role, Event, UINode } from 'melony';
+import { Role, Event, Config, UINode } from 'melony';
 import { QueryClient } from '@tanstack/react-query';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -65,10 +65,7 @@ interface MelonyContextValue extends ClientState {
     }) => Promise<void>;
     reset: (events?: Event[]) => void;
     client: MelonyClient;
-    config?: {
-        starterPrompts: any[];
-        options: any[];
-    };
+    config?: Config;
 }
 declare const MelonyContext: React__default.Context<MelonyContextValue | undefined>;
 interface MelonyClientProviderProps {
@@ -156,8 +153,17 @@ interface ComposerProps {
     options?: ComposerOptionGroup[];
     autoFocus?: boolean;
     defaultSelectedIds?: string[];
+    fileAttachments?: {
+        enabled?: boolean;
+        accept?: string;
+        maxFiles?: number;
+        maxFileSize?: number;
+    };
+    accept?: string;
+    maxFiles?: number;
+    maxFileSize?: number;
 }
-declare function Composer({ value, onChange, onSubmit, placeholder, isLoading, className, options, autoFocus, defaultSelectedIds, }: ComposerProps): react_jsx_runtime.JSX.Element;
+declare function Composer({ value, onChange, onSubmit, placeholder, isLoading, className, options, autoFocus, defaultSelectedIds, fileAttachments, accept: legacyAccept, maxFiles: legacyMaxFiles, maxFileSize: legacyMaxFileSize, }: ComposerProps): react_jsx_runtime.JSX.Element;
 
 interface ChatHeaderProps {
     /**

package/dist/index.js

@@ -10,7 +10,7 @@ import { twMerge } from 'tailwind-merge';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { cva } from 'class-variance-authority';
 import * as ICONS from '@tabler/icons-react';
-import { IconChevronDown, IconLoader2, IconArrowUp, IconPlus, IconMessage, IconTrash, IconHistory, IconX, IconArrowLeft, IconChevronLeft, IconChevronRight, IconUser, IconLogout, IconBrandGoogle, IconDeviceDesktop, IconMoon, IconSun, IconCheck, IconChevronUp, IconSelector } from '@tabler/icons-react';
+import { IconX, IconPaperclip, IconChevronDown, IconLoader2, IconArrowUp, IconPlus, IconMessage, IconTrash, IconHistory, IconArrowLeft, IconChevronLeft, IconChevronRight, IconUser, IconLogout, IconBrandGoogle, IconDeviceDesktop, IconMoon, IconSun, IconCheck, IconChevronUp, IconSelector } from '@tabler/icons-react';
 import { Menu } from '@base-ui/react/menu';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
@@ -563,11 +563,22 @@ function Composer({
   className,
   options = [],
   autoFocus = false,
-  defaultSelectedIds = []
+  defaultSelectedIds = [],
+  fileAttachments,
+  // Legacy props for backward compatibility
+  accept: legacyAccept,
+  maxFiles: legacyMaxFiles,
+  maxFileSize: legacyMaxFileSize
 }) {
+  const enabled = fileAttachments?.enabled !== false;
+  const accept = fileAttachments?.accept ?? legacyAccept;
+  const maxFiles = fileAttachments?.maxFiles ?? legacyMaxFiles ?? 10;
+  const maxFileSize = fileAttachments?.maxFileSize ?? legacyMaxFileSize ?? 10 * 1024 * 1024;
   const [selectedOptions, setSelectedOptions] = React10__default.useState(
     () => new Set(defaultSelectedIds)
   );
+  const [attachedFiles, setAttachedFiles] = React10__default.useState([]);
+  const fileInputRef = React10__default.useRef(null);
   const toggleOption = (id, groupOptions, type = "multiple") => {
     const next = new Set(selectedOptions);
     if (type === "single") {
@@ -587,7 +598,34 @@ function Composer({
     }
     setSelectedOptions(next);
   };
-  const handleInternalSubmit = () => {
+  const handleFileSelect = (e) => {
+    const files = Array.from(e.target.files || []);
+    const validFiles = files.filter((file) => {
+      if (file.size > maxFileSize) {
+        console.warn(`File ${file.name} exceeds maximum size of ${maxFileSize} bytes`);
+        return false;
+      }
+      return true;
+    });
+    const remainingSlots = maxFiles - attachedFiles.length;
+    const filesToAdd = validFiles.slice(0, remainingSlots);
+    if (filesToAdd.length < validFiles.length) {
+      console.warn(`Only ${filesToAdd.length} files can be added (max: ${maxFiles})`);
+    }
+    setAttachedFiles((prev) => [...prev, ...filesToAdd]);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+  const handleRemoveFile = (index) => {
+    setAttachedFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+  const formatFileSize = (bytes) => {
+    if (bytes < 1024) return bytes + " B";
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+    return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+  };
+  const handleInternalSubmit = async () => {
     const state = {};
     options.forEach((group) => {
       const selectedInGroup = group.options.filter(
@@ -604,85 +642,178 @@ function Composer({
         }
       }
     });
+    if (attachedFiles.length > 0) {
+      const filePromises = attachedFiles.map((file) => {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => {
+            try {
+              const base64 = reader.result;
+              if (!base64) {
+                reject(new Error("FileReader returned empty result"));
+                return;
+              }
+              const base64Data = base64.includes(",") ? base64.split(",")[1] : base64;
+              resolve({
+                name: file.name,
+                type: file.type,
+                size: file.size,
+                data: base64Data
+              });
+            } catch (error) {
+              reject(error);
+            }
+          };
+          reader.onerror = (error) => {
+            reject(new Error(`Failed to read file ${file.name}: ${error}`));
+          };
+          reader.onabort = () => {
+            reject(new Error(`File read aborted for ${file.name}`));
+          };
+          reader.readAsDataURL(file);
+        });
+      });
+      try {
+        const convertedFiles = await Promise.all(filePromises);
+        if (convertedFiles.length > 0) {
+          state.files = convertedFiles;
+        }
+      } catch (error) {
+        console.error("Failed to convert files to base64:", error);
+      }
+    }
     onSubmit(state);
+    setAttachedFiles([]);
   };
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
-      handleInternalSubmit();
+      handleInternalSubmit().catch(console.error);
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: cn("relative flex flex-col w-full", className), children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col w-full border-input border-[1.5px] rounded-3xl bg-background shadow-sm focus-within:border-ring transition-all p-2", children: [
-    /* @__PURE__ */ jsx(
-      Textarea,
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex flex-col w-full", className), children: [
+    enabled && attachedFiles.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 flex flex-wrap gap-2", children: attachedFiles.map((file, index) => /* @__PURE__ */ jsxs(
+      "div",
       {
-        value,
-        onChange: (e) => onChange(e.target.value),
-        onKeyDown: handleKeyDown,
-        placeholder,
-        className: "min-h-[44px] max-h-[200px] border-none bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 px-3 py-2 text-[15px] resize-none",
-        autoFocus
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center px-1", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: options.map((group) => {
-        const selectedInGroup = group.options.filter(
-          (o) => selectedOptions.has(o.id)
-        );
-        const label = selectedInGroup.length === 0 ? group.label : selectedInGroup.length === 1 ? selectedInGroup[0].label : `${group.label} (${selectedInGroup.length})`;
-        const isSingle = group.type === "single";
-        return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        className: "flex items-center gap-2 px-3 py-1.5 bg-muted rounded-lg text-sm",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate max-w-[200px]", title: file.name, children: file.name }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: formatFileSize(file.size) }),
           /* @__PURE__ */ jsx(
-            DropdownMenuTrigger,
+            "button",
             {
-              render: /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "sm",
-                  className: cn(
-                    selectedInGroup.length > 0 ? "text-foreground bg-muted/50" : "text-muted-foreground"
-                  ),
-                  children: [
-                    label,
-                    /* @__PURE__ */ jsx(IconChevronDown, { className: "h-3 w-3 opacity-50" })
-                  ]
-                }
-              )
+              type: "button",
+              onClick: () => handleRemoveFile(index),
+              className: "ml-1 hover:bg-muted-foreground/20 rounded p-0.5 transition-colors",
+              "aria-label": "Remove file",
+              children: /* @__PURE__ */ jsx(IconX, { className: "h-3.5 w-3.5" })
             }
-          ),
-          /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-56", children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
-            /* @__PURE__ */ jsx(DropdownMenuLabel, { children: group.label }),
-            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-            group.options.map((option) => /* @__PURE__ */ jsx(
-              DropdownMenuCheckboxItem,
-              {
-                checked: selectedOptions.has(option.id),
-                onCheckedChange: () => toggleOption(
-                  option.id,
-                  group.options,
-                  isSingle ? "single" : "multiple"
-                ),
-                onSelect: (e) => e.preventDefault(),
-                children: option.label
-              },
-              option.id
-            ))
-          ] }) })
-        ] }, group.id);
-      }) }),
+          )
+        ]
+      },
+      index
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col w-full border-input border-[1.5px] rounded-3xl bg-background shadow-sm focus-within:border-ring transition-all p-2", children: [
       /* @__PURE__ */ jsx(
-        Button,
+        Textarea,
         {
-          type: "submit",
-          disabled: !value.trim() && !isLoading || isLoading,
-          size: "icon-lg",
-          onClick: handleInternalSubmit,
-          children: isLoading ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ jsx(IconArrowUp, { className: "h-5 w-5" })
+          value,
+          onChange: (e) => onChange(e.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder,
+          className: "min-h-[44px] max-h-[200px] border-none bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 px-3 py-2 text-[15px] resize-none",
+          autoFocus
         }
-      )
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center px-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                multiple: true,
+                accept,
+                onChange: handleFileSelect,
+                className: "hidden",
+                disabled: isLoading || attachedFiles.length >= maxFiles
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                onClick: () => fileInputRef.current?.click(),
+                disabled: isLoading || attachedFiles.length >= maxFiles,
+                className: "text-muted-foreground",
+                title: attachedFiles.length >= maxFiles ? `Maximum ${maxFiles} files allowed` : "Attach file",
+                children: /* @__PURE__ */ jsx(IconPaperclip, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          options.map((group) => {
+            const selectedInGroup = group.options.filter(
+              (o) => selectedOptions.has(o.id)
+            );
+            const label = selectedInGroup.length === 0 ? group.label : selectedInGroup.length === 1 ? selectedInGroup[0].label : `${group.label} (${selectedInGroup.length})`;
+            const isSingle = group.type === "single";
+            return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(
+                DropdownMenuTrigger,
+                {
+                  render: /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      className: cn(
+                        selectedInGroup.length > 0 ? "text-foreground bg-muted/50" : "text-muted-foreground"
+                      ),
+                      children: [
+                        label,
+                        /* @__PURE__ */ jsx(IconChevronDown, { className: "h-3 w-3 opacity-50" })
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-56", children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+                /* @__PURE__ */ jsx(DropdownMenuLabel, { children: group.label }),
+                /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                group.options.map((option) => /* @__PURE__ */ jsx(
+                  DropdownMenuCheckboxItem,
+                  {
+                    checked: selectedOptions.has(option.id),
+                    onCheckedChange: () => toggleOption(
+                      option.id,
+                      group.options,
+                      isSingle ? "single" : "multiple"
+                    ),
+                    onSelect: (e) => e.preventDefault(),
+                    children: option.label
+                  },
+                  option.id
+                ))
+              ] }) })
+            ] }, group.id);
+          })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "submit",
+            disabled: !value.trim() && attachedFiles.length === 0 && !isLoading || isLoading,
+            size: "icon-lg",
+            onClick: () => handleInternalSubmit().catch(console.error),
+            children: isLoading ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ jsx(IconArrowUp, { className: "h-5 w-5" })
+          }
+        )
+      ] })
     ] })
-  ] }) });
+  ] });
 }
 function Card({
   className,
@@ -2356,13 +2487,14 @@ function Thread({
   }, [messages]);
   const handleSubmit = async (state, overrideInput) => {
     const text = (overrideInput ?? input).trim();
-    if (!text || isLoading) return;
+    const hasFiles = state?.files && Array.isArray(state.files) && state.files.length > 0;
+    if (!text && !hasFiles || isLoading) return;
     if (!overrideInput) setInput("");
     await sendEvent(
       {
         type: "text",
         role: "user",
-        data: { content: text }
+        data: { content: text || "" }
       },
       { state: { ...state, threadId: activeThreadId ?? void 0 } }
     );
@@ -2420,7 +2552,8 @@ function Thread({
             isLoading,
             options,
             autoFocus,
-            defaultSelectedIds: allDefaultSelectedIds
+            defaultSelectedIds: allDefaultSelectedIds,
+            fileAttachments: config?.fileAttachments
           }
         ) }) })
       ]