@autobe/ui 0.19.1 → 0.21.0

package/src/events/README.md

@@ -0,0 +1,300 @@
+# AutoBe Event Components
+
+Event UI components for the AutoBe platform with comprehensive event handling, grouping, and collapsible functionality.
+
+## Overview
+
+The AutoBe Event system provides a complete solution for displaying various types of events in the AutoBe workflow. The main entry point is `AutoBeEventMovie`, which intelligently routes different event types to their appropriate components.
+
+## Main Event Router
+
+### AutoBeEventMovie
+The central component that handles all event types and routes them to appropriate sub-components.
+
+```tsx
+import { AutoBeEventMovie } from "@autobe/ui/events";
+
+<AutoBeEventMovie 
+  service={rpcService}
+  events={eventArray}
+  last={isLastEvent}
+/>
+```
+
+**Supported Event Types:**
+- **Message Events**: `userMessage`, `assistantMessage`
+- **Start Events**: `analyzeStart`, `prismaStart`, `interfaceStart`, `testStart`, `realizeStart`, `realizeTestStart`, `realizeAuthorizationStart`
+- **Scenario Events**: `analyzeScenario`, `prismaComponents`, `interfaceGroups`, `realizeTestReset`
+- **Progress Events**: `analyzeWrite`, `analyzeReview`, `interfaceEndpoints`, `prismaSchemas`, `prismaReview`, `interfaceOperations`, `interfaceOperationsReview`, `interfaceAuthorization`, `interfaceSchemas`, `interfaceSchemasReview`, `testWrite`, `testScenarios`, `realizeWrite`, `realizeAuthorizationWrite`, `realizeTestOperation`
+- **Validate Events**: `prismaInsufficient`, `prismaValidate`, `interfaceComplement`, `testValidate`, `realizeValidate`, `realizeAuthorizationValidate`
+- **Complete Events**: `analyzeComplete`, `prismaComplete`, `interfaceComplete`, `testComplete`, `realizeComplete`
+
+## Individual Event Components
+
+### AutoBeProgressEventMovie
+Shows progress tracking events with animated progress bars and status indicators.
+
+```tsx
+import { AutoBeProgressEventMovie } from "@autobe/ui/events";
+
+<AutoBeProgressEventMovie event={progressEvent} />
+```
+
+### AutoBeValidateEventMovie
+Displays validation events with detailed error/success states and validation results.
+
+```tsx
+import { AutoBeValidateEventMovie } from "@autobe/ui/events";
+
+<AutoBeValidateEventMovie event={validateEvent} />
+```
+
+### AutoBeScenarioEventMovie
+Shows scenario analysis and component generation events with structured data display.
+
+```tsx
+import { AutoBeScenarioEventMovie } from "@autobe/ui/events";
+
+<AutoBeScenarioEventMovie event={scenarioEvent} />
+```
+
+### AutoBeStartEventMovie
+Displays pipeline start events with clean status indicators and timing information.
+
+```tsx
+import { AutoBeStartEventMovie } from "@autobe/ui/events";
+
+<AutoBeStartEventMovie event={startEvent} />
+```
+
+### AutoBeCompleteEventMovie
+Shows completion events with file download capabilities and summary statistics.
+
+```tsx
+import { AutoBeCompleteEventMovie } from "@autobe/ui/events";
+
+<AutoBeCompleteEventMovie 
+  event={completeEvent}
+  getFiles={service.getFiles}
+/>
+```
+
+## Grouped Event Components
+
+### ValidateEventGroup
+Intelligently groups validation events with success rate statistics and collapsible interface.
+
+```tsx
+import { ValidateEventGroup } from "@autobe/ui/events";
+
+<ValidateEventGroup 
+  events={validateEvents} 
+  defaultCollapsed={true} 
+/>
+```
+
+**Features:**
+- Automatic success/failure rate calculation
+- Collapsible interface for better UX
+- Grouped display for multiple validation events
+- Individual event access when expanded
+
+## Message Components
+
+### AutoBeUserMessageMovie
+Displays user messages with support for various content types (text, files, images, audio).
+
+```tsx
+import { AutoBeUserMessageMovie } from "@autobe/ui";
+
+<AutoBeUserMessageMovie message={userMessageContents} />
+```
+
+### AutoBeAssistantMessageMovie
+Shows assistant responses with timestamps and custom assistant names.
+
+```tsx
+import { AutoBeAssistantMessageMovie } from "@autobe/ui";
+
+<AutoBeAssistantMessageMovie 
+  text={responseText}
+  isoTimestamp={timestamp}
+  assistantName="AutoBe"
+/>
+```
+
+## Automatic Event Grouping
+
+Use the `groupEvents` utility to automatically group events by type:
+
+```tsx
+import { groupEvents } from "@autobe/ui/events/utils/eventGrouper";
+
+const EventList = ({ events }: { events: AutoBeEvent[] }) => {
+  const groupedComponents = groupEvents(events, {
+    minGroupSize: 3,       // Minimum events to form a group
+    defaultCollapsed: true, // Start collapsed
+    enableGrouping: true,   // Enable grouping
+  });
+
+  return (
+    <div>
+      {groupedComponents}
+    </div>
+  );
+};
+```
+
+## Custom Collapsible Groups
+
+Create custom event groups using the `CollapsibleEventGroup` component:
+
+```tsx
+import { CollapsibleEventGroup } from "@autobe/ui/events";
+
+<CollapsibleEventGroup
+  events={customEvents}
+  title="Custom Event Group"
+  iconType="info"
+  getTimestamp={(event) => event.created_at}
+  renderEvent={(event, index) => <CustomEventComponent event={event} />}
+  renderSummary={(events) => <CustomSummary events={events} />}
+  defaultCollapsed={true}
+  description="Custom grouped events"
+/>
+```
+
+## Common Components
+
+### EventCard
+Basic card container for consistent styling across all event types.
+
+```tsx
+import { EventCard } from "@autobe/ui/events";
+
+<EventCard>
+  <div>Your content here</div>
+</EventCard>
+```
+
+### EventHeader
+Standardized header with icon, title, timestamp, and step numbering.
+
+```tsx
+import { EventHeader } from "@autobe/ui/events";
+
+<EventHeader
+  title="Event Title"
+  timestamp="2024-01-01T12:00:00Z"
+  iconType="success"
+  step={1}
+/>
+```
+
+### EventContent
+Consistent content area styling with proper spacing and typography.
+
+```tsx
+import { EventContent } from "@autobe/ui/events";
+
+<EventContent>
+  <div>Your content here</div>
+</EventContent>
+```
+
+### EventIcon
+Consistent icons for different event states with customizable sizes.
+
+```tsx
+import { EventIcon } from "@autobe/ui/events";
+
+<EventIcon type="success" size={16} />
+```
+
+**Available icon types:** `success`, `progress`, `warning`, `error`, `info`, `start`
+
+### ProgressBar
+Reusable progress bar component with customizable styling.
+
+```tsx
+import { ProgressBar } from "@autobe/ui/events";
+
+<ProgressBar 
+  current={7} 
+  total={10} 
+  color="#4caf50"
+  showLabel={true}
+/>
+```
+
+## Event Flow Architecture
+
+The AutoBe event system follows a predictable flow:
+
+1. **Start Events** → Initialize pipeline stages
+2. **Scenario Events** → Analyze and plan components
+3. **Progress Events** → Track ongoing operations
+4. **Validate Events** → Verify outputs and handle errors
+5. **Complete Events** → Finalize and provide results
+
+## Advanced Usage
+
+### Custom Event Handlers
+
+```tsx
+import { AutoBeEventMovie, IAutoBeEventMovieProps } from "@autobe/ui/events";
+
+const CustomEventHandler = ({ events, service, last }: IAutoBeEventMovieProps<AutoBeEvent>) => {
+  // Pre-process events if needed
+  const processedEvents = preprocessEvents(events);
+  
+  return (
+    <AutoBeEventMovie 
+      events={processedEvents}
+      service={service}
+      last={last}
+    />
+  );
+};
+```
+
+### Event Filtering
+
+```tsx
+const filteredEvents = events.filter(event => 
+  !['vendorRequest', 'vendorResponse', 'jsonParseError'].includes(event.type)
+);
+```
+
+## TypeScript Support
+
+All components are fully typed with comprehensive interfaces:
+
+```tsx
+interface IAutoBeEventMovieProps<Event extends AutoBeEvent> {
+  service: IAutoBeRpcService;
+  events: Event[];
+  last: boolean;
+}
+```
+
+## Features
+
+- 🎯 **Intelligent Routing**: Automatic event type detection and routing
+- 📱 **Responsive Design**: Works seamlessly on all screen sizes
+- 🔄 **Smart Grouping**: Automatic grouping of related events
+- 📊 **Rich Statistics**: Built-in progress and error rate calculations
+- 🎨 **Consistent Styling**: Unified design system across all components
+- 💎 **Full TypeScript**: Complete type safety and IntelliSense support
+- ⚡ **Optimized Performance**: Efficient rendering with minimal re-renders
+- 🔧 **Highly Customizable**: Easy to extend and customize for specific needs
+- 🎪 **Animation Support**: Smooth transitions and progress animations
+- 📁 **File Management**: Built-in file download and management capabilities
+
+## Best Practices
+
+1. **Always use AutoBeEventMovie** as the main entry point for event rendering
+2. **Group related validation events** for better user experience
+3. **Provide meaningful timestamps** for all events
+4. **Use consistent naming** for custom event types
+5. **Handle edge cases** gracefully with null returns for unsupported events

