@autobe/ui 0.19.1 → 0.21.0

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,15 @@
 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 AutoBeEventMovie } from "./AutoBeEventMovie";
+
+// 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/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

@@ -2,7 +2,12 @@ export * from "./events";
 export { default as AutoBeAssistantMessageMovie } from "./AutoBeAssistantMessageMovie";
 export { default as AutoBeUserMessageMovie } from "./AutoBeUserMessageMovie";
 export { default as ChatBubble } from "./common/ChatBubble";
+export { default as AutoBeChatMain } from "./AutoBeChatMain";
 export type {
   IChatBubbleProps,
   IContentRendererProps,
 } from "./common/ChatBubble";
+export { AutoBeFileUploader } from "./utils";
+export * from "./upload";
+export * from "./banner";
+export * from "./structure";