ai-design-system 0.1.0

package/components/composites/OrchestratorMessage/OrchestratorMessage.stories.tsx

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { OrchestratorMessage } from './OrchestratorMessage'
+import { SpecialistMessage } from '../SpecialistMessage'
+import { ToolCallDisplay } from '../ToolCallDisplay'
+import { Search, BarChart, FileText } from 'lucide-react'
+
+const meta: Meta<typeof OrchestratorMessage> = {
+  title: 'Composites/OrchestratorMessage',
+  component: OrchestratorMessage,
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof OrchestratorMessage>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    message: {
+      id: '1',
+      content: 'I will coordinate the analysis across multiple specialist agents.',
+      avatarSrc: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face',
+      avatarName: 'Coordinator',
+    },
+    showAvatar: true,
+  },
+}
+
+export const WithoutAvatar: Story = {
+  args: {
+    message: {
+      id: '2',
+      content: 'Orchestrating workflow without avatar display...',
+    },
+    showAvatar: false,
+  },
+}
+
+export const WithSpecialists: Story = {
+  args: {
+    message: {
+      id: '3',
+      content: 'I am delegating tasks to specialized agents for comprehensive analysis.',
+      avatarSrc: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face',
+      avatarName: 'Coordinator',
+    },
+    showAvatar: true,
+    children: (
+      <>
+        <SpecialistMessage
+          message={{
+            id: 'spec_1',
+            name: 'research-agent',
+            description: 'Gathering relevant information from multiple sources',
+            icon: <Search className="size-4" />,
+            content: 'Researching the topic and gathering relevant information...',
+            status: 'completed',
+          }}
+          isNested={true}
+        />
+        <SpecialistMessage
+          message={{
+            id: 'spec_2',
+            name: 'analysis-agent',
+            description: 'Performing comprehensive analysis on research data',
+            icon: <BarChart className="size-4" />,
+            content: 'Analyzing the collected data and extracting insights...',
+            status: 'active',
+          }}
+          isNested={true}
+        />
+        <SpecialistMessage
+          message={{
+            id: 'spec_3',
+            name: 'summary-agent',
+            description: 'Creating comprehensive summary of findings',
+            icon: <FileText className="size-4" />,
+            content: 'Preparing comprehensive summary of findings...',
+            status: 'pending',
+          }}
+          isNested={true}
+        />
+      </>
+    ),
+  },
+}
+
+export const WithToolCalls: Story = {
+  args: {
+    message: {
+      id: '4',
+      content: 'Executing direct tool calls before delegating to specialists.',
+      avatarSrc: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face',
+      avatarName: 'Coordinator',
+    },
+    showAvatar: true,
+    children: (
+      <>
+        <ToolCallDisplay
+          toolCall={{
+            id: 'tool_1',
+            name: 'write_file',
+            args: { filename: 'plan.md', content: 'Execution plan...' },
+            result: 'File created successfully',
+            status: 'completed',
+          }}
+        />
+        <ToolCallDisplay
+          toolCall={{
+            id: 'tool_2',
+            name: 'write_todos',
+            args: { todos: ['Task 1', 'Task 2', 'Task 3'] },
+            result: 'Todo list created',
+            status: 'completed',
+          }}
+        />
+      </>
+    ),
+  },
+}
+
+export const CompleteWorkflow: Story = {
+  args: {
+    message: {
+      id: '5',
+      content: 'I will manage this complex workflow with both direct tools and specialist agents.',
+      avatarSrc: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face',
+      avatarName: 'Coordinator',
+    },
+    showAvatar: true,
+    children: (
+      <>
+        <ToolCallDisplay
+          toolCall={{
+            id: 'tool_1',
+            name: 'create_plan',
+            args: { objective: 'Complete analysis' },
+            result: 'Plan created',
+            status: 'completed',
+          }}
+        />
+        <SpecialistMessage
+          message={{
+            id: 'spec_1',
+            name: 'data-collector',
+            description: 'Collecting data from multiple sources',
+            icon: <Search className="size-4" />,
+            content: 'Collecting data from multiple sources...',
+            status: 'completed',
+            toolCalls: [
+              {
+                id: 'subtool_1',
+                name: 'fetch_data',
+                args: { source: 'API' },
+                result: 'Data fetched',
+                status: 'completed',
+              },
+            ],
+          }}
+          isNested={true}
+        />
+        <SpecialistMessage
+          message={{
+            id: 'spec_2',
+            name: 'processor',
+            description: 'Processing and transforming the collected data',
+            icon: <BarChart className="size-4" />,
+            content: 'Processing and transforming the collected data...',
+            status: 'active',
+          }}
+          isNested={true}
+        />
+        <SpecialistMessage
+          message={{
+            id: 'spec_3',
+            name: 'reporter',
+            description: 'Generating final report with visualizations',
+            icon: <FileText className="size-4" />,
+            content: 'Generating final report with visualizations...',
+            status: 'pending',
+          }}
+          isNested={true}
+        />
+      </>
+    ),
+  },
+}

