@autobe/ui 0.20.0 → 0.21.0

package/src/constant/color.ts

@@ -0,0 +1,24 @@
+/** Color tokens for consistent styling */
+export const COLORS = {
+  // Gray scale
+  GRAY_BORDER: "#d1d5db",
+  GRAY_BACKGROUND: "#f9fafb",
+  GRAY_BORDER_LIGHT: "#e5e7eb",
+  GRAY_TEXT_DARK: "#1f2937",
+  GRAY_TEXT_MEDIUM: "#4b5563",
+
+  // Token value colors
+  TOKEN_INPUT: "#2563eb", // Blue
+  TOKEN_OUTPUT: "#16a34a", // Green
+  TOKEN_TOTAL: "#9333ea", // Purple
+
+  // Table colors
+  TABLE_BORDER: "#eee",
+  TABLE_BORDER_THICK: "#ddd",
+  TABLE_HEADER_BG: "#f5f5f5",
+} as const;
+
+/** Shadow styles */
+export const SHADOWS = {
+  CARD: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+} as const;

package/src/events/AutoBeEventMovie.tsx

@@ -0,0 +1,114 @@
+import { AutoBeEvent, IAutoBeGetFilesOptions } from "@autobe/interface";
+
+import {
+  AutoBeCompleteEventMovie,
+  AutoBeProgressEventMovie,
+  AutoBeScenarioEventMovie,
+  AutoBeStartEventMovie,
+  AutoBeValidateEventMovie,
+  IValidateEventGroupProps,
+  ValidateEventGroup,
+} from ".";
+import { AutoBeAssistantMessageMovie, AutoBeUserMessageMovie } from "..";
+
+export interface IAutoBeEventMovieProps<Event extends AutoBeEvent> {
+  getFiles: (
+    options?: Partial<IAutoBeGetFilesOptions>,
+  ) => Promise<Record<string, string>>;
+  events: Event[];
+  last: boolean;
+}
+
+export function AutoBeEventMovie<Event extends AutoBeEvent>(
+  props: IAutoBeEventMovieProps<Event>,
+) {
+  const back: Event = props.events[props.events.length - 1]!;
+  switch (back.type) {
+    case "userMessage":
+      return <AutoBeUserMessageMovie message={back.contents} />;
+    case "assistantMessage":
+      return (
+        <AutoBeAssistantMessageMovie
+          text={back.text}
+          isoTimestamp={back.created_at}
+        />
+      );
+    // START EVENTS
+    case "analyzeStart":
+    case "prismaStart":
+    case "interfaceStart":
+    case "testStart":
+    case "realizeStart":
+    case "realizeTestStart":
+    case "realizeAuthorizationStart":
+      return <AutoBeStartEventMovie event={back} />;
+    // SCENARIO EVENTS
+    case "analyzeScenario":
+    case "prismaComponents":
+    case "interfaceGroups":
+    case "realizeTestReset":
+      return <AutoBeScenarioEventMovie event={back} />;
+    // PROGRESS EVENTS
+    case "analyzeWrite":
+    case "analyzeReview":
+    case "interfaceEndpoints":
+    case "prismaSchemas":
+    case "prismaReview":
+    case "interfaceOperations":
+    case "interfaceOperationsReview":
+    case "interfaceAuthorization":
+    case "interfaceSchemas":
+    case "interfaceSchemasReview":
+    case "testWrite":
+    case "testScenarios":
+    case "realizeWrite":
+    case "realizeAuthorizationWrite":
+    case "realizeTestOperation":
+      return <AutoBeProgressEventMovie event={back} />;
+    // VALIDATE EVENTS
+    case "prismaInsufficient":
+    case "prismaValidate":
+    case "interfaceComplement":
+    case "testValidate":
+    case "realizeValidate":
+    case "realizeAuthorizationValidate":
+      if (props.events.length === 1) {
+        return <AutoBeValidateEventMovie event={back} />;
+      }
+
+      return (
+        <ValidateEventGroup
+          events={props.events as IValidateEventGroupProps["events"]}
+          defaultCollapsed={true}
+        />
+      );
+    // COMPLETE EVENTS
+    case "analyzeComplete":
+    case "prismaComplete":
+    case "interfaceComplete":
+    case "testComplete":
+    case "realizeComplete":
+      return (
+        <AutoBeCompleteEventMovie getFiles={props.getFiles} event={back} />
+      );
+    // DISCARD
+    case "prismaCorrect":
+    case "interfaceEndpointsReview":
+    case "testCorrect":
+    case "realizeAuthorizationCorrect":
+    case "realizeCorrect":
+    case "realizeTestComplete":
+    case "realizeAuthorizationComplete":
+    case "vendorRequest":
+    case "vendorResponse":
+    case "jsonParseError":
+    case "jsonValidateError":
+    case "consentFunctionCall":
+      return null;
+    default:
+      back satisfies never;
+      return null;
+  }
+}
+
+export default AutoBeEventMovie;

