@object-ui/components 0.3.0 → 0.3.1

package/dist/src/renderers/complex/calendar-view.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/src/renderers/complex/chatbot.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/src/renderers/complex/chatbot.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/src/renderers/complex/timeline.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/src/ui/calendar-view.d.ts

@@ -1,21 +0,0 @@
-export interface CalendarEvent {
-    id: string | number;
-    title: string;
-    start: Date;
-    end?: Date;
-    allDay?: boolean;
-    color?: string;
-    data?: any;
-}
-export interface CalendarViewProps {
-    events?: CalendarEvent[];
-    view?: "month" | "week" | "day";
-    currentDate?: Date;
-    onEventClick?: (event: CalendarEvent) => void;
-    onDateClick?: (date: Date) => void;
-    onViewChange?: (view: "month" | "week" | "day") => void;
-    onNavigate?: (date: Date) => void;
-    className?: string;
-}
-declare function CalendarView({ events, view, currentDate, onEventClick, onDateClick, onViewChange, onNavigate, className, }: CalendarViewProps): import("react/jsx-runtime").JSX.Element;
-export { CalendarView };

package/dist/src/ui/chatbot.d.ts

@@ -1,36 +0,0 @@
-import * as React from "react";
-export interface ChatMessage {
-    id: string;
-    role: "user" | "assistant" | "system";
-    content: string;
-    timestamp?: string;
-    avatar?: string;
-    avatarFallback?: string;
-}
-export interface ChatbotProps extends React.HTMLAttributes<HTMLDivElement> {
-    messages?: ChatMessage[];
-    placeholder?: string;
-    onSendMessage?: (message: string) => void;
-    disabled?: boolean;
-    showTimestamp?: boolean;
-    userAvatarUrl?: string;
-    userAvatarFallback?: string;
-    assistantAvatarUrl?: string;
-    assistantAvatarFallback?: string;
-    maxHeight?: string;
-}
-declare const Chatbot: React.ForwardRefExoticComponent<ChatbotProps & React.RefAttributes<HTMLDivElement>>;
-export interface ChatMessageProps {
-    message: ChatMessage;
-    showTimestamp?: boolean;
-    userAvatarUrl?: string;
-    userAvatarFallback?: string;
-    assistantAvatarUrl?: string;
-    assistantAvatarFallback?: string;
-}
-export interface TypingIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
-    avatarSrc?: string;
-    avatarFallback?: string;
-}
-declare const TypingIndicator: React.ForwardRefExoticComponent<TypingIndicatorProps & React.RefAttributes<HTMLDivElement>>;
-export { Chatbot, TypingIndicator };

package/dist/src/ui/field.d.ts

@@ -1,24 +0,0 @@
-import { VariantProps } from 'class-variance-authority';
-import { Label } from './label';
-declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react/jsx-runtime").JSX.Element;
-declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
-    variant?: "legend" | "label";
-}): import("react/jsx-runtime").JSX.Element;
-declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare const fieldVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react/jsx-runtime").JSX.Element;
-declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react/jsx-runtime").JSX.Element;
-declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
-declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
-    children?: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
-    errors?: Array<{
-        message?: string;
-    } | undefined>;
-}): import("react/jsx-runtime").JSX.Element | null;
-export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };

package/dist/src/ui/input-group.d.ts

