ai-design-system 0.1.49 → 0.1.51

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -6,7 +6,7 @@ import {
   type Connection,
   useReactFlow,
 } from "@xyflow/react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect } from "react";
 import { Canvas } from "@/components/ai-elements/canvas";
 import { Connection as ConnectionLine } from "@/components/ai-elements/connection";
 import { Controls } from "@/components/ai-elements/controls";
@@ -47,18 +47,6 @@ function WorkflowCanvasInner({
   className,
 }: WorkflowCanvasProps) {
   const { fitView } = useReactFlow();
-  const viewportInitialized = useRef(false);
-  const [isCanvasReady, setIsCanvasReady] = useState(false);
-
-  useEffect(() => {
-    if (!viewportInitialized.current && nodes.length > 0) {
-      setTimeout(() => {
-        fitView({ maxZoom: 1, minZoom: 0.5, padding: 0.2, duration: 0 });
-        viewportInitialized.current = true;
-        setIsCanvasReady(true);
-      }, 0);
-    }
-  }, [nodes.length, fitView]);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -85,8 +73,6 @@ function WorkflowCanvasInner({
       className={className}
       data-testid="workflow-canvas"
       style={{
-        opacity: isCanvasReady ? 1 : 0,
-        transition: "opacity 300ms",
         width: "100%",
         height: "100%",
       }}

package/components/composites/AdjustableLayout/AdjustableLayout.tsx

@@ -121,26 +121,44 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
       const deltaX = currentX - startX
       
       const deltaPercent = (deltaX / containerSize) * 100
-      const newSizes = [...startSizes]
       
-      // Adjust sizes of adjacent panels
-      newSizes[draggingIndex] = Math.max(
-        sections[draggingIndex].minSize ?? 10,
-        Math.min(
-          sections[draggingIndex].maxSize ?? 80,
-          startSizes[draggingIndex] + deltaPercent
-        )
-      )
+      const p1 = sections[draggingIndex]
+      const p2 = sections[draggingIndex + 1]
       
-      newSizes[draggingIndex + 1] = Math.max(
-        sections[draggingIndex + 1].minSize ?? 10,
-        Math.min(
-          sections[draggingIndex + 1].maxSize ?? 80,
-          startSizes[draggingIndex + 1] - deltaPercent
-        )
-      )
+      const p1Start = startSizes[draggingIndex]
+      const p2Start = startSizes[draggingIndex + 1]
+      
+      const p1Min = p1.minSize ?? 10
+      const p1Max = p1.maxSize ?? 80
+      const p2Min = p2.minSize ?? 10
+      const p2Max = p2.maxSize ?? 80
+      
+      // Calculate how much we can actually change panel 1
+      // If deltaPercent > 0, we are growing p1 and shrinking p2
+      const maxPositiveDelta = Math.max(0, Math.min(
+        p1Max - p1Start,       // Space p1 has to grow
+        p2Start - p2Min        // Space p2 has to shrink
+      ))
+      
+      // If deltaPercent < 0, we are shrinking p1 and growing p2
+      const maxNegativeDelta = Math.min(0, Math.max(
+        p1Min - p1Start,       // Space p1 has to shrink (negative)
+        p2Start - p2Max        // Space p2 has to grow (negative)
+      ))
+      
+      // Clamp the delta
+      let clampedDelta = deltaPercent
+      if (clampedDelta > 0) {
+        clampedDelta = Math.min(clampedDelta, maxPositiveDelta)
+      } else {
+        clampedDelta = Math.max(clampedDelta, maxNegativeDelta)
+      }
+      
+      const newSizes = [...startSizes]
+      newSizes[draggingIndex] = p1Start + clampedDelta
+      newSizes[draggingIndex + 1] = p2Start - clampedDelta
       
-      // Normalize to 100%
+      // Normalize to 100% just in case of floating point drift
       const total = newSizes.reduce((sum, size) => sum + size, 0)
       const normalizedSizes = newSizes.map(size => (size / total) * 100)
       

package/components/composites/AppHeader/AppHeader.tsx

@@ -11,6 +11,7 @@ export const AppHeader = React.memo<AppHeaderProps>(({
   defaultTab, 
   onTabChange, 
   className,
+  tabsPosition = 'center',
   showSidebarToggle = true,
   showTitle = true 
 }) => {
@@ -30,7 +31,7 @@ export const AppHeader = React.memo<AppHeaderProps>(({
         </div>
 
         <div className="justify-self-center">
-          {tabs && tabs.length > 0 && (
+          {tabsPosition === 'center' && tabs && tabs.length > 0 && (
             <Tabs defaultValue={defaultTab || tabs[0]?.value} onValueChange={onTabChange}>
               <TabsList>
                 {tabs.map((tab) => (
@@ -43,7 +44,20 @@ export const AppHeader = React.memo<AppHeaderProps>(({
           )}
         </div>
 
-        <div className="flex min-w-0 items-center justify-end gap-2">{actions}</div>
+        <div className="flex min-w-0 items-center justify-end gap-2">
+          {tabsPosition === 'right' && tabs && tabs.length > 0 && (
+            <Tabs defaultValue={defaultTab || tabs[0]?.value} onValueChange={onTabChange}>
+              <TabsList>
+                {tabs.map((tab) => (
+                  <TabsTrigger key={tab.value} value={tab.value}>
+                    {tab.label}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+          )}
+          {actions}
+        </div>
       </div>
     </header>
   )

package/components/composites/AppHeader/interfaces.ts

@@ -11,6 +11,7 @@ export interface AppHeaderProps {
   tabs?: TabItem[];
   defaultTab?: string;
   onTabChange?: (value: string) => void;
+  tabsPosition?: 'center' | 'right';
   className?: string;
   showSidebarToggle?: boolean;
   showTitle?: boolean;

package/components/composites/ChatToggleButton/ChatToggleButton.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ChatToggleButton } from './ChatToggleButton'
+import { fn } from '@storybook/test'
+
+const meta = {
+  title: 'Composites/ChatToggleButton',
+  component: ChatToggleButton,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof ChatToggleButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    label: "Hide Chat",
+    onClick: fn(),
+  },
+}
+
+export const Closed: Story = {
+  args: {
+    isOpen: false,
+    label: "Show Chat",
+    onClick: fn(),
+  },
+}

package/components/composites/ChatToggleButton/ChatToggleButton.tsx

@@ -0,0 +1,26 @@
+import { Button, type ButtonProps } from "@/components/primitives/Button"
+import { Icon } from "@/components/primitives/Icon"
+import * as React from "react"
+
+export interface ChatToggleButtonProps extends Omit<ButtonProps, "children"> {
+  isOpen?: boolean
+  label?: string
+}
+
+export function ChatToggleButton({
+  isOpen = true,
+  label = "Hide Chat",
+  className,
+  ...props
+}: ChatToggleButtonProps) {
+  return (
+    <Button
+      variant="ghost"
+      className={`-ml-2 h-8 text-muted-foreground hover:text-foreground ${className ?? ""}`}
+      {...props}
+    >
+      <Icon name="panel-left" size="sm" />
+      {label}
+    </Button>
+  )
+}

package/components/composites/ChatToggleButton/index.ts

@@ -0,0 +1,2 @@
+export { ChatToggleButton } from "./ChatToggleButton"
+export type { ChatToggleButtonProps } from "./ChatToggleButton"

package/components/composites/DashboardChart/DashboardChart.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { DashboardChart } from './DashboardChart'
+
+const meta = {
+  title: 'Composites/DashboardChart',
+  component: DashboardChart,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof DashboardChart>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}

package/components/composites/DashboardHeader/DashboardHeader.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { DashboardHeader } from './DashboardHeader'
+
+const meta = {
+  title: 'Composites/DashboardHeader',
+  component: DashboardHeader,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof DashboardHeader>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}

package/components/composites/FilePreviewDialog/FilePreviewDialog.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { FilePreviewDialog } from './FilePreviewDialog'
+
+const meta = {
+  title: 'Composites/FilePreviewDialog',
+  component: FilePreviewDialog,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof FilePreviewDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}

package/components/composites/FormReports/FormReports.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { FormReports } from './FormReports'
+
+const meta = {
+  title: 'Composites/FormReports',
+  component: FormReports,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof FormReports>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}

package/components/composites/LayoutProvider/LayoutProvider.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { LayoutProvider } from './LayoutProvider'
+
+const meta = {
+  title: 'Composites/LayoutProvider',
+  component: LayoutProvider,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof LayoutProvider>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}

package/components/composites/LoadingShimmer/LoadingShimmer.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { LoadingShimmer } from './LoadingShimmer'
+
+const meta = {
+  title: 'Composites/LoadingShimmer',
+  component: LoadingShimmer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof LoadingShimmer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}

package/components/composites/ModeSwitcher/ModeSwitcher.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ModeSwitcher } from './ModeSwitcher'
+
+const meta = {
+  title: 'Composites/ModeSwitcher',
+  component: ModeSwitcher,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof ModeSwitcher>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}

package/components/composites/OrchestratorMessage/OrchestratorMessage.tsx

@@ -1,4 +1,9 @@
 import * as React from "react"
+import {
+  Avatar,
+  AvatarFallback,
+} from "@/components/primitives/Avatar"
+import { Icon } from "@/components/primitives/Icon"
 import {
   Message,
   MessageContent,
@@ -49,11 +54,16 @@ export const OrchestratorMessage = React.memo<OrchestratorMessageProps>(
 
     return (
       <Message from="assistant">
-        {showAvatar && (
-          <MessageAvatar
-            src={message.avatarSrc || "/coordinator-avatar.png"}
-            name={message.avatarName || "Coordinator"}
-          />
+        {showAvatar && (message.avatarSrc
+          ? <MessageAvatar
+              src={message.avatarSrc}
+              name={message.avatarName || "Coordinator"}
+            />
+          : <Avatar className="size-8 ring-1 ring-border">
+              <AvatarFallback>
+                <Icon name="bot" />
+              </AvatarFallback>
+            </Avatar>
         )}
 
         <div className="flex-1 min-w-0">

package/components/composites/ProjectSwitcher/ProjectSwitcher.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ProjectSwitcher } from './ProjectSwitcher'
+
+const meta = {
+  title: 'Composites/ProjectSwitcher',
+  component: ProjectSwitcher,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof ProjectSwitcher>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}

package/components/composites/TriggerNode/TriggerNode.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { TriggerNode } from './TriggerNode'
+
+const meta = {
+  title: 'Composites/TriggerNode',
+  component: TriggerNode,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof TriggerNode>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}

package/components/composites/UserMessage/UserMessage.tsx

@@ -1,4 +1,9 @@
 import * as React from "react"
+import {
+  Avatar,
+  AvatarFallback,
+} from "@/components/primitives/Avatar"
+import { Icon } from "@/components/primitives/Icon"
 import {
   Message,
   MessageContent,
@@ -37,11 +42,16 @@ export const UserMessage = React.memo<UserMessageProps>(
   ({ message, showAvatar = true }) => {
     return (
       <Message from="user">
-        {showAvatar && (
-          <MessageAvatar
-            src={message.avatarSrc || "/user-avatar.png"}
-            name={message.avatarName || "User"}
-          />
+        {showAvatar && (message.avatarSrc
+          ? <MessageAvatar
+              src={message.avatarSrc}
+              name={message.avatarName || "User"}
+            />
+          : <Avatar className="size-8 ring-1 ring-border">
+              <AvatarFallback>
+                <Icon name="user" />
+              </AvatarFallback>
+            </Avatar>
         )}
         <MessageContent variant="contained">{message.content}</MessageContent>
       </Message>

package/components/composites/WorkflowRunObservabilityPanel/WorkflowRunObservabilityPanel.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WorkflowRunObservabilityPanel } from './WorkflowRunObservabilityPanel'
+
+const meta = {
+  title: 'Composites/WorkflowRunObservabilityPanel',
+  component: WorkflowRunObservabilityPanel,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof WorkflowRunObservabilityPanel>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}

package/components/features/PageLayout/PageLayout.stories.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import { PageLayout } from './PageLayout'
 import { usePageLayoutMock, usePageLayoutStoryActionsMock } from './usePageLayout.mock'
@@ -12,7 +13,6 @@ import { WorkflowBuilder } from '../WorkflowBuilder/WorkflowBuilder'
 import { RefinementPanel } from '../RefinementPanel/RefinementPanel'
 import { mockEdges, mockNodes, mockVersions } from '../WorkflowBuilder/WorkflowBuilder.mocks'
 import { DashboardFeature } from '../DashboardFeature/DashboardFeature'
-import { ProjectSwitcher } from '@/components/composites/ProjectSwitcher'
 import { useDashboardIntegrationMock } from './useDashboardIntegration.mock'
 
 const meta = {
@@ -110,76 +110,88 @@ export const WithStateManagement: Story = {
     return (
       <PageLayout
         sidebar={mockSidebarConfig}
-        header={{
-          title: (
-            <ProjectSwitcher
-              projects={dashboardState.projects}
-              selectedProjectId={dashboardState.selectedProjectId}
-              onSelectProject={dashboardState.onSelectProject}
-              onCreateProject={dashboardState.onCreateProjectClick}
-            />
-          ),
-          actions: mockHeaderConfigWithTabs.actions,
-          tabs: headerTabs,
-          defaultTab: activeTab || undefined,
-          onTabChange: dashboardState.onTabChange,
+        header={{ title: '' }} // Intercepted by projectSwitcherProps
+        projectSwitcherProps={{
+          projects: dashboardState.projects,
+          selectedProjectId: dashboardState.selectedProjectId,
+          onSelectProject: dashboardState.onSelectProject,
+          onCreateProject: dashboardState.onCreateProjectClick
+        }}
+        chatToggleProps={{
+          isOpen: actions.isChatOpen,
+          onClick: actions.toggleChat
         }}
         isLoading={layoutState.isLoading}
         loadingMessage={layoutState.loadingMessage}
         defaultSidebarOpen={layoutState.isSidebarOpen}
         layoutSections={
-          activeTab === 'dashboard' || !hasProjects ? undefined : [
-          {
-            id: 'workflow-builder',
-            content: (
-              <WorkflowBuilder
-                workflowName="Order Processing Workflow"
-                currentVersionId="v4"
-                versions={mockVersions}
-                nodes={mockNodes}
-                edges={mockEdges}
-                onVersionSelect={actions.onVersionSelect}
-                onSave={actions.onSave}
-                onUndo={actions.onUndo}
-                onRedo={actions.onRedo}
-                hasUnsavedChanges={true}
-                canUndo={true}
-                canRedo={false}
-                showMinimap={true}
-                interactive={true}
-              />
-            ),
-            defaultSize: 60,
-          },
-          {
-            id: 'refinement-panel',
-            content: (
-              <RefinementPanel
-                messages={mockPageLayoutRefinementMessages}
-                fileChanges={mockPageLayoutFileChanges}
-                onSubmit={actions.onSubmit}
-                onApprove={actions.onApprove}
-                onReject={actions.onReject}
-                placeholder="Ask for workflow optimizations or describe changes..."
-              />
-            ),
-            defaultSize: 40,
-            header: {
-              tabs: [
-                { value: 'chat', label: 'Chat' },
-                { value: 'changes', label: 'Changes' },
-                { value: 'history', label: 'History' },
-              ],
-              defaultTab: 'chat',
-              showSidebarToggle: false,
-              showTitle: false,
+          !hasProjects ? undefined : [
+            ...(actions.isChatOpen ? [{
+              id: 'refinement-panel',
+              content: (
+                <RefinementPanel
+                  messages={mockPageLayoutRefinementMessages}
+                  fileChanges={mockPageLayoutFileChanges}
+                  onSubmit={actions.onSubmit}
+                  onApprove={actions.onApprove}
+                  onReject={actions.onReject}
+                  placeholder="Ask for workflow optimizations or describe changes..."
+                />
+              ),
+              defaultSize: 30,
+              minSize: 30,
+              maxSize: 40,
+              header: {
+                tabs: [
+                  { value: 'chat', label: 'Chat' },
+                  { value: 'changes', label: 'Changes' },
+                  { value: 'history', label: 'History' },
+                ],
+                defaultTab: 'chat',
+                showSidebarToggle: false,
+                showTitle: false,
+              },
+            }] : []),
+            {
+              id: 'main-content',
+              content: activeTab === 'dashboard' ? (
+                <DashboardFeature {...dashboardState.dashboardProps} />
+              ) : (
+                <WorkflowBuilder
+                  workflowName="Order Processing Workflow"
+                  currentVersionId="v4"
+                  versions={mockVersions}
+                  nodes={mockNodes}
+                  edges={mockEdges}
+                  onVersionSelect={actions.onVersionSelect}
+                  onSave={actions.onSave}
+                  onUndo={actions.onUndo}
+                  onRedo={actions.onRedo}
+                  hasUnsavedChanges={true}
+                  canUndo={true}
+                  canRedo={false}
+                  showMinimap={true}
+                  interactive={true}
+                />
+              ),
+              defaultSize: actions.isChatOpen ? 70 : 100,
+              minSize: 60,
+              maxSize: 70,
+              header: {
+                // title is intercepted by chatToggleProps
+                showTitle: true,
+                showSidebarToggle: false,
+                tabs: headerTabs,
+                defaultTab: activeTab || undefined,
+                onTabChange: dashboardState.onTabChange,
+                tabsPosition: 'right',
+                actions: mockHeaderConfigWithTabs.actions,
+              }
             },
-          },
-        ]}
+          ]}
         layoutStorageKey="page-layout-workflow-refinement"
-        dragHandleColor="primary"
       >
-        {(activeTab === 'dashboard' || !hasProjects) && (
+        {!hasProjects && (
           <DashboardFeature {...dashboardState.dashboardProps} />
         )}
       </PageLayout>