package/src/events/common/CollapsibleEventGroup.tsx

@@ -0,0 +1,220 @@
+import { ReactNode, useState } from "react";
+
+import { EventCard } from "./EventCard";
+import { EventContent } from "./EventContent";
+import { EventIcon, EventIconType } from "./EventIcon";
+
+export interface ICollapsibleEventGroupProps<T = any> {
+  /** Array of events of the same type */
+  events: T[];
+  /** Title for the group */
+  title: string;
+  /** Icon type for the group header */
+  iconType: EventIconType;
+  /** Function to render individual events */
+  renderEvent: (event: T, index: number) => ReactNode;
+  /** Function to get timestamp from event (for header) */
+  getTimestamp: (event: T) => string;
+  /** Optional custom summary content */
+  renderSummary?: (events: T[]) => ReactNode;
+  /** Initial collapsed state */
+  defaultCollapsed?: boolean;
+  /** Custom group description */
+  description?: string;
+  /** Card variant based on event status */
+  variant?: "default" | "success" | "error" | "warning";
+}
+
+/**
+ * Collapsible event group component Groups multiple events of the same type
+ * with expand/collapse functionality
+ */
+export const CollapsibleEventGroup = <T,>(
+  props: ICollapsibleEventGroupProps<T>,
+) => {
+  const {
+    events,
+    title,
+    iconType,
+    renderEvent,
+    getTimestamp,
+    renderSummary,
+    defaultCollapsed = true,
+    description,
+    variant = "default",
+  } = props;
+
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+
+  if (events.length === 0) {
+    return null;
+  }
+
+  // Use the latest event's timestamp for the group header
+  const latestTimestamp = getTimestamp(events[events.length - 1]);
+
+  const toggleCollapse = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  const defaultSummary = (
+    <>
+      {description && (
+        <>
+          {description}
+          <br />
+          <br />
+        </>
+      )}
+      <strong>Total Events:</strong> {events.length}
+      <br />
+      <strong>Status:</strong> {isCollapsed ? "Collapsed" : "Expanded"}
+    </>
+  );
+
+  return (
+    <EventCard variant={variant}>
+      {/* Header */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "1rem",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "0.75rem",
+          }}
+        >
+          <EventIcon type={iconType} />
+
+          <div>
+            <h3
+              style={{
+                fontSize: "1.125rem",
+                fontWeight: "600",
+                color: "#1e293b",
+                margin: 0,
+                marginBottom: "0.25rem",
+              }}
+            >
+              {title}
+            </h3>
+            <div
+              style={{
+                fontSize: "0.75rem",
+                color: "#64748b",
+              }}
+            >
+              {events.length} event{events.length !== 1 ? "s" : ""}
+            </div>
+          </div>
+        </div>
+
+        <div
+          style={{
+            fontSize: "0.75rem",
+            color: "#64748b",
+            textAlign: "right",
+          }}
+        >
+          {latestTimestamp}
+        </div>
+      </div>
+
+      {/* Summary content when collapsed */}
+      {isCollapsed && (
+        <EventContent>
+          {renderSummary ? renderSummary(events) : defaultSummary}
+        </EventContent>
+      )}
+
+      {/* Individual events when expanded */}
+      {!isCollapsed && (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.5rem",
+          }}
+        >
+          {events.map((event, index) => (
+            <div
+              key={index}
+              style={{
+                border: "1px solid #e2e8f0",
+                borderRadius: "0.5rem",
+                overflow: "hidden",
+              }}
+            >
+              {renderEvent(event, index)}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Expand/Collapse Button */}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          marginTop: "1rem",
+        }}
+      >
+        <button
+          onClick={toggleCollapse}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "0.5rem",
+            padding: "0.5rem 1rem",
+            backgroundColor: "#f8fafc",
+            border: "1px solid #e2e8f0",
+            borderRadius: "0.5rem",
+            cursor: "pointer",
+            fontSize: "0.875rem",
+            color: "#64748b",
+            transition: "all 0.2s ease",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = "#f1f5f9";
+            e.currentTarget.style.borderColor = "#cbd5e1";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = "#f8fafc";
+            e.currentTarget.style.borderColor = "#e2e8f0";
+          }}
+        >
+          <span>{isCollapsed ? "Expand" : "Collapse"}</span>
+          <div
+            style={{
+              width: "1rem",
+              height: "1rem",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "transform 0.2s ease",
+              transform: isCollapsed ? "rotate(0deg)" : "rotate(180deg)",
+            }}
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              style={{ color: "#64748b" }}
+            >
+              <path d="M7 10l5 5 5-5z" />
+            </svg>
+          </div>
+        </button>
+      </div>
+    </EventCard>
+  );
+};
+
+export default CollapsibleEventGroup;

