ai-design-system 0.1.97 → 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/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,