package/components/composites/OrchestratorMessage/OrchestratorMessage.tsx

@@ -0,0 +1,72 @@
+import * as React from "react"
+import {
+  Message,
+  MessageContent,
+  MessageAvatar,
+} from "@/components/ai-elements/message"
+
+/**
+ * OrchestratorMessage Block
+ *
+ * A block component for displaying orchestrator/coordinator agent messages.
+ * Accepts children components (SpecialistMessage and ToolCallDisplay) for composition.
+ */
+
+export interface OrchestratorMessageData {
+  id: string
+  content: string
+  avatarSrc?: string
+  avatarName?: string
+}
+
+export interface OrchestratorMessageProps {
+  /**
+   * Orchestrator message data to display
+   */
+  message: OrchestratorMessageData
+  /**
+   * Whether to show avatar
+   */
+  showAvatar?: boolean
+  /**
+   * Child components (SpecialistMessage, ToolCallDisplay)
+   */
+  children?: React.ReactNode
+}
+
+/**
+ * OrchestratorMessage component - displays coordinator messages with nested specialists and tools
+ */
+export const OrchestratorMessage = React.memo<OrchestratorMessageProps>(
+  ({ message, showAvatar = true, children }) => {
+    const hasContent = React.useMemo(
+      () => message.content && message.content.trim() !== "",
+      [message.content]
+    )
+
+    return (
+      <Message from="assistant">
+        {showAvatar && (
+          <MessageAvatar
+            src={message.avatarSrc || "/coordinator-avatar.png"}
+            name={message.avatarName || "Coordinator"}
+          />
+        )}
+
+        <div className="flex-1">
+          {/* Orchestrator's message content */}
+          {hasContent && (
+            <MessageContent variant="contained">
+              {message.content}
+            </MessageContent>
+          )}
+
+          {/* Child components (specialists and tool calls) */}
+          {children && <div className="mt-4 space-y-4">{children}</div>}
+        </div>
+      </Message>
+    )
+  }
+)
+
+OrchestratorMessage.displayName = "OrchestratorMessage"

package/components/composites/OrchestratorMessage/index.ts

@@ -0,0 +1,8 @@
+/**
+ * OrchestratorMessage Block
+ *
+ * Central export point for the OrchestratorMessage block component and its related types.
+ */
+export { OrchestratorMessage } from './OrchestratorMessage'
+
+export type { OrchestratorMessageProps, OrchestratorMessageData } from './OrchestratorMessage'

package/components/composites/PageContainer/PageContainer.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { PageContainer } from './PageContainer'
+
+const meta = {
+  title: 'Composites/PageContainer',
+  component: PageContainer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof PageContainer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: (
+      <div className="p-6">
+        <h1 className="text-2xl font-bold">Page Content</h1>
+        <p className="mt-4 text-muted-foreground">
+          This is the main page content wrapped in PageContainer.
+        </p>
+      </div>
+    ),
+  },
+}
+
+export const WithCustomClass: Story = {
+  args: {
+    children: (
+      <div className="p-6">
+        <h1 className="text-2xl font-bold">Custom Styled Container</h1>
+        <p className="mt-4 text-muted-foreground">
+          PageContainer with custom className applied.
+        </p>
+      </div>
+    ),
+    className: 'bg-muted',
+  },
+}

package/components/composites/PageContainer/PageContainer.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { SidebarInset } from "@/components/primitives/Sidebar"
+
+/**
+ * PageContainer Composite
+ *
+ * Container for page content that works with Sidebar layout.
+ * Wraps content with SidebarInset primitive.
+ */
+
+export interface PageContainerProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export const PageContainer = React.memo<PageContainerProps>(({ children, className }) => {
+  return (
+    <SidebarInset className={className}>
+      {children}
+    </SidebarInset>
+  )
+})
+
+PageContainer.displayName = "PageContainer"

package/components/composites/PageContainer/index.ts

@@ -0,0 +1,2 @@
+export { PageContainer } from './PageContainer'
+export type { PageContainerProps } from './PageContainer'

