@page-speed/agent-everywhere 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -1082,23 +1082,6 @@ function StatusBadge({
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-[10px]", children: displayLabel })
   ] });
 }
-var Input = React4__namespace.forwardRef(
-  ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.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 = classVarianceAuthority.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",
   {
@@ -1138,6 +1121,8 @@ var Button = React4__namespace.forwardRef(
   }
 );
 Button.displayName = "Button";
+var LINE_HEIGHT_PX = 20;
+var VERTICAL_PADDING_PX = 8;
 var PromptInput = React4.forwardRef(
   ({
     value,
@@ -1153,11 +1138,28 @@ var PromptInput = React4.forwardRef(
     rightActions,
     className,
     inputClassName,
-    variant = "default"
+    variant = "default",
+    minRows = 1,
+    maxRows = 6
   }, ref) => {
+    const textareaRef = React4.useRef(null);
+    React4.useImperativeHandle(ref, () => textareaRef.current);
+    const resize = React4.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]);
+    React4.useLayoutEffect(() => {
+      resize();
+    }, [value, resize]);
     const handleSubmit = React4.useCallback(
       (e) => {
-        e.preventDefault();
+        e?.preventDefault();
         if (!value.trim() || disabled || loading) return;
         onSubmit();
       },
@@ -1167,7 +1169,7 @@ var PromptInput = React4.forwardRef(
       (e) => {
         if (e.key === "Enter" && !e.shiftKey) {
           e.preventDefault();
-          handleSubmit(e);
+          handleSubmit();
         }
       },
       [handleSubmit]
@@ -1178,48 +1180,65 @@ var PromptInput = React4.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__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, className: cn(variantStyles[variant], className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-2", children: [
+      leftActions,
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.SendIcon, { className: "size-4" })
+        }
+      )
+    ] }) });
+  }
+);
+PromptInput.displayName = "PromptInput";
+var Input = React4__namespace.forwardRef(
+  ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "form",
+      "input",
       {
-        onSubmit: handleSubmit,
-        className: cn(variantStyles[variant], className),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          leftActions,
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.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: lucideReact.ImageIcon,
   audio: lucideReact.MicIcon,
@@ -6253,7 +6272,7 @@ function FloatingWidget({
           children,
           isLoading && /* @__PURE__ */ jsxRuntime.jsx(TypingIndicator, { size: "sm" })
         ] }) }),
-        quickReplies && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1.5 overflow-x-auto px-4 pb-2", children: quickReplies }),
+        quickReplies && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "border-t px-4 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-[10px] text-muted-foreground", children: footer }) })
       ]