@apteva/apteva-kit 0.1.0

package/README.md

@@ -0,0 +1,147 @@
+# Apteva-Kit
+
+AI-powered component library for React. Build conversational interfaces with specialized components for different AI interaction patterns.
+
+## 🚀 Quick Start
+
+### Run the Example App (Port 3060)
+
+```bash
+cd example
+npm install
+npm run dev
+```
+
+Then visit [http://localhost:3060](http://localhost:3060)
+
+### Installation
+
+```bash
+npm install @apteva/apteva-kit
+# or
+yarn add @apteva/apteva-kit
+# or
+bun add @apteva/apteva-kit
+```
+
+## Components
+
+### `<Chat>` - Full Chat Interface
+Complete chat experience with message history, streaming, and widgets.
+
+```tsx
+import { Chat } from '@apteva/apteva-kit';
+
+<Chat
+  agentId="agent_support"
+  headerTitle="Customer Support"
+  onAction={(action) => {
+    console.log('Action:', action);
+  }}
+/>
+```
+
+### `<Command>` - Single Command Execution
+Execute a command, show loading, display result.
+
+```tsx
+import { Command } from '@apteva/apteva-kit';
+
+<Command
+  agentId="agent_analyst"
+  command="Analyze Q4 sales data"
+  autoExecute
+  onComplete={(result) => {
+    console.log('Result:', result);
+  }}
+/>
+```
+
+### `<Prompt>` - Inline AI Input
+Single input field with AI completion.
+
+```tsx
+import { Prompt } from '@apteva/apteva-kit';
+
+<Prompt
+  agentId="agent_writer"
+  placeholder="Describe your product..."
+  onResult={(text) => {
+    setDescription(text);
+  }}
+/>
+```
+
+### `<Stream>` - Streaming Text Display
+Display streaming AI text without input UI.
+
+```tsx
+import { Stream } from '@apteva/apteva-kit';
+
+<Stream
+  agentId="agent_narrator"
+  prompt="Describe this dashboard"
+  autoStart
+  showCursor
+/>
+```
+
+### `<Widgets>` - Widget Renderer
+Render AI-generated interactive widgets.
+
+```tsx
+import { Widgets } from '@apteva/apteva-kit';
+
+<Widgets
+  widgets={aiGeneratedWidgets}
+  layout="grid"
+  columns={3}
+  onAction={(action) => {
+    console.log('Widget action:', action);
+  }}
+/>
+```
+
+### `<Threads>` - Thread Management
+Manage conversation threads.
+
+```tsx
+import { Threads } from '@apteva/apteva-kit';
+
+<Threads
+  threads={conversations}
+  currentThreadId={activeThread}
+  onThreadSelect={setActiveThread}
+  variant="sidebar"
+  showSearch
+/>
+```
+
+## Features
+
+- **Mock Data Built-in** - All components work with mock data out of the box
+- **TypeScript Native** - Full type safety and autocompletion
+- **Tailwind CSS** - Styled with Tailwind v4
+- **Customizable** - Theme and style everything
+- **Widget System** - Rich interactive widgets (cards, lists, forms, charts, maps)
+- **Action Handling** - Client-side and server-side actions
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build package
+npm run build
+
+# Watch mode
+npm run dev
+
+# Type check
+npm run type-check
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,310 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ClassValue } from 'clsx';
+
+interface Action {
+    type: string;
+    label: string;
+    payload: any;
+    handler: 'client' | 'server';
+    loadingText?: string;
+}
+interface ActionEvent {
+    type: string;
+    payload: any;
+    widgetId?: string;
+    timestamp: Date;
+}
+
+interface Widget {
+    type: string;
+    id: string;
+    props: Record<string, any>;
+    actions?: Action[];
+}
+interface CardWidget extends Widget {
+    type: 'card';
+    props: {
+        title: string;
+        description?: string;
+        image?: string;
+        footer?: string;
+    };
+}
+interface ButtonWidget extends Widget {
+    type: 'button';
+    props: {
+        label: string;
+        variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+        disabled?: boolean;
+    };
+}
+interface ButtonGroupWidget extends Widget {
+    type: 'button_group';
+    props: {
+        layout?: 'horizontal' | 'vertical';
+        buttons: Array<{
+            id: string;
+            label: string;
+            variant?: 'primary' | 'secondary' | 'outline';
+        }>;
+    };
+}
+interface FormWidget extends Widget {
+    type: 'form';
+    props: {
+        title?: string;
+        fields: FormField[];
+    };
+}
+interface FormField {
+    name: string;
+    type: 'text' | 'number' | 'select' | 'checkbox' | 'textarea' | 'date';
+    label: string;
+    placeholder?: string;
+    required?: boolean;
+    options?: Array<{
+        label: string;
+        value: string;
+    }>;
+    defaultValue?: any;
+}
+interface ListWidget extends Widget {
+    type: 'list';
+    props: {
+        items: ListItem[];
+    };
+}
+interface ListItem {
+    id: string;
+    title: string;
+    subtitle?: string;
+    description?: string;
+    image?: string;
+    metadata?: Record<string, any>;
+}
+interface ChartWidget extends Widget {
+    type: 'chart';
+    props: {
+        chartType: 'line' | 'bar' | 'pie' | 'doughnut';
+        title?: string;
+        data: {
+            labels: string[];
+            datasets: Array<{
+                label: string;
+                data: number[];
+                backgroundColor?: string | string[];
+                borderColor?: string;
+            }>;
+        };
+    };
+}
+interface MapWidget extends Widget {
+    type: 'map';
+    props: {
+        center: {
+            lat: number;
+            lng: number;
+        };
+        zoom?: number;
+        markers?: Array<{
+            id: string;
+            position: {
+                lat: number;
+                lng: number;
+            };
+            title: string;
+            icon?: string;
+        }>;
+    };
+}
+interface ImageWidget extends Widget {
+    type: 'image';
+    props: {
+        src: string;
+        alt: string;
+        caption?: string;
+    };
+}
+interface GalleryWidget extends Widget {
+    type: 'gallery';
+    props: {
+        images: Array<{
+            id: string;
+            src: string;
+            alt: string;
+            caption?: string;
+        }>;
+        layout?: 'grid' | 'carousel';
+    };
+}
+
+interface Message {
+    id: string;
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+    widgets?: Widget[];
+    timestamp: Date;
+    metadata?: Record<string, any>;
+}
+interface Thread {
+    id: string;
+    title: string;
+    preview?: string;
+    createdAt: Date;
+    updatedAt: Date;
+    messageCount: number;
+    metadata?: Record<string, any>;
+}
+interface SendMessageParams {
+    text: string;
+    attachments?: File[];
+    metadata?: Record<string, any>;
+}
+
+interface ChatProps {
+    agentId: string;
+    threadId?: string | null;
+    initialMessages?: Message[];
+    onThreadChange?: (threadId: string) => void;
+    onMessageSent?: (message: Message) => void;
+    onAction?: (action: ActionEvent) => void;
+    theme?: 'light' | 'dark' | 'auto';
+    placeholder?: string;
+    showHeader?: boolean;
+    headerTitle?: string;
+    enableFileUpload?: boolean;
+    enableMarkdown?: boolean;
+    className?: string;
+}
+interface CommandProps {
+    agentId: string;
+    command?: string;
+    context?: Record<string, any>;
+    autoExecute?: boolean;
+    allowInput?: boolean;
+    placeholder?: string;
+    submitButtonText?: string;
+    variant?: 'default' | 'compact';
+    onStart?: () => void;
+    onProgress?: (progress: number) => void;
+    onChunk?: (chunk: string) => void;
+    onComplete?: (result: CommandResult) => void;
+    onError?: (error: Error) => void;
+    loadingText?: string;
+    showProgress?: boolean;
+    enableStreaming?: boolean;
+    resultRenderer?: (result: any) => React.ReactNode;
+    className?: string;
+}
+interface CommandResult {
+    success: boolean;
+    data: any;
+    widgets?: Widget[];
+    message?: string;
+}
+interface PromptProps {
+    agentId: string;
+    placeholder?: string;
+    initialValue?: string;
+    submitOn?: 'enter' | 'button' | 'blur';
+    debounceMs?: number;
+    minLength?: number;
+    maxLength?: number;
+    onSubmit?: (prompt: string) => void;
+    onResult?: (result: string) => void;
+    onChange?: (value: string) => void;
+    variant?: 'inline' | 'floating';
+    showSuggestions?: boolean;
+    className?: string;
+}
+interface StreamProps {
+    agentId: string;
+    prompt: string;
+    context?: Record<string, any>;
+    autoStart?: boolean;
+    onStart?: () => void;
+    onChunk?: (chunk: string) => void;
+    onComplete?: (fullText: string) => void;
+    onError?: (error: Error) => void;
+    variant?: 'prose' | 'code' | 'plain';
+    showCursor?: boolean;
+    typingSpeed?: number;
+    className?: string;
+}
+interface WidgetsProps {
+    widgets: Widget[];
+    onAction?: (action: ActionEvent) => void;
+    onWidgetMount?: (widgetId: string) => void;
+    layout?: 'stack' | 'grid' | 'masonry';
+    spacing?: 'tight' | 'normal' | 'loose';
+    columns?: number;
+    className?: string;
+}
+interface ThreadsProps {
+    threads: Thread[];
+    currentThreadId?: string;
+    onThreadSelect?: (threadId: string) => void;
+    onThreadDelete?: (threadId: string) => void;
+    onNewThread?: () => void;
+    variant?: 'sidebar' | 'dropdown' | 'tabs';
+    showSearch?: boolean;
+    showNewButton?: boolean;
+    groupBy?: 'date' | 'agent' | 'none';
+    className?: string;
+}
+interface AptevaKitControl {
+    setThreadId: (threadId: string | null) => Promise<void>;
+    createThread: (metadata?: object) => Promise<string>;
+    sendMessage: (params: SendMessageParams) => Promise<void>;
+    setComposerValue: (text: string) => Promise<void>;
+    sendAction: (action: Action) => Promise<void>;
+    refresh: () => Promise<void>;
+    focusComposer: () => Promise<void>;
+    scrollToBottom: () => void;
+}
+interface UseAptevaKitReturn {
+    control: AptevaKitControl;
+    threadId: string | null;
+    isLoading: boolean;
+    error: Error | null;
+}
+
+declare function Chat({ agentId, threadId, initialMessages, onThreadChange, onMessageSent, onAction, placeholder, showHeader, headerTitle, className, }: ChatProps): react_jsx_runtime.JSX.Element;
+
+declare function Command({ agentId, command: initialCommand, context, autoExecute, allowInput, placeholder, submitButtonText, variant, onStart, onProgress, onChunk, onComplete, onError, loadingText, showProgress, enableStreaming, resultRenderer, className, }: CommandProps): react_jsx_runtime.JSX.Element;
+
+declare function Prompt({ agentId, placeholder, initialValue, submitOn, debounceMs, minLength, maxLength, onSubmit, onResult, onChange, variant, showSuggestions, className, }: PromptProps): react_jsx_runtime.JSX.Element;
+
+declare function Stream({ agentId, prompt, context, autoStart, onStart, onChunk, onComplete, onError, variant, showCursor, typingSpeed, className, }: StreamProps): react_jsx_runtime.JSX.Element;
+
+declare function Widgets({ widgets, onAction, onWidgetMount, layout, spacing, columns, className, }: WidgetsProps): react_jsx_runtime.JSX.Element;
+
+interface CardProps {
+    widget: CardWidget;
+    onAction?: (action: ActionEvent) => void;
+}
+declare function Card({ widget, onAction }: CardProps): react_jsx_runtime.JSX.Element;
+
+interface ListProps {
+    widget: ListWidget;
+    onAction?: (action: ActionEvent) => void;
+}
+declare function List({ widget, onAction }: ListProps): react_jsx_runtime.JSX.Element;
+
+interface ButtonProps {
+    widget: ButtonWidget;
+    onAction?: (action: ActionEvent) => void;
+}
+declare function Button({ widget, onAction }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+declare function Threads({ threads, currentThreadId, onThreadSelect, onThreadDelete, onNewThread, variant, showSearch, showNewButton, groupBy, className, }: ThreadsProps): react_jsx_runtime.JSX.Element;
+
+declare function getThemeScript(): string;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare const mockMessages: Message[];
+declare const mockThreads: Thread[];
+declare const mockWidgets: Widget[];
+
+export { type Action, type ActionEvent, type AptevaKitControl, Button, type ButtonGroupWidget, type ButtonWidget, Card, type CardWidget, type ChartWidget, Chat, type ChatProps, Command, type CommandProps, type CommandResult, type FormField, type FormWidget, type GalleryWidget, type ImageWidget, List, type ListItem, type ListWidget, type MapWidget, type Message, Prompt, type PromptProps, type SendMessageParams, Stream, type StreamProps, type Thread, Threads, type ThreadsProps, type UseAptevaKitReturn, type Widget, Widgets, type WidgetsProps, cn, getThemeScript, mockMessages, mockThreads, mockWidgets };