package/src/events/README.md

@@ -1,11 +1,38 @@
 # AutoBe Event Components
 
-Event UI components for the AutoBe platform with grouping and collapsible functionality.
+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 progress bars.
+Shows progress tracking events with animated progress bars and status indicators.
 
 ```tsx
 import { AutoBeProgressEventMovie } from "@autobe/ui/events";
@@ -14,7 +41,7 @@ import { AutoBeProgressEventMovie } from "@autobe/ui/events";
 ```
 
 ### AutoBeValidateEventMovie
-Shows validation events with error/success states.
+Displays validation events with detailed error/success states and validation results.
 
 ```tsx
 import { AutoBeValidateEventMovie } from "@autobe/ui/events";
@@ -23,7 +50,7 @@ import { AutoBeValidateEventMovie } from "@autobe/ui/events";
 ```
 
 ### AutoBeScenarioEventMovie
-Shows scenario analysis and component generation events.
+Shows scenario analysis and component generation events with structured data display.
 
 ```tsx
 import { AutoBeScenarioEventMovie } from "@autobe/ui/events";
@@ -32,7 +59,7 @@ import { AutoBeScenarioEventMovie } from "@autobe/ui/events";
 ```
 
 ### AutoBeStartEventMovie
-Shows pipeline start events with simple status display.
+Displays pipeline start events with clean status indicators and timing information.
 
 ```tsx
 import { AutoBeStartEventMovie } from "@autobe/ui/events";
@@ -40,10 +67,22 @@ 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
-Groups validation events with success rate statistics.
+Intelligently groups validation events with success rate statistics and collapsible interface.
 
 ```tsx
 import { ValidateEventGroup } from "@autobe/ui/events";
@@ -54,6 +93,36 @@ import { ValidateEventGroup } from "@autobe/ui/events";
 />
 ```
 
+**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:
@@ -98,7 +167,7 @@ import { CollapsibleEventGroup } from "@autobe/ui/events";
 ## Common Components
 
 ### EventCard
-Basic card container for consistent styling.
+Basic card container for consistent styling across all event types.
 
 ```tsx
 import { EventCard } from "@autobe/ui/events";
@@ -109,7 +178,7 @@ import { EventCard } from "@autobe/ui/events";
 ```
 
 ### EventHeader
-Standardized header with icon, title, and timestamp.
+Standardized header with icon, title, timestamp, and step numbering.
 
 ```tsx
 import { EventHeader } from "@autobe/ui/events";
@@ -123,7 +192,7 @@ import { EventHeader } from "@autobe/ui/events";
 ```
 
 ### EventContent
-Consistent content area styling.
+Consistent content area styling with proper spacing and typography.
 
 ```tsx
 import { EventContent } from "@autobe/ui/events";
@@ -134,7 +203,7 @@ import { EventContent } from "@autobe/ui/events";
 ```
 
 ### EventIcon
-Consistent icons for different event states.
+Consistent icons for different event states with customizable sizes.
 
 ```tsx
 import { EventIcon } from "@autobe/ui/events";
@@ -142,10 +211,10 @@ import { EventIcon } from "@autobe/ui/events";
 <EventIcon type="success" size={16} />
 ```
 
-Available icon types: `success`, `progress`, `warning`, `error`, `info`, `start`
+**Available icon types:** `success`, `progress`, `warning`, `error`, `info`, `start`
 
 ### ProgressBar
-Reusable progress bar component.
+Reusable progress bar component with customizable styling.
 
 ```tsx
 import { ProgressBar } from "@autobe/ui/events";
