@sero-ai/ui 0.3.0 → 0.3.2

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

@@ -0,0 +1,246 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator
+} from "../ui/command";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../ui/dropdown-menu";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+} from "../ui/hover-card";
+import {
+  InputGroupAddon,
+  InputGroupButton
+} from "../ui/input-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../ui/select";
+import { Spinner } from "../ui/spinner";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from "../ui/tooltip";
+import { cn } from "../../lib/utils";
+import {
+  CornerDownLeftIcon,
+  SquareIcon,
+  XIcon,
+  PlusIcon
+} from "lucide-react";
+import { Children, useCallback } from "react";
+const PromptInputBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("contents", className), ...props });
+const PromptInputHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  InputGroupAddon,
+  {
+    align: "block-end",
+    className: cn("order-first flex-wrap gap-1", className),
+    ...props
+  }
+);
+const PromptInputFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  InputGroupAddon,
+  {
+    align: "block-end",
+    className: cn("justify-between gap-1", className),
+    ...props
+  }
+);
+const PromptInputTools = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 items-center gap-1", className), ...props });
+const PromptInputButton = ({
+  variant = "ghost",
+  className,
+  size,
+  tooltip,
+  ...props
+}) => {
+  const newSize = size ?? (Children.count(props.children) > 1 ? "sm" : "icon-sm");
+  const button = /* @__PURE__ */ jsx(
+    InputGroupButton,
+    {
+      className: cn(className),
+      size: newSize,
+      type: "button",
+      variant,
+      ...props
+    }
+  );
+  if (!tooltip) return button;
+  const tooltipContent = typeof tooltip === "string" ? tooltip : tooltip.content;
+  const shortcut = typeof tooltip === "string" ? void 0 : tooltip.shortcut;
+  const side = typeof tooltip === "string" ? "top" : tooltip.side ?? "top";
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsxs(TooltipContent, { side, children: [
+      tooltipContent,
+      shortcut && /* @__PURE__ */ jsx("span", { className: "ml-2 text-muted-foreground", children: shortcut })
+    ] })
+  ] });
+};
+const PromptInputSubmit = ({
+  className,
+  variant = "default",
+  size = "icon-sm",
+  status,
+  onStop,
+  onClick,
+  children,
+  ...props
+}) => {
+  const isGenerating = status === "submitted" || status === "streaming";
+  let Icon = /* @__PURE__ */ jsx(CornerDownLeftIcon, { className: "size-4" });
+  if (status === "submitted") Icon = /* @__PURE__ */ jsx(Spinner, {});
+  else if (status === "streaming") Icon = /* @__PURE__ */ jsx(SquareIcon, { className: "size-4" });
+  else if (status === "error") Icon = /* @__PURE__ */ jsx(XIcon, { className: "size-4" });
+  const handleClick = useCallback(
+    (e) => {
+      if (isGenerating && onStop) {
+        e.preventDefault();
+        onStop();
+        return;
+      }
+      onClick?.(e);
+    },
+    [isGenerating, onStop, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    InputGroupButton,
+    {
+      "aria-label": isGenerating ? "Stop" : "Submit",
+      className: cn(className),
+      onClick: handleClick,
+      size,
+      type: isGenerating && onStop ? "button" : "submit",
+      variant,
+      ...props,
+      children: children ?? Icon
+    }
+  );
+};
+const PromptInputActionMenu = (props) => /* @__PURE__ */ jsx(DropdownMenu, { ...props });
+const PromptInputActionMenuTrigger = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PromptInputButton, { className, ...props, children: children ?? /* @__PURE__ */ jsx(PlusIcon, { className: "size-4" }) }) });
+const PromptInputActionMenuContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: cn(className), ...props });
+const PromptInputActionMenuItem = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(DropdownMenuItem, { className: cn(className), ...props });
+const PromptInputSelect = (props) => /* @__PURE__ */ jsx(Select, { ...props });
+const PromptInputSelectTrigger = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  SelectTrigger,
+  {
+    className: cn(
+      "border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors",
+      "hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground",
+      className
+    ),
+    ...props
+  }
+);
+const PromptInputSelectContent = ({ className, ...props }) => /* @__PURE__ */ jsx(SelectContent, { className: cn(className), ...props });
+const PromptInputSelectItem = ({ className, ...props }) => /* @__PURE__ */ jsx(SelectItem, { className: cn(className), ...props });
+const PromptInputSelectValue = ({ className, ...props }) => /* @__PURE__ */ jsx(SelectValue, { className: cn(className), ...props });
+const PromptInputHoverCard = ({
+  openDelay = 0,
+  closeDelay = 0,
+  ...props
+}) => /* @__PURE__ */ jsx(HoverCard, { closeDelay, openDelay, ...props });
+const PromptInputHoverCardTrigger = (props) => /* @__PURE__ */ jsx(HoverCardTrigger, { ...props });
+const PromptInputHoverCardContent = ({
+  align = "start",
+  ...props
+}) => /* @__PURE__ */ jsx(HoverCardContent, { align, ...props });
+const PromptInputTabsList = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn(className), ...props });
+const PromptInputTab = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn(className), ...props });
+const PromptInputTabLabel = ({ className, ...props }) => (
+  // Content provided via children in props
+  // oxlint-disable-next-line eslint-plugin-jsx-a11y(heading-has-content)
+  /* @__PURE__ */ jsx("h3", { className: cn("mb-2 px-3 font-medium text-muted-foreground text-xs", className), ...props })
+);
+const PromptInputTabBody = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("space-y-1", className), ...props });
+const PromptInputTabItem = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex items-center gap-2 px-3 py-2 text-xs hover:bg-accent", className),
+    ...props
+  }
+);
+const PromptInputCommand = ({ className, ...props }) => /* @__PURE__ */ jsx(Command, { className: cn(className), ...props });
+const PromptInputCommandInput = ({ className, ...props }) => /* @__PURE__ */ jsx(CommandInput, { className: cn(className), ...props });
+const PromptInputCommandList = ({ className, ...props }) => /* @__PURE__ */ jsx(CommandList, { className: cn(className), ...props });
+const PromptInputCommandEmpty = ({ className, ...props }) => /* @__PURE__ */ jsx(CommandEmpty, { className: cn(className), ...props });
+const PromptInputCommandGroup = ({ className, ...props }) => /* @__PURE__ */ jsx(CommandGroup, { className: cn(className), ...props });
+const PromptInputCommandItem = ({ className, ...props }) => /* @__PURE__ */ jsx(CommandItem, { className: cn(className), ...props });
+const PromptInputCommandSeparator = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandSeparator, { className: cn(className), ...props });
+export {
+  PromptInputActionMenu,
+  PromptInputActionMenuContent,
+  PromptInputActionMenuItem,
+  PromptInputActionMenuTrigger,
+  PromptInputBody,
+  PromptInputButton,
+  PromptInputCommand,
+  PromptInputCommandEmpty,
+  PromptInputCommandGroup,
+  PromptInputCommandInput,
+  PromptInputCommandItem,
+  PromptInputCommandList,
+  PromptInputCommandSeparator,
+  PromptInputFooter,
+  PromptInputHeader,
+  PromptInputHoverCard,
+  PromptInputHoverCardContent,
+  PromptInputHoverCardTrigger,
+  PromptInputSelect,
+  PromptInputSelectContent,
+  PromptInputSelectItem,
+  PromptInputSelectTrigger,
+  PromptInputSelectValue,
+  PromptInputSubmit,
+  PromptInputTab,
+  PromptInputTabBody,
+  PromptInputTabItem,
+  PromptInputTabLabel,
+  PromptInputTabsList,
+  PromptInputTools
+};

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

