@page-speed/agent-everywhere 0.1.0 → 0.2.0

package/dist/index.d.cts

@@ -1091,8 +1091,27 @@ interface PromptInputProps {
     inputClassName?: string;
     /** Variant styling */
     variant?: 'default' | 'minimal' | 'bordered';
+    /**
+     * Minimum number of visible text rows. Default 1 (grows as the user types).
+     */
+    minRows?: number;
+    /**
+     * Maximum number of visible text rows before the textarea scrolls internally
+     * instead of growing further. Default 6.
+     */
+    maxRows?: number;
 }
-declare const PromptInput: react.ForwardRefExoticComponent<PromptInputProps & react.RefAttributes<HTMLInputElement>>;
+/**
+ * Conversational prompt input.
+ *
+ * Behaves like a standard AI chat input: it is a multi-line, auto-growing
+ * textarea where **Enter submits** and **Shift+Enter inserts a newline**. The
+ * textarea grows with content up to `maxRows`, then scrolls internally.
+ *
+ * (Previously this was a single-line `<input>`, which made Shift+Enter a no-op
+ * and prevented multi-line messages entirely.)
+ */
+declare const PromptInput: react.ForwardRefExoticComponent<PromptInputProps & react.RefAttributes<HTMLTextAreaElement>>;
 
 interface MultimodalInputProps {
     /** Current input value */

package/dist/index.d.ts

@@ -1091,8 +1091,27 @@ interface PromptInputProps {
     inputClassName?: string;
     /** Variant styling */
     variant?: 'default' | 'minimal' | 'bordered';
+    /**
+     * Minimum number of visible text rows. Default 1 (grows as the user types).
+     */
+    minRows?: number;
+    /**
+     * Maximum number of visible text rows before the textarea scrolls internally
+     * instead of growing further. Default 6.
+     */
+    maxRows?: number;
 }
-declare const PromptInput: react.ForwardRefExoticComponent<PromptInputProps & react.RefAttributes<HTMLInputElement>>;
+/**
+ * Conversational prompt input.
+ *
+ * Behaves like a standard AI chat input: it is a multi-line, auto-growing
+ * textarea where **Enter submits** and **Shift+Enter inserts a newline**. The
+ * textarea grows with content up to `maxRows`, then scrolls internally.
+ *
+ * (Previously this was a single-line `<input>`, which made Shift+Enter a no-op
+ * and prevented multi-line messages entirely.)
+ */
+declare const PromptInput: react.ForwardRefExoticComponent<PromptInputProps & react.RefAttributes<HTMLTextAreaElement>>;
 
 interface MultimodalInputProps {
     /** Current input value */

package/dist/index.js

@@ -2,7 +2,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React4 from 'react';
-import { createContext, forwardRef, useCallback, useRef, useState, useEffect, useReducer, useMemo, useContext } from 'react';
+import { createContext, forwardRef, useRef, useImperativeHandle, useCallback, useLayoutEffect, useState, useEffect, useReducer, useMemo, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AnimatePresence, motion } from 'motion/react';
 import { SendIcon, PaperclipIcon, FileTextIcon, MicIcon, ImageIcon, XIcon, SearchIcon, UploadIcon, FileIcon, UserCircleIcon, CheckIcon, SparklesIcon, BookmarkIcon, InfoIcon, CheckCircle2Icon, AlertTriangleIcon, LightbulbIcon, BrainIcon, ChevronDownIcon, ZapIcon, CopyIcon, ThumbsUpIcon, ThumbsDownIcon, BotIcon, UserIcon, DownloadIcon, MinusIcon, TrendingDownIcon, TrendingUpIcon, ChevronUpIcon, ArrowUpDownIcon, LinkIcon, PlayIcon, ExternalLinkIcon, WandIcon, LayoutGridIcon, Grid3X3Icon, ArrowUpRightIcon, ShuffleIcon, SkipForwardIcon, ChevronLeftIcon, ChevronRightIcon, XCircleIcon, HelpCircleIcon, Minimize2Icon, Maximize2Icon, RotateCcwIcon, MessageSquareIcon, GripVerticalIcon, PanelLeftOpenIcon, PanelLeftCloseIcon, CheckCircleIcon, AlertCircleIcon, MoreHorizontalIcon, ArrowLeftIcon, MoreVerticalIcon, Loader2Icon, ArrowRightIcon, AlignLeftIcon, ListIcon, HashIcon, TypeIcon, ClockIcon, CoinsIcon, ActivityIcon, ArrowUpIcon, ArrowDownIcon } from 'lucide-react';
@@ -1056,23 +1056,6 @@ function StatusBadge({
     /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-[10px]", children: displayLabel })
   ] });
 }
