@autobe/ui 0.19.1

package/src/common/openai/OpenAIUserImageContent.tsx

@@ -0,0 +1,34 @@
+import { AutoBeUserMessageImageContent } from "@autobe/interface";
+
+/** Image content renderer component for OpenAI messages */
+export const OpenAIUserImageContent = ({
+  content,
+}: {
+  content: AutoBeUserMessageImageContent;
+}) => {
+  const imgSrc =
+    content.image.type === "url" ? content.image.url : content.image.data;
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        maxWidth: "16rem",
+        borderRadius: "0.5rem",
+        overflow: "hidden",
+      }}
+    >
+      <img
+        src={imgSrc}
+        alt="User uploaded image"
+        style={{
+          width: "100%",
+          height: "auto",
+          display: "block",
+        }}
+      />
+    </div>
+  );
+};
+
+export default OpenAIUserImageContent;

package/src/common/openai/OpenAIUserTextContent.tsx

@@ -0,0 +1,16 @@
+/** Text content renderer component for OpenAI messages */
+export const OpenAIUserTextContent = ({ text }: { text: string }) => (
+  <div
+    style={{
+      position: "relative",
+      zIndex: 10,
+      fontSize: "0.875rem",
+      lineHeight: "1.625",
+      whiteSpace: "pre-wrap",
+    }}
+  >
+    {text}
+  </div>
+);
+
+export default OpenAIUserTextContent;

package/src/common/openai/index.ts

@@ -0,0 +1,5 @@
+export { OpenAIUserTextContent } from "./OpenAIUserTextContent";
+export { OpenAIUserAudioContent } from "./OpenAIUserAudioContent";
+export { OpenAIUserFileContent } from "./OpenAIUserFileContent";
+export { OpenAIUserImageContent } from "./OpenAIUserImageContent";
+export { OpenAIContent } from "./OpenAIContent";

package/src/events/AutoBeProgressEventMovie.tsx

