ai-design-system 0.1.102 → 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.stories.tsx

@@ -19,6 +19,8 @@ const meta = {
     onSubmit: fn(),
     onPublish: fn(),
     onSceneChange: fn(),
+    onPlayingChange: fn(),
+    onDownload: fn(),
   },
 } satisfies Meta<typeof ScenePlayer>;
 

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";
 
@@ -28,6 +28,11 @@ export interface ScenePlayerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
   avatarColor?: string;
   initialSceneIndex?: number;
   isMuted?: boolean;
+  isPlaying?: boolean;
+  onPlayingChange?: (isPlaying: boolean) => void;
+  videoUrl?: string;
+  downloadUrl?: string;
+  onDownload?: () => void;
   onBack?: () => void;
   onClose?: () => void;
   placeholder?: string;
@@ -40,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;
@@ -54,6 +61,11 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
       avatarColor = "bg-indigo-600",
       initialSceneIndex = 0,
       isMuted: initialMuted = false,
+      isPlaying: isPlayingProp,
+      onPlayingChange,
+      videoUrl,
+      downloadUrl,
+      onDownload,
       onBack,
       onClose,
       placeholder,
@@ -62,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,
@@ -80,6 +94,22 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
       return 0;
     });
 
+    const [isPlayingState, setIsPlayingState] = React.useState<boolean>(isPlayingProp ?? true);
+    const isPlaying = isPlayingProp !== undefined ? isPlayingProp : isPlayingState;
+
+    const setIsPlaying = React.useCallback(
+      (value: boolean | ((prev: boolean) => boolean)) => {
+        const nextVal = typeof value === "function" ? value(isPlaying) : value;
+        setIsPlayingState(nextVal);
+        onPlayingChange?.(nextVal);
+      },
+      [isPlaying, onPlayingChange]
+    );
+
+    const togglePlay = React.useCallback(() => {
+      setIsPlaying((prev) => !prev);
+    }, [setIsPlaying]);
+
     const [isMuted, setIsMuted] = React.useState<boolean>(initialMuted);
     const videoRef = React.useRef<HTMLVideoElement | null>(null);
 
@@ -117,41 +147,91 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
     }, [scenes, onSceneChange]);
 
     const handleSceneEnded = React.useCallback(() => {
-      if (!scenes.length) return;
+      if (!scenes.length || !isPlaying) return;
       setCurrentSceneIndex((prev) => {
         const nextIdx = prev < scenes.length - 1 ? prev + 1 : 0;
         onSceneChange?.(nextIdx, scenes[nextIdx]);
         return nextIdx;
       });
-    }, [scenes, onSceneChange]);
+    }, [scenes, onSceneChange, isPlaying]);
+
+    const handleDownload = React.useCallback(async () => {
+      if (onDownload) {
+        onDownload();
+        return;
+      }
+      const targetUrl = downloadUrl || videoUrl || activeScene?.scene_clip_url;
+      if (!targetUrl) return;
 
-    // Autoplay & mute handling
+      try {
+        const response = await fetch(targetUrl);
+        if (!response.ok) throw new Error("Fetch failed");
+        const blob = await response.blob();
+        const blobUrl = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = blobUrl;
+        link.download = targetUrl.split("/").pop()?.split("?")[0] || "video.mp4";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
+      } catch {
+        const link = document.createElement("a");
+        link.href = targetUrl;
+        link.download = targetUrl.split("/").pop()?.split("?")[0] || "video.mp4";
+        link.target = "_blank";
+        link.rel = "noopener noreferrer";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      }
+    }, [onDownload, downloadUrl, videoUrl, activeScene?.scene_clip_url]);
+
+    // Playback & mute synchronization
     React.useEffect(() => {
       const video = videoRef.current;
       if (!video) return;
 
       video.muted = isMuted;
-      const playPromise = video.play();
-      if (playPromise !== undefined) {
-        playPromise.catch(() => {
-          if (!isMuted) {
-            video.muted = true;
-            setIsMuted(true);
-            video.play().catch(() => {});
-          }
-        });
+
+      if (isPlaying) {
+        const playPromise = video.play();
+        if (playPromise !== undefined) {
+          playPromise.catch(() => {
+            if (!isMuted) {
+              video.muted = true;
+              setIsMuted(true);
+              video.play().catch(() => {});
+            }
+          });
+        }
+      } else {
+        video.pause();
       }
-    }, [activeScene?.scene_clip_url, isMuted]);
+    }, [activeScene?.scene_clip_url, isMuted, isPlaying]);
 
