@agentiffai/design 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,35 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2024-10-10
+
+### Added
+- Initial release of @agentiffai/design
+- Layout components (Layout, ServiceIcon, NavHorizontal, PaneMenus, etc.)
+- Icon components (Gmail, Slack, LinkedIn, YouTube, etc.)
+- CopilotKit integration components (CustomCopilotSidebar)
+- Theme system with light and dark themes
+- Comprehensive icon set (2500+ SVG icons)
+- Brand logos for popular services
+- Full TypeScript support
+- Tree-shakeable ESM and CJS builds
+- React ARIA integration for accessibility
+- Styled-components theming support
+
+### Features
+- **Layout System**: Complete application layout with vertical nav, horizontal nav, and main content areas
+- **Service Icons**: 10+ branded service icons with active states
+- **Action Buttons**: Calendar, settings, and chat action buttons
+- **Icon Library**: Extensive icon set from the design system
+- **CopilotKit Integration**: Custom sidebar and chat components
+- **Theming**: Light and dark themes with full customization
+- **Accessibility**: Built with React ARIA for keyboard navigation and screen readers
+
+### Documentation
+- Comprehensive Storybook documentation
+- TypeScript type definitions
+- Component usage examples

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Agentiffai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,187 @@
+# @agentiffai/design
+
+A comprehensive design system for CopilotKit components built with React, TypeScript, and styled-components. Features modern UI components optimized for AI-powered applications with full tree-shaking support.
+
+[![npm version](https://badge.fury.io/js/@agentiffai%2Fdesign.svg)](https://www.npmjs.com/package/@agentiffai/design)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- 🎨 **30+ Components**: Comprehensive set of UI components for AI applications
+- 🌲 **Tree-Shakeable**: Only bundle what you use
+- 📦 **TypeScript**: Full type safety and autocomplete
+- 🎭 **Theming**: Light and dark themes with custom styling
+- ♿ **Accessible**: Built with React ARIA for accessibility
+- 📱 **Responsive**: Mobile-first design
+- 🚀 **Modern**: ES2022+ with ESM and CJS support
+
+## Installation
+
+```bash
+npm install @agentiffai/design
+```
+
+### Peer Dependencies
+
+```bash
+npm install react react-dom styled-components @copilotkit/react-core @copilotkit/react-ui
+```
+
+## Quick Start
+
+```typescript
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { darkTheme, GlobalStyle } from '@agentiffai/design/theme';
+import { Button, Input, Messages } from '@agentiffai/design/copilotkit';
+
+function App() {
+  return (
+    <ThemeProvider theme={darkTheme}>
+      <GlobalStyle />
+      <Messages />
+      <Input placeholder="Type a message..." />
+      <Button>Send</Button>
+    </ThemeProvider>
+  );
+}
+
+export default App;
+```
+
+## Component Categories
+
+- **Core Components**: `AssistantThinking`, `ChatInput`, `NotificationCard`, `SideMenu`, `UserMessage`
+- **CopilotKit Components**: `Actions`, `AgentState`, `Button`, `Input`, `Messages`, `Window`, etc.
+- **Layout Components**: `Layout`, `NavHorizontal`, `NavVertical`, `Icon`, `PaneMenus`
+- **Brand Icons**: `FacebookIcon`, `LinkedInIcon`, `InstagramIcon`, `XIcon`, etc.
+- **Theme**: `darkTheme`, `lightTheme`, `GlobalStyle`, `tokens`
+
+See [full documentation](./NPM_PUBLISHING.md) for detailed usage examples.
+
+## Tree-Shaking
+
+Import only what you need to minimize bundle size:
+
+```typescript
+// ✅ Category-specific import (recommended)
+import { Button, Input } from '@agentiffai/design/copilotkit';
+import { LinkedInIcon } from '@agentiffai/design/icons';
+import { darkTheme } from '@agentiffai/design/theme';
+
+// ✅ Main entry point also works
+import { Button } from '@agentiffai/design';
+```
+
+## Technology Stack
+
+- TypeScript
+- React
+- Styled-components
+- React ARIA
+- Playwright (testing)
+
+## Getting Started
+
+This project is scaffolded for optimal AI-assisted development with Claude Code.
+
+### Prerequisites
+
+
+- Node.js (v18+)
+
+
+
+### Launch Claude Code
+
+```bash
+./scripts/launch.sh
+```
+
+This script will:
+- Check for required dependencies
+- Start any necessary services
+- Open Claude Code with optimal context
+
+### Development Workflow
+
+1. Check current tasks: `/tech tasks` or check Archon
+2. Select a task to work on
+3. Use `/prime-feature <name>` to load feature context
+4. Develop and test
+5. Commit with `/lint-and-commit "message"`
+
+6. Archive feature spec with `/spec-compact`
+
+
+## Project Structure
+
+```
+agentiffai-design/
+├── .claude/           # Claude Code configuration
+│   ├── commands/      # Custom slash commands
+│   ├── agents/        # Sub-agent definitions
+│   ├── hooks.json     # Workflow automation hooks
+│   └── docs/          # Project documentation
+├── .specify/          # SpecKit constitution
+├── specs/             # Feature specifications
+├── scripts/          # Utility scripts
+└── src/               # Source code
+```
+
+## CopilotKit Integration
+
+This design system includes a complete integration with CopilotKit's CopilotSidebar:
+
+```tsx
+import { CopilotKit } from "@copilotkit/react-core";
+import { IntegratedSidebar } from "@agentiffai/design/copilotkit";
+
+function App() {
+  return (
+    <CopilotKit runtimeUrl="/api/copilotkit">
+      <IntegratedSidebar>
+        <YourApp />
+      </IntegratedSidebar>
+    </CopilotKit>
+  );
+}
+```
+
+**Documentation:**
+- 📖 [Quick Start Guide](./COPILOTKIT_QUICKSTART.md) - 5-minute setup
+- 📚 [Integration Guide](./COPILOTKIT_INTEGRATION_GUIDE.md) - Complete technical documentation
+- 🏗️ [Architecture](./COPILOTKIT_ARCHITECTURE.md) - Visual diagrams and data flow
+- 📝 [Summary](./COPILOTKIT_INTEGRATION_SUMMARY.md) - Overview and key features
+
+**Features:**
+- ✅ Custom-designed AI chat sidebar
+- ✅ Full React ARIA accessibility
+- ✅ Theme support (light/dark)
+- ✅ Loading states with AssistantThinking component
+- ✅ TypeScript support
+- ✅ Storybook examples
+
+## Documentation
+
+See `.claude/docs/` for detailed documentation on:
+- Architecture patterns
+- Development guidelines
+- Testing strategies
+- Deployment procedures
+
+
+## Archon Integration
+
+This project integrates with Archon for:
+- Task management
+- Knowledge base (RAG)
+- Code examples
+- Project documentation
+
+Access Archon at: http://localhost:8181
+
+
+## License
+
+MIT

package/dist/Window-B6e_UfLV.d.ts

@@ -0,0 +1,429 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default, { ReactNode } from 'react';
+import { AriaButtonProps } from '@react-aria/button';
+import { AriaTextFieldProps } from '@react-aria/textfield';
+import { A as AriaButtonProps$1 } from './index.d-DYU1eVeb.js';
+import * as styled_components from 'styled-components';
+import * as styled_components_dist_types from 'styled-components/dist/types';
+
+type ActionVariant = 'primary' | 'secondary' | 'icon';
+type ActionsLayout = 'horizontal' | 'vertical';
+interface Action {
+    id: string;
+    label: string;
+    onClick: () => void;
+    variant?: ActionVariant;
+    disabled?: boolean;
+    icon?: React__default.ReactNode;
+}
+interface ActionsProps {
+    actions: Action[];
+    layout?: ActionsLayout;
+    className?: string;
+}
+declare function Actions({ actions, layout, className }: ActionsProps): react_jsx_runtime.JSX.Element;
+declare namespace Actions {
+    var displayName: string;
+}
+
+interface AgentStateProps {
+    /** Current agent state */
+    state: 'idle' | 'thinking' | 'responding' | 'error';
+    /** Optional message to display */
+    message?: string;
+    /** Optional progress percentage (0-100) */
+    progress?: number;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * AgentState component for displaying agent status
+ * Styled to match AssistantThinking and Response components with dark theme
+ */
+declare const AgentState: ({ state, message, progress, className }: AgentStateProps) => react_jsx_runtime.JSX.Element | null;
+
+type ButtonVariant = 'primary' | 'secondary' | 'icon';
+type ButtonSize = 'small' | 'medium' | 'large';
+interface ButtonProps extends AriaButtonProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    isLoading?: boolean;
+}
+declare function Button({ variant, size, children, className, disabled, isLoading, ...ariaProps }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+interface FooterProps {
+    /**
+     * Branding text to display (e.g., "Powered by CopilotKit")
+     */
+    branding?: string;
+    /**
+     * Optional status text (e.g., "Connected", "Typing...", "3 tokens remaining")
+     */
+    status?: string;
+    /**
+     * Optional link URL for the branding text
+     */
+    brandingUrl?: string;
+    /**
+     * Callback when branding link is clicked
+     */
+    onBrandingClick?: () => void;
+    /**
+     * Additional CSS class name for custom styling
+     */
+    className?: string;
+}
+/**
+ * Footer Component
+ *
+ * A chat footer component that displays branding, status information, and optional links.
+ * Typically used at the bottom of a chat interface to show provider information or connection status.
+ *
+ * @example
+ * ```tsx
+ * <Footer
+ *   branding="Powered by CopilotKit"
+ *   status="Connected"
+ *   brandingUrl="https://copilotkit.ai"
+ * />
+ * ```
+ */
+declare const Footer: React__default.FC<FooterProps>;
+
+interface HeaderProps {
+    /**
+     * The main title text displayed in the header
+     */
+    title: string;
+    /**
+     * Optional subtitle text displayed below the title
+     */
+    subtitle?: string;
+    /**
+     * Callback function triggered when the close button is clicked
+     */
+    onClose?: () => void;
+    /**
+     * Callback function triggered when the minimize button is clicked
+     */
+    onMinimize?: () => void;
+    /**
+     * Additional CSS class name for custom styling
+     */
+    className?: string;
+}
+/**
+ * Header Component
+ *
+ * A chat header component that displays a title, optional subtitle, and action buttons.
+ * Built with React ARIA for accessibility and Styled Components for theming.
+ *
+ * @example
+ * ```tsx
+ * <Header
+ *   title="AI Assistant"
+ *   subtitle="How can I help you today?"
+ *   onClose={() => console.log('Close clicked')}
+ *   onMinimize={() => console.log('Minimize clicked')}
+ * />
+ * ```
+ */
+declare const Header: React__default.FC<HeaderProps>;
+
+interface InputProps extends Omit<AriaTextFieldProps, 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp'> {
+    /** Current message value */
+    value?: string;
+    /** Callback when message value changes */
+    onChange?: (value: string) => void;
+    /** Callback when message is submitted */
+    onSubmit?: (message: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the input is disabled */
+    isDisabled?: boolean;
+    /** Whether the input is read-only */
+    isReadOnly?: boolean;
+    /** Maximum number of rows before scrolling */
+    maxRows?: number;
+    /** Whether to auto-focus the input */
+    autoFocus?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+    /** ARIA label for the input */
+    'aria-label'?: string;
+}
+/**
+ * Input component for chat interfaces
+ * Features:
+ * - Multi-line text support
+ * - Submit on Enter, Shift+Enter for new line
+ * - React ARIA for accessibility
+ * - Auto-growing textarea
+ * - Integrated send button
+ */
+declare const Input: React__default.FC<InputProps>;
+
+interface FileAttachmentProps extends Omit<AriaButtonProps$1, 'children'> {
+    /** File name/title */
+    title: string;
+    /** File subtitle/category (e.g., "Downloads", "Documents") */
+    subtitle?: string;
+    /** File size in human-readable format (e.g., "500 KB", "2.5 MB") */
+    size?: string;
+    /** File icon emoji or Unicode character */
+    icon?: string;
+    /** Click handler for file interaction */
+    onClick?: () => void;
+    /** Custom className for styling */
+    className?: string;
+}
+/**
+ * FileAttachment component displays file information in assistant messages
+ *
+ * Features:
+ * - File icon display (emoji or Unicode)
+ * - File metadata (title, subtitle, size)
+ * - Accessible keyboard navigation via React ARIA
+ * - Clean, minimal card-based design
+ * - WCAG 2.1 AA compliant
+ *
+ * @example
+ * ```tsx
+ * <FileAttachment
+ *   title="Example File"
+ *   subtitle="Downloads"
+ *   size="500 KB"
+ *   icon="📄"
+ *   onPress={() => console.log('File clicked')}
+ * />
+ * ```
+ */
+declare const FileAttachment: React__default.FC<FileAttachmentProps>;
+
+interface AssistantMessageProps {
+    /** Message content to display */
+    content?: string;
+    /** Avatar image URL */
+    avatarUrl?: string;
+    /** Avatar initials when no image is provided */
+    avatarInitials?: string;
+    /** Whether to show loading state */
+    isLoading?: boolean;
+    /** Custom className for styling */
+    className?: string;
+    /** Support for markdown rendering (future enhancement) */
+    enableMarkdown?: boolean;
+    /** File attachments to display below the message */
+    attachments?: FileAttachmentProps[];
+}
+/**
+ * AssistantMessage component displays AI assistant messages with avatar
+ *
+ * Features:
+ * - Avatar with image or initials fallback
+ * - Loading state with animated dots
+ * - Markdown support (optional)
+ * - Clean, modern design
+ */
+declare const AssistantMessage: React__default.FC<AssistantMessageProps>;
+
+interface MessagesProps {
+    /**
+     * Children elements to be rendered inside the messages container
+     */
+    children?: React__default.ReactNode;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * ARIA label for accessibility
+     */
+    ariaLabel?: string;
+}
+/**
+ * Messages component - Container for message list
+ *
+ * This component serves as a wrapper for the messages area,
+ * providing consistent spacing and layout for chat messages.
+ *
+ * @example
+ * ```tsx
+ * <Messages ariaLabel="Chat messages">
+ *   <MessagesList messages={messages} />
+ * </Messages>
+ * ```
+ */
+declare const Messages: React__default.FC<MessagesProps>;
+
+interface Message {
+    id: string;
+    content: ReactNode;
+    role: 'user' | 'assistant' | 'system';
+    timestamp?: Date;
+}
+interface MessagesListProps {
+    /** Array of messages to display */
+    messages: Message[];
+    /** Whether to automatically scroll to the bottom when new messages arrive */
+    autoScroll?: boolean;
+    /** Custom class name for the container */
+    className?: string;
+    /** Custom render function for individual messages */
+    renderMessage?: (message: Message) => ReactNode;
+    /** Callback when scroll reaches the top (for loading more messages) */
+    onScrollTop?: () => void;
+    /** Maximum height of the messages list */
+    maxHeight?: string;
+}
+/**
+ * MessagesList Component
+ *
+ * A scrollable message list component with auto-scroll functionality.
+ * Designed for chat interfaces where messages need to be displayed
+ * in a scrollable container with automatic scrolling to the latest message.
+ *
+ * Features:
+ * - Auto-scroll to bottom on new messages
+ * - Overflow handling with custom scrollbar
+ * - Flexible message rendering
+ * - Scroll event handling for pagination
+ */
+declare const MessagesList: ({ messages, autoScroll, className, renderMessage, onScrollTop, maxHeight, }: MessagesListProps) => react_jsx_runtime.JSX.Element;
+
+declare const MessagesListContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $maxHeight: string;
+}>> & string;
+declare const MessagesListContent: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+
+interface UserMessageProps {
+    /** The message content to display */
+    content: string;
+    /** Optional timestamp for the message */
+    timestamp?: string;
+    /** Optional CSS class name */
+    className?: string;
+    /** Optional avatar URL */
+    avatarUrl?: string;
+    /** Optional username */
+    username?: string;
+}
+/**
+ * UserMessage component displays a user's message in a chat interface.
+ * Styled with right alignment and distinct styling from assistant messages.
+ */
+declare const UserMessage: ({ content, timestamp, className, avatarUrl, username, }: UserMessageProps) => react_jsx_runtime.JSX.Element;
+
+interface ResponseProps {
+    /** Loading state - shows animated dots */
+    isLoading?: boolean;
+    /** Typing state - shows typing indicator */
+    isTyping?: boolean;
+    /** Streaming state - shows text being typed */
+    isStreaming?: boolean;
+    /** Content to display when streaming */
+    streamingContent?: string;
+    /** Message to display with loading/typing state */
+    message?: string;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * Response component for displaying loading and streaming states
+ * Shows animated loading dots, typing indicators, and streaming text
+ */
+declare const Response: ({ isLoading, isTyping, isStreaming, streamingContent, message, className, }: ResponseProps) => react_jsx_runtime.JSX.Element | null;
+
+interface SuggestionsProps {
+    suggestions: string[];
+    onSelect: (suggestion: string) => void;
+    className?: string;
+}
+declare function Suggestions({ suggestions, onSelect, className }: SuggestionsProps): react_jsx_runtime.JSX.Element | null;
+declare namespace Suggestions {
+    var displayName: string;
+}
+
+interface WindowProps {
+    /**
+     * Whether the window is minimized to a small bar
+     */
+    isMinimized?: boolean;
+    /**
+     * Whether the window is fullscreen (100vw x 100vh)
+     */
+    isFullscreen?: boolean;
+    /**
+     * Custom width for the window (e.g., "400px", "50vw")
+     * @default "400px"
+     */
+    width?: string;
+    /**
+     * Custom height for the window (e.g., "600px", "80vh")
+     * @default "600px"
+     */
+    height?: string;
+    /**
+     * Children elements to be rendered inside the window
+     */
+    children: React__default.ReactNode;
+    /**
+     * Additional CSS class name for custom styling
+     */
+    className?: string;
+    /**
+     * ARIA label for the window
+     */
+    ariaLabel?: string;
+}
+/**
+ * Window Component
+ *
+ * Main container/window wrapper for the CopilotKit chat interface.
+ * This component holds the Header, Messages, Input, and Footer components.
+ *
+ * Features:
+ * - Default: 400px width x 600px height with rounded corners and shadow
+ * - Minimized: Collapsed to a small bar
+ * - Fullscreen: Takes full viewport (100vw x 100vh)
+ * - Smooth transitions between states
+ * - Customizable dimensions via width/height props
+ *
+ * @example
+ * ```tsx
+ * // Default window
+ * <Window>
+ *   <Header title="AI Assistant" />
+ *   <Messages>...</Messages>
+ *   <MessageInput />
+ *   <Footer />
+ * </Window>
+ *
+ * // Minimized window
+ * <Window isMinimized>
+ *   <Header title="AI Assistant" />
+ * </Window>
+ *
+ * // Fullscreen window
+ * <Window isFullscreen>
+ *   <Header title="AI Assistant" />
+ *   <Messages>...</Messages>
+ *   <MessageInput />
+ * </Window>
+ *
+ * // Custom dimensions
+ * <Window width="500px" height="700px">
+ *   ...
+ * </Window>
+ * ```
+ */
+declare const Window: React__default.FC<WindowProps>;
+
+export { type Action as A, type ButtonProps as B, type FooterProps as F, type HeaderProps as H, type InputProps as I, type Message as M, type ResponseProps as R, type SuggestionsProps as S, type UserMessageProps as U, type WindowProps as W, type ActionsLayout as a, type ActionsProps as b, type ActionVariant as c, Actions as d, type AgentStateProps as e, AgentState as f, type ButtonSize as g, type ButtonVariant as h, Button as i, Footer as j, Header as k, Input as l, type AssistantMessageProps as m, type FileAttachmentProps as n, type MessagesListProps as o, type MessagesProps as p, AssistantMessage as q, FileAttachment as r, Messages as s, MessagesList as t, MessagesListContainer as u, MessagesListContent as v, UserMessage as w, Response as x, Suggestions as y, Window as z };