ai-design-system 0.1.110 → 0.1.112

package/components/composites/ProjectSwitcher/ProjectSwitcher.tsx

@@ -17,33 +17,82 @@ import {
   PopoverTrigger,
 } from "@/components/primitives/Popover"
 
-export interface Project {
+export interface ProjectSwitcherItem {
   id: string
   name: string
+  [key: string]: unknown
 }
 
+// Backwards compatibility alias
+export type Project = ProjectSwitcherItem
+
 export interface ProjectSwitcherProps {
-  projects: Project[]
+  /** List of projects / channels / workspaces to switch between */
+  projects?: ProjectSwitcherItem[]
+  /** Generic alias for projects */
+  items?: ProjectSwitcherItem[]
+  /** ID of the currently selected item */
   selectedProjectId?: string | null
-  onSelectProject: (id: string) => void
-  onCreateProject: () => void
+  /** Generic alias for selectedProjectId */
+  selectedId?: string | null
+  /** Callback fired when an item is selected */
+  onSelectProject?: (id: string) => void
+  /** Generic alias for onSelectProject */
+  onSelect?: (id: string) => void
+  /** Callback fired when creating a new item */
+  onCreateProject?: () => void
+  /** Generic alias for onCreateProject */
+  onCreate?: () => void
+  /** Custom CSS class names */
   className?: string
+  /**
+   * Domain entity name used to automatically derive labels (e.g. "Project", "Channel", "Workspace").
+   * @default "Project"
+   */
+  entityName?: string
+  /** Placeholder when nothing is selected. Defaults to "Select <entityName>..." */
+  placeholder?: string
+  /** Search input placeholder. Defaults to "Find <entityName>..." */
+  searchPlaceholder?: string
+  /** Empty state message. Defaults to "No <entityName.toLowerCase()>s, yet!" */
+  emptyMessage?: string
+  /** Create button label. Defaults to "Create <entityName>" */
+  createButtonText?: string
 }
 
 export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
   ({
-    projects = [],
+    projects,
+    items,
     selectedProjectId,
-    onSelectProject = () => {},
-    onCreateProject = () => {},
+    selectedId,
+    onSelectProject,
+    onSelect,
+    onCreateProject,
+    onCreate,
     className,
+    entityName = "Project",
+    placeholder,
+    searchPlaceholder,
+    emptyMessage,
+    createButtonText,
   }) => {
     const [open, setOpen] = React.useState(false)
 
-    const selectedProject = projects.find((p) => String(p.id) === String(selectedProjectId))
-    const displayLabel = selectedProject ? selectedProject.name : "Select Project..."
+    const list = items ?? projects ?? []
+    const activeId = selectedId !== undefined ? selectedId : selectedProjectId
+    const handleSelect = onSelect ?? onSelectProject ?? (() => {})
+    const handleCreate = onCreate ?? onCreateProject ?? (() => {})
+
+    const resolvedPlaceholder = placeholder ?? `Select ${entityName}...`
+    const resolvedSearchPlaceholder = searchPlaceholder ?? `Find ${entityName}...`
+    const resolvedEmptyMessage = emptyMessage ?? `No ${entityName.toLowerCase()}s, yet!`
+    const resolvedCreateButtonText = createButtonText ?? `Create ${entityName}`
+
+    const selectedItem = list.find((p) => String(p.id) === String(activeId))
+    const displayLabel = selectedItem ? selectedItem.name : resolvedPlaceholder
 
-    const defaultValue = selectedProject ? `${selectedProject.name}-${selectedProject.id}` : undefined
+    const defaultValue = selectedItem ? `${selectedItem.name}-${selectedItem.id}` : undefined
 
     return (
       <Popover open={open} onOpenChange={setOpen}>
@@ -64,7 +113,7 @@ export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
           <Command defaultValue={defaultValue}>
             <div className="flex items-center justify-between border-b border-neutral-600 px-3" cmdk-input-wrapper="">
               <CommandPrimitive.Input
-                placeholder="Find Project..."
+                placeholder={resolvedSearchPlaceholder}
                 className="flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
               />
               <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-neutral-700 bg-neutral-800 px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">Esc</kbd>
@@ -72,27 +121,28 @@ export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
             <CommandList className="max-h-[300px]">
               <CommandEmpty>
                 <div className="flex flex-col items-center justify-center p-6 text-center text-sm text-muted-foreground">
-                  No projects, yet!
+                  {resolvedEmptyMessage}
                 </div>
               </CommandEmpty>
-              {projects.length > 0 && (
+              {list.length > 0 && (
                 <CommandGroup>
-                  {projects.map((project) => (
+                  {list.map((item) => (
                     <CommandItem
-                      key={project.id}
-                      value={`${project.name}-${project.id}`}
+                      key={item.id}
+                      value={`${item.name}-${item.id}`}
                       onSelect={() => {
-                        onSelectProject(project.id)
+                        handleSelect(item.id)
                         setOpen(false)
                       }}
                       className="mb-1 last:mb-0 cursor-pointer flex items-center justify-between"
                     >
                       <div className="flex items-center">
-                        {project.name}
+                        {item.name}
                       </div>
-                      <Icon name="check"
+                      <Icon
+                        name="check"
                         className={`h-4 w-4 ${
-                          String(selectedProjectId) === String(project.id) ? "opacity-100" : "opacity-0"
+                          String(activeId) === String(item.id) ? "opacity-100" : "opacity-0"
                         }`}
                       />
                     </CommandItem>
@@ -107,11 +157,11 @@ export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
                 className="w-full justify-start text-sm font-normal"
                 onClick={() => {
                   setOpen(false)
-                  onCreateProject()
+                  handleCreate()
                 }}
               >
                 <Icon name="plus" size="sm" className="mr-2 h-4 w-4" />
-                Create Project
+                {resolvedCreateButtonText}
               </Button>
             </div>
           </Command>

package/components/composites/SessionHeader/SessionHeader.tsx

@@ -28,6 +28,8 @@ export interface SessionHeaderProps extends React.HTMLAttributes<HTMLDivElement>
   onSelectSession?: (id: string) => void;
   onDownloadSession?: () => Promise<FileDownloadResult | undefined>;
   showActions?: boolean;
+  showNewSession?: boolean;
+  showDownloadSession?: boolean;
 }
 
 /**
@@ -37,7 +39,7 @@ export interface SessionHeaderProps extends React.HTMLAttributes<HTMLDivElement>
  * and a dropdown history of past sessions.
  */
 export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps>(
-  ({ title, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, className, ...props }, ref) => {
+  ({ title, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, showNewSession = true, showDownloadSession = true, className, ...props }, ref) => {
     const activeSession = sessions?.find(s => s.id === activeSessionId);
     const downloadRef = React.useRef<HTMLAnchorElement>(null);
 
@@ -72,14 +74,16 @@ export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps
         </div>
         {showActions && (
           <div className="flex items-center space-x-1 flex-none">
-            {onDownloadSession && (
+            {Boolean(onDownloadSession && showDownloadSession) && (
               <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>
+            {Boolean(onNewSession && showNewSession) && (
+              <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>

package/components/composites/index.ts

@@ -196,7 +196,7 @@ export type { EmptyStateProps } from './EmptyState'
 
 // ProjectSwitcher Composite
 export { ProjectSwitcher } from './ProjectSwitcher'
-export type { ProjectSwitcherProps, Project } from './ProjectSwitcher'
+export type { ProjectSwitcherProps, ProjectSwitcherItem, Project } from './ProjectSwitcher'
 
 // DashboardChart Composite
 export { DashboardChart } from './DashboardChart'

package/components/features/ChatPanel/ChatPanel.tsx

@@ -225,6 +225,16 @@ export interface ChatPanelProps {
    * @default true
    */
   showSessionActions?: boolean;
+  /**
+   * Whether to show the new session (+) action in the session header
+   * @default true
+   */
+  showNewSession?: boolean;
+  /**
+   * Whether to show the download session action in the session header
+   * @default true
+   */
+  showDownloadSession?: boolean;
   /**
    * Presentation variant for ChatPanel:
    * - "default": standard full flex-1 panel (default)
@@ -286,6 +296,8 @@ export const ChatPanel = React.memo<ChatPanelProps>(
     showHeader = true,
     sessionTitle,
     showSessionActions = true,
+    showNewSession = true,
+    showDownloadSession = true,
     variant = "default",
     onClose,
   }) => {
@@ -446,6 +458,8 @@ export const ChatPanel = React.memo<ChatPanelProps>(
           <SessionHeader
             title={sessionTitle}
             showActions={showSessionActions}
+            showNewSession={showNewSession}
+            showDownloadSession={showDownloadSession}
             sessions={sessions}
             activeSessionId={activeSessionId}
             onNewSession={onNewSession}

package/components/index.ts

@@ -54,6 +54,7 @@ export type {
   ActionRequest,
   ReviewConfig,
   ProjectSwitcherProps,
+  ProjectSwitcherItem,
   Project,
   FormReportsDrawerFormProps,
   SessionHeaderProps,

package/dist/index.cjs

@@ -2832,18 +2832,36 @@ var Popover2 = (props) => {
 Popover2.displayName = "Popover";
 var ProjectSwitcher = React3__namespace.memo(
   ({
-    projects = [],
+    projects,
+    items,
     selectedProjectId,
-    onSelectProject = () => {
-    },
-    onCreateProject = () => {
-    },
-    className
+    selectedId,
+    onSelectProject,
+    onSelect,
+    onCreateProject,
+    onCreate,
+    className,
+    entityName = "Project",
+    placeholder,
+    searchPlaceholder,
+    emptyMessage,
+    createButtonText
   }) => {
+    var _a, _b, _c;
     const [open, setOpen] = React3__namespace.useState(false);
-    const selectedProject = projects.find((p) => String(p.id) === String(selectedProjectId));
-    const displayLabel = selectedProject ? selectedProject.name : "Select Project...";
-    const defaultValue = selectedProject ? `${selectedProject.name}-${selectedProject.id}` : void 0;
+    const list = (_a = items != null ? items : projects) != null ? _a : [];
+    const activeId = selectedId !== void 0 ? selectedId : selectedProjectId;
+    const handleSelect = (_b = onSelect != null ? onSelect : onSelectProject) != null ? _b : (() => {
+    });
+    const handleCreate = (_c = onCreate != null ? onCreate : onCreateProject) != null ? _c : (() => {
+    });
+    const resolvedPlaceholder = placeholder != null ? placeholder : `Select ${entityName}...`;
+    const resolvedSearchPlaceholder = searchPlaceholder != null ? searchPlaceholder : `Find ${entityName}...`;
+    const resolvedEmptyMessage = emptyMessage != null ? emptyMessage : `No ${entityName.toLowerCase()}s, yet!`;
+    const resolvedCreateButtonText = createButtonText != null ? createButtonText : `Create ${entityName}`;
+    const selectedItem = list.find((p) => String(p.id) === String(activeId));
+    const displayLabel = selectedItem ? selectedItem.name : resolvedPlaceholder;
+    const defaultValue = selectedItem ? `${selectedItem.name}-${selectedItem.id}` : void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(Popover2, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
         Button2,
@@ -2863,35 +2881,35 @@ var ProjectSwitcher = React3__namespace.memo(
           /* @__PURE__ */ jsxRuntime.jsx(
             cmdk.Command.Input,
             {
-              placeholder: "Find Project...",
+              placeholder: resolvedSearchPlaceholder,
               className: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-neutral-700 bg-neutral-800 px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100", children: "Esc" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(CommandList2, { className: "max-h-[300px]", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty2, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center p-6 text-center text-sm text-muted-foreground", children: "No projects, yet!" }) }),
-          projects.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(CommandGroup2, { children: projects.map((project) => /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty2, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center p-6 text-center text-sm text-muted-foreground", children: resolvedEmptyMessage }) }),
+          list.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(CommandGroup2, { children: list.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
             CommandItem2,
             {
-              value: `${project.name}-${project.id}`,
+              value: `${item.name}-${item.id}`,
               onSelect: () => {
-                onSelectProject(project.id);
+                handleSelect(item.id);
                 setOpen(false);
               },
               className: "mb-1 last:mb-0 cursor-pointer flex items-center justify-between",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: project.name }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: item.name }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   Icon,
                   {
                     name: "check",
-                    className: `h-4 w-4 ${String(selectedProjectId) === String(project.id) ? "opacity-100" : "opacity-0"}`
+                    className: `h-4 w-4 ${String(activeId) === String(item.id) ? "opacity-100" : "opacity-0"}`
                   }
                 )
               ]
             },
-            project.id
+            item.id
           )) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(CommandSeparator2, {}),
@@ -2902,11 +2920,11 @@ var ProjectSwitcher = React3__namespace.memo(
             className: "w-full justify-start text-sm font-normal",
             onClick: () => {
               setOpen(false);
-              onCreateProject();
+              handleCreate();
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "plus", size: "sm", className: "mr-2 h-4 w-4" }),
-              "Create Project"
+              resolvedCreateButtonText
             ]
           }
         ) })
@@ -7921,7 +7939,7 @@ var ApprovalCard = React3__namespace.memo(
 ApprovalCard.displayName = "ApprovalCard";
 var SessionHeader = React3__namespace.forwardRef(
   (_a, ref) => {
-    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"]);
+    var _b = _a, { title, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, showNewSession = true, showDownloadSession = true, className } = _b, props = __objRest(_b, ["title", "sessions", "activeSessionId", "onNewSession", "onCloseSession", "onSelectSession", "onDownloadSession", "showActions", "showNewSession", "showDownloadSession", "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 () => {
@@ -7947,8 +7965,8 @@ var SessionHeader = React3__namespace.forwardRef(
         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" }) }),
+            Boolean(onDownloadSession && showDownloadSession) && /* @__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" }) }),
+            Boolean(onNewSession && showNewSession) && /* @__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: [
               /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "ghost", size: "icon", className: "h-8 w-8", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "clock", className: "h-4 w-4" }) }) }),
               /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", className: "w-64 max-h-80 overflow-y-auto", children: [
@@ -8180,6 +8198,8 @@ var ChatPanel = React3__namespace.memo(
     showHeader = true,
     sessionTitle,
     showSessionActions = true,
+    showNewSession = true,
+    showDownloadSession = true,
     variant = "default",
     onClose
   }) => {
@@ -8305,6 +8325,8 @@ var ChatPanel = React3__namespace.memo(
         {
           title: sessionTitle,
           showActions: showSessionActions,
+          showNewSession,
+          showDownloadSession,
           sessions,
           activeSessionId,
           onNewSession,