ai-design-system 0.1.97 → 0.1.99

package/components/composites/SessionHeader/SessionHeader.tsx

@@ -20,12 +20,14 @@ import type { FileDownloadResult } from '@/components/composites/FileTreeExplore
 
 
 export interface SessionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string;
   sessions?: ChatSessionInfo[];
   activeSessionId?: string | null;
   onNewSession?: () => void;
   onCloseSession?: (id: string) => void;
   onSelectSession?: (id: string) => void;
   onDownloadSession?: () => Promise<FileDownloadResult | undefined>;
+  showActions?: boolean;
 }
 
 /**
@@ -35,7 +37,7 @@ export interface SessionHeaderProps extends React.HTMLAttributes<HTMLDivElement>
  * and a dropdown history of past sessions.
  */
 export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps>(
-  ({ sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, className, ...props }, ref) => {
+  ({ title, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, className, ...props }, ref) => {
     const activeSession = sessions?.find(s => s.id === activeSessionId);
     const downloadRef = React.useRef<HTMLAnchorElement>(null);
 
@@ -53,6 +55,10 @@ export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps
       URL.revokeObjectURL(url);
     }, [onDownloadSession]);
 
+    const displayTitle = title || (activeSessionId 
+      ? (activeSession?.title || 'Untitled Session')
+      : 'New Session');
+
     return (
       <div 
         ref={ref}
@@ -61,48 +67,48 @@ export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps
       >
         <div className="flex items-center space-x-2 overflow-hidden">
           <span className="text-sm font-medium truncate">
-            {activeSessionId 
-              ? (activeSession?.title || 'Untitled Session')
-              : 'New Session'}
+            {displayTitle}
           </span>
         </div>
-        <div className="flex items-center space-x-1 flex-none">
-          {onDownloadSession && (
-            <Button variant="ghost" size="icon" onClick={handleDownloadClick} className="h-8 w-8" title="Download Chat History">
-              <Icon name="download" className="h-4 w-4" />
-            </Button>
-          )}
-          <Button variant="ghost" size="icon" onClick={onNewSession} className="h-8 w-8" title="New Session">
-            <Icon name="plus" className="h-4 w-4" />
-          </Button>
-          
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" size="icon" className="h-8 w-8">
-                <Icon name="clock" className="h-4 w-4" />
+        {showActions && (
+          <div className="flex items-center space-x-1 flex-none">
+            {onDownloadSession && (
+              <Button variant="ghost" size="icon" onClick={handleDownloadClick} className="h-8 w-8" title="Download Chat History">
+                <Icon name="download" className="h-4 w-4" />
               </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-64 max-h-80 overflow-y-auto">
-              <DropdownMenuLabel>Chat History</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              {sessions && sessions.length > 0 ? (
-                sessions.map((session) => (
-                  <DropdownMenuItem 
-                    key={session.id}
-                    onClick={() => onSelectSession?.(session.id)}
-                    className="flex flex-col items-start py-2 cursor-pointer"
-                  >
-                    <span className="text-sm font-medium truncate w-full">{session.title || 'Untitled Session'}</span>
-                    <span className="text-xs text-muted-foreground">{new Date(session.created_at).toLocaleString()}</span>
-                  </DropdownMenuItem>
-                ))
-              ) : (
-                <div className="p-4 text-sm text-center text-muted-foreground">No previous sessions</div>
-              )}
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <a ref={downloadRef} style={{ display: 'none' }} />
-        </div>
+            )}
+            <Button variant="ghost" size="icon" onClick={onNewSession} className="h-8 w-8" title="New Session">
+              <Icon name="plus" className="h-4 w-4" />
+            </Button>
+            
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-8 w-8">
+                  <Icon name="clock" className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-64 max-h-80 overflow-y-auto">
+                <DropdownMenuLabel>Chat History</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                {sessions && sessions.length > 0 ? (
+                  sessions.map((session) => (
+                    <DropdownMenuItem 
+                      key={session.id}
+                      onClick={() => onSelectSession?.(session.id)}
+                      className="flex flex-col items-start py-2 cursor-pointer"
+                    >
+                      <span className="text-sm font-medium truncate w-full">{session.title || 'Untitled Session'}</span>
+                      <span className="text-xs text-muted-foreground">{new Date(session.created_at).toLocaleString()}</span>
+                    </DropdownMenuItem>
+                  ))
+                ) : (
+                  <div className="p-4 text-sm text-center text-muted-foreground">No previous sessions</div>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <a ref={downloadRef} style={{ display: 'none' }} />
+          </div>
+        )}
       </div>
     );
   }

package/components/composites/StoriesBar/StoriesBar.tsx

@@ -49,6 +49,8 @@ function getStoryStatusStyle(status?: StoryItem["status"]) {
 
 export const StoriesBar = React.forwardRef<HTMLDivElement, StoriesBarProps>(
   ({ stories, activeStoryId, onStoryClick, defaultIcon = "clapperboard", className, ...props }, ref) => {
+    const hasActiveStory = Boolean(activeStoryId);
+
     return (
       <div
         ref={ref}
@@ -68,16 +70,19 @@ export const StoriesBar = React.forwardRef<HTMLDivElement, StoriesBarProps>(
                 key={story.id}
                 variant="ghost"
                 onClick={() => onStoryClick(story)}
-                className="flex flex-col items-center gap-1 h-auto p-0 hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-lg cursor-pointer group shrink-0"
+                className={cn(
+                  "flex flex-col items-center gap-1 h-auto p-0 hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-lg cursor-pointer group shrink-0 transition-all duration-200",
+                  hasActiveStory && (isActive ? "opacity-100 scale-105" : "opacity-35 hover:opacity-60")
+                )}
                 data-testid={`btn-story-${story.id}`}
                 aria-label={`Open story: ${story.title}`}
               >
                 <div className="relative w-9 h-9 shrink-0 aspect-square rounded-full transition-transform group-hover:scale-105">
                   <div
                     className={cn(
-                      "w-full h-full rounded-full flex items-center justify-center border transition-colors overflow-hidden select-none",
+                      "w-full h-full rounded-full flex items-center justify-center border transition-all overflow-hidden select-none",
                       isActive
-                        ? "border-primary bg-muted/60"
+                        ? "border-primary bg-muted/60 ring-2 ring-primary/60 shadow-lg shadow-primary/40"
                         : "border-border/50 bg-muted/40"
                     )}
                   >

package/components/features/ChatPanel/ChatPanel.stories.tsx

@@ -411,4 +411,26 @@ export const WithImageAndAudioAttachments: Story = {
   },
 };
 
+/**
+ * Sheet Presentation - Floating bottom-sheet modal overlay
+ */
+export const SheetPresentation: Story = {
+  args: {
+    variant: "sheet",
+    messages: inputStateMessages,
+    sessionTitle: "Video Generation Session",
+    placeholder: "Ask a question or describe a task...",
+    onSubmit: (msg: PromptInputMessage) => console.log("Submitted:", msg),
+    onClose: () => alert("Close sheet triggered"),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Floating bottom-sheet panel presentation with frosted backdrop blur overlay, elevated surface, and grab handle.",
+      },
+    },
+  },
+};
+
 

package/components/features/ChatPanel/ChatPanel.tsx

@@ -204,6 +204,27 @@ export interface ChatPanelProps {
    * @default true
    */
   showHeader?: boolean;
+  /**
+   * Title override for the session header
+   */
+  sessionTitle?: string;
+  /**
+   * Whether to show action buttons in the session header
+   * @default true
+   */
+  showSessionActions?: boolean;
+  /**
+   * Presentation variant for ChatPanel:
+   * - "default": standard full flex-1 panel (default)
+   * - "sheet": elevated floating bottom-sheet panel with frosted backdrop blur overlay,
+   *   rounded surface, shadow, grab handle, and dismiss backdrop click.
+   * @default "default"
+   */
+  variant?: "default" | "sheet";
+  /**
+   * Callback fired when clicking the backdrop overlay or dismissing the sheet (when variant="sheet")
+   */
+  onClose?: () => void;
 }
 
 /**
@@ -249,6 +270,10 @@ export const ChatPanel = React.memo<ChatPanelProps>(
     onTaskClick,
     enableSpeech = true,
     showHeader = true,
+    sessionTitle,
+    showSessionActions = true,
+    variant = "default",
+    onClose,
   }) => {
     // File change queue state
     const [fileChangeState, setFileChangeState] = React.useState<
@@ -400,11 +425,13 @@ export const ChatPanel = React.memo<ChatPanelProps>(
       );
     }, [loading, messages]);
 
-    return (
-      <div className={`relative flex h-full flex-col ${className || ""}`}>
+    const chatContent = (
+      <div className={cn("relative flex h-full flex-col", variant !== "sheet" && className)}>
         {/* Chat Session Header */}
         {showHeader && (
           <SessionHeader
+            title={sessionTitle}
+            showActions={showSessionActions}
             sessions={sessions}
             activeSessionId={activeSessionId}
             onNewSession={onNewSession}
@@ -457,6 +484,40 @@ export const ChatPanel = React.memo<ChatPanelProps>(
         </div>
       </div>
     );
+
+    if (variant === "sheet") {
+      return (
+        <div
+          className="absolute inset-0 z-50 flex flex-col justify-end backdrop-blur-md bg-black/60"
+          data-testid="story-chat-head-overlay"
+        >
+          <div
+            className="absolute inset-0 cursor-pointer"
+            onClick={onClose}
+            data-testid="story-chat-head-backdrop"
+            aria-label="Close sheet"
+          />
+          <div
+            className={cn(
+              "relative z-10 flex flex-col bg-card rounded-2xl border border-border shadow-2xl h-[85%] mx-4 mb-4 overflow-hidden",
+              className
+            )}
+            data-testid="story-chat-head-popup"
+          >
+            <div
+              className="w-9 h-1 rounded-full bg-muted-foreground/30 mx-auto mt-2.5 mb-1 shrink-0"
+              data-testid="story-sheet-handle"
+              aria-hidden="true"
+            />
+            <div className="flex-1 flex flex-col min-h-0">
+              {chatContent}
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return chatContent;
   }
 );
 

package/dist/index.cjs

@@ -7786,7 +7786,7 @@ var ApprovalCard = React3__namespace.memo(
 ApprovalCard.displayName = "ApprovalCard";
 var SessionHeader = React3__namespace.forwardRef(
   (_a, ref) => {
-    var _b = _a, { sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, className } = _b, props = __objRest(_b, ["sessions", "activeSessionId", "onNewSession", "onCloseSession", "onSelectSession", "onDownloadSession", "className"]);
+    var _b = _a, { title, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, className } = _b, props = __objRest(_b, ["title", "sessions", "activeSessionId", "onNewSession", "onCloseSession", "onSelectSession", "onDownloadSession", "showActions", "className"]);
     const activeSession = sessions == null ? void 0 : sessions.find((s) => s.id === activeSessionId);
     const downloadRef = React3__namespace.useRef(null);
     const handleDownloadClick = React3__namespace.useCallback(async () => {
@@ -7802,6 +7802,7 @@ var SessionHeader = React3__namespace.forwardRef(
       }
       URL.revokeObjectURL(url);
     }, [onDownloadSession]);
+    const displayTitle = title || (activeSessionId ? (activeSession == null ? void 0 : activeSession.title) || "Untitled Session" : "New Session");
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       __spreadProps(__spreadValues({
@@ -7809,8 +7810,8 @@ var SessionHeader = React3__namespace.forwardRef(
         className: `flex flex-none items-center justify-between px-4 py-2 border-b border-border bg-background ${className || ""}`
       }, props), {
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-2 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate", children: activeSessionId ? (activeSession == null ? void 0 : activeSession.title) || "Untitled Session" : "New Session" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-1 flex-none", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-2 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate", children: displayTitle }) }),
+          showActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-1 flex-none", children: [
             onDownloadSession && /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "ghost", size: "icon", onClick: handleDownloadClick, className: "h-8 w-8", title: "Download Chat History", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "download", className: "h-4 w-4" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "ghost", size: "icon", onClick: onNewSession, className: "h-8 w-8", title: "New Session", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "plus", className: "h-4 w-4" }) }),
             /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2, { children: [
@@ -8039,7 +8040,11 @@ var ChatPanel = React3__namespace.memo(
     onTaskStopAll,
     onTaskClick,
     enableSpeech = true,
-    showHeader = true
+    showHeader = true,
+    sessionTitle,
+    showSessionActions = true,
+    variant = "default",
+    onClose
   }) => {
     const [fileChangeState, setFileChangeState] = React3__namespace.useState("approval-requested");
     const [approval, setApproval] = React3__namespace.useState({});
@@ -8157,10 +8162,12 @@ var ChatPanel = React3__namespace.memo(
         }
       );
     }, [loading, messages]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative flex h-full flex-col ${className || ""}`, children: [
+    const chatContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative flex h-full flex-col", variant !== "sheet" && className), children: [
       showHeader && /* @__PURE__ */ jsxRuntime.jsx(
         SessionHeader,
         {
+          title: sessionTitle,
+          showActions: showSessionActions,
           sessions,
           activeSessionId,
           onNewSession,
@@ -8216,6 +8223,48 @@ var ChatPanel = React3__namespace.memo(
         )
       ] })
     ] });
+    if (variant === "sheet") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "absolute inset-0 z-50 flex flex-col justify-end backdrop-blur-md bg-black/60",
+          "data-testid": "story-chat-head-overlay",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "absolute inset-0 cursor-pointer",
+                onClick: onClose,
+                "data-testid": "story-chat-head-backdrop",
+                "aria-label": "Close sheet"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "relative z-10 flex flex-col bg-card rounded-2xl border border-border shadow-2xl h-[85%] mx-4 mb-4 overflow-hidden",
+                  className
+                ),
+                "data-testid": "story-chat-head-popup",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "w-9 h-1 rounded-full bg-muted-foreground/30 mx-auto mt-2.5 mb-1 shrink-0",
+                      "data-testid": "story-sheet-handle",
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex flex-col min-h-0", children: chatContent })
+                ]
+              }
+            )
+          ]
+        }
+      );
+    }
+    return chatContent;
   }
 );
 ChatPanel.displayName = "ChatPanel";
@@ -14416,6 +14465,7 @@ function getStoryStatusStyle(status) {
 var StoriesBar = React3__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { stories, activeStoryId, onStoryClick, defaultIcon = "clapperboard", className } = _b, props = __objRest(_b, ["stories", "activeStoryId", "onStoryClick", "defaultIcon", "className"]);
+    const hasActiveStory = Boolean(activeStoryId);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       __spreadProps(__spreadValues({
@@ -14433,7 +14483,10 @@ var StoriesBar = React3__namespace.forwardRef(
             {
               variant: "ghost",
               onClick: () => onStoryClick(story),
-              className: "flex flex-col items-center gap-1 h-auto p-0 hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-lg cursor-pointer group shrink-0",
+              className: cn(
+                "flex flex-col items-center gap-1 h-auto p-0 hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-lg cursor-pointer group shrink-0 transition-all duration-200",
+                hasActiveStory && (isActive ? "opacity-100 scale-105" : "opacity-35 hover:opacity-60")
+              ),
               "data-testid": `btn-story-${story.id}`,
               "aria-label": `Open story: ${story.title}`,
               children: [
@@ -14442,8 +14495,8 @@ var StoriesBar = React3__namespace.forwardRef(
                     "div",
                     {
                       className: cn(
-                        "w-full h-full rounded-full flex items-center justify-center border transition-colors overflow-hidden select-none",
-                        isActive ? "border-primary bg-muted/60" : "border-border/50 bg-muted/40"
+                        "w-full h-full rounded-full flex items-center justify-center border transition-all overflow-hidden select-none",
+                        isActive ? "border-primary bg-muted/60 ring-2 ring-primary/60 shadow-lg shadow-primary/40" : "border-border/50 bg-muted/40"
                       ),
                       children: story.thumbnailUrl ? /* @__PURE__ */ jsxRuntime.jsx(
                         "img",