ai-design-system 0.1.0

package/components/blocks/AIConversation/AIConversation.tsx

@@ -0,0 +1,186 @@
+import * as React from "react"
+import {
+  Conversation,
+  ConversationContent,
+  ConversationEmptyState,
+  ConversationScrollButton,
+  type ConversationProps,
+} from "@/components/ai-elements/conversation"
+import { type AIMessage } from "@/components/composites/AgentMessage"
+import { UserMessage } from "@/components/composites/UserMessage"
+import { SpecialistMessage } from "@/components/composites/SpecialistMessage"
+import { OrchestratorMessage } from "@/components/composites/OrchestratorMessage"
+import { ToolCallDisplay } from "@/components/composites/ToolCallDisplay"
+import type { SubAgent } from "@/components/composites/AgentIndicator"
+
+/**
+ * AIConversation Section
+ *
+ * A section-level component specifically designed for AI agent conversations.
+ * Uses the Conversation AI element with AgentMessage blocks to display
+ * multi-agent workflows with tool calls and sub-agent indicators.
+ *
+ * Based on reference implementation from deep-agents-ui ChatInterface.
+ */
+
+export interface AIConversationProps
+  extends Omit<ConversationProps, "children"> {
+  /**
+   * Array of AI messages to display
+   */
+  messages: AIMessage[]
+  /**
+   * Whether to show avatars for messages
+   */
+  showAvatars?: boolean
+  /**
+   * Handler for sub-agent selection
+   */
+  onSelectSubAgent?: (subAgent: SubAgent) => void
+  /**
+   * Currently selected sub-agent
+   */
+  selectedSubAgent?: SubAgent | null
+  /**
+   * Empty state configuration
+   */
+  emptyState?: {
+    title?: string
+    description?: string
+    icon?: React.ReactNode
+  }
+}
+
+/**
+ * AIConversation component - displays AI agent conversations with tool calls and sub-agents
+ */
+export const AIConversation = React.memo<AIConversationProps>(
+  ({
+    messages,
+    showAvatars = true,
+    onSelectSubAgent,
+    selectedSubAgent,
+    emptyState,
+    ...conversationProps
+  }) => {
+    const isEmpty = React.useMemo(
+      () => messages.length === 0,
+      [messages.length]
+    )
+
+    const emptyStateTitle = React.useMemo(
+      () => emptyState?.title || "No conversation yet",
+      [emptyState?.title]
+    )
+
+    const emptyStateDescription = React.useMemo(
+      () =>
+        emptyState?.description ||
+        "Start a conversation to see AI agent interactions",
+      [emptyState?.description]
+    )
+
+    const renderedMessages = React.useMemo(
+      () =>
+        messages.map((message) => {
+          // Render based on role field
+          if (message.role === "user") {
+            return (
+              <UserMessage
+                key={message.id}
+                message={{
+                  id: message.id,
+                  content: message.content,
+                  avatarSrc: message.avatarSrc,
+                  avatarName: message.avatarName,
+                }}
+                showAvatar={showAvatars}
+              />
+            )
+          }
+
+          if (message.role === "orchestrator") {
+            // Extract sub-agents from the message
+            const subAgents = message.subAgents || []
+
+            // Filter tool calls that aren't "task" type (those become sub-agents)
+            const directToolCalls =
+              message.toolCalls?.filter(
+                (tc) => tc.name !== "task"
+              ) || []
+
+            return (
+              <OrchestratorMessage
+                key={message.id}
+                message={{
+                  id: message.id,
+                  content: message.content,
+                  avatarSrc: message.avatarSrc,
+                  avatarName: message.avatarName,
+                }}
+                showAvatar={showAvatars}
+              >
+                {/* Render direct tool calls */}
+                {directToolCalls.map((tc) => (
+                  <ToolCallDisplay key={tc.id} toolCall={tc} />
+                ))}
+
+                {/* Render specialist sub-agents */}
+                {subAgents.map((subAgent) => (
+                  <SpecialistMessage
+                    key={subAgent.id}
+                    message={{
+                      id: subAgent.id,
+                      name: subAgent.subAgentName,
+                      description: typeof subAgent.input === 'string' ? subAgent.input : JSON.stringify(subAgent.input),
+                      content: typeof subAgent.output === 'string' ? subAgent.output : (subAgent.output ? JSON.stringify(subAgent.output) : ''),
+                      status: subAgent.status,
+                      toolCalls: [],
+                    }}
+                    showAvatar={showAvatars}
+                    isNested={true}
+                  />
+                ))}
+              </OrchestratorMessage>
+            )
+          }
+
+          // Default to specialist message for any other AI messages
+          return (
+            <SpecialistMessage
+              key={message.id}
+              message={{
+                id: message.id,
+                name: message.avatarName || "Agent",
+                content: message.content,
+                toolCalls: message.toolCalls?.filter((tc) => tc.name !== "task"),
+                status: "completed",
+              }}
+              showAvatar={showAvatars}
+              isNested={false}
+            />
+          )
+        }),
+      [messages, showAvatars]
+    )
+
+    return (
+      <Conversation {...conversationProps}>
+        <ConversationContent>
+          {isEmpty ? (
+            <ConversationEmptyState
+              title={emptyStateTitle}
+              description={emptyStateDescription}
+              icon={emptyState?.icon}
+            />
+          ) : (
+            renderedMessages
+          )}
+        </ConversationContent>
+        <ConversationScrollButton />
+      </Conversation>
+    )
+  }
+)
+
+AIConversation.displayName = "AIConversation"

