@page-speed/agent-everywhere 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -6,6 +6,7 @@ var tailwindMerge = require('tailwind-merge');
 var React4 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('motion/react');
+var markdownToJsx = require('@page-speed/markdown-to-jsx');
 var lucideReact = require('lucide-react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
@@ -1006,7 +1007,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__ */ jsxRuntime.jsx(markdownToJsx.Markdown, { className: cn(PROSE_CLASSES, className), children });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm leading-relaxed whitespace-pre-wrap", className), children });
 }
 function MessageContainer({ role, children, className }) {
@@ -1082,23 +1108,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 +1147,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 +1164,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 +1195,7 @@ var PromptInput = React4.forwardRef(
       (e) => {
         if (e.key === "Enter" && !e.shiftKey) {
           e.preventDefault();
-          handleSubmit(e);
+          handleSubmit();
         }
       },
       [handleSubmit]
@@ -1178,48 +1206,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 +6298,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 }) })
       ]