ai-design-system 0.1.103 → 0.1.105

package/components/composites/PromptInput/PromptInput.stories.tsx

@@ -360,5 +360,28 @@ export const WithSpeechInput: Story = {
   },
 };
 
+/**
+ * Row / Inline Variant
+ * Single row where the input box and send button are side-by-side, without tools icons.
+ */
+export const RowVariant: Story = {
+  args: {
+    variant: "row",
+    placeholder: "Ask a question or provide instructions...",
+    onSubmit: (message) => {
+      console.log("Submitted in row mode:", message);
+      alert(`Submitted: ${message.text}`);
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Compact single-row PromptInput variant where input box and send button are in the same line without toolbar tool icons (attachments, speech mic, etc.).",
+      },
+    },
+  },
+};
+
 
 

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 {
@@ -44,11 +45,14 @@ export interface PromptInputContextProps {
   modelId?: string;
 }
 
+export type PromptInputVariant = "default" | "row" | "inline";
+
 export interface PromptInputBlockProps
   extends Omit<
     AIPromptInputProps,
     "globalDrop" | "syncHiddenInput" | "onSubmit" | "onChange"
   > {
+  variant?: PromptInputVariant;
   disabled?: boolean;
   placeholder?: string;
   value?: string;
@@ -62,6 +66,7 @@ export interface PromptInputBlockProps
   onStop?: () => void;
   context?: PromptInputContextProps | ReactNode;
   tools?: ReactNode;
+  enableAttachments?: boolean;
   enableSpeech?: boolean;
   speechProps?: SpeechInputProps;
   attachIcon?: "paperclip" | "plus";
@@ -69,6 +74,7 @@ export interface PromptInputBlockProps
 
 export const PromptInput = React.memo<PromptInputBlockProps>(
   ({
+    variant = "default",
     disabled = false,
     placeholder,
     value,
@@ -79,7 +85,8 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
     onStop,
     context,
     tools,
-    enableSpeech = true,
+    enableAttachments,
+    enableSpeech,
     speechProps,
     attachIcon = "paperclip",
     accept = "image/*,audio/*",
@@ -87,8 +94,13 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
     maxFiles,
     maxFileSize,
     onError,
+    className,
     ...props
   }) => {
+    const isRowVariant = variant === "row" || variant === "inline";
+    const showAttachments = enableAttachments ?? !isRowVariant;
+    const showSpeech = enableSpeech ?? !isRowVariant;
+
     const existingController = useOptionalPromptInputController();
 
     const handleSubmit = React.useCallback(
@@ -122,7 +134,44 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
 
     const isStopping = loading && Boolean(onStop);
 
-    const promptInputContent = (
+    const promptInputContent = isRowVariant ? (
+      <AIPromptInput
+        onSubmit={handleSubmit}
+        accept={accept}
+        multiple={multiple}
+        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}
+      >
+        {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(
+              "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>
+        </InputGroupAddon>
+      </AIPromptInput>
+    ) : (
       <AIPromptInput
         onSubmit={handleSubmit}
         accept={accept}
@@ -130,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>
@@ -142,8 +196,10 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
         </PromptInputBody>
         <PromptInputFooter>
           <PromptInputTools>
-            <AttachButton disabled={disabled || loading} icon={attachIcon} />
-            {enableSpeech && (
+            {showAttachments && (
+              <AttachButton disabled={disabled || loading} icon={attachIcon} />
+            )}
+            {showSpeech && (
               <SpeechInput
                 disabled={disabled || loading}
                 {...speechProps}

package/components/composites/PromptInput/index.ts

@@ -1,5 +1,5 @@
 export { PromptInput } from "./PromptInput";
-export type { PromptInputBlockProps, PromptInputContextProps } from "./PromptInput";
+export type { PromptInputBlockProps, PromptInputContextProps, PromptInputVariant } from "./PromptInput";
 
 export { SpeechInput } from "@/components/ai-elements/speech-input";
 export type { SpeechInputProps } from "@/components/ai-elements/speech-input";

package/components/composites/ScenePlayer/ScenePlayer.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import type { FormEvent } from "react";
 import { Button } from "@/components/primitives/Button";
 import { Icon } from "@/components/primitives/Icon";
-import { PromptInput } from "@/components/composites/PromptInput";
+import { PromptInput, type PromptInputVariant } from "@/components/composites/PromptInput";
 import type { PromptInputMessage } from "@/components/ai-elements/prompt-input";
 import { cn } from "@/lib/utils";
 
@@ -45,6 +45,8 @@ export interface ScenePlayerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
   loading?: boolean;
   onStop?: () => void;
   enableSpeech?: boolean;
+  enableAttachments?: boolean;
+  promptInputVariant?: PromptInputVariant;
   onPublish?: (currentScene: SceneItem, text?: string) => void;
   publishPlaceholder?: string;
   onSceneChange?: (sceneIndex: number, scene: SceneItem) => void;
@@ -72,7 +74,9 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
       onSubmit,
       loading = false,
       onStop,
-      enableSpeech = true,
+      enableSpeech = false,
+      enableAttachments = false,
+      promptInputVariant = "row",
       onPublish,
       publishPlaceholder = "Ask a question or provide instructions...",
       onSceneChange,
@@ -408,6 +412,7 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
           }}
         >
           <PromptInput
+            variant={promptInputVariant}
             placeholder={placeholder || publishPlaceholder}
             value={promptValue}
             onChange={onPromptValueChange}
@@ -415,6 +420,7 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
             loading={loading}
             onStop={onStop}
             enableSpeech={enableSpeech}
+            enableAttachments={enableAttachments}
             className="border border-border bg-background shadow-md overflow-hidden rounded-2xl"
           />
         </div>

package/components/composites/index.ts

@@ -231,6 +231,7 @@ export {
 } from './PromptInput'
 export type {
   PromptInputBlockProps,
+  PromptInputVariant,
   SpeechInputProps,
   PromptInputContextProps,
   PromptInputControllerProps,

package/components/features/ChatPanel/ChatPanel.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import { AIConversation } from "@/components/blocks/AIConversation";
 import { FileChangeQueue } from "@/components/blocks/FileChangeQueue";
-import { PromptInput, type PromptInputContextProps } from "@/components/composites/PromptInput";
+import { PromptInput, type PromptInputContextProps, type PromptInputVariant } from "@/components/composites/PromptInput";
 import { TaskQueue, type TaskItem } from "@/components/composites/TaskQueue";
 import { ApprovalCard } from "@/components/composites/ApprovalCard";
 import { cn } from "@/lib/utils";
@@ -194,6 +194,18 @@ export interface ChatPanelProps {
    * Handler when a task item is clicked (e.g. to inspect terminal output or logs)
    */
   onTaskClick?: (task: TaskItem) => void;
+  /**
+   * Layout variant for PromptInput:
+   * - "default": multi-line textarea with toolbar buttons below (attachment, mic)
+   * - "row" | "inline": single row where input box and send button are side-by-side without tools icons
+   * @default "default"
+   */
+  promptInputVariant?: PromptInputVariant;
+  /**
+   * Whether to enable the attachment button in prompt
+   * @default true for default variant, false for row variant
+   */
+  enableAttachments?: boolean;
   /**
    * Whether to enable the voice-note microphone button in prompt
    * @default true
@@ -268,6 +280,8 @@ export const ChatPanel = React.memo<ChatPanelProps>(
     onTaskRetry,
     onTaskStopAll,
     onTaskClick,
+    promptInputVariant = "default",
+    enableAttachments,
     enableSpeech = true,
     showHeader = true,
     sessionTitle,
@@ -465,6 +479,7 @@ export const ChatPanel = React.memo<ChatPanelProps>(
             />
           )}
           <PromptInput
+            variant={promptInputVariant}
             dialog={dialog}
             placeholder={placeholder}
             value={promptValue}
@@ -474,6 +489,7 @@ export const ChatPanel = React.memo<ChatPanelProps>(
             onStop={onStop}
             context={context}
             enableSpeech={enableSpeech}
+            enableAttachments={enableAttachments}
             className={cn(
               "border border-neutral-600 bg-background shadow-sm overflow-hidden",
               tasks.length > 0 && !dialog

package/components/index.ts

@@ -53,6 +53,7 @@ export type {
   AppBreadcrumbProps,
   BreadcrumbItemData,
   PromptInputBlockProps,
+  PromptInputVariant,
   PromptInputContextProps,
   PromptInputControllerProps,
   AttachmentsContext,

package/dist/index.cjs

@@ -6825,9 +6825,58 @@ 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, {
+      variant = "default",
       disabled = false,
       placeholder,
       value,
@@ -6838,15 +6887,18 @@ var PromptInput2 = React3__namespace.memo(
       onStop,
       context,
       tools,
-      enableSpeech = true,
+      enableAttachments,
+      enableSpeech,
       speechProps,
       attachIcon = "paperclip",
       accept = "image/*,audio/*",
       multiple = true,
       maxFiles,
       maxFileSize,
-      onError
+      onError,
+      className
     } = _b, props = __objRest(_b, [
+      "variant",
       "disabled",
       "placeholder",
       "value",
@@ -6857,6 +6909,7 @@ var PromptInput2 = React3__namespace.memo(
       "onStop",
       "context",
       "tools",
+      "enableAttachments",
       "enableSpeech",
       "speechProps",
       "attachIcon",
@@ -6864,8 +6917,12 @@ var PromptInput2 = React3__namespace.memo(
       "multiple",
       "maxFiles",
       "maxFileSize",
-      "onError"
+      "onError",
+      "className"
     ]);
+    const isRowVariant = variant === "row" || variant === "inline";
+    const showAttachments = enableAttachments != null ? enableAttachments : !isRowVariant;
+    const showSpeech = enableSpeech != null ? enableSpeech : !isRowVariant;
     const existingController = useOptionalPromptInputController();
     const handleSubmit = React3__namespace.useCallback(
       (message, event) => {
@@ -6893,7 +6950,7 @@ var PromptInput2 = React3__namespace.memo(
       return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: dialog });
     }
     const isStopping = loading && Boolean(onStop);
-    const promptInputContent = /* @__PURE__ */ jsxRuntime.jsxs(
+    const promptInputContent = isRowVariant ? /* @__PURE__ */ jsxRuntime.jsxs(
       PromptInput,
       __spreadProps(__spreadValues({
         onSubmit: handleSubmit,
@@ -6901,7 +6958,55 @@ 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: [
+          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,
+              status: loading ? onStop ? "streaming" : "submitted" : void 0,
+              onClick: isStopping ? (e) => {
+                e.preventDefault();
+                onStop == null ? void 0 : onStop();
+              } : void 0,
+              className: cn(
+                "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" })
+            }
+          ) })
+        ]
+      })
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(
+      PromptInput,
+      __spreadProps(__spreadValues({
+        onSubmit: handleSubmit,
+        accept,
+        multiple,
+        maxFiles,
+        maxFileSize,
+        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: [
@@ -6917,8 +7022,8 @@ var PromptInput2 = React3__namespace.memo(
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(PromptInputFooter, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs(PromptInputTools, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(AttachButton, { disabled: disabled || loading, icon: attachIcon }),
-              enableSpeech && /* @__PURE__ */ jsxRuntime.jsx(
+              showAttachments && /* @__PURE__ */ jsxRuntime.jsx(AttachButton, { disabled: disabled || loading, icon: attachIcon }),
+              showSpeech && /* @__PURE__ */ jsxRuntime.jsx(
                 SpeechInput,
                 __spreadValues({
                   disabled: disabled || loading
@@ -8065,6 +8170,8 @@ var ChatPanel = React3__namespace.memo(
     onTaskRetry,
     onTaskStopAll,
     onTaskClick,
+    promptInputVariant = "default",
+    enableAttachments,
     enableSpeech = true,
     showHeader = true,
     sessionTitle,
@@ -8232,6 +8339,7 @@ var ChatPanel = React3__namespace.memo(
         /* @__PURE__ */ jsxRuntime.jsx(
           PromptInput2,
           {
+            variant: promptInputVariant,
             dialog,
             placeholder,
             value: promptValue,
@@ -8241,6 +8349,7 @@ var ChatPanel = React3__namespace.memo(
             onStop,
             context,
             enableSpeech,
+            enableAttachments,
             className: cn(
               "border border-neutral-600 bg-background shadow-sm overflow-hidden",
               tasks.length > 0 && !dialog ? "rounded-t-none rounded-b-2xl border-t-0" : "rounded-2xl"
@@ -9432,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) => {
@@ -14596,7 +14657,9 @@ var ScenePlayer = React3__namespace.forwardRef(
       onSubmit,
       loading = false,
       onStop,
-      enableSpeech = true,
+      enableSpeech = false,
+      enableAttachments = false,
+      promptInputVariant = "row",
       onPublish,
       publishPlaceholder = "Ask a question or provide instructions...",
       onSceneChange,
@@ -14622,6 +14685,8 @@ var ScenePlayer = React3__namespace.forwardRef(
       "loading",
       "onStop",
       "enableSpeech",
+      "enableAttachments",
+      "promptInputVariant",
       "onPublish",
       "publishPlaceholder",
       "onSceneChange",
@@ -14936,6 +15001,7 @@ var ScenePlayer = React3__namespace.forwardRef(
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 PromptInput2,
                 {
+                  variant: promptInputVariant,
                   placeholder: placeholder || publishPlaceholder,
                   value: promptValue,
                   onChange: onPromptValueChange,
@@ -14943,6 +15009,7 @@ var ScenePlayer = React3__namespace.forwardRef(
                   loading,
                   onStop,
                   enableSpeech,
+                  enableAttachments,
                   className: "border border-border bg-background shadow-md overflow-hidden rounded-2xl"
                 }
               )