ai-design-system 0.1.56 → 0.1.57

package/components/composites/AppHeader/AppHeader.tsx

@@ -2,6 +2,8 @@ import * as React from "react"
 import { SidebarTrigger } from "@/components/primitives/Sidebar"
 import { Separator } from "@/components/primitives/Separator"
 import { Tabs, TabsList, TabsTrigger } from "@/components/primitives/Tabs"
+import { ChatToggleButton } from "@/components/composites/ChatToggleButton"
+import { WorkflowSwitcher } from "@/components/composites/WorkflowSwitcher"
 import type { AppHeaderProps } from "./interfaces"
 
 export const AppHeader = React.memo<AppHeaderProps>(({ 
@@ -13,14 +15,16 @@ export const AppHeader = React.memo<AppHeaderProps>(({
   className,
   tabsPosition = 'center',
   showSidebarToggle = true,
-  showTitle = true 
+  showTitle = true,
+  workflowSwitcherProps,
+  chatToggleProps
 }) => {
   return (
     <header className={`flex h-14 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-14 ${className || ""}`}>
       <div className="grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-4 lg:px-6">
         <div className="min-w-0 flex items-center gap-1 lg:gap-2">
           {showSidebarToggle && <SidebarTrigger className="-ml-1" />}
-          {showSidebarToggle && showTitle && title && (
+          {showSidebarToggle && (showTitle && title || workflowSwitcherProps || chatToggleProps) && (
             <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
           )}
           {showTitle && title && (
@@ -28,6 +32,8 @@ export const AppHeader = React.memo<AppHeaderProps>(({
               ? <h1 className="max-w-[28rem] truncate text-base font-medium">{title}</h1>
               : title
           )}
+          {chatToggleProps && <ChatToggleButton {...chatToggleProps} />}
+          {workflowSwitcherProps && <WorkflowSwitcher {...workflowSwitcherProps} />}
         </div>
 
         <div className="justify-self-center">

package/components/composites/AppHeader/interfaces.ts

@@ -1,4 +1,6 @@
 import type React from "react";
+import type { WorkflowSwitcherProps } from "@/components/composites/WorkflowSwitcher/WorkflowSwitcher";
+import type { ChatToggleButtonProps } from "@/components/composites/ChatToggleButton/ChatToggleButton";
 
 export interface TabItem {
   value: string;
@@ -15,4 +17,6 @@ export interface AppHeaderProps {
   className?: string;
   showSidebarToggle?: boolean;
   showTitle?: boolean;
+  workflowSwitcherProps?: WorkflowSwitcherProps;
+  chatToggleProps?: ChatToggleButtonProps;
 }

package/components/composites/WorkflowSwitcher/WorkflowSwitcher.stories.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { WorkflowSwitcher } from "./WorkflowSwitcher"
+
+const meta: Meta<typeof WorkflowSwitcher> = {
+  title: "Composites/WorkflowSwitcher",
+  component: WorkflowSwitcher,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    workflows: [
+      { id: "1", name: "Alpha Workflow" },
+      { id: "2", name: "Beta Workflow" },
+      { id: "3", name: "Gamma Workflow" },
+    ],
+    currentWorkflowId: "1",
+    onSelectWorkflow: () => {},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WorkflowSwitcher>
+
+export const Default: Story = {}
+
+export const Empty: Story = {
+  args: {
+    workflows: [],
+    currentWorkflowId: undefined,
+  },
+}

package/components/composites/WorkflowSwitcher/WorkflowSwitcher.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { Button } from "@/components/primitives/Button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/primitives/DropdownMenu"
+import { Icon } from "@/components/primitives/Icon"
+
+export interface WorkflowItem {
+  id: string
+  name: string
+}
+
+export interface WorkflowSwitcherProps {
+  workflows: WorkflowItem[]
+  currentWorkflowId?: string | null
+  onSelectWorkflow: (id: string) => void
+  className?: string
+}
+
+export const WorkflowSwitcher = React.memo<WorkflowSwitcherProps>(
+  ({ workflows, currentWorkflowId, onSelectWorkflow, className }) => {
+    const currentWorkflow = workflows.find((w) => w.id === currentWorkflowId)
+
+    return (
+      <div className={className}>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              className="h-9 border hover:bg-black/5 dark:hover:bg-white/5"
+              size="sm"
+              title="Select workflow"
+              variant="secondary"
+            >
+              <span className="truncate max-w-[150px]">
+                {currentWorkflow?.name ?? "Select Workflow"}
+              </span>
+              <Icon name="chevron-down" size="xs" className="ml-1 opacity-50 shrink-0" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            {workflows.map((w) => (
+              <DropdownMenuItem
+                className="flex items-center justify-between"
+                key={w.id}
+                onClick={() => onSelectWorkflow(w.id)}
+              >
+                <span className="truncate pr-4">{w.name}</span>
+                {w.id === currentWorkflowId && <Icon name="check" size="sm" className="ml-auto shrink-0" />}
+              </DropdownMenuItem>
+            ))}
+            {workflows.length === 0 && (
+              <div className="px-2 py-1.5 text-sm text-muted-foreground text-center">
+                No workflows found
+              </div>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    )
+  }
+)
+
+WorkflowSwitcher.displayName = "WorkflowSwitcher"

package/components/composites/WorkflowSwitcher/index.ts

@@ -0,0 +1 @@
+export * from "./WorkflowSwitcher"

package/components/composites/WorkflowToolbar/WorkflowToolbar.tsx

@@ -115,11 +115,16 @@ export function WorkflowToolbar({
       {/* Left: workflow name text + version dropdown */}
       <div className="flex items-center gap-2">
         {/* Plain text title */}
-        <div className="flex h-9 items-center rounded-md border bg-secondary px-3 text-secondary-foreground">
-          <span className="truncate font-medium text-sm">
-            {workflowName || "Untitled Workflow"}
-          </span>
-        </div>
+        {
+          workflowName && (
+            <div className="flex h-9 items-center rounded-md border bg-secondary px-3 text-secondary-foreground">
+              <span className="truncate font-medium text-sm">
+                {workflowName || ""}
+              </span>
+            </div>
+          )
+        }
+
 
         {/* Version selector — only shown when versions are provided */}
         {versions && versions.length > 0 && (

package/components/composites/index.ts

@@ -190,3 +190,7 @@ export type { PromptInputBlockProps } from './PromptInput'
 // ChatToggleButton Composite
 export { ChatToggleButton } from './ChatToggleButton'
 export type { ChatToggleButtonProps } from './ChatToggleButton'
+
+// WorkflowSwitcher Composite
+export { WorkflowSwitcher } from './WorkflowSwitcher'
+export type { WorkflowSwitcherProps, WorkflowItem } from './WorkflowSwitcher'

package/components/index.ts

@@ -22,3 +22,5 @@ export type { ExternalToast, ToastT, ToasterProps } from 'sonner';
 
 // Utilities
 export { cn } from '@/lib/utils';
+export { WorkflowSwitcher } from './composites';
+export type { WorkflowSwitcherProps, WorkflowItem } from './composites';

package/dist/index.cjs

@@ -1951,6 +1951,74 @@ var Tabs2 = React3__namespace.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Tabs, __spreadValues({}, props));
 });
 Tabs2.displayName = "Tabs";
+var Button2 = React3__namespace.memo(
+  React3__namespace.forwardRef(
+    (props, ref) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(Button, __spreadValues({ ref }, props));
+    }
+  )
+);
+Button2.displayName = "Button";
+function ChatToggleButton(_a) {
+  var _b = _a, {
+    isOpen = true,
+    label = "Hide Chat",
+    className
+  } = _b, props = __objRest(_b, [
+    "isOpen",
+    "label",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Button2,
+    __spreadProps(__spreadValues({
+      variant: "ghost",
+      className: `-ml-2 h-8 text-muted-foreground hover:text-foreground ${className != null ? className : ""}`
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "panel-left", size: "sm" }),
+        label
+      ]
+    })
+  );
+}
+var WorkflowSwitcher = React3__namespace.memo(
+  ({ workflows, currentWorkflowId, onSelectWorkflow, className }) => {
+    var _a;
+    const currentWorkflow = workflows.find((w) => w.id === currentWorkflowId);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Button2,
+        {
+          className: "h-9 border hover:bg-black/5 dark:hover:bg-white/5",
+          size: "sm",
+          title: "Select workflow",
+          variant: "secondary",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[150px]", children: (_a = currentWorkflow == null ? void 0 : currentWorkflow.name) != null ? _a : "Select Workflow" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-down", size: "xs", className: "ml-1 opacity-50 shrink-0" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "start", children: [
+        workflows.map((w) => /* @__PURE__ */ jsxRuntime.jsxs(
+          DropdownMenuItem,
+          {
+            className: "flex items-center justify-between",
+            onClick: () => onSelectWorkflow(w.id),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate pr-4", children: w.name }),
+              w.id === currentWorkflowId && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "check", size: "sm", className: "ml-auto shrink-0" })
+            ]
+          },
+          w.id
+        )),
+        workflows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-sm text-muted-foreground text-center", children: "No workflows found" })
+      ] })
+    ] }) });
+  }
+);
+WorkflowSwitcher.displayName = "WorkflowSwitcher";
 var AppHeader = React3__namespace.memo(({
   title,
   actions,
@@ -1960,14 +2028,18 @@ var AppHeader = React3__namespace.memo(({
   className,
   tabsPosition = "center",
   showSidebarToggle = true,
-  showTitle = true
+  showTitle = true,
+  workflowSwitcherProps,
+  chatToggleProps
 }) => {
   var _a, _b;
   return /* @__PURE__ */ jsxRuntime.jsx("header", { className: `flex h-14 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-14 ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-4 lg:px-6", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex items-center gap-1 lg:gap-2", children: [
       showSidebarToggle && /* @__PURE__ */ jsxRuntime.jsx(SidebarTrigger2, { className: "-ml-1" }),
-      showSidebarToggle && showTitle && title && /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "mx-2 data-[orientation=vertical]:h-4" }),
-      showTitle && title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "max-w-[28rem] truncate text-base font-medium", children: title }) : title)
+      showSidebarToggle && (showTitle && title || workflowSwitcherProps || chatToggleProps) && /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "mx-2 data-[orientation=vertical]:h-4" }),
+      showTitle && title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "max-w-[28rem] truncate text-base font-medium", children: title }) : title),
+      chatToggleProps && /* @__PURE__ */ jsxRuntime.jsx(ChatToggleButton, __spreadValues({}, chatToggleProps)),
+      workflowSwitcherProps && /* @__PURE__ */ jsxRuntime.jsx(WorkflowSwitcher, __spreadValues({}, workflowSwitcherProps))
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-self-center", children: tabsPosition === "center" && tabs && tabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Tabs2, { defaultValue: defaultTab || ((_a = tabs[0]) == null ? void 0 : _a.value), onValueChange: onTabChange, children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: tab.value, children: tab.label }, tab.value)) }) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center justify-end gap-2", children: [
@@ -2075,14 +2147,6 @@ var PageContainer = React3__namespace.memo(({ children, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(SidebarInset2, { className, children });
 });
 PageContainer.displayName = "PageContainer";
-var Button2 = React3__namespace.memo(
-  React3__namespace.forwardRef(
-    (props, ref) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(Button, __spreadValues({ ref }, props));
-    }
-  )
-);
-Button2.displayName = "Button";
 function Dialog(_a) {
   var props = __objRest(_a, []);
   return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, __spreadValues({ "data-slot": "dialog" }, props));
@@ -2510,29 +2574,6 @@ var ProjectSwitcher = React3__namespace.memo(
   }
 );
 ProjectSwitcher.displayName = "ProjectSwitcher";
-function ChatToggleButton(_a) {
-  var _b = _a, {
-    isOpen = true,
-    label = "Hide Chat",
-    className
-  } = _b, props = __objRest(_b, [
-    "isOpen",
-    "label",
-    "className"
-  ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Button2,
-    __spreadProps(__spreadValues({
-      variant: "ghost",
-      className: `-ml-2 h-8 text-muted-foreground hover:text-foreground ${className != null ? className : ""}`
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "panel-left", size: "sm" }),
-        label
-      ]
-    })
-  );
-}
 var EmptyState = React3__namespace.forwardRef(
   ({ title, description, actionLabel, onAction, className }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9915,7 +9956,7 @@ function WorkflowToolbar({
   const currentVersion = versions == null ? void 0 : versions.find((v) => v.id === currentVersionId);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between gap-4", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-9 items-center rounded-md border bg-secondary px-3 text-secondary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium text-sm", children: workflowName || "Untitled Workflow" }) }),
+      workflowName && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-9 items-center rounded-md border bg-secondary px-3 text-secondary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium text-sm", children: workflowName || "" }) }),
       versions && versions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           Button2,
@@ -12426,6 +12467,7 @@ exports.SectionLayout = SectionLayout;
 exports.SpecNavigator = SpecNavigator;
 exports.WorkflowBuilder = WorkflowBuilder;
 exports.WorkflowObservabilityFeature = WorkflowObservabilityFeature;
+exports.WorkflowSwitcher = WorkflowSwitcher;
 exports.cn = cn;
 exports.getLayoutedElements = getLayoutedElements;
 //# sourceMappingURL=index.cjs.map