ai-design-system 0.1.104 → 0.1.105

package/components/composites/PromptInput/PromptInput.tsx

@@ -35,6 +35,7 @@ import { SpeechInput, type SpeechInputProps } from "@/components/ai-elements/spe
 import type { FormEvent } from "react";
 import { Button } from "@/components/primitives/Button";
 import { Icon } from "@/components/primitives/Icon";
+import { InputGroupAddon } from "@/components/primitives/InputGroup";
 import { cn } from "@/lib/utils";
 
 export interface PromptInputContextProps {
@@ -93,6 +94,7 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
     maxFiles,
     maxFileSize,
     onError,
+    className,
     ...props
   }) => {
     const isRowVariant = variant === "row" || variant === "inline";
@@ -140,30 +142,34 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
         maxFiles={maxFiles}
         maxFileSize={maxFileSize}
         onError={onError}
+        className={cn(
+          "[&>[data-slot=input-group]]:rounded-2xl",
+          className?.includes("border") &&
+            "[&>[data-slot=input-group]]:border-0 [&>[data-slot=input-group]]:bg-transparent [&>[data-slot=input-group]]:shadow-none",
+          className
+        )}
         {...props}
       >
-        <PromptInputBody className="contents">
-          {showAttachments && <AttachmentPreviews />}
-          <PromptInputTextarea
-            placeholder={placeholder}
-            disabled={disabled}
-            onChange={isControlled ? handleControlledChange : undefined}
-            className="min-h-9 py-2 px-3 text-sm resize-none border-0 shadow-none focus-visible:ring-0 bg-transparent flex-1 field-sizing-content"
-          />
-        </PromptInputBody>
-        <div className="pr-1.5 shrink-0 flex items-center self-center">
+        {showAttachments && <AttachmentPreviews />}
+        <PromptInputTextarea
+          placeholder={placeholder}
+          disabled={disabled}
+          onChange={isControlled ? handleControlledChange : undefined}
+          className="min-h-9 py-2 px-3 text-sm resize-none border-0 shadow-none focus-visible:ring-0 bg-transparent flex-1 field-sizing-content"
+        />
+        <InputGroupAddon align="inline-end" className="self-end pb-1 pr-1.5 shrink-0">
           <PromptInputSubmit
             disabled={disabled || (loading && !onStop)}
             status={loading ? (onStop ? "streaming" : "submitted") : undefined}
             onClick={isStopping ? (e: React.MouseEvent) => { e.preventDefault(); onStop?.(); } : undefined}
             className={cn(
-              "h-8 w-8 rounded-lg bg-blue-600 hover:bg-blue-700 text-white transition-colors shrink-0 p-0 flex items-center justify-center cursor-pointer",
+              "rounded-lg bg-blue-600 hover:bg-blue-700 text-white transition-colors",
               isStopping && "bg-transparent hover:bg-accent"
             )}
           >
             {loading ? undefined : <Icon name="corner-down-left" size="sm" />}
           </PromptInputSubmit>
-        </div>
+        </InputGroupAddon>
       </AIPromptInput>
     ) : (
       <AIPromptInput
@@ -173,6 +179,11 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
         maxFiles={maxFiles}
         maxFileSize={maxFileSize}
         onError={onError}
+        className={cn(
+          className?.includes("border") &&
+            "[&>[data-slot=input-group]]:border-0 [&>[data-slot=input-group]]:bg-transparent [&>[data-slot=input-group]]:shadow-none",
+          className
+        )}
         {...props}
       >
         <PromptInputBody>

package/dist/index.cjs

@@ -6825,6 +6825,54 @@ var SpeechInput = React3__namespace.memo(
   }
 );
 SpeechInput.displayName = "SpeechInput";
