ai-design-system 0.1.103 → 0.1.104

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

@@ -44,11 +44,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 +65,7 @@ export interface PromptInputBlockProps
   onStop?: () => void;
   context?: PromptInputContextProps | ReactNode;
   tools?: ReactNode;
+  enableAttachments?: boolean;
   enableSpeech?: boolean;
   speechProps?: SpeechInputProps;
   attachIcon?: "paperclip" | "plus";
@@ -69,6 +73,7 @@ export interface PromptInputBlockProps
 
 export const PromptInput = React.memo<PromptInputBlockProps>(
   ({
+    variant = "default",
     disabled = false,
     placeholder,
     value,
@@ -79,7 +84,8 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
     onStop,
     context,
     tools,
-    enableSpeech = true,
+    enableAttachments,
+    enableSpeech,
     speechProps,
     attachIcon = "paperclip",
     accept = "image/*,audio/*",
@@ -89,6 +95,10 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
     onError,
     ...props
   }) => {
+    const isRowVariant = variant === "row" || variant === "inline";
+    const showAttachments = enableAttachments ?? !isRowVariant;
+    const showSpeech = enableSpeech ?? !isRowVariant;
+
     const existingController = useOptionalPromptInputController();
 
     const handleSubmit = React.useCallback(
@@ -122,7 +132,40 @@ 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}
+        {...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">
+          <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",
+              isStopping && "bg-transparent hover:bg-accent"
+            )}
+          >
+            {loading ? undefined : <Icon name="corner-down-left" size="sm" />}
+          </PromptInputSubmit>
+        </div>
+      </AIPromptInput>
+    ) : (
       <AIPromptInput
         onSubmit={handleSubmit}
         accept={accept}
@@ -142,8 +185,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

@@ -6828,6 +6828,7 @@ SpeechInput.displayName = "SpeechInput";
 var PromptInput2 = React3__namespace.memo(
   (_a) => {
     var _b = _a, {
+      variant = "default",
       disabled = false,
       placeholder,
       value,
@@ -6838,7 +6839,8 @@ var PromptInput2 = React3__namespace.memo(
       onStop,
       context,
       tools,
-      enableSpeech = true,
+      enableAttachments,
+      enableSpeech,
       speechProps,
       attachIcon = "paperclip",
       accept = "image/*,audio/*",
@@ -6847,6 +6849,7 @@ var PromptInput2 = React3__namespace.memo(
       maxFileSize,
       onError
     } = _b, props = __objRest(_b, [
+      "variant",
       "disabled",
       "placeholder",
       "value",
@@ -6857,6 +6860,7 @@ var PromptInput2 = React3__namespace.memo(
       "onStop",
       "context",
       "tools",
+      "enableAttachments",
       "enableSpeech",
       "speechProps",
       "attachIcon",
@@ -6866,6 +6870,9 @@ var PromptInput2 = React3__namespace.memo(
       "maxFileSize",
       "onError"
     ]);
+    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 +6900,48 @@ 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,
+        accept,
+        multiple,
+        maxFiles,
+        maxFileSize,
+        onError
+      }, 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(
+            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(
+                "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",
+                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,
@@ -6917,8 +6965,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 +8113,8 @@ var ChatPanel = React3__namespace.memo(
     onTaskRetry,
     onTaskStopAll,
     onTaskClick,
+    promptInputVariant = "default",
+    enableAttachments,
     enableSpeech = true,
     showHeader = true,
     sessionTitle,
@@ -8232,6 +8282,7 @@ var ChatPanel = React3__namespace.memo(
         /* @__PURE__ */ jsxRuntime.jsx(
           PromptInput2,
           {
+            variant: promptInputVariant,
             dialog,
             placeholder,
             value: promptValue,
@@ -8241,6 +8292,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"
@@ -14596,7 +14648,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 +14676,8 @@ var ScenePlayer = React3__namespace.forwardRef(
       "loading",
       "onStop",
       "enableSpeech",
+      "enableAttachments",
+      "promptInputVariant",
       "onPublish",
       "publishPlaceholder",
       "onSceneChange",
@@ -14936,6 +14992,7 @@ var ScenePlayer = React3__namespace.forwardRef(
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 PromptInput2,
                 {
+                  variant: promptInputVariant,
                   placeholder: placeholder || publishPlaceholder,
                   value: promptValue,
                   onChange: onPromptValueChange,
@@ -14943,6 +15000,7 @@ var ScenePlayer = React3__namespace.forwardRef(
                   loading,
                   onStop,
                   enableSpeech,
+                  enableAttachments,
                   className: "border border-border bg-background shadow-md overflow-hidden rounded-2xl"
                 }
               )