ai-design-system 0.1.100 → 0.1.102

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

@@ -14,7 +14,9 @@ const meta = {
   tags: ["autodocs"],
   parameters: { layout: "fullscreen" },
   args: {
+    onBack: fn(),
     onClose: fn(),
+    onSubmit: fn(),
     onPublish: fn(),
     onSceneChange: fn(),
   },

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,15 +21,26 @@ 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;
+  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;
 }
@@ -40,15 +54,25 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
       avatarColor = "bg-indigo-600",
       initialSceneIndex = 0,
       isMuted: initialMuted = false,
+      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
     },
     ref
   ) => {
+    const handleBack = onBack || onClose;
+
     const [currentSceneIndex, setCurrentSceneIndex] = React.useState<number>(() => {
       if (initialSceneIndex >= 0 && initialSceneIndex < scenes.length) {
         return initialSceneIndex;
@@ -61,6 +85,19 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
 
     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) => {
@@ -117,7 +154,7 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
           handleNext();
         } else if (e.key === "Escape") {
           e.preventDefault();
-          onClose?.();
+          handleBack?.();
         } else if (e.key === "m" || e.key === "M") {
           e.preventDefault();
           setIsMuted((prev) => !prev);
@@ -126,7 +163,7 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
 
       window.addEventListener("keydown", handleKeyDown);
       return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [handlePrev, handleNext, onClose]);
+    }, [handlePrev, handleNext, handleBack]);
 
     if (!scenes || scenes.length === 0) {
       return (
@@ -137,14 +174,14 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
           {...props}
         >
           <p className="text-white/70 text-sm">No scenes available</p>
-          {onClose && (
+          {handleBack && (
             <Button
               variant="ghost"
-              onClick={onClose}
+              onClick={handleBack}
               className="mt-4 text-white hover:bg-white/20"
-              data-testid="btn-close"
+              data-testid="btn-back"
             >
-              Close
+              Back
             </Button>
           )}
         </div>
@@ -183,8 +220,22 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
         </div>
 
         {/* Story Header Overlay */}
-        <div className="flex items-center justify-between px-4 py-2.5 z-20 shrink-0">
-          <div className="flex items-center gap-2.5 min-w-0">
+        <div className="flex items-center justify-between px-3 py-2.5 z-20 shrink-0">
+          <div className="flex items-center gap-2 min-w-0">
+            {/* Back Button */}
+            {handleBack && (
+              <Button
+                variant="ghost"
+                size="icon"
+                data-testid="btn-back"
+                aria-label="Back"
+                onClick={handleBack}
+                className="h-8 w-8 rounded-full bg-black/40 hover:bg-white/20 text-white p-0 cursor-pointer shrink-0"
+              >
+                <Icon name="arrow-left" className="w-5 h-5 text-white" />
+              </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",
@@ -215,20 +266,6 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
             >
               <Icon name={isMuted ? "volume-x" : "volume-2"} className="w-4 h-4" />
             </Button>
-
-            {/* Close Button */}
-            {onClose && (
-              <Button
-                variant="ghost"
-                size="icon"
-                data-testid="btn-close"
-                aria-label="Close scenes view"
-                onClick={onClose}
-                className="h-8 w-8 rounded-full bg-black/40 hover:bg-white/20 text-white p-0 cursor-pointer"
-              >
-                <Icon name="x" className="w-4 h-4" />
-              </Button>
-            )}
           </div>
         </div>
 
@@ -265,21 +302,18 @@ 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">
+          <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

@@ -14575,9 +14575,17 @@ var ScenePlayer = React3__namespace.forwardRef(
       avatarColor = "bg-indigo-600",
       initialSceneIndex = 0,
       isMuted: initialMuted = false,
+      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, [
@@ -14587,13 +14595,22 @@ var ScenePlayer = React3__namespace.forwardRef(
       "avatarColor",
       "initialSceneIndex",
       "isMuted",
+      "onBack",
       "onClose",
+      "placeholder",
+      "promptValue",
+      "onPromptValueChange",
+      "onSubmit",
+      "loading",
+      "onStop",
+      "enableSpeech",
       "onPublish",
       "publishPlaceholder",
       "onSceneChange",
       "className"
     ]);
     var _a2;
+    const handleBack = onBack || onClose;
     const [currentSceneIndex, setCurrentSceneIndex] = React3__namespace.useState(() => {
       if (initialSceneIndex >= 0 && initialSceneIndex < scenes.length) {
         return initialSceneIndex;
@@ -14603,6 +14620,18 @@ var ScenePlayer = React3__namespace.forwardRef(
     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) => {
@@ -14653,7 +14682,7 @@ var ScenePlayer = React3__namespace.forwardRef(
           handleNext();
         } else if (e.key === "Escape") {
           e.preventDefault();
-          onClose == null ? void 0 : onClose();
+          handleBack == null ? void 0 : handleBack();
         } else if (e.key === "m" || e.key === "M") {
           e.preventDefault();
           setIsMuted((prev) => !prev);
@@ -14661,7 +14690,7 @@ var ScenePlayer = React3__namespace.forwardRef(
       };
       window.addEventListener("keydown", handleKeyDown);
       return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [handlePrev, handleNext, onClose]);
+    }, [handlePrev, handleNext, handleBack]);
     if (!scenes || scenes.length === 0) {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -14672,14 +14701,14 @@ var ScenePlayer = React3__namespace.forwardRef(
         }, props), {
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white/70 text-sm", children: "No scenes available" }),
-            onClose && /* @__PURE__ */ jsxRuntime.jsx(
+            handleBack && /* @__PURE__ */ jsxRuntime.jsx(
               Button2,
               {
                 variant: "ghost",
-                onClick: onClose,
+                onClick: handleBack,
                 className: "mt-4 text-white hover:bg-white/20",
-                "data-testid": "btn-close",
-                children: "Close"
+                "data-testid": "btn-back",
+                children: "Back"
               }
             )
           ]
@@ -14717,8 +14746,20 @@ var ScenePlayer = React3__namespace.forwardRef(
               scene.id || `scene-${idx}`
             );
           }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 z-20 shrink-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-3 py-2.5 z-20 shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+              handleBack && /* @__PURE__ */ jsxRuntime.jsx(
+                Button2,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  "data-testid": "btn-back",
+                  "aria-label": "Back",
+                  onClick: handleBack,
+                  className: "h-8 w-8 rounded-full bg-black/40 hover:bg-white/20 text-white p-0 cursor-pointer shrink-0",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "arrow-left", className: "w-5 h-5 text-white" })
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -14739,32 +14780,18 @@ var ScenePlayer = React3__namespace.forwardRef(
                 ] })
               ] })
             ] }),
-            /* @__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-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" })
-                }
-              ),
-              onClose && /* @__PURE__ */ jsxRuntime.jsx(
-                Button2,
-                {
-                  variant: "ghost",
-                  size: "icon",
-                  "data-testid": "btn-close",
-                  "aria-label": "Close scenes view",
-                  onClick: onClose,
-                  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: "x", className: "w-4 h-4" })
-                }
-              )
-            ] })
+            /* @__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-1 relative flex items-center justify-center bg-black overflow-hidden min-h-0", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -14804,21 +14831,19 @@ 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", 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"
+            }
+          ) })
         ]
       })
     );