package/components/blocks/AIConversation/index.ts

@@ -0,0 +1,8 @@
+/**
+ * AIConversation Section
+ *
+ * Central export point for the AIConversation section component and its related types.
+ */
+export { AIConversation } from './AIConversation'
+
+export type { AIConversationProps } from './AIConversation'

package/components/blocks/AppSidebar/AppSidebar.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { AppSidebar } from './AppSidebar'
+import { SidebarProvider } from '@/components/primitives/Sidebar'
+
+const meta = {
+  title: 'Blocks/AppSidebar',
+  component: AppSidebar,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof AppSidebar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const mainNav = [
+  { title: 'Dashboard', url: '#', icon: 'layout-dashboard', isActive: true },
+  { title: 'Projects', url: '#', icon: 'folder' },
+  { title: 'Tasks', url: '#', icon: 'check-square' },
+]
+
+const secondaryNav = [
+  { title: 'Settings', url: '#', icon: 'settings' },
+  { title: 'Help', url: '#', icon: 'help-circle' },
+]
+
+const user = {
+  name: 'John Doe',
+  email: 'john@example.com',
+  avatar: 'https://github.com/shadcn.png',
+}
+
+export const Default: Story = {
+  render: () => (
+    <SidebarProvider>
+      <AppSidebar
+        logo={{ icon: 'command', text: 'Acme Inc.', href: '/' }}
+        mainNavigation={mainNav}
+        user={user}
+      />
+    </SidebarProvider>
+  ),
+}
+
+export const Complete: Story = {
+  render: () => (
+    <SidebarProvider>
+      <AppSidebar
+        logo={{ icon: 'command', text: 'Acme Inc.', href: '/' }}
+        mainNavigation={mainNav}
+        secondaryNavigation={secondaryNav}
+        documents={[
+          { title: 'Project A', url: '#', icon: 'file' },
+          { title: 'Project B', url: '#', icon: 'file' },
+        ]}
+        user={user}
+        userActions={[
+          { label: 'Profile', onClick: () => {} },
+          { label: 'Logout', onClick: () => {} },
+        ]}
+      />
+    </SidebarProvider>
+  ),
+}

package/components/blocks/AppSidebar/AppSidebar.tsx

@@ -0,0 +1,87 @@
+import * as React from "react"
+import {
+  Sidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+} from "@/components/primitives/Sidebar"
+import { Icon } from "@/components/primitives/Icon"
+import { NavigationList, type NavigationItem } from "@/components/composites/NavigationList"
+import { NavUser } from "@/components/composites/NavUser"
+
+export interface AppSidebarProps extends React.ComponentPropsWithoutRef<typeof Sidebar> {
+  logo?: {
+    icon: string
+    text: string
+    href: string
+  }
+  mainNavigation: NavigationItem[]
+  secondaryNavigation?: NavigationItem[]
+  documents?: NavigationItem[]
+  user: {
+    name: string
+    email: string
+    avatar?: string
+  }
+  userActions?: { label: string; onClick: () => void }[]
+}
+
+export const AppSidebar = React.memo<AppSidebarProps>(
+  ({ logo, mainNavigation, secondaryNavigation, documents, user, userActions, ...props }) => {
+    return (
+      <Sidebar {...props} variant="inset" collapsible="offcanvas">
+        <SidebarHeader>
+          {logo && (
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild className="data-[slot=sidebar-menu-button]:!p-1.5">
+                  <a href={logo.href}>
+                    <Icon name={logo.icon} className="!size-5" />
+                    <span className="text-base font-semibold">{logo.text}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          )}
+        </SidebarHeader>
+
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <NavigationList items={mainNavigation} />
+            </SidebarGroupContent>
+          </SidebarGroup>
+
+          {documents && documents.length > 0 && (
+            <SidebarGroup>
+              <SidebarGroupLabel>Documents</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <NavigationList items={documents} />
+              </SidebarGroupContent>
+            </SidebarGroup>
+          )}
+
+          {secondaryNavigation && secondaryNavigation.length > 0 && (
+            <SidebarGroup>
+              <SidebarGroupContent className="mt-auto">
+                <NavigationList items={secondaryNavigation} />
+              </SidebarGroupContent>
+            </SidebarGroup>
+          )}
+        </SidebarContent>
+
+        <SidebarFooter>
+          <NavUser user={user} actions={userActions} />
+        </SidebarFooter>
+      </Sidebar>
+    )
+  }
+)
+
+AppSidebar.displayName = "AppSidebar"

package/components/blocks/AppSidebar/index.ts

@@ -0,0 +1,2 @@
+export { AppSidebar } from './AppSidebar'
+export type { AppSidebarProps } from './AppSidebar'

package/components/blocks/DocumentEditorWithComments/DocumentEditorWithComments.stories.tsx

@@ -0,0 +1,341 @@
+/**
+ * DocumentEditorWithComments Stories
+ * 
+ * Demonstrates the DocumentEditorWithComments section with various annotation types
+ */
+
+import type { Meta, StoryObj } from '@storybook/react'
+import type { JSONContent } from '@tiptap/core'
+import { DocumentEditorWithComments } from './DocumentEditorWithComments'
+import type { Annotation } from '@/types/ai-editor'
+
+const meta: Meta<typeof DocumentEditorWithComments> = {
+  title: 'Blocks/DocumentEditorWithComments',
+  component: DocumentEditorWithComments,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof DocumentEditorWithComments>
+
+// Use the SAME document for all stories (like DocumentEditor block does)
+const sampleContent: JSONContent = {
+  type: 'doc',
+  content: [
+    {
+      type: 'heading',
+      attrs: { level: 1 },
+      content: [{ type: 'text', text: 'Document Review Example' }],
+    },
+    {
+      type: 'paragraph',
+      content: [
+        { type: 'text', text: 'This is a sample document with various annotations. ' },
+        { type: 'text', text: 'Some text has comments, ' },
+        { type: 'text', text: 'some has suggestions, ' },
+        { type: 'text', text: 'and some has block additions.' },
+      ],
+    },
+    {
+      type: 'paragraph',
+      content: [
+        { type: 'text', text: 'The editor supports inline annotations for comments and suggestions. ' },
+        { type: 'text', text: 'Click on any highlighted text to see the annotation details.' },
+      ],
+    },
+  ],
+}
+
+// Annotations calculated for the sampleContent document
+const commentAnnotations: Annotation[] = [
+  {
+    type: 'comment',
+    id: 'comment-1',
+    range: { from: 50, to: 70 },
+    createdAt: Date.now(),
+    userId: 'user-1',
+    data: {
+      thread: [
+        {
+          id: 'thread-1',
+          userId: 'user-1',
+          userName: 'John Doe',
+          contentRich: {
+            type: 'doc',
+            content: [
+              {
+                type: 'paragraph',
+                content: [{ type: 'text', text: 'This section needs clarification.' }],
+              },
+            ],
+          },
+          timestamp: Date.now(),
+        },
+      ],
+    },
+  },
+]
+
+// Document specifically for suggestions demo
+const suggestionsContent: JSONContent = {
+  type: 'doc',
+  content: [
+    {
+      type: 'heading',
+      attrs: { level: 2 },
+      content: [{ type: 'text', text: 'Text Modification Examples' }],
+    },
+    {
+      type: 'paragraph',
+      content: [
+        { type: 'text', text: 'This paragraph shows a ' },
+        { type: 'text', text: 'deletion example' },
+        { type: 'text', text: ' with strikethrough text.' },
+      ],
+    },
+    {
+      type: 'paragraph',
+      content: [
+        { type: 'text', text: 'This paragraph shows an ' },
+        { type: 'text', text: 'insertion example' },
+        { type: 'text', text: ' with green highlighted text.' },
+      ],
+    },
+  ],
+}
+
+const suggestionAnnotations: Annotation[] = [
+  {
+    type: 'suggestion',
+    id: 'diff-delete',
+    range: { from: 60, to: 76 }, // "deletion example"
+    createdAt: Date.now(),
+    userId: 'ai-1',
+    data: {
+      action: 'delete',
+      oldText: 'deletion example',
+      reason: 'Remove redundant text',
+      thread: [],
+    },
+  },
+  {
+    type: 'suggestion',
+    id: 'diff-insert',
+    range: { from: 125, to: 142 }, // "insertion example"
+    createdAt: Date.now(),
+    userId: 'ai-1',
+    data: {
+      action: 'insert',
+      newText: 'insertion example',
+      reason: 'Add clarifying text',
+      thread: [],
+    },
+  },
+]
+
+const mixedAnnotations: Annotation[] = [
+  ...commentAnnotations,
+  ...suggestionAnnotations,
+]
+
+/**
+ * Default story with mixed annotations
+ */
+export const Default: Story = {
+  args: {
+    content: sampleContent,
+    annotations: mixedAnnotations,
+    currentUserId: 'user-1',
+    currentUserName: 'John Doe',
+    readOnly: false,
+    onAnnotationAdd: (annotation) => console.log('Added annotation:', annotation),
+    onAnnotationUpdate: (annotation) => console.log('Updated annotation:', annotation),
+  },
+}
+
+/**
+ * Story with empty document
+ */
+export const EmptyDocument: Story = {
+  args: {
+    content: {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [],
+        },
+      ],
+    },
+    annotations: [],
+    currentUserId: 'user-1',
+    currentUserName: 'John Doe',
+    readOnly: false,
+  },
+}
+
+/**
+ * Story in readonly mode (no interactions)
+ */
+export const ReadonlyMode: Story = {
+  args: {
+    content: sampleContent,
+    annotations: commentAnnotations,
+    currentUserId: 'user-1',
+    currentUserName: 'John Doe',
+    readOnly: true,
+  },
+}
+
+/**
+ * Story with only comment annotations
+ */
+export const CommentsOnly: Story = {
+  args: {
+    content: sampleContent,
+    annotations: commentAnnotations,
+    currentUserId: 'user-1',
+    currentUserName: 'John Doe',
+    readOnly: false,
+    onAnnotationAdd: (annotation) => console.log('Added annotation:', annotation),
+    onAnnotationUpdate: (annotation) => console.log('Updated annotation:', annotation),
+  },
+}
+
+/**
+ * Story with only suggestion annotations
+ * Shows deletion (red strikethrough) and insertion (green highlight)
+ */
+export const SuggestionsOnly: Story = {
+  args: {
+    content: suggestionsContent,
+    annotations: suggestionAnnotations,
+    currentUserId: 'user-1',
+    currentUserName: 'John Doe',
+    readOnly: false,
+    onAnnotationAdd: (annotation) => console.log('Added annotation:', annotation),
+    onAnnotationUpdate: (annotation) => console.log('Updated annotation:', annotation),
+  },
+}
+
+
+/**
+ * Story with both comments and suggestions
+ * Shows yellow comment highlights and green/red suggestion highlights together
+ */
+export const CommentsAndSuggestions: Story = {
+  args: {
+    content: {
+      type: 'doc',
+      content: [
+        {
+          type: 'heading',
+          attrs: { level: 2 },
+          content: [{ type: 'text', text: 'Document with Comments and Suggestions' }],
+        },
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'text', text: 'This paragraph has a comment annotation. ' },
+            { type: 'text', text: 'Click the highlighted text to view the discussion.' },
+          ],
+        },
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'text', text: 'This paragraph shows a ' },
+            { type: 'text', text: 'deletion suggestion' },
+            { type: 'text', text: ' with red strikethrough.' },
+          ],
+        },
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'text', text: 'This paragraph shows an ' },
+            { type: 'text', text: 'insertion suggestion' },
+            { type: 'text', text: ' with green highlight.' },
+          ],
+        },
+      ],
+    },
+    annotations: [
+      {
+        type: 'comment',
+        id: 'comment-1',
+        range: { from: 62, to: 80 }, // "comment annotation"
+        createdAt: Date.now(),
+        userId: 'user-1',
+        data: {
+          thread: [
+            {
+              id: 'thread-1',
+              userId: 'user-1',
+              userName: 'John Doe',
+              avatarSrc: 'https://api.dicebear.com/7.x/avataaars/svg?seed=John',
+              contentRich: {
+                type: 'doc',
+                content: [
+                  {
+                    type: 'paragraph',
+                    content: [{ type: 'text', text: 'This section needs clarification.' }],
+                  },
+                ],
+              },
+              timestamp: Date.now() - 3600000,
+            },
+            {
+              id: 'thread-2',
+              userId: 'user-2',
+              userName: 'Jane Smith',
+              avatarSrc: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Jane',
+              contentRich: {
+                type: 'doc',
+                content: [
+                  {
+                    type: 'paragraph',
+                    content: [{ type: 'text', text: 'I agree, let me add more details.' }],
+                  },
+                ],
+              },
+              timestamp: Date.now() - 1800000,
+            },
+          ],
+        },
+      },
+      {
+        type: 'suggestion',
+        id: 'suggestion-delete',
+        range: { from: 157, to: 176 }, // "deletion suggestion"
+        createdAt: Date.now(),
+        userId: 'ai-1',
+        data: {
+          action: 'delete',
+          oldText: 'deletion suggestion',
+          reason: 'Remove redundant text',
+          thread: [],
+        },
+      },
+      {
+        type: 'suggestion',
+        id: 'suggestion-insert',
+        range: { from: 226, to: 246 }, // "insertion suggestion"
+        createdAt: Date.now(),
+        userId: 'ai-1',
+        data: {
+          action: 'insert',
+          newText: 'insertion suggestion',
+          reason: 'Add clarifying text',
+          thread: [],
+        },
+      },
+    ],
+    currentUserId: 'user-1',
+    currentUserName: 'John Doe',
+    readOnly: false,
+    onAnnotationAdd: (annotation) => console.log('Added annotation:', annotation),
+    onAnnotationUpdate: (annotation) => console.log('Updated annotation:', annotation),
+  },
+}