-    // Keyboard navigation
+    // Keyboard navigation & playback controls
     React.useEffect(() => {
       const handleKeyDown = (e: KeyboardEvent) => {
+        const target = e.target as HTMLElement | null;
+        if (
+          target &&
+          (target.tagName === "INPUT" ||
+            target.tagName === "TEXTAREA" ||
+            target.isContentEditable)
+        ) {
+          return;
+        }
+
         if (e.key === "ArrowLeft") {
           e.preventDefault();
           handlePrev();
-        } else if (e.key === "ArrowRight" || e.key === " ") {
+        } else if (e.key === "ArrowRight") {
           e.preventDefault();
           handleNext();
+        } else if (e.key === " " || e.key === "k" || e.key === "K") {
+          e.preventDefault();
+          togglePlay();
         } else if (e.key === "Escape") {
           e.preventDefault();
           handleBack?.();
@@ -163,7 +243,7 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
 
       window.addEventListener("keydown", handleKeyDown);
       return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [handlePrev, handleNext, handleBack]);
+    }, [handlePrev, handleNext, handleBack, togglePlay]);
 
     if (!scenes || scenes.length === 0) {
       return (
@@ -236,14 +316,6 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
               </Button>
             )}
 
-            <div
-              className={cn(
-                "w-9 h-9 rounded-full flex items-center justify-center font-bold text-sm text-white shrink-0 ring-1.5 ring-white/80 overflow-hidden",
-                avatarColor
-              )}
-            >
-              {avatarInitials}
-            </div>
             <div className="flex flex-col min-w-0 justify-center">
               <span className="font-bold text-sm text-white truncate max-w-[200px]">
                 {title}
@@ -255,6 +327,18 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
           </div>
 
           <div className="flex items-center gap-2 shrink-0">
+            {/* Play/Pause Toggle Button */}
+            <Button
+              variant="ghost"
+              size="icon"
+              data-testid="btn-toggle-play"
+              aria-label={isPlaying ? "Pause scene" : "Play scene"}
+              onClick={togglePlay}
+              className="h-8 w-8 rounded-full bg-black/40 hover:bg-white/20 text-white p-0 cursor-pointer"
+            >
+              <Icon name={isPlaying ? "pause" : "play"} className="w-4 h-4" />
+            </Button>
+
             {/* Mute/Unmute Toggle Button */}
             <Button
               variant="ghost"
@@ -266,6 +350,18 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
             >
               <Icon name={isMuted ? "volume-x" : "volume-2"} className="w-4 h-4" />
             </Button>
+
+            {/* Download Video Button */}
+            <Button
+              variant="ghost"
+              size="icon"
+              data-testid="btn-download"
+              aria-label="Download video"
+              onClick={handleDownload}
+              className="h-8 w-8 rounded-full bg-black/40 hover:bg-white/20 text-white p-0 cursor-pointer"
+            >
+              <Icon name="download" className="w-4 h-4" />
+            </Button>
           </div>
         </div>
 
@@ -303,8 +399,20 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
         </div>
 
         {/* Bottom PromptInput Composite from Design System */}
-        <div className="p-3 bg-gradient-to-t from-black via-black/90 to-transparent pt-4 z-20 shrink-0">
+        <div
+          className="p-3 bg-gradient-to-t from-black via-black/90 to-transparent pt-4 z-20 shrink-0"
+          onFocusCapture={() => {
+            setIsPlaying(false);
+          }}
+          onClickCapture={() => {
+            setIsPlaying(false);
+          }}
+          onTouchStartCapture={() => {
+            setIsPlaying(false);
+          }}
+        >
           <PromptInput
+            variant={promptInputVariant}
             placeholder={placeholder || publishPlaceholder}
             value={promptValue}
             onChange={onPromptValueChange}
@@ -312,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,