@sero-ai/ui 0.3.0 → 0.3.2

package/dist/components/ai-elements/prompt-input.cjs

@@ -0,0 +1,306 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _createStarExport(obj) { Object.keys(obj) .filter((key) => key !== "default" && key !== "__esModule") .forEach((key) => { if (exports.hasOwnProperty(key)) { return; } Object.defineProperty(exports, key, {enumerable: true, configurable: true, get: () => obj[key]}); }); } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+var _jsxruntime = require('react/jsx-runtime');
+var _inputgroup = require('../ui/input-group');
+var _utils = require('../../lib/utils');
+var _nanoid = require('nanoid');
+
+
+
+
+
+
+var _react = require('react');
+
+
+
+
+var _promptinputcontext = require('./prompt-input-context'); _createStarExport(_promptinputcontext);
+
+var _promptinputtextarea = require('./prompt-input-textarea'); _createStarExport(_promptinputtextarea);
+var _promptinputelements = require('./prompt-input-elements'); _createStarExport(_promptinputelements);
+const convertBlobUrlToDataUrl = async (url) => {
+  try {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result);
+      reader.onerror = () => resolve(null);
+      reader.readAsDataURL(blob);
+    });
+  } catch (e2) {
+    return null;
+  }
+};
+const PromptInput = ({
+  className,
+  accept,
+  multiple,
+  globalDrop,
+  syncHiddenInput,
+  maxFiles,
+  maxFileSize,
+  onError,
+  onSubmit,
+  children,
+  ...props
+}) => {
+  const controller = _promptinputcontext.useOptionalPromptInputController.call(void 0, );
+  const usingProvider = !!controller;
+  const inputRef = _react.useRef.call(void 0, null);
+  const formRef = _react.useRef.call(void 0, null);
+  const [items, setItems] = _react.useState.call(void 0, []);
+  const files = usingProvider ? controller.attachments.files : items;
+  const [referencedSources, setReferencedSources] = _react.useState.call(void 0, []);
+  const filesRef = _react.useRef.call(void 0, files);
+  _react.useEffect.call(void 0, () => {
+    filesRef.current = files;
+  }, [files]);
+  const openFileDialogLocal = _react.useCallback.call(void 0, () => {
+    _optionalChain([inputRef, 'access', _ => _.current, 'optionalAccess', _2 => _2.click, 'call', _3 => _3()]);
+  }, []);
+  const matchesAccept = _react.useCallback.call(void 0, 
+    (f) => {
+      if (!accept || accept.trim() === "") return true;
+      const patterns = accept.split(",").map((s) => s.trim()).filter(Boolean);
+      return patterns.some((pattern) => {
+        if (pattern.endsWith("/*")) {
+          const prefix = pattern.slice(0, -1);
+          return f.type.startsWith(prefix);
+        }
+        return f.type === pattern;
+      });
+    },
+    [accept]
+  );
+  const addLocal = _react.useCallback.call(void 0, 
+    (fileList) => {
+      const incoming = [...fileList];
+      const accepted = incoming.filter((f) => matchesAccept(f));
+      if (incoming.length && accepted.length === 0) {
+        _optionalChain([onError, 'optionalCall', _4 => _4({ code: "accept", message: "No files match the accepted types." })]);
+        return;
+      }
+      const withinSize = (f) => maxFileSize ? f.size <= maxFileSize : true;
+      const sized = accepted.filter(withinSize);
+      if (accepted.length > 0 && sized.length === 0) {
+        _optionalChain([onError, 'optionalCall', _5 => _5({ code: "max_file_size", message: "All files exceed the maximum size." })]);
+        return;
+      }
+      setItems((prev) => {
+        const capacity = typeof maxFiles === "number" ? Math.max(0, maxFiles - prev.length) : void 0;
+        const capped = typeof capacity === "number" ? sized.slice(0, capacity) : sized;
+        if (typeof capacity === "number" && sized.length > capacity) {
+          _optionalChain([onError, 'optionalCall', _6 => _6({ code: "max_files", message: "Too many files. Some were not added." })]);
+        }
+        const next = [];
+        for (const file of capped) {
+          next.push({ filename: file.name, id: _nanoid.nanoid.call(void 0, ), mediaType: file.type, type: "file", url: URL.createObjectURL(file) });
+        }
+        return [...prev, ...next];
+      });
+    },
+    [matchesAccept, maxFiles, maxFileSize, onError]
+  );
+  const removeLocal = _react.useCallback.call(void 0, 
+    (id) => setItems((prev) => {
+      const found = prev.find((file) => file.id === id);
+      if (_optionalChain([found, 'optionalAccess', _7 => _7.url])) URL.revokeObjectURL(found.url);
+      return prev.filter((file) => file.id !== id);
+    }),
+    []
+  );
+  const addWithProviderValidation = _react.useCallback.call(void 0, 
+    (fileList) => {
+      const incoming = [...fileList];
+      const accepted = incoming.filter((f) => matchesAccept(f));
+      if (incoming.length && accepted.length === 0) {
+        _optionalChain([onError, 'optionalCall', _8 => _8({ code: "accept", message: "No files match the accepted types." })]);
+        return;
+      }
+      const withinSize = (f) => maxFileSize ? f.size <= maxFileSize : true;
+      const sized = accepted.filter(withinSize);
+      if (accepted.length > 0 && sized.length === 0) {
+        _optionalChain([onError, 'optionalCall', _9 => _9({ code: "max_file_size", message: "All files exceed the maximum size." })]);
+        return;
+      }
+      const capacity = typeof maxFiles === "number" ? Math.max(0, maxFiles - files.length) : void 0;
+      const capped = typeof capacity === "number" ? sized.slice(0, capacity) : sized;
+      if (typeof capacity === "number" && sized.length > capacity) {
+        _optionalChain([onError, 'optionalCall', _10 => _10({ code: "max_files", message: "Too many files. Some were not added." })]);
+      }
+      if (capped.length > 0) _optionalChain([controller, 'optionalAccess', _11 => _11.attachments, 'access', _12 => _12.add, 'call', _13 => _13(capped)]);
+    },
+    [matchesAccept, maxFileSize, maxFiles, onError, files.length, controller]
+  );
+  const clearAttachments = _react.useCallback.call(void 0, 
+    () => usingProvider ? _optionalChain([controller, 'optionalAccess', _14 => _14.attachments, 'access', _15 => _15.clear, 'call', _16 => _16()]) : setItems((prev) => {
+      for (const file of prev) {
+        if (file.url) URL.revokeObjectURL(file.url);
+      }
+      return [];
+    }),
+    [usingProvider, controller]
+  );
+  const clearReferencedSources = _react.useCallback.call(void 0, () => setReferencedSources([]), []);
+  const add = usingProvider ? addWithProviderValidation : addLocal;
+  const remove = usingProvider ? controller.attachments.remove : removeLocal;
+  const openFileDialog = usingProvider ? controller.attachments.openFileDialog : openFileDialogLocal;
+  const clear = _react.useCallback.call(void 0, () => {
+    clearAttachments();
+    clearReferencedSources();
+  }, [clearAttachments, clearReferencedSources]);
+  _react.useEffect.call(void 0, () => {
+    if (!usingProvider) return;
+    controller.__registerFileInput(inputRef, () => _optionalChain([inputRef, 'access', _17 => _17.current, 'optionalAccess', _18 => _18.click, 'call', _19 => _19()]));
+  }, [usingProvider, controller]);
+  _react.useEffect.call(void 0, () => {
+    if (syncHiddenInput && inputRef.current && files.length === 0) {
+      inputRef.current.value = "";
+    }
+  }, [files, syncHiddenInput]);
+  _react.useEffect.call(void 0, () => {
+    const form = formRef.current;
+    if (!form || globalDrop) return;
+    const onDragOver = (e) => {
+      if (_optionalChain([e, 'access', _20 => _20.dataTransfer, 'optionalAccess', _21 => _21.types, 'optionalAccess', _22 => _22.includes, 'call', _23 => _23("Files")])) e.preventDefault();
+    };
+    const onDrop = (e) => {
+      if (_optionalChain([e, 'access', _24 => _24.dataTransfer, 'optionalAccess', _25 => _25.types, 'optionalAccess', _26 => _26.includes, 'call', _27 => _27("Files")])) e.preventDefault();
+      if (_optionalChain([e, 'access', _28 => _28.dataTransfer, 'optionalAccess', _29 => _29.files]) && e.dataTransfer.files.length > 0) add(e.dataTransfer.files);
+    };
+    form.addEventListener("dragover", onDragOver);
+    form.addEventListener("drop", onDrop);
+    return () => {
+      form.removeEventListener("dragover", onDragOver);
+      form.removeEventListener("drop", onDrop);
+    };
+  }, [add, globalDrop]);
+  _react.useEffect.call(void 0, () => {
+    if (!globalDrop) return;
+    const onDragOver = (e) => {
+      if (_optionalChain([e, 'access', _30 => _30.dataTransfer, 'optionalAccess', _31 => _31.types, 'optionalAccess', _32 => _32.includes, 'call', _33 => _33("Files")])) e.preventDefault();
+    };
+    const onDrop = (e) => {
+      if (_optionalChain([e, 'access', _34 => _34.dataTransfer, 'optionalAccess', _35 => _35.types, 'optionalAccess', _36 => _36.includes, 'call', _37 => _37("Files")])) e.preventDefault();
+      if (_optionalChain([e, 'access', _38 => _38.dataTransfer, 'optionalAccess', _39 => _39.files]) && e.dataTransfer.files.length > 0) add(e.dataTransfer.files);
+    };
+    document.addEventListener("dragover", onDragOver);
+    document.addEventListener("drop", onDrop);
+    return () => {
+      document.removeEventListener("dragover", onDragOver);
+      document.removeEventListener("drop", onDrop);
+    };
+  }, [add, globalDrop]);
+  _react.useEffect.call(void 0, 
+    () => () => {
+      if (!usingProvider) {
+        for (const f of filesRef.current) {
+          if (f.url) URL.revokeObjectURL(f.url);
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- cleanup only on unmount; filesRef always current
+    [usingProvider]
+  );
+  const handleChange = _react.useCallback.call(void 0, 
+    (event) => {
+      if (event.currentTarget.files) add(event.currentTarget.files);
+      event.currentTarget.value = "";
+    },
+    [add]
+  );
+  const attachmentsCtx = _react.useMemo.call(void 0, 
+    () => ({
+      add,
+      clear: clearAttachments,
+      fileInputRef: inputRef,
+      files: files.map((item) => ({ ...item, id: item.id })),
+      openFileDialog,
+      remove
+    }),
+    [files, add, remove, clearAttachments, openFileDialog]
+  );
+  const refsCtx = _react.useMemo.call(void 0, 
+    () => ({
+      add: (incoming) => {
+        const array = Array.isArray(incoming) ? incoming : [incoming];
+        setReferencedSources((prev) => [
+          ...prev,
+          ...array.map((s) => ({ ...s, id: _nanoid.nanoid.call(void 0, ) }))
+        ]);
+      },
+      clear: clearReferencedSources,
+      remove: (id) => {
+        setReferencedSources((prev) => prev.filter((s) => s.id !== id));
+      },
+      sources: referencedSources
+    }),
+    [referencedSources, clearReferencedSources]
+  );
+  const handleSubmit = _react.useCallback.call(void 0, 
+    async (event) => {
+      event.preventDefault();
+      const form = event.currentTarget;
+      const text = usingProvider ? controller.textInput.value : (() => {
+        const formData = new FormData(form);
+        return formData.get("message") || "";
+      })();
+      if (!usingProvider) form.reset();
+      try {
+        const convertedFiles = await Promise.all(
+          files.map(async ({ id: _id, ...item }) => {
+            if (_optionalChain([item, 'access', _40 => _40.url, 'optionalAccess', _41 => _41.startsWith, 'call', _42 => _42("blob:")])) {
+              const dataUrl = await convertBlobUrlToDataUrl(item.url);
+              return { ...item, url: _nullishCoalesce(dataUrl, () => ( item.url)) };
+            }
+            return item;
+          })
+        );
+        const result = onSubmit({ files: convertedFiles, text }, event);
+        if (result instanceof Promise) {
+          try {
+            await result;
+            clear();
+            if (usingProvider) controller.textInput.clear();
+          } catch (e3) {
+          }
+        } else {
+          clear();
+          if (usingProvider) controller.textInput.clear();
+        }
+      } catch (e4) {
+      }
+    },
+    [usingProvider, controller, files, onSubmit, clear]
+  );
+  const inner = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "input",
+      {
+        accept,
+        "aria-label": "Upload files",
+        className: "hidden",
+        multiple,
+        onChange: handleChange,
+        ref: inputRef,
+        title: "Upload files",
+        type: "file"
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "form",
+      {
+        className: _utils.cn.call(void 0, "w-full", className),
+        onSubmit: handleSubmit,
+        ref: formRef,
+        ...props,
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _inputgroup.InputGroup, { className: "overflow-hidden", children })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _promptinputcontext.LocalAttachmentsContext.Provider, { value: attachmentsCtx, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _promptinputcontext.LocalReferencedSourcesContext.Provider, { value: refsCtx, children: inner }) });
+};
+
+
+exports.PromptInput = PromptInput;

package/dist/components/ai-elements/prompt-input.d.cts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, FormEvent } from 'react';
+import { FileUIPart } from 'ai';
+export { AttachmentsContext, LocalAttachmentsContext, LocalReferencedSourcesContext, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputControllerProps, PromptInputProvider, PromptInputProviderProps, ReferencedSourcesContext, TextInputContext, useOptionalPromptInputController, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments } from './prompt-input-context.cjs';
+export { PromptInputTextarea, PromptInputTextareaProps } from './prompt-input-textarea.cjs';
+export { PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandEmptyProps, PromptInputCommandGroup, PromptInputCommandGroupProps, PromptInputCommandInput, PromptInputCommandInputProps, PromptInputCommandItem, PromptInputCommandItemProps, PromptInputCommandList, PromptInputCommandListProps, PromptInputCommandProps, PromptInputCommandSeparator, PromptInputCommandSeparatorProps, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputSelect, PromptInputSelectContent, PromptInputSelectContentProps, PromptInputSelectItem, PromptInputSelectItemProps, PromptInputSelectProps, PromptInputSelectTrigger, PromptInputSelectTriggerProps, PromptInputSelectValue, PromptInputSelectValueProps, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTools, PromptInputToolsProps } from './prompt-input-elements.cjs';
+import '../ui/dropdown-menu.cjs';
+import 'radix-ui';
+import '../ui/input-group.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../ui/button.cjs';
+import '../ui/command.cjs';
+import 'cmdk';
+import '../ui/dialog.cjs';
+import '../ui/hover-card.cjs';
+import '../ui/select.cjs';
+import '../ui/tooltip.cjs';
+
+interface PromptInputMessage {
+    text: string;
+    files: FileUIPart[];
+}
+type PromptInputProps = Omit<HTMLAttributes<HTMLFormElement>, "onSubmit" | "onError"> & {
+    accept?: string;
+    multiple?: boolean;
+    globalDrop?: boolean;
+    syncHiddenInput?: boolean;
+    maxFiles?: number;
+    maxFileSize?: number;
+    onError?: (err: {
+        code: "max_files" | "max_file_size" | "accept";
+        message: string;
+    }) => void;
+    onSubmit: (message: PromptInputMessage, event: FormEvent<HTMLFormElement>) => void | Promise<void>;
+};
+declare const PromptInput: ({ className, accept, multiple, globalDrop, syncHiddenInput, maxFiles, maxFileSize, onError, onSubmit, children, ...props }: PromptInputProps) => react_jsx_runtime.JSX.Element;
+
+export { PromptInput, type PromptInputMessage, type PromptInputProps };

package/dist/components/ai-elements/prompt-input.d.ts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, FormEvent } from 'react';
+import { FileUIPart } from 'ai';
+export { AttachmentsContext, LocalAttachmentsContext, LocalReferencedSourcesContext, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputControllerProps, PromptInputProvider, PromptInputProviderProps, ReferencedSourcesContext, TextInputContext, useOptionalPromptInputController, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments } from './prompt-input-context.js';
+export { PromptInputTextarea, PromptInputTextareaProps } from './prompt-input-textarea.js';
+export { PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandEmptyProps, PromptInputCommandGroup, PromptInputCommandGroupProps, PromptInputCommandInput, PromptInputCommandInputProps, PromptInputCommandItem, PromptInputCommandItemProps, PromptInputCommandList, PromptInputCommandListProps, PromptInputCommandProps, PromptInputCommandSeparator, PromptInputCommandSeparatorProps, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputSelect, PromptInputSelectContent, PromptInputSelectContentProps, PromptInputSelectItem, PromptInputSelectItemProps, PromptInputSelectProps, PromptInputSelectTrigger, PromptInputSelectTriggerProps, PromptInputSelectValue, PromptInputSelectValueProps, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTools, PromptInputToolsProps } from './prompt-input-elements.js';
+import '../ui/dropdown-menu.js';
+import 'radix-ui';
+import '../ui/input-group.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../ui/button.js';
+import '../ui/command.js';
+import 'cmdk';
+import '../ui/dialog.js';
+import '../ui/hover-card.js';
+import '../ui/select.js';
+import '../ui/tooltip.js';
+
+interface PromptInputMessage {
+    text: string;
+    files: FileUIPart[];
+}
+type PromptInputProps = Omit<HTMLAttributes<HTMLFormElement>, "onSubmit" | "onError"> & {
+    accept?: string;
+    multiple?: boolean;
+    globalDrop?: boolean;
+    syncHiddenInput?: boolean;
+    maxFiles?: number;
+    maxFileSize?: number;
+    onError?: (err: {
+        code: "max_files" | "max_file_size" | "accept";
+        message: string;
+    }) => void;
+    onSubmit: (message: PromptInputMessage, event: FormEvent<HTMLFormElement>) => void | Promise<void>;
+};
+declare const PromptInput: ({ className, accept, multiple, globalDrop, syncHiddenInput, maxFiles, maxFileSize, onError, onSubmit, children, ...props }: PromptInputProps) => react_jsx_runtime.JSX.Element;
+
+export { PromptInput, type PromptInputMessage, type PromptInputProps };