ai-design-system 0.1.101 → 0.1.103

package/components/composites/ScenePlayer/ScenePlayer.stories.tsx

@@ -16,8 +16,11 @@ const meta = {
   args: {
     onBack: fn(),
     onClose: fn(),
+    onSubmit: fn(),
     onPublish: fn(),
     onSceneChange: fn(),
+    onPlayingChange: fn(),
+    onDownload: fn(),
   },
 } satisfies Meta<typeof ScenePlayer>;
 

package/components/composites/ScenePlayer/ScenePlayer.tsx

@@ -1,8 +1,11 @@
 "use client";
 
 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 type { PromptInputMessage } from "@/components/ai-elements/prompt-input";
 import { cn } from "@/lib/utils";
 
 export interface SceneItem {
@@ -18,16 +21,31 @@ export interface SceneItem {
   [key: string]: unknown;
 }
 
-export interface ScenePlayerProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ScenePlayerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit"> {
   scenes: SceneItem[];
   title?: string;
   avatarInitials?: string;
   avatarColor?: string;
   initialSceneIndex?: number;
   isMuted?: boolean;
+  isPlaying?: boolean;
+  onPlayingChange?: (isPlaying: boolean) => void;
+  videoUrl?: string;
+  downloadUrl?: string;
+  onDownload?: () => void;
   onBack?: () => void;
   onClose?: () => void;
-  onPublish?: (currentScene: SceneItem) => void;
+  placeholder?: string;
+  promptValue?: string;
+  onPromptValueChange?: (value: string) => void;
+  onSubmit?: (
+    message: PromptInputMessage,
+    event: FormEvent<HTMLFormElement>
+  ) => void | Promise<void>;
+  loading?: boolean;
+  onStop?: () => void;
+  enableSpeech?: boolean;
+  onPublish?: (currentScene: SceneItem, text?: string) => void;
   publishPlaceholder?: string;
   onSceneChange?: (sceneIndex: number, scene: SceneItem) => void;
 }
@@ -41,10 +59,22 @@ 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,
+      promptValue,
+      onPromptValueChange,
+      onSubmit,
+      loading = false,
+      onStop,
+      enableSpeech = true,
       onPublish,
-      publishPlaceholder = "Ready to publish...",
+      publishPlaceholder = "Ask a question or provide instructions...",
       onSceneChange,
       className,
       ...props
@@ -60,11 +90,40 @@ 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);
 
     const activeScene = scenes[currentSceneIndex] || scenes[0];
 