+var InputGroup2 = React3__namespace.memo(
+  React3__namespace.forwardRef(
+    (props, ref) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(InputGroup, __spreadValues({ ref }, props));
+    }
+  )
+);
+InputGroup2.displayName = "InputGroup";
+var InputGroupAddon2 = React3__namespace.memo(
+  React3__namespace.forwardRef(
+    (props, ref) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, __spreadValues({ ref }, props));
+    }
+  )
+);
+InputGroupAddon2.displayName = "InputGroupAddon";
+var InputGroupButton2 = React3__namespace.memo(
+  React3__namespace.forwardRef(
+    (props, ref) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(InputGroupButton, __spreadValues({ ref }, props));
+    }
+  )
+);
+InputGroupButton2.displayName = "InputGroupButton";
+var InputGroupInput2 = React3__namespace.memo(
+  React3__namespace.forwardRef(
+    (props, ref) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(InputGroupInput, __spreadValues({ ref }, props));
+    }
+  )
+);
+InputGroupInput2.displayName = "InputGroupInput";
+var InputGroupText2 = React3__namespace.memo(
+  React3__namespace.forwardRef(
+    (props, ref) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, __spreadValues({ ref }, props));
+    }
+  )
+);
+InputGroupText2.displayName = "InputGroupText";
+var InputGroupTextarea2 = React3__namespace.memo(
+  React3__namespace.forwardRef(
+    (props, ref) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(InputGroupTextarea, __spreadValues({ ref }, props));
+    }
+  )
+);
+InputGroupTextarea2.displayName = "InputGroupTextarea";
 var PromptInput2 = React3__namespace.memo(
   (_a) => {
     var _b = _a, {
@@ -6847,7 +6895,8 @@ var PromptInput2 = React3__namespace.memo(
       multiple = true,
       maxFiles,
       maxFileSize,
-      onError
+      onError,
+      className
     } = _b, props = __objRest(_b, [
       "variant",
       "disabled",
@@ -6868,7 +6917,8 @@ var PromptInput2 = React3__namespace.memo(
       "multiple",
       "maxFiles",
       "maxFileSize",
-      "onError"
+      "onError",
+      "className"
     ]);
     const isRowVariant = variant === "row" || variant === "inline";
     const showAttachments = enableAttachments != null ? enableAttachments : !isRowVariant;
@@ -6908,22 +6958,25 @@ var PromptInput2 = React3__namespace.memo(
         multiple,
         maxFiles,
         maxFileSize,
-        onError
+        onError,
+        className: cn(
+          "[&>[data-slot=input-group]]:rounded-2xl",
+          (className == null ? void 0 : className.includes("border")) && "[&>[data-slot=input-group]]:border-0 [&>[data-slot=input-group]]:bg-transparent [&>[data-slot=input-group]]:shadow-none",
+          className
+        )
       }, props), {
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(PromptInputBody, { className: "contents", children: [
-            showAttachments && /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreviews, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              PromptInputTextarea,
-              {
-                placeholder,
-                disabled,
-                onChange: isControlled ? handleControlledChange : void 0,
-                className: "min-h-9 py-2 px-3 text-sm resize-none border-0 shadow-none focus-visible:ring-0 bg-transparent flex-1 field-sizing-content"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pr-1.5 shrink-0 flex items-center self-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          showAttachments && /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreviews, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PromptInputTextarea,
+            {
+              placeholder,
+              disabled,
+              onChange: isControlled ? handleControlledChange : void 0,
+              className: "min-h-9 py-2 px-3 text-sm resize-none border-0 shadow-none focus-visible:ring-0 bg-transparent flex-1 field-sizing-content"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon2, { align: "inline-end", className: "self-end pb-1 pr-1.5 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
             PromptInputSubmit,
             {
               disabled: disabled || loading && !onStop,
@@ -6933,7 +6986,7 @@ var PromptInput2 = React3__namespace.memo(
                 onStop == null ? void 0 : onStop();
               } : void 0,
               className: cn(
-                "h-8 w-8 rounded-lg bg-blue-600 hover:bg-blue-700 text-white transition-colors shrink-0 p-0 flex items-center justify-center cursor-pointer",
+                "rounded-lg bg-blue-600 hover:bg-blue-700 text-white transition-colors",
                 isStopping && "bg-transparent hover:bg-accent"
               ),
               children: loading ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "corner-down-left", size: "sm" })
@@ -6949,7 +7002,11 @@ var PromptInput2 = React3__namespace.memo(
         multiple,
         maxFiles,
         maxFileSize,
-        onError
+        onError,
+        className: cn(
+          (className == null ? void 0 : className.includes("border")) && "[&>[data-slot=input-group]]:border-0 [&>[data-slot=input-group]]:bg-transparent [&>[data-slot=input-group]]:shadow-none",
+          className
+        )
       }, props), {
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(PromptInputBody, { children: [
@@ -9484,54 +9541,6 @@ var HoverCardContent2 = React3__namespace.memo(
   )
 );
 HoverCardContent2.displayName = "HoverCardContent";
-var InputGroup2 = React3__namespace.memo(
-  React3__namespace.forwardRef(
-    (props, ref) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(InputGroup, __spreadValues({ ref }, props));
-    }
-  )
-);
-InputGroup2.displayName = "InputGroup";
-var InputGroupAddon2 = React3__namespace.memo(
-  React3__namespace.forwardRef(
-    (props, ref) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, __spreadValues({ ref }, props));
-    }
-  )
-);
-InputGroupAddon2.displayName = "InputGroupAddon";
-var InputGroupButton2 = React3__namespace.memo(
-  React3__namespace.forwardRef(
-    (props, ref) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(InputGroupButton, __spreadValues({ ref }, props));
-    }
-  )
-);
-InputGroupButton2.displayName = "InputGroupButton";
-var InputGroupInput2 = React3__namespace.memo(
-  React3__namespace.forwardRef(
-    (props, ref) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(InputGroupInput, __spreadValues({ ref }, props));
-    }
-  )
-);
-InputGroupInput2.displayName = "InputGroupInput";
-var InputGroupText2 = React3__namespace.memo(
-  React3__namespace.forwardRef(
-    (props, ref) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, __spreadValues({ ref }, props));
-    }
-  )
-);
-InputGroupText2.displayName = "InputGroupText";
-var InputGroupTextarea2 = React3__namespace.memo(
-  React3__namespace.forwardRef(
-    (props, ref) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(InputGroupTextarea, __spreadValues({ ref }, props));
-    }
-  )
-);
-InputGroupTextarea2.displayName = "InputGroupTextarea";
 var Progress2 = React3__namespace.memo(
   React3__namespace.forwardRef(
     (props, ref) => {