@@ -0,0 +1,89 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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 _react = require('react');
+
+
+
+var _promptinputcontext = require('./prompt-input-context');
+const PromptInputTextarea = ({
+  onChange,
+  onKeyDown,
+  className,
+  placeholder = "What would you like to know?",
+  ...props
+}) => {
+  const controller = _promptinputcontext.useOptionalPromptInputController.call(void 0, );
+  const attachments = _promptinputcontext.usePromptInputAttachments.call(void 0, );
+  const [isComposing, setIsComposing] = _react.useState.call(void 0, false);
+  const handleKeyDown = _react.useCallback.call(void 0, 
+    (e) => {
+      _optionalChain([onKeyDown, 'optionalCall', _ => _(e)]);
+      if (e.defaultPrevented) return;
+      if (e.key === "Enter") {
+        if (isComposing || e.nativeEvent.isComposing) return;
+        if (e.shiftKey) return;
+        e.preventDefault();
+        const { form } = e.currentTarget;
+        const submitButton = _optionalChain([form, 'optionalAccess', _2 => _2.querySelector, 'call', _3 => _3(
+          'button[type="submit"]'
+        )]);
+        if (_optionalChain([submitButton, 'optionalAccess', _4 => _4.disabled])) return;
+        _optionalChain([form, 'optionalAccess', _5 => _5.requestSubmit, 'call', _6 => _6()]);
+      }
+      if (e.key === "Backspace" && e.currentTarget.value === "" && attachments.files.length > 0) {
+        e.preventDefault();
+        const lastAttachment = attachments.files.at(-1);
+        if (lastAttachment) {
+          attachments.remove(lastAttachment.id);
+        }
+      }
+    },
+    [onKeyDown, isComposing, attachments]
+  );
+  const handlePaste = _react.useCallback.call(void 0, 
+    (event) => {
+      const items = _optionalChain([event, 'access', _7 => _7.clipboardData, 'optionalAccess', _8 => _8.items]);
+      if (!items) return;
+      const files = [];
+      for (const item of items) {
+        if (item.kind === "file") {
+          const file = item.getAsFile();
+          if (file) files.push(file);
+        }
+      }
+      if (files.length > 0) {
+        event.preventDefault();
+        attachments.add(files);
+      }
+    },
+    [attachments]
+  );
+  const handleCompositionEnd = _react.useCallback.call(void 0, () => setIsComposing(false), []);
+  const handleCompositionStart = _react.useCallback.call(void 0, () => setIsComposing(true), []);
+  const controlledProps = controller ? {
+    onChange: (e) => {
+      controller.textInput.setInput(e.currentTarget.value);
+      _optionalChain([onChange, 'optionalCall', _9 => _9(e)]);
+    },
+    value: controller.textInput.value
+  } : { onChange };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _inputgroup.InputGroupTextarea,
+    {
+      className: _utils.cn.call(void 0, "field-sizing-content max-h-48 min-h-16", className),
+      name: "message",
+      onCompositionEnd: handleCompositionEnd,
+      onCompositionStart: handleCompositionStart,
+      onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
+      placeholder,
+      ...props,
+      ...controlledProps
+    }
+  );
+};
+
+
+exports.PromptInputTextarea = PromptInputTextarea;

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

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { InputGroupTextarea } from '../ui/input-group.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../ui/button.cjs';
+
+type PromptInputTextareaProps = ComponentProps<typeof InputGroupTextarea>;
+declare const PromptInputTextarea: ({ onChange, onKeyDown, className, placeholder, ...props }: PromptInputTextareaProps) => react_jsx_runtime.JSX.Element;
+
+export { PromptInputTextarea, type PromptInputTextareaProps };

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

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { InputGroupTextarea } from '../ui/input-group.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../ui/button.js';
+
+type PromptInputTextareaProps = ComponentProps<typeof InputGroupTextarea>;
+declare const PromptInputTextarea: ({ onChange, onKeyDown, className, placeholder, ...props }: PromptInputTextareaProps) => react_jsx_runtime.JSX.Element;
+
+export { PromptInputTextarea, type PromptInputTextareaProps };

