@page-speed/agent-everywhere 0.1.0 → 0.3.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,9 +2,10 @@
 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 { Markdown } from '@page-speed/markdown-to-jsx';
 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';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -980,7 +981,32 @@ function MessageBubble({ role, children, className, unstyled }) {
     }
   );
 }
-function MessageContent({ children, className }) {
+var PROSE_CLASSES = cn(
+  "text-sm leading-relaxed",
+  "[&_p]:my-1.5 first:[&_p]:mt-0 last:[&_p]:mb-0",
+  "[&_ul]:my-1.5 [&_ul]:list-disc [&_ul]:pl-5",
+  "[&_ol]:my-1.5 [&_ol]:list-decimal [&_ol]:pl-5",
+  "[&_li]:my-0.5",
+  "[&_h1]:mt-2 [&_h1]:mb-1 [&_h1]:text-base [&_h1]:font-semibold",
+  "[&_h2]:mt-2 [&_h2]:mb-1 [&_h2]:text-sm [&_h2]:font-semibold",
+  "[&_h3]:mt-2 [&_h3]:mb-1 [&_h3]:text-sm [&_h3]:font-semibold",
+  "[&_strong]:font-semibold",
+  "[&_a]:underline [&_a]:underline-offset-2",
+  "[&_code]:rounded [&_code]:bg-black/10 [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-[0.85em]",
+  "[&_pre]:my-1.5 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-black/10 [&_pre]:p-2 [&_pre]:text-xs",
+  "[&_pre_code]:bg-transparent [&_pre_code]:p-0",
+  "[&_blockquote]:border-l-2 [&_blockquote]:border-current/30 [&_blockquote]:pl-3 [&_blockquote]:opacity-90",
+  "[&_hr]:my-2 [&_hr]:border-current/20",
+  "whitespace-normal"
+);
+function MessageContent({
+  children,
+  className,
+  markdown = true
+}) {
+  if (markdown && typeof children === "string") {
+    return /* @__PURE__ */ jsx(Markdown, { className: cn(PROSE_CLASSES, className), children });
+  }
   return /* @__PURE__ */ jsx("div", { className: cn("text-sm leading-relaxed whitespace-pre-wrap", className), children });
 }
 function MessageContainer({ role, children, className }) {
@@ -1056,23 +1082,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 +1121,8 @@ var Button = React4.forwardRef(
   }
 );
 Button.displayName = "Button";
+var LINE_HEIGHT_PX = 20;
+var VERTICAL_PADDING_PX = 8;
 var PromptInput = forwardRef(
   ({
     value,
@@ -1127,11 +1138,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 +1169,7 @@ var PromptInput = forwardRef(
       (e) => {
         if (e.key === "Enter" && !e.shiftKey) {
           e.preventDefault();
-          handleSubmit(e);
+          handleSubmit();
         }
       },
       [handleSubmit]
@@ -1152,48 +1180,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 +6272,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 }) })
       ]