@@ -0,0 +1,250 @@
+import { AutoBeEvent, AutoBeProgressEventBase } from "@autobe/interface";
+
+import { formatTime } from "../utils/time";
+
+export function AutoBeProgressEventMovie(
+  props: AutoBeProgressEventMovie.IProps,
+) {
+  const state: IState = getState(props.event);
+
+  return (
+    <div
+      style={{
+        backgroundColor: "#f8fafc",
+        border: "1px solid #e2e8f0",
+        borderRadius: "0.75rem",
+        padding: "1.5rem",
+        marginBottom: "1rem",
+        boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+      }}
+    >
+      {/* Header */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "1rem",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "0.75rem",
+          }}
+        >
+          {/* Status Icon */}
+          <div
+            style={{
+              width: "2rem",
+              height: "2rem",
+              backgroundColor: "#4caf50",
+              borderRadius: "50%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              style={{ color: "#ffffff" }}
+            >
+              <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" />
+            </svg>
+          </div>
+
+          {/* Title */}
+          <div>
+            <h3
+              style={{
+                fontSize: "1.125rem",
+                fontWeight: "600",
+                color: "#1e293b",
+                margin: 0,
+                marginBottom: "0.25rem",
+              }}
+            >
+              {state.title}
+            </h3>
+          </div>
+        </div>
+
+        {/* Timestamp */}
+        <div
+          style={{
+            fontSize: "0.75rem",
+            color: "#64748b",
+            textAlign: "right",
+          }}
+        >
+          {formatTime(props.event.created_at)}
+        </div>
+      </div>
+
+      {/* Content */}
+      <div
+        style={{
+          fontSize: "0.875rem",
+          lineHeight: "1.5",
+          color: "#475569",
+          backgroundColor: "#ffffff",
+          padding: "1rem",
+          borderRadius: "0.5rem",
+          border: "1px solid #e2e8f0",
+        }}
+      >
+        <div style={{ marginBottom: "1rem" }}>{state.description}</div>
+
+        {/* Progress Bar */}
+        <div
+          style={{
+            width: "100%",
+            height: "10px",
+            backgroundColor: "#e2e8f0",
+            borderRadius: "10px",
+            overflow: "hidden",
+            marginBottom: "0.5rem",
+          }}
+        >
+          <div
+            style={{
+              width: `${Math.round((state.completed / state.total) * 100)}%`,
+              height: "100%",
+              backgroundColor: "#4caf50",
+              borderRadius: "10px",
+              transition: "width 0.3s ease",
+            }}
+          />
+        </div>
+
+        <div
+          style={{
+            fontSize: "0.75rem",
+            color: "#64748b",
+            textAlign: "center",
+          }}
+        >
+          {state.completed} / {state.total} completed
+        </div>
+      </div>
+    </div>
+  );
+}
+type ExtractType<T, U> = T extends U ? T : never;
+
+export namespace AutoBeProgressEventMovie {
+  export interface IProps {
+    event: ExtractType<AutoBeEvent, AutoBeProgressEventBase>;
+  }
+}
+
+interface IState {
+  title: string;
+  description: string;
+  completed: number;
+  total: number;
+}
+
+function getState(event: AutoBeProgressEventMovie.IProps["event"]): IState {
+  const content: Pick<IState, "title" | "description"> = (() => {
+    switch (event.type) {
+      case "analyzeWrite":
+        return {
+          title: "Analyze Write",
+          description: "Analyzing requirements, and writing a report paper",
+        };
+      case "analyzeReview":
+        return {
+          title: "Analyze Review",
+          description: "Reviewing the analysis results",
+        };
+      case "prismaSchemas":
+        return {
+          title: "Prisma Schemas",
+          description: "Designing Database schemas",
+        };
+      case "prismaReview":
+        return {
+          title: "Prisma Review",
+          description: "Reviewing the Prisma schemas",
+        };
+      case "interfaceEndpoints":
+        return {
+          title: "Interface Endpoints",
+          description: "Collecting API endpoints",
+        };
+      case "interfaceOperations":
+        return {
+          title: "Interface Operations",
+          description: "Designing API operations",
+        };
+      case "interfaceOperationsReview":
+        return {
+          title: "Interface Operations Review",
+          description: "Reviewing API operations",
+        };
+      case "interfaceAuthorization":
+        return {
+          title: "Interface Authorization",
+          description: "Designing API authorization operations",
+        };
+      case "interfaceSchemas":
+        return {
+          title: "Interface Schemas",
+          description: "Designing API type schemas",
+        };
+      case "interfaceSchemasReview":
+        return {
+          title: "Interface Schemas Review",
+          description: "Reviewing API type schemas",
+        };
+      case "testScenarios":
+        return {
+          title: "Test Scenarios",
+          description: "Planning E2E test scenarios",
+        };
+      case "testWrite":
+        return {
+          title: "Test Write",
+          description: "Writing E2E test functions",
+        };
+      case "realizeWrite":
+        return {
+          title: "Realize Write",
+          description: "Realizing the API functions",
+        };
+      case "realizeAuthorizationWrite":
+        return {
+          title: "Authorization Write",
+          description: "Writing authorization decorators and functions",
+        };
+      case "realizeTestOperation":
+        return {
+          title: "Realize Test Operation",
+          description:
+            "Running the E2E test operations to validate the API functions",
+        };
+      case "realizeCorrect":
+        return {
+          title: "Realize Correct",
+          description: "Correcting the API functions",
+        };
+      default:
+        event satisfies never;
+        return {
+          title: "Unknown Event",
+          description: "This event type is not recognized.",
+        };
+    }
+  })();
+  return {
+    ...content,
+    completed: event.completed,
+    total: event.total,
+  };
+}
+export default AutoBeProgressEventMovie;

package/src/events/AutoBeScenarioEventMovie.tsx

@@ -0,0 +1,183 @@
+import {
+  AutoBeAnalyzeScenarioEvent,
+  AutoBeInterfaceGroupsEvent,
+  AutoBePrismaComponentsEvent,
+  AutoBeRealizeTestResetEvent,
+} from "@autobe/interface";
+import { JSX } from "react";
+
+import { formatTime } from "../utils/time";
+
+export interface IAutoBeScenarioEventMovieProps {
+  event:
+    | AutoBeAnalyzeScenarioEvent
+    | AutoBePrismaComponentsEvent
+    | AutoBeInterfaceGroupsEvent
+    | AutoBeRealizeTestResetEvent;
+}
+export const AutoBeScenarioEventMovie = (
+  props: IAutoBeScenarioEventMovieProps,
+) => {
+  const { event } = props;
+  const { title, description } = getState(event);
+
+  return (
+    <div
+      style={{
+        backgroundColor: "#f8fafc",
+        border: "1px solid #e2e8f0",
+        borderRadius: "0.75rem",
+        padding: "1.5rem",
+        marginBottom: "1rem",
+        boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+      }}
+    >
+      {/* Header */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "1rem",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "0.75rem",
+          }}
+        >
+          {/* Status Icon */}
+          <div
+            style={{
+              width: "2rem",
+              height: "2rem",
+              backgroundColor: "#3b82f6",
+              borderRadius: "50%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              style={{ color: "#ffffff" }}
+            >
+              <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" />
+            </svg>
+          </div>
+
+          {/* Title and Step */}
+          <div>
+            <h3
+              style={{
+                fontSize: "1.125rem",
+                fontWeight: "600",
+                color: "#1e293b",
+                margin: 0,
+                marginBottom: "0.25rem",
+              }}
+            >
+              {title}
+            </h3>
+          </div>
+        </div>
+
+        {/* Timestamp */}
+        <div
+          style={{
+            fontSize: "0.75rem",
+            color: "#64748b",
+            textAlign: "right",
+          }}
+        >
+          {formatTime(event.created_at)}
+        </div>
+      </div>
+
+      {/* Description */}
+      <div
+        style={{
+          fontSize: "0.875rem",
+          lineHeight: "1.5",
+          color: "#475569",
+          backgroundColor: "#ffffff",
+          padding: "1rem",
+          borderRadius: "0.5rem",
+          border: "1px solid #e2e8f0",
+        }}
+      >
+        {description}
+      </div>
+    </div>
+  );
+};
+export default AutoBeScenarioEventMovie;
+
+interface IState {
+  title: string;
+  description: string | JSX.Element;
+}
+
+function getState(event: IAutoBeScenarioEventMovieProps["event"]): IState {
+  switch (event.type) {
+    case "analyzeScenario":
+      return {
+        title: "Analyze Scenario",
+        description: (
+          <>
+            Generating analysis report.
+            <br />
+            <br />
+            Number of documents to write: #{event.files.length}
+          </>
+        ),
+      };
+    case "prismaComponents":
+      return {
+        title: "Prisma Components",
+        description: (
+          <>
+            Generating Prisma components.
+            <br />
+            <br />
+            Number of Prisma schemas would be:
+            <br />
+            <ul>
+              <li>namespaces: #{event.components.length}</li>
+              <li>
+                tables: #
+                {event.components
+                  .map((c) => c.tables.length)
+                  .reduce((a, b) => a + b, 0)}
+              </li>
+            </ul>
+          </>
+        ),
+      };
+    case "interfaceGroups":
+      return {
+        title: "Interface Endpoint Groups",
+        description: (
+          <>
+            Generating interface endpoint groups.
+            <br />
+            <br />
+            Number of API operation groups would be #{event.groups.length}
+          </>
+        ),
+      };
+    case "realizeTestReset":
+      return {
+        title: "Realize Test Reset",
+        description: "Resetting test environment.",
+      };
+    default:
+      event satisfies never;
+      throw new Error("Unknown event type");
+  }
+}

package/src/events/AutoBeStartEventMovie.tsx

@@ -0,0 +1,82 @@
+import {
+  AutoBeAnalyzeStartEvent,
+  AutoBeInterfaceStartEvent,
+  AutoBePrismaStartEvent,
+  AutoBeRealizeAuthorizationStartEvent,
+  AutoBeRealizeStartEvent,
+  AutoBeRealizeTestStartEvent,
+  AutoBeTestStartEvent,
+} from "@autobe/interface";
+
+interface IAutoBeStartEventProps {
+  event:
+    | AutoBeAnalyzeStartEvent
+    | AutoBePrismaStartEvent
+    | AutoBeInterfaceStartEvent
+    | AutoBeTestStartEvent
+    | AutoBeRealizeStartEvent
+    | AutoBeRealizeAuthorizationStartEvent
+    | AutoBeRealizeTestStartEvent;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+const AutoBeStartEventMovie = (props: IAutoBeStartEventProps) => {
+  const { event } = props;
+  const title = getTitle(event);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        marginBottom: "1rem",
+      }}
+    >
+      <div
+        className={props.className}
+        style={{
+          backgroundColor: "#f0f0f0",
+          border: "1px solid #e0e0e0",
+          borderRadius: "0.5rem",
+          padding: "0.5rem 1rem",
+          ...props.style,
+        }}
+      >
+        <div
+          style={{
+            fontSize: "0.875rem",
+            color: "#666",
+            fontWeight: "medium",
+          }}
+        >
+          🚀 {title} has started.
+        </div>
+      </div>
+    </div>
+  );
+};
+
+function getTitle(event: IAutoBeStartEventProps["event"]): string {
+  switch (event.type) {
+    case "analyzeStart":
+      return "Analyze";
+    case "prismaStart":
+      return "Prisma";
+    case "interfaceStart":
+      return "Interface";
+    case "testStart":
+      return "Test";
+    case "realizeStart":
+      return "Realize";
+    case "realizeAuthorizationStart":
+      return "Realize Authorization";
+    case "realizeTestStart":
+      return "Final E2E Test";
+    default:
+      event satisfies never;
+      throw new Error("Unknown event type"); // unreachable
+  }
+}
+
+export default AutoBeStartEventMovie;

package/src/events/index.ts

@@ -0,0 +1,3 @@
+export { default as AutoBeStartEventMovie } from "./AutoBeStartEventMovie";
+export { default as AutoBeScenarioEventMovie } from "./AutoBeScenarioEventMovie";
+export { default as AutoBeProgressEventMovie } from "./AutoBeProgressEventMovie";

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from "./events";
+export { default as AutoBeAssistantMessageMovie } from "./AutoBeAssistantMessageMovie";
+export { default as AutoBeUserMessageMovie } from "./AutoBeUserMessageMovie";
+export { default as ChatBubble } from "./common/ChatBubble";
+export type {
+  IChatBubbleProps,
+  IContentRendererProps,
+} from "./common/ChatBubble";

package/src/utils/time.ts

@@ -0,0 +1,14 @@
+/**
+ * Formats an ISO timestamp string to display time in Korean locale
+ *
+ * @param isoString - ISO format timestamp string
+ * @returns Formatted time string (HH:mm)
+ */
+export const formatTime = (isoString: string): string => {
+  const date = new Date(isoString);
+  return date.toLocaleTimeString("ko-KR", {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  });
+};

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../internals/config/tsconfig.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "rootDir": "src",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*"]
+}