-var Input = React4.forwardRef(
-  ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "input",
-      {
-        type,
-        className: cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
@@ -1112,6 +1095,8 @@ var Button = React4.forwardRef(
   }
 );
 Button.displayName = "Button";
+var LINE_HEIGHT_PX = 20;
+var VERTICAL_PADDING_PX = 8;
 var PromptInput = forwardRef(
   ({
     value,
@@ -1127,11 +1112,28 @@ var PromptInput = forwardRef(
     rightActions,
     className,
     inputClassName,
-    variant = "default"
+    variant = "default",
+    minRows = 1,
+    maxRows = 6
   }, ref) => {
+    const textareaRef = useRef(null);
+    useImperativeHandle(ref, () => textareaRef.current);
+    const resize = useCallback(() => {
+      const el = textareaRef.current;
+      if (!el) return;
+      el.style.height = "auto";
+      const maxHeight = maxRows * LINE_HEIGHT_PX + VERTICAL_PADDING_PX;
+      const minHeight = minRows * LINE_HEIGHT_PX + VERTICAL_PADDING_PX;
+      const next = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
+      el.style.height = `${next}px`;
+      el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden";
+    }, [maxRows, minRows]);
+    useLayoutEffect(() => {
+      resize();
+    }, [value, resize]);
     const handleSubmit = useCallback(
       (e) => {
-        e.preventDefault();
+        e?.preventDefault();
         if (!value.trim() || disabled || loading) return;
         onSubmit();
       },
@@ -1141,7 +1143,7 @@ var PromptInput = forwardRef(
       (e) => {
         if (e.key === "Enter" && !e.shiftKey) {
           e.preventDefault();
-          handleSubmit(e);
+          handleSubmit();
         }
       },
       [handleSubmit]
@@ -1152,48 +1154,65 @@ var PromptInput = forwardRef(
       bordered: "border rounded-lg px-3 py-2.5"
     };
     const inputVariantStyles = {
-      default: "h-9 border-0 bg-transparent shadow-none focus-visible:ring-0",
-      minimal: "h-8 border-0 bg-transparent shadow-none focus-visible:ring-0 px-0",
-      bordered: "h-9 border-0 bg-muted/50 shadow-none focus-visible:ring-0"
+      default: "bg-transparent",
+      minimal: "bg-transparent px-0",
+      bordered: "bg-muted/50"
     };
+    return /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: cn(variantStyles[variant], className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+      leftActions,
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: textareaRef,
+          value,
+          onChange: (e) => onChange(e.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder,
+          disabled: disabled || loading,
+          autoFocus,
+          rows: minRows,
+          className: cn(
+            "flex-1 resize-none border-0 px-0 py-1 text-sm leading-5 shadow-none",
+            "placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            inputVariantStyles[variant],
+            inputClassName
+          )
+        }
+      ),
+      rightActions,
+      showSendButton && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          size: "sm",
+          variant: variant === "minimal" ? "ghost" : "outline",
+          disabled: !value.trim() || disabled || loading,
+          className: "size-8 shrink-0 p-0",
+          children: sendButtonContent || /* @__PURE__ */ jsx(SendIcon, { className: "size-4" })
+        }
+      )
+    ] }) });
+  }
+);
+PromptInput.displayName = "PromptInput";
+var Input = React4.forwardRef(
+  ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
-      "form",
+      "input",
       {
-        onSubmit: handleSubmit,
-        className: cn(variantStyles[variant], className),
-        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          leftActions,
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              ref,
-              value,
-              onChange: (e) => onChange(e.target.value),
-              onKeyDown: handleKeyDown,
-              placeholder,
-              disabled: disabled || loading,
-              autoFocus,
-              className: cn("flex-1 text-sm", inputVariantStyles[variant], inputClassName)
-            }
-          ),
-          rightActions,
-          showSendButton && /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "submit",
-              size: "sm",
-              variant: variant === "minimal" ? "ghost" : "outline",
-              disabled: !value.trim() || disabled || loading,
-              className: "size-8 shrink-0 p-0",
-              children: sendButtonContent || /* @__PURE__ */ jsx(SendIcon, { className: "size-4" })
-            }
-          )
-        ] })
+        type,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref,
+        ...props
       }
     );
   }
 );
-PromptInput.displayName = "PromptInput";
+Input.displayName = "Input";
 var attachmentIcons = {
   image: ImageIcon,
   audio: MicIcon,
@@ -6227,7 +6246,7 @@ function FloatingWidget({
           children,
           isLoading && /* @__PURE__ */ jsx(TypingIndicator, { size: "sm" })
         ] }) }),
-        quickReplies && /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 overflow-x-auto px-4 pb-2", children: quickReplies }),
+        quickReplies && /* @__PURE__ */ jsx("div", { className: "max-h-[40%] shrink-0 overflow-y-auto border-t bg-muted/30 px-4 py-2", children: quickReplies }),
         input,
         footer && /* @__PURE__ */ jsx("div", { className: "border-t px-4 py-1.5", children: /* @__PURE__ */ jsx("p", { className: "text-center text-[10px] text-muted-foreground", children: footer }) })
       ]