@autobe/ui 0.19.1 → 0.20.0

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;

package/src/events/common/EventIcon.tsx

@@ -0,0 +1,82 @@
+export type EventIconType =
+  | "success"
+  | "progress"
+  | "warning"
+  | "error"
+  | "info"
+  | "start";
+
+export interface IEventIconProps {
+  type: EventIconType;
+  size?: number;
+}
+
+const ICON_CONFIGS = {
+  success: {
+    backgroundColor: "#4caf50",
+    icon: (
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+    ),
+  },
+  progress: {
+    backgroundColor: "#4caf50",
+    icon: (
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+    ),
+  },
+  warning: {
+    backgroundColor: "#f59e0b",
+    icon: <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />,
+  },
+  error: {
+    backgroundColor: "#ef4444",
+    icon: (
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm3.5 6L12 10.5 8.5 8 7 9.5 10.5 12 7 15.5 8.5 17 12 13.5 15.5 17 17 15.5 13.5 12 17 8.5 15.5 7z" />
+    ),
+  },
+  info: {
+    backgroundColor: "#3b82f6",
+    icon: (
+      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+    ),
+  },
+  start: {
+    backgroundColor: "#10b981",
+    icon: <path d="M8 5v14l11-7z" />,
+  },
+} as const;
+
+/**
+ * Common event icon component Provides consistent icon styling across all event
+ * components
+ */
+export const EventIcon = (props: IEventIconProps) => {
+  const { type, size = 16 } = props;
+  const config = ICON_CONFIGS[type];
+
+  return (
+    <div
+      style={{
+        width: "2rem",
+        height: "2rem",
+        backgroundColor: config.backgroundColor,
+        borderRadius: "50%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        style={{ color: "#ffffff" }}
+      >
+        {config.icon}
+      </svg>
+    </div>
+  );
+};
+
+export default EventIcon;

package/src/events/common/ProgressBar.tsx

@@ -0,0 +1,63 @@
+export interface IProgressBarProps {
+  current: number;
+  total: number;
+  color?: string;
+  backgroundColor?: string;
+  height?: string;
+  showLabel?: boolean;
+}
+
+/**
+ * Common progress bar component Provides consistent progress visualization
+ * across event components
+ */
+export const ProgressBar = (props: IProgressBarProps) => {
+  const {
+    current,
+    total,
+    color = "#4caf50",
+    backgroundColor = "#e2e8f0",
+    height = "10px",
+    showLabel = true,
+  } = props;
+
+  const percentage = Math.round((current / total) * 100);
+
+  return (
+    <>
+      <div
+        style={{
+          width: "100%",
+          height,
+          backgroundColor,
+          borderRadius: "10px",
+          overflow: "hidden",
+          marginBottom: showLabel ? "0.5rem" : "0",
+        }}
+      >
+        <div
+          style={{
+            width: `${percentage}%`,
+            height: "100%",
+            backgroundColor: color,
+            borderRadius: "10px",
+            transition: "width 0.3s ease",
+          }}
+        />
+      </div>
+      {showLabel && (
+        <div
+          style={{
+            fontSize: "0.75rem",
+            color: "#64748b",
+            textAlign: "center",
+          }}
+        >
+          {current} / {total} completed
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ProgressBar;

package/src/events/common/index.ts

@@ -0,0 +1,13 @@
+export { EventCard, type IEventCardProps } from "./EventCard";
+export {
+  EventIcon,
+  type EventIconType,
+  type IEventIconProps,
+} from "./EventIcon";
+export { EventHeader, type IEventHeaderProps } from "./EventHeader";
+export { EventContent, type IEventContentProps } from "./EventContent";
+export { ProgressBar, type IProgressBarProps } from "./ProgressBar";
+export {
+  CollapsibleEventGroup,
+  type ICollapsibleEventGroupProps,
+} from "./CollapsibleEventGroup";

package/src/events/groups/ValidateEventGroup.tsx

@@ -0,0 +1,150 @@
+import {
+  AutoBeInterfaceComplementEvent,
+  AutoBeInterfaceOperationsReviewEvent,
+  AutoBePrismaInsufficientEvent,
+  AutoBePrismaValidateEvent,
+  AutoBeRealizeAuthorizationValidateEvent,
+  AutoBeRealizeValidateEvent,
+  AutoBeTestValidateEvent,
+} from "@autobe/interface";
+
+import { AutoBeValidateEventMovie } from "../AutoBeValidateEventMovie";
+import { CollapsibleEventGroup } from "../common/CollapsibleEventGroup";
+
+type ValidateEvent =
+  | AutoBePrismaInsufficientEvent
+  | AutoBePrismaValidateEvent
+  | AutoBeInterfaceOperationsReviewEvent
+  | AutoBeInterfaceComplementEvent
+  | AutoBeTestValidateEvent
+  | AutoBeRealizeValidateEvent
+  | AutoBeRealizeAuthorizationValidateEvent;
+
+export interface IValidateEventGroupProps {
+  events: ValidateEvent[];
+  defaultCollapsed?: boolean;
+}
+
+/**
+ * Specialized group component for validation events Shows validation summary
+ * and error statistics
+ */
+export const ValidateEventGroup = (props: IValidateEventGroupProps) => {
+  const { events, defaultCollapsed = true } = props;
+
+  if (events.length === 0) {
+    return null;
+  }
+
+  // Calculate validation statistics
+  const errorEvents = events.filter((event) => {
+    switch (event.type) {
+      case "prismaValidate":
+      case "realizeValidate":
+      case "prismaInsufficient":
+        return true;
+      case "testValidate":
+      case "realizeAuthorizationValidate":
+        return event.result.type !== "success";
+      case "interfaceOperationsReview":
+      case "interfaceComplement":
+        return false;
+      default:
+        return false;
+    }
+  }).length;
+
+  const successEvents = events.length - errorEvents;
+  const eventTypes = Array.from(new Set(events.map((e) => e.type)));
+
+  const renderSummary = (events: ValidateEvent[]) => (
+    <>
+      Validation and review events from various components
+      <br />
+      <br />
+      <strong>Success Rate:</strong>{" "}
+      {events.length > 0
+        ? Math.round((successEvents / events.length) * 100)
+        : 0}
+      %
+      <br />
+      <strong>Successful:</strong> {successEvents} events
+      <br />
+      <strong>Failed/Issues:</strong> {errorEvents} events
+      <br />
+      <strong>Event Types:</strong> {eventTypes.join(", ")}
+      <br />
+      <br />
+      <div
+        style={{
+          display: "flex",
+          gap: "0.5rem",
+          alignItems: "center",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "0.25rem",
+          }}
+        >
+          <div
+            style={{
+              width: "12px",
+              height: "12px",
+              backgroundColor: "#4caf50",
+              borderRadius: "2px",
+            }}
+          />
+          <span style={{ fontSize: "0.75rem" }}>Success: {successEvents}</span>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "0.25rem",
+          }}
+        >
+          <div
+            style={{
+              width: "12px",
+              height: "12px",
+              backgroundColor: "#ef4444",
+              borderRadius: "2px",
+            }}
+          />
+          <span style={{ fontSize: "0.75rem" }}>Issues: {errorEvents}</span>
+        </div>
+      </div>
+    </>
+  );
+
+  const getGroupIconType = () => {
+    if (errorEvents === 0) return "success"; // All successful
+    if (successEvents === 0) return "error"; // All failed
+    return "warning"; // Mixed results
+  };
+
+  const getGroupVariant = () => {
+    if (errorEvents === 0) return "success"; // All successful
+    if (successEvents === 0) return "error"; // All failed
+    return "warning"; // Mixed results
+  };
+
+  return (
+    <CollapsibleEventGroup
+      events={events}
+      title="Validation Events"
+      iconType={getGroupIconType()}
+      variant={getGroupVariant()}
+      getTimestamp={(event) => event.created_at}
+      renderEvent={(event) => <AutoBeValidateEventMovie event={event} />}
+      renderSummary={renderSummary}
+      defaultCollapsed={defaultCollapsed}
+      description="Validation and review events"
+    />
+  );
+};
+
+export default ValidateEventGroup;

package/src/events/groups/index.ts

@@ -0,0 +1,4 @@
+export {
+  ValidateEventGroup,
+  type IValidateEventGroupProps,
+} from "./ValidateEventGroup";

package/src/events/index.ts

@@ -1,3 +1,17 @@
 export { default as AutoBeStartEventMovie } from "./AutoBeStartEventMovie";
 export { default as AutoBeScenarioEventMovie } from "./AutoBeScenarioEventMovie";
 export { default as AutoBeProgressEventMovie } from "./AutoBeProgressEventMovie";
+export { default as AutoBeValidateEventMovie } from "./AutoBeValidateEventMovie";
+export {
+  default as AutoBeCompleteEventMovie,
+  type IAutoBeCompleteEventMovieProps,
+} from "./AutoBeCompleteEventMovie";
+
+// Common components
+export * from "./common";
+
+// Event groups
+export * from "./groups";
+
+// Utilities
+export * from "./utils";

package/src/events/utils/eventGrouper.tsx

@@ -0,0 +1,118 @@
+import { AutoBeEvent } from "@autobe/interface";
+import { ReactNode } from "react";
+
+import { ValidateEventGroup } from "../groups";
+
+/** Configuration for event grouping */
+export interface IEventGrouperConfig {
+  /** Minimum number of events to form a group (default: 2) */
+  minGroupSize?: number;
+  /** Whether groups should be collapsed by default (default: true) */
+  defaultCollapsed?: boolean;
+  /** Whether to group events at all (default: true) */
+  enableGrouping?: boolean;
+}
+
+/**
+ * Groups events by type and renders appropriate group components
+ *
+ * @param events Array of AutoBe events to group
+ * @param config Configuration options for grouping
+ * @returns Array of ReactNode components (grouped or individual)
+ */
+export function groupEvents(
+  events: AutoBeEvent[],
+  config: IEventGrouperConfig = {},
+): ReactNode[] {
+  const {
+    minGroupSize = 2,
+    defaultCollapsed = true,
+    enableGrouping = true,
+  } = config;
+
+  if (!enableGrouping) {
+    // Return individual event components without grouping
+    return events.map((event, index) => (
+      <div key={`${event.type}-${index}`}>{renderIndividualEvent(event)}</div>
+    ));
+  }
+
+  // Group events by category
+  const groupedEvents = groupEventsByCategory(events);
+  const components: ReactNode[] = [];
+
+  // Validation Events
+  if (groupedEvents.validate.length >= minGroupSize) {
+    components.push(
+      <ValidateEventGroup
+        key="validate-group"
+        events={groupedEvents.validate}
+        defaultCollapsed={defaultCollapsed}
+      />,
+    );
+  } else {
+    groupedEvents.validate.forEach((event, index) => {
+      components.push(
+        <div key={`validate-${index}`}>{renderIndividualEvent(event)}</div>,
+      );
+    });
+  }
+
+  // All other events (ungrouped)
+  groupedEvents.other.forEach((event, index) => {
+    components.push(
+      <div key={`other-${index}`}>{renderIndividualEvent(event)}</div>,
+    );
+  });
+
+  return components;
+}
+
+/** Groups events by their category */
+function groupEventsByCategory(events: AutoBeEvent[]) {
+  const grouped = {
+    validate: [] as any[],
+    other: [] as AutoBeEvent[],
+  };
+
+  events.forEach((event) => {
+    switch (event.type) {
+      // Validation events
+      case "prismaValidate":
+      case "testValidate":
+      case "realizeValidate":
+      case "realizeAuthorizationValidate":
+      case "prismaInsufficient":
+      case "interfaceComplement":
+      case "interfaceOperationsReview":
+        grouped.validate.push(event);
+        break;
+
+      default:
+        grouped.other.push(event);
+        break;
+    }
+  });
+
+  return grouped;
+}
+
+/** Renders individual event components based on event type */
+function renderIndividualEvent(event: AutoBeEvent): ReactNode {
+  // This would import and use the actual event components
+  // For now, returning a placeholder
+  return (
+    <div
+      style={{
+        padding: "1rem",
+        border: "1px solid #e2e8f0",
+        borderRadius: "0.5rem",
+        marginBottom: "0.5rem",
+      }}
+    >
+      <strong>{event.type}</strong> - {event.created_at}
+    </div>
+  );
+}
+
+export default groupEvents;

package/src/events/utils/index.ts

@@ -0,0 +1 @@
+export { groupEvents, type IEventGrouperConfig } from "./eventGrouper";

package/src/index.ts

@@ -1,8 +1,14 @@
 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 type {
   IChatBubbleProps,
   IContentRendererProps,
 } from "./common/ChatBubble";
+export { AutoBeVoiceRecoderButton } from "./AutoBeVoiceRecoderButton";