@@ -158,12 +227,74 @@ import { ProgressBar } from "@autobe/ui/events";
 />
 ```
 
+## 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
 
-- 🎯 **Consistent Design**: All components follow the same design system
-- 📱 **Responsive**: Works on all screen sizes
-- 🔄 **Collapsible**: Group events to reduce visual clutter
-- 📊 **Statistics**: Automatic progress and error rate calculations
-- 🎨 **Customizable**: Easy to extend and customize
-- 💎 **TypeScript**: Full type safety and IntelliSense support
-- ⚡ **Performance**: Efficient rendering with minimal re-renders
+- 🎯 **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/index.ts

@@ -1,11 +1,9 @@
 export { default as AutoBeStartEventMovie } from "./AutoBeStartEventMovie";
 export { default as AutoBeScenarioEventMovie } from "./AutoBeScenarioEventMovie";
 export { default as AutoBeProgressEventMovie } from "./AutoBeProgressEventMovie";
+export { default as AutoBeCompleteEventMovie } from "./AutoBeCompleteEventMovie";
 export { default as AutoBeValidateEventMovie } from "./AutoBeValidateEventMovie";
-export {
-  default as AutoBeCompleteEventMovie,
-  type IAutoBeCompleteEventMovieProps,
-} from "./AutoBeCompleteEventMovie";
+export { default as AutoBeEventMovie } from "./AutoBeEventMovie";
 
 // Common components
 export * from "./common";

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./useIsomorphicLayoutEffect";
+export * from "./useMediaQuery";

package/src/hooks/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,8 @@
+/**
+ * From usehooks-ts
+ * https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
+ */
+import { useEffect, useLayoutEffect } from "react";
+
+export const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,68 @@
+/** From usehooks-ts https://usehooks-ts.com/react-hook/use-media-query */
+import { useState } from "react";
+
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+
+type UseMediaQueryOptions = {
+  defaultValue?: boolean;
+  initializeWithValue?: boolean;
+};
+
+const IS_SERVER = typeof window === "undefined";
+
+export function useMediaQuery(
+  query: string,
+  {
+    defaultValue = false,
+    initializeWithValue = true,
+  }: UseMediaQueryOptions = {},
+): boolean {
+  const getMatches = (query: string): boolean => {
+    if (IS_SERVER) {
+      return defaultValue;
+    }
+    return window.matchMedia(query).matches;
+  };
+
+  const [matches, setMatches] = useState<boolean>(() => {
+    if (initializeWithValue) {
+      return getMatches(query);
+    }
+    return defaultValue;
+  });
+
+  // Handles the change event of the media query.
+  function handleChange() {
+    setMatches(getMatches(query));
+  }
+
+  useIsomorphicLayoutEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    // Triggered at the first client-side load and if query changes
+    handleChange();
+
+    // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+    if (matchMedia.addListener) {
+      matchMedia.addListener(handleChange);
+    } else {
+      matchMedia.addEventListener("change", handleChange);
+    }
+
+    return () => {
+      if (matchMedia.removeListener) {
+        matchMedia.removeListener(handleChange);
+      } else {
+        matchMedia.removeEventListener("change", handleChange);
+      }
+    };
+  }, [query]);
+
+  return matches;
+}
+
+export namespace useMediaQuery {
+  export const MIN_WIDTH_LG = "(min-width: 1200px)";
+  export const MIN_WIDTH_MD = "(min-width: 900px)";
+  export const MIN_WIDTH_SM = "(min-width: 600px)";
+}

package/src/index.ts

@@ -1,14 +1,13 @@
 export * from "./events";
 export { default as AutoBeAssistantMessageMovie } from "./AutoBeAssistantMessageMovie";
 export { default as AutoBeUserMessageMovie } from "./AutoBeUserMessageMovie";
-export {
-  default as AutoBeFileUploadBox,
-  type AutoBeFileUploadBox as IAutoBeFileUploadBox,
-} from "./AutoBeFileUploadBox";
 export { default as ChatBubble } from "./common/ChatBubble";
-export { AutoBeChatUploadSendButton } from "./AutoBeChatUploadSendButton";
+export { default as AutoBeChatMain } from "./AutoBeChatMain";
 export type {
   IChatBubbleProps,
   IContentRendererProps,
 } from "./common/ChatBubble";
-export { AutoBeVoiceRecoderButton } from "./AutoBeVoiceRecoderButton";
+export { AutoBeFileUploader } from "./utils";
+export * from "./upload";
+export * from "./banner";
+export * from "./structure";