package/src/events/common/EventCard.tsx

@@ -0,0 +1,61 @@
+import { ReactNode } from "react";
+
+export interface IEventCardProps {
+  children: ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+  variant?: "default" | "success" | "error" | "warning";
+}
+
+/**
+ * Common event card container component Provides consistent styling across all
+ * event components
+ */
+export const EventCard = (props: IEventCardProps) => {
+  const { variant = "default" } = props;
+
+  const getVariantStyles = () => {
+    switch (variant) {
+      case "success":
+        return {
+          backgroundColor: "#f0fdf4",
+          border: "1px solid #bbf7d0",
+          boxShadow: "0 1px 3px 0 rgb(34 197 94 / 0.1)",
+        };
+      case "error":
+        return {
+          backgroundColor: "#fef2f2",
+          border: "1px solid #fecaca",
+          boxShadow: "0 1px 3px 0 rgb(239 68 68 / 0.1)",
+        };
+      case "warning":
+        return {
+          backgroundColor: "#fffbeb",
+          border: "1px solid #fed7aa",
+          boxShadow: "0 1px 3px 0 rgb(245 158 11 / 0.1)",
+        };
+      default:
+        return {
+          backgroundColor: "#f8fafc",
+          border: "1px solid #e2e8f0",
+          boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+        };
+    }
+  };
+
+  return (
+    <div
+      className={props.className}
+      style={{
+        ...getVariantStyles(),
+        borderRadius: "0.75rem",
+        padding: "1.5rem",
+        ...props.style,
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export default EventCard;

package/src/events/common/EventContent.tsx

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+
+export interface IEventContentProps {
+  children: ReactNode;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Common event content component Provides consistent content area styling
+ * across all event components
+ */
+export const EventContent = (props: IEventContentProps) => {
+  return (
+    <div
+      style={{
+        fontSize: "0.875rem",
+        lineHeight: "1.5",
+        color: "#475569",
+        backgroundColor: "#ffffff",
+        padding: "1rem",
+        borderRadius: "0.5rem",
+        border: "1px solid #e2e8f0",
+        ...props.style,
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export default EventContent;

package/src/events/common/EventHeader.tsx

@@ -0,0 +1,85 @@
+import { ReactNode } from "react";
+
+import { formatTime } from "../../utils/time";
+import { EventIcon, EventIconType } from "./EventIcon";
+
+export interface IEventHeaderProps {
+  title: string;
+  subtitle?: ReactNode;
+  timestamp: string;
+  iconType: EventIconType;
+  step?: number;
+}
+
+/**
+ * Common event header component Provides consistent header layout with icon,
+ * title, and timestamp
+ */
+export const EventHeader = (props: IEventHeaderProps) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        marginBottom: "1rem",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "0.75rem",
+        }}
+      >
+        <EventIcon type={props.iconType} />
+
+        <div>
+          <h3
+            style={{
+              fontSize: "1.125rem",
+              fontWeight: "600",
+              color: "#1e293b",
+              margin: 0,
+              marginBottom: "0.25rem",
+            }}
+          >
+            {props.title}
+          </h3>
+          {props.subtitle && (
+            <div
+              style={{
+                fontSize: "0.75rem",
+                color: "#64748b",
+              }}
+            >
+              {props.subtitle}
+            </div>
+          )}
+          {props.step !== undefined && (
+            <div
+              style={{
+                fontSize: "0.75rem",
+                color: "#64748b",
+              }}
+            >
+              Step #{props.step}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div
+        style={{
+          fontSize: "0.75rem",
+          color: "#64748b",
+          textAlign: "right",
+        }}
+      >
+        {formatTime(props.timestamp)}
+      </div>
+    </div>
+  );
+};
+
+export default EventHeader;