package/components/composites/PromptInput/PromptInput.stories.tsx

@@ -0,0 +1,200 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PromptInput } from "./PromptInput";
+import { useState } from "react";
+
+const meta: Meta<typeof PromptInput> = {
+  title: "Blocks/PromptInput",
+  component: PromptInput,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    disabled: {
+      control: "boolean",
+      description: "Blocks form submission when true. Textarea remains editable.",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text for the textarea input",
+    },
+  },
+} satisfies Meta<typeof PromptInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default uncontrolled PromptInput
+ * The AI element manages its own internal state
+ */
+export const Default: Story = {
+  args: {
+    placeholder: "What would you like to know?",
+    onSubmit: (message) => {
+      console.log("Submitted:", message);
+      alert(`Submitted: ${message.text}`);
+    },
+  },
+};
+
+/**
+ * Controlled state example
+ * Parent component manages the input value
+ */
+export const ControlledState: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    const [submittedMessages, setSubmittedMessages] = useState<string[]>([]);
+
+    return (
+      <div className="space-y-4">
+        <div className="rounded-md border border-border bg-muted p-4">
+          <h3 className="mb-2 font-semibold text-sm">Parent State:</h3>
+          <p className="font-mono text-xs">
+            Current value: "{value}" ({value.length} chars)
+          </p>
+        </div>
+
+        <PromptInput
+          value={value}
+          onChange={setValue}
+          placeholder="Type something (controlled mode)"
+          onSubmit={(message) => {
+            setSubmittedMessages((prev) => [...prev, message.text || ""]);
+            setValue(""); // Clear after submit
+          }}
+        />
+
+        {submittedMessages.length > 0 && (
+          <div className="rounded-md border border-border bg-muted p-4">
+            <h3 className="mb-2 font-semibold text-sm">Submitted Messages:</h3>
+            <ul className="space-y-1">
+              {submittedMessages.map((msg, i) => (
+                <li key={i} className="font-mono text-xs">
+                  {i + 1}. {msg}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+/**
+ * Disabled state
+ * Form submission is blocked, but textarea remains editable for drafts
+ */
+export const DisabledState: Story = {
+  render: () => {
+    const [isDisabled, setIsDisabled] = useState(true);
+
+    return (
+      <div className="space-y-4">
+        <div className="rounded-md border border-border bg-muted p-4">
+          <label className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={isDisabled}
+              onChange={(e) => setIsDisabled(e.target.checked)}
+            />
+            <span className="text-sm">Disable submission (textarea stays editable)</span>
+          </label>
+        </div>
+
+        <PromptInput
+          disabled={isDisabled}
+          placeholder="Try typing and submitting (disabled mode)"
+          onSubmit={(message) => {
+            alert(`This should not appear when disabled! Message: ${message.text}`);
+          }}
+        />
+
+        <div className="rounded-md border border-border bg-muted p-4">
+          <p className="text-muted-foreground text-xs">
+            When disabled, the submit button is blocked but you can still type in the textarea.
+            This is useful for review workflows where users can draft responses but cannot submit until approval.
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Custom placeholder
+ * Different placeholder text for various contexts
+ */
+export const CustomPlaceholder: Story = {
+  args: {
+    placeholder: "Ask a question or describe a task...",
+    onSubmit: (message) => {
+      console.log("Submitted:", message);
+    },
+  },
+};
+
+/**
+ * Custom submit handler
+ * Demonstrates async submit handling with loading state
+ */
+export const CustomSubmitHandler: Story = {
+  render: () => {
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [lastSubmitted, setLastSubmitted] = useState<string>("");
+
+    return (
+      <div className="space-y-4">
+        {isSubmitting && (
+          <div className="rounded-md border border-border bg-muted p-4">
+            <p className="text-sm">Processing your message...</p>
+          </div>
+        )}
+
+        {lastSubmitted && (
+          <div className="rounded-md border border-border bg-muted p-4">
+            <h3 className="mb-2 font-semibold text-sm">Last Submitted:</h3>
+            <p className="font-mono text-xs">{lastSubmitted}</p>
+          </div>
+        )}
+
+        <PromptInput
+          placeholder="Type something and submit (simulates 2s async processing)"
+          disabled={isSubmitting}
+          onSubmit={async (message) => {
+            setIsSubmitting(true);
+            // Simulate async processing
+            await new Promise((resolve) => setTimeout(resolve, 2000));
+            setLastSubmitted(message.text || "");
+            setIsSubmitting(false);
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+/**
+ * No attachment UI
+ * Verifies compositional hiding - no attachment components visible
+ */
+export const NoAttachmentUI: Story = {
+  args: {
+    placeholder: "Text-only input - no attachment options available",
+    onSubmit: (message) => {
+      console.log("Message with files array:", message);
+      alert(
+        `Text: ${message.text}\nFiles: ${message.files?.length || 0} (should always be 0)`
+      );
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The PromptInput block hides all attachment-related UI through compositional hiding. No attachment buttons, dropdowns, or drag-drop functionality is exposed.",
+      },
+    },
+  },
+};

package/components/composites/PromptInput/PromptInput.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import * as React from "react";
+import {
+  PromptInput as AIPromptInput,
+  PromptInputBody,
+  PromptInputFooter,
+  PromptInputSubmit,
+  PromptInputTextarea,
+  PromptInputTools,
+  PromptInputProvider,
+  type PromptInputMessage,
+  type PromptInputProps as AIPromptInputProps,
+} from "@/components/ai-elements/prompt-input";
+import type { FormEvent } from "react";
+
+/**
+ * PromptInput Block
+ *
+ * A thin wrapper around the PromptInput AI element that hides attachment functionality.
+ * This block provides a simplified prompt input interface focused on text-only input.
+ *
+ * Features:
+ * - Controlled and uncontrolled state support
+ * - Disabled state (blocks submission, keeps textarea editable)
+ * - Custom placeholder text
+ * - No attachment UI (compositional hiding)
+ */
+
+export interface PromptInputBlockProps
+  extends Omit<
+    AIPromptInputProps,
+    "accept" | "multiple" | "maxFiles" | "maxFileSize" | "globalDrop" | "syncHiddenInput" | "onSubmit" | "onChange"
+  > {
+  /**
+   * Blocks form submission when true. Textarea remains editable for drafts.
+   */
+  disabled?: boolean;
+  /**
+   * Placeholder text for the textarea input
+   */
+  placeholder?: string;
+  /**
+   * Controlled state value (when provided with onChange)
+   */
+  value?: string;
+  /**
+   * Controlled state change handler (when provided with value)
+   */
+  onChange?: (value: string) => void;
+  /**
+   * Submit handler called when form is submitted
+   */
+  onSubmit: (
+    message: PromptInputMessage,
+    event: FormEvent<HTMLFormElement>
+  ) => void | Promise<void>;
+}
+
+/**
+ * PromptInput component - text-only prompt input without attachments
+ */
+export const PromptInput = React.memo<PromptInputBlockProps>(
+  ({
+    disabled = false,
+    placeholder,
+    value,
+    onChange,
+    onSubmit,
+    ...props
+  }) => {
+    // Handle form submission with disabled state
+    const handleSubmit = React.useCallback(
+      (message: PromptInputMessage, event: FormEvent<HTMLFormElement>) => {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+        onSubmit(message, event);
+      },
+      [disabled, onSubmit]
+    );
+
+    // Controlled mode: wrap in PromptInputProvider
+    const isControlled = value !== undefined && onChange !== undefined;
+
+    // Handle controlled state change
+    const handleControlledChange = React.useCallback(
+      (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        if (onChange) {
+          onChange(e.target.value);
+        }
+      },
+      [onChange]
+    );
+
+    // Render the prompt input composition
+    const promptInputContent = (
+      <AIPromptInput onSubmit={handleSubmit} {...props}>
+        <PromptInputBody>
+          <PromptInputTextarea
+            placeholder={placeholder}
+            disabled={false} // Keep editable even when form is disabled
+            onChange={isControlled ? handleControlledChange : undefined}
+          />
+        </PromptInputBody>
+        <PromptInputFooter>
+          <PromptInputTools>
+            {/* No attachment menu - compositionally hidden */}
+          </PromptInputTools>
+          <PromptInputSubmit disabled={disabled} />
+        </PromptInputFooter>
+      </AIPromptInput>
+    );
+
+    // Wrap in provider for controlled mode
+    if (isControlled) {
+      return (
+        <PromptInputProvider initialInput={value}>
+          {promptInputContent}
+        </PromptInputProvider>
+      );
+    }
+
+    return promptInputContent;
+  }
+);
+
+PromptInput.displayName = "PromptInput";

package/components/composites/PromptInput/index.ts

@@ -0,0 +1,8 @@
+/**
+ * PromptInput Block
+ *
+ * Central export point for the PromptInput block component and its related types.
+ */
+export { PromptInput } from "./PromptInput";
+
+export type { PromptInputBlockProps } from "./PromptInput";