ai-design-system 0.1.96 → 0.1.98

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

@@ -31,20 +31,17 @@ function getStoryStatusStyle(status?: StoryItem["status"]) {
     case "generating":
       return {
         iconColor: "text-amber-500",
-        ringClass: "ring-2 ring-amber-500 animate-pulse",
         badgeBg: "bg-amber-500",
       };
     case "ready":
       return {
         iconColor: "text-emerald-500",
-        ringClass: "ring-1 ring-emerald-500/70 group-hover:ring-emerald-500",
         badgeBg: "bg-emerald-500",
       };
     case "draft":
     default:
       return {
         iconColor: "text-muted-foreground",
-        ringClass: "ring-1 ring-border group-hover:ring-primary/60",
         badgeBg: "bg-muted-foreground",
       };
   }
@@ -55,11 +52,11 @@ export const StoriesBar = React.forwardRef<HTMLDivElement, StoriesBarProps>(
     return (
       <div
         ref={ref}
-        className={cn("w-full border-b shrink-0", className)}
+        className={cn("w-full border-b border-border bg-background shrink-0", className)}
         data-testid="stories-bar"
         {...props}
       >
-        <div className="flex items-center gap-3 overflow-x-auto no-scrollbar scroll-smooth">
+        <div className="flex items-center gap-2.5 px-3 py-1.5 overflow-x-auto no-scrollbar scroll-smooth">
           {stories.map((story) => {
             const isActive = story.id === activeStoryId;
             const isGenerating = story.status === "generating";
@@ -75,15 +72,15 @@ export const StoriesBar = React.forwardRef<HTMLDivElement, StoriesBarProps>(
                 data-testid={`btn-story-${story.id}`}
                 aria-label={`Open story: ${story.title}`}
               >
-                <div
-                  className={cn(
-                    "relative w-12 h-12 shrink-0 aspect-square rounded-full transition-transform group-hover:scale-105",
-                    isActive
-                      ? "ring-2 ring-primary ring-offset-2 ring-offset-background"
-                      : statusStyle.ringClass
-                  )}
-                >
-                  <div className="w-full h-full rounded-full flex items-center justify-center border shadow-sm overflow-hidden select-none">
+                <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",
+                      isActive
+                        ? "border-primary bg-muted/60"
+                        : "border-border/50 bg-muted/40"
+                    )}
+                  >
                     {story.thumbnailUrl ? (
                       <img
                         src={story.thumbnailUrl}
@@ -93,20 +90,20 @@ export const StoriesBar = React.forwardRef<HTMLDivElement, StoriesBarProps>(
                     ) : (
                       <Icon
                         name={iconName}
-                        className={cn("w-5 h-5 transition-colors", statusStyle.iconColor)}
+                        className={cn("w-4 h-4 transition-colors", statusStyle.iconColor)}
                       />
                     )}
                   </div>
 
                   {isGenerating ? (
-                    <span className="absolute bottom-0 right-0 flex h-2.5 w-2.5">
+                    <span className="absolute bottom-0 right-0 flex h-2 w-2">
                       <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-500 opacity-75" />
-                      <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-amber-500" />
+                      <span className="relative inline-flex rounded-full h-2 w-2 bg-amber-500" />
                     </span>
                   ) : (
                     <span
                       className={cn(
-                        "absolute bottom-0 right-0 inline-flex rounded-full h-2.5 w-2.5 ring-2 ring-background",
+                        "absolute bottom-0 right-0 inline-flex rounded-full h-2 w-2 ring-1.5 ring-background",
                         statusStyle.badgeBg
                       )}
                     />
@@ -115,7 +112,7 @@ export const StoriesBar = React.forwardRef<HTMLDivElement, StoriesBarProps>(
 
                 <span
                   className={cn(
-                    "text-xs truncate max-w-[58px] text-center",
+                    "text-[10px] leading-tight truncate max-w-[56px] text-center",
                     isActive
                       ? "font-semibold text-foreground"
                       : "text-muted-foreground group-hover:text-foreground"

package/components/features/ChatPanel/ChatPanel.tsx

@@ -204,6 +204,15 @@ 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;
 }
 
 /**
@@ -249,6 +258,8 @@ export const ChatPanel = React.memo<ChatPanelProps>(
     onTaskClick,
     enableSpeech = true,
     showHeader = true,
+    sessionTitle,
+    showSessionActions = true,
   }) => {
     // File change queue state
     const [fileChangeState, setFileChangeState] = React.useState<
@@ -405,6 +416,8 @@ export const ChatPanel = React.memo<ChatPanelProps>(
         {/* Chat Session Header */}
         {showHeader && (
           <SessionHeader
+            title={sessionTitle}
+            showActions={showSessionActions}
             sessions={sessions}
             activeSessionId={activeSessionId}
             onNewSession={onNewSession}

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,9 @@ var ChatPanel = React3__namespace.memo(
     onTaskStopAll,
     onTaskClick,
     enableSpeech = true,
-    showHeader = true
+    showHeader = true,
+    sessionTitle,
+    showSessionActions = true
   }) => {
     const [fileChangeState, setFileChangeState] = React3__namespace.useState("approval-requested");
     const [approval, setApproval] = React3__namespace.useState({});
@@ -8161,6 +8164,8 @@ var ChatPanel = React3__namespace.memo(
       showHeader && /* @__PURE__ */ jsxRuntime.jsx(
         SessionHeader,
         {
+          title: sessionTitle,
+          showActions: showSessionActions,
           sessions,
           activeSessionId,
           onNewSession,
@@ -14398,20 +14403,17 @@ function getStoryStatusStyle(status) {
     case "generating":
       return {
         iconColor: "text-amber-500",
-        ringClass: "ring-2 ring-amber-500 animate-pulse",
         badgeBg: "bg-amber-500"
       };
     case "ready":
       return {
         iconColor: "text-emerald-500",
-        ringClass: "ring-1 ring-emerald-500/70 group-hover:ring-emerald-500",
         badgeBg: "bg-emerald-500"
       };
     case "draft":
     default:
       return {
         iconColor: "text-muted-foreground",
-        ringClass: "ring-1 ring-border group-hover:ring-primary/60",
         badgeBg: "bg-muted-foreground"
       };
   }
@@ -14423,10 +14425,10 @@ var StoriesBar = React3__namespace.forwardRef(
       "div",
       __spreadProps(__spreadValues({
         ref,
-        className: cn("w-full border-b shrink-0", className),
+        className: cn("w-full border-b border-border bg-background shrink-0", className),
         "data-testid": "stories-bar"
       }, props), {
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 overflow-x-auto no-scrollbar scroll-smooth", children: stories.map((story) => {
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2.5 px-3 py-1.5 overflow-x-auto no-scrollbar scroll-smooth", children: stories.map((story) => {
           const isActive = story.id === activeStoryId;
           const isGenerating = story.status === "generating";
           const statusStyle = getStoryStatusStyle(story.status);
@@ -14440,15 +14442,15 @@ var StoriesBar = React3__namespace.forwardRef(
               "data-testid": `btn-story-${story.id}`,
               "aria-label": `Open story: ${story.title}`,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "relative w-12 h-12 shrink-0 aspect-square rounded-full transition-transform group-hover:scale-105",
-                      isActive ? "ring-2 ring-primary ring-offset-2 ring-offset-background" : statusStyle.ringClass
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full rounded-full flex items-center justify-center border shadow-sm overflow-hidden select-none", children: story.thumbnailUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-9 h-9 shrink-0 aspect-square rounded-full transition-transform group-hover:scale-105", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "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"
+                      ),
+                      children: story.thumbnailUrl ? /* @__PURE__ */ jsxRuntime.jsx(
                         "img",
                         {
                           src: story.thumbnailUrl,
@@ -14459,29 +14461,29 @@ var StoriesBar = React3__namespace.forwardRef(
                         Icon,
                         {
                           name: iconName,
-                          className: cn("w-5 h-5 transition-colors", statusStyle.iconColor)
-                        }
-                      ) }),
-                      isGenerating ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute bottom-0 right-0 flex h-2.5 w-2.5", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-500 opacity-75" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2.5 w-2.5 bg-amber-500" })
-                      ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          className: cn(
-                            "absolute bottom-0 right-0 inline-flex rounded-full h-2.5 w-2.5 ring-2 ring-background",
-                            statusStyle.badgeBg
-                          )
+                          className: cn("w-4 h-4 transition-colors", statusStyle.iconColor)
                         }
                       )
-                    ]
-                  }
-                ),
+                    }
+                  ),
+                  isGenerating ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute bottom-0 right-0 flex h-2 w-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-500 opacity-75" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-amber-500" })
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "absolute bottom-0 right-0 inline-flex rounded-full h-2 w-2 ring-1.5 ring-background",
+                        statusStyle.badgeBg
+                      )
+                    }
+                  )
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
                     className: cn(
-                      "text-xs truncate max-w-[58px] text-center",
+                      "text-[10px] leading-tight truncate max-w-[56px] text-center",
                       isActive ? "font-semibold text-foreground" : "text-muted-foreground group-hover:text-foreground"
                     ),
                     title: story.title,