package/dist/components/ai-elements/prompt-input-textarea.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { InputGroupTextarea } from "../ui/input-group";
+import { cn } from "../../lib/utils";
+import { useCallback, useState } from "react";
+import {
+  useOptionalPromptInputController,
+  usePromptInputAttachments
+} from "./prompt-input-context";
+const PromptInputTextarea = ({
+  onChange,
+  onKeyDown,
+  className,
+  placeholder = "What would you like to know?",
+  ...props
+}) => {
+  const controller = useOptionalPromptInputController();
+  const attachments = usePromptInputAttachments();
+  const [isComposing, setIsComposing] = useState(false);
+  const handleKeyDown = useCallback(
+    (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      if (e.key === "Enter") {
+        if (isComposing || e.nativeEvent.isComposing) return;
+        if (e.shiftKey) return;
+        e.preventDefault();
+        const { form } = e.currentTarget;
+        const submitButton = form?.querySelector(
+          'button[type="submit"]'
+        );
+        if (submitButton?.disabled) return;
+        form?.requestSubmit();
+      }
+      if (e.key === "Backspace" && e.currentTarget.value === "" && attachments.files.length > 0) {
+        e.preventDefault();
+        const lastAttachment = attachments.files.at(-1);
+        if (lastAttachment) {
+          attachments.remove(lastAttachment.id);
+        }
+      }
+    },
+    [onKeyDown, isComposing, attachments]
+  );
+  const handlePaste = useCallback(
+    (event) => {
+      const items = event.clipboardData?.items;
+      if (!items) return;
+      const files = [];
+      for (const item of items) {
+        if (item.kind === "file") {
+          const file = item.getAsFile();
+          if (file) files.push(file);
+        }
+      }
+      if (files.length > 0) {
+        event.preventDefault();
+        attachments.add(files);
+      }
+    },
+    [attachments]
+  );
+  const handleCompositionEnd = useCallback(() => setIsComposing(false), []);
+  const handleCompositionStart = useCallback(() => setIsComposing(true), []);
+  const controlledProps = controller ? {
+    onChange: (e) => {
+      controller.textInput.setInput(e.currentTarget.value);
+      onChange?.(e);
+    },
+    value: controller.textInput.value
+  } : { onChange };
+  return /* @__PURE__ */ jsx(
+    InputGroupTextarea,
+    {
+      className: cn("field-sizing-content max-h-48 min-h-16", className),
+      name: "message",
+      onCompositionEnd: handleCompositionEnd,
+      onCompositionStart: handleCompositionStart,
+      onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
+      placeholder,
+      ...props,
+      ...controlledProps
+    }
+  );
+};
+export {
+  PromptInputTextarea
+};