+    const handlePromptSubmit = React.useCallback(
+      (message: PromptInputMessage, event: FormEvent<HTMLFormElement>) => {
+        if (onSubmit) {
+          onSubmit(message, event);
+          return;
+        }
+        if (onPublish) {
+          onPublish(activeScene, message.text);
+        }
+      },
+      [onSubmit, onPublish, activeScene]
+    );
+
     const handlePrev = React.useCallback(() => {
       if (!scenes.length) return;
       setCurrentSceneIndex((prev) => {
@@ -84,41 +143,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]);
 
-    // Autoplay & mute handling
+    const handleDownload = React.useCallback(async () => {
+      if (onDownload) {
+        onDownload();
+        return;
+      }
+      const targetUrl = downloadUrl || videoUrl || activeScene?.scene_clip_url;
+      if (!targetUrl) return;
+
+      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?.();
@@ -130,7 +239,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 (
@@ -203,14 +312,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}
@@ -222,6 +323,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"
@@ -233,6 +346,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>
 
@@ -269,21 +394,29 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
           </div>
         </div>
 
-        {/* Bottom Action Bar */}
-        <div className="flex items-center gap-3 px-4 py-3.5 bg-black z-20 shrink-0">
-          <div className="flex-1 h-11 rounded-full bg-white/15 border border-white/25 px-4 flex items-center text-sm text-white/65 select-none truncate">
-            {publishPlaceholder}
-          </div>
-          <Button
-            variant="ghost"
-            size="icon"
-            data-testid="btn-publish-scene"
-            aria-label="Publish scene"
-            onClick={() => onPublish?.(activeScene)}
-            className="w-11 h-11 rounded-full bg-emerald-500 hover:bg-emerald-600 text-white shrink-0 p-0 shadow-md cursor-pointer transition-transform active:scale-95"
-          >
-            <Icon name="send" className="w-4 h-4 text-white" />
-          </Button>
+        {/* 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"
+          onFocusCapture={() => {
+            setIsPlaying(false);
+          }}
+          onClickCapture={() => {
+            setIsPlaying(false);
+          }}
+          onTouchStartCapture={() => {
+            setIsPlaying(false);
+          }}
+        >
+          <PromptInput
+            placeholder={placeholder || publishPlaceholder}
+            value={promptValue}
+            onChange={onPromptValueChange}
+            onSubmit={handlePromptSubmit}
+            loading={loading}
+            onStop={onStop}
+            enableSpeech={enableSpeech}
+            className="border border-border bg-background shadow-md overflow-hidden rounded-2xl"
+          />
         </div>
       </div>
     );

package/dist/index.cjs

@@ -1026,6 +1026,14 @@ var defaultIcons = {
     viewBox: "0 0 24 24",
     path: "M8 5v14l11-7z"
   },
+  "pause": {
+    name: "pause",
+    viewBox: "0 0 24 24",
+    elements: [
+      { type: "rect", attrs: { x: "14", y: "4", width: "4", height: "16", rx: "1" } },
+      { type: "rect", attrs: { x: "6", y: "4", width: "4", height: "16", rx: "1" } }
+    ]
+  },
   "file-text": {
     name: "file-text",
     viewBox: "0 0 24 24",
@@ -14575,10 +14583,22 @@ var ScenePlayer = React3__namespace.forwardRef(
       avatarColor = "bg-indigo-600",
       initialSceneIndex = 0,
       isMuted: initialMuted = false,
+      isPlaying: isPlayingProp,
+      onPlayingChange,
+      videoUrl,
+      downloadUrl,
+      onDownload,
       onBack,
       onClose,
+      placeholder,
+      promptValue,
+      onPromptValueChange,
+      onSubmit,
+      loading = false,
+      onStop,
+      enableSpeech = true,
       onPublish,
-      publishPlaceholder = "Ready to publish...",
+      publishPlaceholder = "Ask a question or provide instructions...",
       onSceneChange,
       className
     } = _b, props = __objRest(_b, [
@@ -14588,8 +14608,20 @@ var ScenePlayer = React3__namespace.forwardRef(
       "avatarColor",
       "initialSceneIndex",
       "isMuted",
+      "isPlaying",
+      "onPlayingChange",
+      "videoUrl",
+      "downloadUrl",
+      "onDownload",
       "onBack",
       "onClose",
+      "placeholder",
+      "promptValue",
+      "onPromptValueChange",
+      "onSubmit",
+      "loading",
+      "onStop",
+      "enableSpeech",
       "onPublish",
       "publishPlaceholder",
       "onSceneChange",
@@ -14603,9 +14635,34 @@ var ScenePlayer = React3__namespace.forwardRef(
       }
       return 0;
     });
+    const [isPlayingState, setIsPlayingState] = React3__namespace.useState(isPlayingProp != null ? isPlayingProp : true);
+    const isPlaying = isPlayingProp !== void 0 ? isPlayingProp : isPlayingState;
+    const setIsPlaying = React3__namespace.useCallback(
+      (value) => {
+        const nextVal = typeof value === "function" ? value(isPlaying) : value;
+        setIsPlayingState(nextVal);
+        onPlayingChange == null ? void 0 : onPlayingChange(nextVal);
+      },
+      [isPlaying, onPlayingChange]
+    );
+    const togglePlay = React3__namespace.useCallback(() => {
+      setIsPlaying((prev) => !prev);
+    }, [setIsPlaying]);
     const [isMuted, setIsMuted] = React3__namespace.useState(initialMuted);
     const videoRef = React3__namespace.useRef(null);
     const activeScene = scenes[currentSceneIndex] || scenes[0];
+    const handlePromptSubmit = React3__namespace.useCallback(
+      (message, event) => {
+        if (onSubmit) {
+          onSubmit(message, event);
+          return;
+        }
+        if (onPublish) {
+          onPublish(activeScene, message.text);
+        }
+      },
+      [onSubmit, onPublish, activeScene]
+    );
     const handlePrev = React3__namespace.useCallback(() => {
       if (!scenes.length) return;
       setCurrentSceneIndex((prev) => {
@@ -14623,37 +14680,79 @@ var ScenePlayer = React3__namespace.forwardRef(
       });
     }, [scenes, onSceneChange]);
     const handleSceneEnded = React3__namespace.useCallback(() => {
-      if (!scenes.length) return;
+      if (!scenes.length || !isPlaying) return;
       setCurrentSceneIndex((prev) => {
         const nextIdx = prev < scenes.length - 1 ? prev + 1 : 0;
         onSceneChange == null ? void 0 : onSceneChange(nextIdx, scenes[nextIdx]);
         return nextIdx;
       });
-    }, [scenes, onSceneChange]);
+    }, [scenes, onSceneChange, isPlaying]);
+    const handleDownload = React3__namespace.useCallback(async () => {
+      var _a3, _b2;
+      if (onDownload) {
+        onDownload();
+        return;
+      }
+      const targetUrl = downloadUrl || videoUrl || (activeScene == null ? void 0 : activeScene.scene_clip_url);
+      if (!targetUrl) return;
+      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 = ((_a3 = targetUrl.split("/").pop()) == null ? void 0 : _a3.split("?")[0]) || "video.mp4";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        setTimeout(() => URL.revokeObjectURL(blobUrl), 1e3);
+      } catch (e) {
+        const link = document.createElement("a");
+        link.href = targetUrl;
+        link.download = ((_b2 = targetUrl.split("/").pop()) == null ? void 0 : _b2.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 == null ? void 0 : activeScene.scene_clip_url]);
     React3__namespace.useEffect(() => {
       const video = videoRef.current;
       if (!video) return;
       video.muted = isMuted;
-      const playPromise = video.play();
-      if (playPromise !== void 0) {
-        playPromise.catch(() => {
-          if (!isMuted) {
-            video.muted = true;
-            setIsMuted(true);
-            video.play().catch(() => {
-            });
-          }
-        });
+      if (isPlaying) {
+        const playPromise = video.play();
+        if (playPromise !== void 0) {
+          playPromise.catch(() => {
+            if (!isMuted) {
+              video.muted = true;
+              setIsMuted(true);
+              video.play().catch(() => {
+              });
+            }
+          });
+        }
+      } else {
+        video.pause();
       }
-    }, [activeScene == null ? void 0 : activeScene.scene_clip_url, isMuted]);
+    }, [activeScene == null ? void 0 : activeScene.scene_clip_url, isMuted, isPlaying]);
     React3__namespace.useEffect(() => {
       const handleKeyDown = (e) => {
+        const target = e.target;
+        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 == null ? void 0 : handleBack();
@@ -14664,7 +14763,7 @@ var ScenePlayer = React3__namespace.forwardRef(
       };
       window.addEventListener("keydown", handleKeyDown);
       return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [handlePrev, handleNext, handleBack]);
+    }, [handlePrev, handleNext, handleBack, togglePlay]);
     if (!scenes || scenes.length === 0) {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -14734,16 +14833,6 @@ var ScenePlayer = React3__namespace.forwardRef(
                   children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "arrow-left", className: "w-5 h-5 text-white" })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "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
-                  ),
-                  children: avatarInitials
-                }
-              ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 justify-center", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-sm text-white truncate max-w-[200px]", children: title }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-white/75 truncate", children: [
@@ -14754,18 +14843,44 @@ var ScenePlayer = React3__namespace.forwardRef(
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-              Button2,
-              {
-                variant: "ghost",
-                size: "icon",
-                "data-testid": "btn-toggle-mute",
-                "aria-label": isMuted ? "Unmute audio" : "Mute audio",
-                onClick: () => setIsMuted((prev) => !prev),
-                className: "h-8 w-8 rounded-full bg-black/40 hover:bg-white/20 text-white p-0 cursor-pointer",
-                children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: isMuted ? "volume-x" : "volume-2", className: "w-4 h-4" })
-              }
-            ) })
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button2,
+                {
+                  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",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: isPlaying ? "pause" : "play", className: "w-4 h-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button2,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  "data-testid": "btn-toggle-mute",
+                  "aria-label": isMuted ? "Unmute audio" : "Mute audio",
+                  onClick: () => setIsMuted((prev) => !prev),
+                  className: "h-8 w-8 rounded-full bg-black/40 hover:bg-white/20 text-white p-0 cursor-pointer",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: isMuted ? "volume-x" : "volume-2", className: "w-4 h-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button2,
+                {
+                  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",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "download", className: "w-4 h-4" })
+                }
+              )
+            ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative flex items-center justify-center bg-black overflow-hidden min-h-0", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -14805,21 +14920,34 @@ var ScenePlayer = React3__namespace.forwardRef(
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-4 py-3.5 bg-black z-20 shrink-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-11 rounded-full bg-white/15 border border-white/25 px-4 flex items-center text-sm text-white/65 select-none truncate", children: publishPlaceholder }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button2,
-              {
-                variant: "ghost",
-                size: "icon",
-                "data-testid": "btn-publish-scene",
-                "aria-label": "Publish scene",
-                onClick: () => onPublish == null ? void 0 : onPublish(activeScene),
-                className: "w-11 h-11 rounded-full bg-emerald-500 hover:bg-emerald-600 text-white shrink-0 p-0 shadow-md cursor-pointer transition-transform active:scale-95",
-                children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "send", className: "w-4 h-4 text-white" })
-              }
-            )
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "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);
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                PromptInput2,
+                {
+                  placeholder: placeholder || publishPlaceholder,
+                  value: promptValue,
+                  onChange: onPromptValueChange,
+                  onSubmit: handlePromptSubmit,
+                  loading,
+                  onStop,
+                  enableSpeech,
+                  className: "border border-border bg-background shadow-md overflow-hidden rounded-2xl"
+                }
+              )
+            }
+          )
         ]
       })
     );