@@ -1,16 +0,0 @@
-import { VariantProps } from 'class-variance-authority';
-import { Button } from './button';
-import * as React from "react";
-declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare const inputGroupAddonVariants: (props?: ({
-    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
-declare const inputGroupButtonVariants: (props?: ({
-    size?: "sm" | "icon-sm" | "xs" | "icon-xs" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): import("react/jsx-runtime").JSX.Element;
-declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
-declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
-declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };

package/dist/src/ui/timeline.d.ts

@@ -1,25 +0,0 @@
-import * as React from "react";
-declare const Timeline: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLOListElement> & React.RefAttributes<HTMLOListElement>>;
-declare const TimelineItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;
-declare const TimelineMarker: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    variant?: "default" | "success" | "warning" | "danger" | "info";
-} & React.RefAttributes<HTMLDivElement>>;
-declare const TimelineContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const TimelineTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
-declare const TimelineTime: React.ForwardRefExoticComponent<React.TimeHTMLAttributes<HTMLTimeElement> & React.RefAttributes<HTMLTimeElement>>;
-declare const TimelineDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
-declare const TimelineHorizontal: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const TimelineHorizontalItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const TimelineGantt: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const TimelineGanttHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const TimelineGanttRowLabels: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const TimelineGanttGrid: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const TimelineGanttRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const TimelineGanttLabel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const TimelineGanttBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    start?: number;
-    width?: number;
-    variant?: "default" | "success" | "warning" | "danger" | "info";
-} & React.RefAttributes<HTMLDivElement>>;
-declare const TimelineGanttBarContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export { Timeline, TimelineItem, TimelineMarker, TimelineContent, TimelineTitle, TimelineTime, TimelineDescription, TimelineHorizontal, TimelineHorizontalItem, TimelineGantt, TimelineGanttHeader, TimelineGanttRowLabels, TimelineGanttGrid, TimelineGanttRow, TimelineGanttLabel, TimelineGanttBar, TimelineGanttBarContent, };

package/metadata/ObjectTable.component.yml

@@ -1,41 +0,0 @@
-name: ObjectTable
-label: Object Table
-description: Production-grade data table for displaying and managing object records
-category: data_display
-version: 1.0.0
-framework: react
-
-props:
-  - name: object
-    type: string
-    required: true
-    description: The object API name to display data for
-  - name: columns
-    type: array
-    description: Column configurations
-    schema:
-      - field: string
-      - label: string
-      - width: number
-  - name: filters
-    type: array
-    description: Default filters
-  - name: sortable
-    type: boolean
-    default: true
-  - name: paginated
-    type: boolean
-    default: true
-  - name: pageSize
-    type: number
-    default: 20
-
-events:
-  - name: onRowClick
-    payload: "{ row: any, index: number }"
-  - name: onSelectionChange
-    payload: "{ selectedIds: string[] }"
-
-features:
-  remote_data: true
-  virtual_scroll: true

package/src/renderers/complex/calendar-view.tsx

@@ -1,219 +0,0 @@
-import { ComponentRegistry } from '@object-ui/core';
-import type { CalendarViewSchema, CalendarEvent } from '@object-ui/types';
-import { CalendarView } from '../../ui';
-import React from 'react';
-
-// Calendar View Renderer - Airtable-style calendar for displaying records as events
-ComponentRegistry.register('calendar-view', 
-  ({ schema, className, onAction, ...props }: { schema: CalendarViewSchema; className?: string; onAction?: (action: any) => void; [key: string]: any }) => {
-    // Transform schema data to CalendarEvent format
-    const events = React.useMemo(() => {
-      if (!schema.data || !Array.isArray(schema.data)) return [];
-      
-      return schema.data.map((record: any, index: number) => {
-        /** Field name to use for event title display */
-        const titleField = schema.titleField || 'title';
-        /** Field name containing the event start date/time */
-        const startField = schema.startDateField || 'start';
-        /** Field name containing the event end date/time (optional) */
-        const endField = schema.endDateField || 'end';
-        /** Field name to determine event color or color category */
-        const colorField = schema.colorField || 'color';
-        /** Field name indicating if event is all-day */
-        const allDayField = schema.allDayField || 'allDay';
-        
-        const title = record[titleField] || 'Untitled';
-        const start = record[startField] ? new Date(record[startField]) : new Date();
-        const end = record[endField] ? new Date(record[endField]) : undefined;
-        const allDay = record[allDayField] !== undefined ? record[allDayField] : false;
-        
-        // Handle color mapping
-        let color = record[colorField];
-        if (color && schema.colorMapping && schema.colorMapping[color]) {
-          color = schema.colorMapping[color];
-        }
-        
-        return {
-          id: String(record.id || record._id || index),
-          title,
-          start,
-          end,
-          allDay,
-          color,
-          data: record,
-        };
-      });
-    }, [schema.data, schema.titleField, schema.startDateField, schema.endDateField, schema.colorField, schema.allDayField, schema.colorMapping]);
-
-    const handleEventClick = React.useCallback((event: any) => {
-      if (onAction) {
-        onAction({
-          type: 'event_click',
-          payload: { event: event.data, eventId: event.id }
-        });
-      }
-      if (schema.onEventClick) {
-        schema.onEventClick(event.data);
-      }
-    }, [onAction, schema]);
-
-    const handleDateClick = React.useCallback((date: Date) => {
-      if (onAction) {
-        onAction({
-          type: 'date_click',
-          payload: { date }
-        });
-      }
-      if (schema.onDateClick) {
-        schema.onDateClick(date);
-      }
-    }, [onAction, schema]);
-
-    const handleViewChange = React.useCallback((view: "month" | "week" | "day") => {
-      if (onAction) {
-        onAction({
-          type: 'view_change',
-          payload: { view }
-        });
-      }
-      if (schema.onViewChange) {
-        schema.onViewChange(view);
-      }
-    }, [onAction, schema]);
-
-    const handleNavigate = React.useCallback((date: Date) => {
-      if (onAction) {
-        onAction({
-          type: 'navigate',
-          payload: { date }
-        });
-      }
-      if (schema.onNavigate) {
-        schema.onNavigate(date);
-      }
-    }, [onAction, schema]);
-
-    return (
-      <CalendarView
-        events={events as any[]}
-        view={(schema.view as any) || 'month'}
-        currentDate={schema.currentDate ? new Date(schema.currentDate) : undefined}
-        onEventClick={handleEventClick}
-        onDateClick={schema.allowCreate || schema.onDateClick ? handleDateClick : undefined}
-        onViewChange={handleViewChange}
-        onNavigate={handleNavigate}
-        className={className}
-        {...props}
-      />
-    );
-  },
-  {
-    label: 'Calendar View',
-    inputs: [
-      { 
-        name: 'data', 
-        type: 'array', 
-        label: 'Data',
-        description: 'Array of record objects to display as events'
-      },
-      { 
-        name: 'titleField', 
-        type: 'string', 
-        label: 'Title Field',
-        defaultValue: 'title',
-        description: 'Field name to use for event title'
-      },
-      { 
-        name: 'startDateField', 
-        type: 'string', 
-        label: 'Start Date Field',
-        defaultValue: 'start',
-        description: 'Field name for event start date'
-      },
-      { 
-        name: 'endDateField', 
-        type: 'string', 
-        label: 'End Date Field',
-        defaultValue: 'end',
-        description: 'Field name for event end date (optional)'
-      },
-      { 
-        name: 'allDayField', 
-        type: 'string', 
-        label: 'All Day Field',
-        defaultValue: 'allDay',
-        description: 'Field name for all-day flag'
-      },
-      { 
-        name: 'colorField', 
-        type: 'string', 
-        label: 'Color Field',
-        defaultValue: 'color',
-        description: 'Field name for event color'
-      },
-      {
-        name: 'colorMapping',
-        type: 'object',
-        label: 'Color Mapping',
-        description: 'Map field values to colors (e.g., {meeting: "blue", deadline: "red"})'
-      },
-      { 
-        name: 'view', 
-        type: 'enum', 
-        enum: ['month', 'week', 'day'], 
-        defaultValue: 'month', 
-        label: 'View Mode',
-        description: 'Calendar view mode (month, week, or day)'
-      },
-      {
-        name: 'currentDate',
-        type: 'string',
-        label: 'Current Date',
-        description: 'ISO date string for initial calendar date'
-      },
-      { 
-        name: 'allowCreate', 
-        type: 'boolean', 
-        label: 'Allow Create',
-        defaultValue: false,
-        description: 'Allow creating events by clicking on dates'
-      },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      view: 'month',
-      titleField: 'title',
-      startDateField: 'start',
-      endDateField: 'end',
-      allDayField: 'allDay',
-      colorField: 'color',
-      allowCreate: false,
-      data: [
-        {
-          id: 1,
-          title: 'Team Meeting',
-          start: new Date(new Date().setHours(10, 0, 0, 0)).toISOString(),
-          end: new Date(new Date().setHours(11, 0, 0, 0)).toISOString(),
-          color: '#3b82f6',
-          allDay: false
-        },
-        {
-          id: 2,
-          title: 'Project Deadline',
-          start: new Date(new Date().setDate(new Date().getDate() + 3)).toISOString(),
-          color: '#ef4444',
-          allDay: true
-        },
-        {
-          id: 3,
-          title: 'Conference',
-          start: new Date(new Date().setDate(new Date().getDate() + 7)).toISOString(),
-          end: new Date(new Date().setDate(new Date().getDate() + 9)).toISOString(),
-          color: '#10b981',
-          allDay: true
-        }
-      ],
-      className: 'h-[600px] border rounded-lg'
-    }
-  }
-);

package/src/renderers/complex/chatbot.test.ts

@@ -1,44 +0,0 @@
-import { describe, it, expect, beforeAll } from 'vitest';
-import { ComponentRegistry } from '@object-ui/core';
-
-describe('Chatbot Component', () => {
-  // Import all renderers to register them
-  beforeAll(async () => {
-    await import('./index');
-  });
-
-  it('should be registered in ComponentRegistry', () => {
-    const chatbotRenderer = ComponentRegistry.get('chatbot');
-    expect(chatbotRenderer).toBeDefined();
-  });
-
-  it('should have proper metadata', () => {
-    const config = ComponentRegistry.getConfig('chatbot');
-    expect(config).toBeDefined();
-    expect(config?.label).toBe('Chatbot');
-    expect(config?.inputs).toBeDefined();
-    expect(config?.defaultProps).toBeDefined();
-  });
-
-  it('should have expected inputs', () => {
-    const config = ComponentRegistry.getConfig('chatbot');
-    const inputNames = config?.inputs?.map((input: any) => input.name) || [];
-    
-    expect(inputNames).toContain('messages');
-    expect(inputNames).toContain('placeholder');
-    expect(inputNames).toContain('showTimestamp');
-    expect(inputNames).toContain('userAvatarUrl');
-    expect(inputNames).toContain('assistantAvatarUrl');
-  });
-
-  it('should have sensible default props', () => {
-    const config = ComponentRegistry.getConfig('chatbot');
-    const defaults = config?.defaultProps;
-    
-    expect(defaults).toBeDefined();
-    expect(defaults?.placeholder).toBe('Type your message...');
-    expect(defaults?.showTimestamp).toBe(false);
-    expect(defaults?.messages).toBeDefined();
-    expect(Array.isArray(defaults?.messages)).toBe(true);
-  });
-});

package/src/renderers/complex/chatbot.tsx

@@ -1,185 +0,0 @@
-import { ComponentRegistry } from '@object-ui/core';
-import type { ChatbotSchema, ChatMessage } from '@object-ui/types';
-import { Chatbot } from '../../ui';
-import { useState } from 'react';
-
-/**
- * Chatbot component for Object UI
- * 
- * @remarks
- * This component supports an optional `onSend` callback in the schema:
- * - Signature: `onSend(content: string, messages: ChatMessage[]): void`
- * - Parameters:
- *   - content: The message text that was sent
- *   - messages: Array of all messages including the newly added message
- * - Called when: User sends a message via the input field
- * - Use case: Connect to backend API or trigger custom actions on message send
- */
-ComponentRegistry.register('chatbot', 
-  ({ schema, className, ...props }) => {
-    // Initialize messages from schema or use empty array
-    const [messages, setMessages] = useState<ChatMessage[]>(
-      schema.messages?.map((msg: any, idx: number) => ({
-        id: msg.id || `msg-${idx}`,
-        role: msg.role || 'user',
-        content: msg.content || '',
-        timestamp: typeof msg.timestamp === 'string' ? msg.timestamp : (msg.timestamp instanceof Date ? msg.timestamp.toISOString() : undefined),
-        avatar: msg.avatar,
-        avatarFallback: msg.avatarFallback,
-      })) || []
-    );
-
-    // Handle sending new messages
-    const handleSendMessage = (content: string) => {
-      // Create user message with robust ID generation
-      const userMessage: ChatMessage = {
-        id: crypto.randomUUID(),
-        role: 'user',
-        content,
-        timestamp: schema.showTimestamp ? new Date().toLocaleTimeString() : undefined,
-      };
-
-      const updatedMessages = [...messages, userMessage];
-      setMessages(updatedMessages);
-
-      // If onSend callback is provided in schema, call it with updated messages
-      if (schema.onSend) {
-        schema.onSend(content, updatedMessages);
-      }
-
-      // Auto-response feature for demo purposes
-      if (schema.autoResponse) {
-        setTimeout(() => {
-          const assistantMessage: ChatMessage = {
-            id: crypto.randomUUID(),
-            role: 'assistant',
-            content: schema.autoResponseText || 'Thank you for your message!',
-            timestamp: schema.showTimestamp ? new Date().toLocaleTimeString() : undefined,
-          };
-          setMessages((prev) => [...prev, assistantMessage]);
-        }, schema.autoResponseDelay || 1000);
-      }
-    };
-
-    return (
-      <Chatbot 
-        messages={messages as any}
-        placeholder={schema.placeholder}
-        onSendMessage={handleSendMessage}
-        disabled={schema.disabled}
-        showTimestamp={schema.showTimestamp}
-        userAvatarUrl={schema.userAvatarUrl}
-        userAvatarFallback={schema.userAvatarFallback}
-        assistantAvatarUrl={schema.assistantAvatarUrl}
-        assistantAvatarFallback={schema.assistantAvatarFallback}
-        maxHeight={schema.maxHeight}
-        className={className}
-        {...props}
-      />
-    );
-  },
-  {
-    label: 'Chatbot',
-    inputs: [
-      { 
-        name: 'messages', 
-        type: 'array', 
-        label: 'Initial Messages',
-        description: 'Array of message objects with id, role, content, and optional timestamp'
-      },
-      { 
-        name: 'placeholder', 
-        type: 'string', 
-        label: 'Input Placeholder',
-        defaultValue: 'Type your message...'
-      },
-      { 
-        name: 'showTimestamp', 
-        type: 'boolean', 
-        label: 'Show Timestamps',
-        defaultValue: false
-      },
-      { 
-        name: 'disabled', 
-        type: 'boolean', 
-        label: 'Disabled',
-        defaultValue: false
-      },
-      { 
-        name: 'userAvatarUrl', 
-        type: 'string', 
-        label: 'User Avatar URL',
-        description: 'URL of the user avatar image'
-      },
-      { 
-        name: 'userAvatarFallback', 
-        type: 'string', 
-        label: 'User Avatar Fallback',
-        defaultValue: 'You',
-        description: 'Fallback text shown when user avatar image is not available'
-      },
-      { 
-        name: 'assistantAvatarUrl', 
-        type: 'string', 
-        label: 'Assistant Avatar URL',
-        description: 'URL of the assistant avatar image'
-      },
-      { 
-        name: 'assistantAvatarFallback', 
-        type: 'string', 
-        label: 'Assistant Avatar Fallback',
-        defaultValue: 'AI',
-        description: 'Fallback text shown when assistant avatar image is not available'
-      },
-      { 
-        name: 'maxHeight', 
-        type: 'string', 
-        label: 'Max Height',
-        defaultValue: '500px'
-      },
-      { 
-        name: 'autoResponse', 
-        type: 'boolean', 
-        label: 'Enable Auto Response (Demo)',
-        defaultValue: false,
-        description: 'Automatically send a response after user message (for demo purposes)'
-      },
-      { 
-        name: 'autoResponseText', 
-        type: 'string', 
-        label: 'Auto Response Text',
-        defaultValue: 'Thank you for your message!'
-      },
-      { 
-        name: 'autoResponseDelay', 
-        type: 'number', 
-        label: 'Auto Response Delay (ms)',
-        defaultValue: 1000
-      },
-      { 
-        name: 'className', 
-        type: 'string', 
-        label: 'CSS Class'
-      }
-    ],
-    defaultProps: {
-      messages: [
-        {
-          id: 'welcome',
-          role: 'assistant',
-          content: 'Hello! How can I help you today?',
-        }
-      ],
-      placeholder: 'Type your message...',
-      showTimestamp: false,
-      disabled: false,
-      userAvatarFallback: 'You',
-      assistantAvatarFallback: 'AI',
-      maxHeight: '500px',
-      autoResponse: true,
-      autoResponseText: 'Thank you for your message! This is an automated response.',
-      autoResponseDelay: 1000,
-      className: 'w-full max-w-2xl'
-    }
-  }
-);