@autobe/ui 0.19.1

package/lib/events/AutoBeScenarioEventMovie.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoBeScenarioEventMovie = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const time_1 = require("../utils/time");
+const AutoBeScenarioEventMovie = (props) => {
+    const { event } = props;
+    const { title, description } = getState(event);
+    return ((0, jsx_runtime_1.jsxs)("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)",
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    marginBottom: "1rem",
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "0.75rem",
+                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                    width: "2rem",
+                                    height: "2rem",
+                                    backgroundColor: "#3b82f6",
+                                    borderRadius: "50%",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                }, children: (0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", style: { color: "#ffffff" }, children: (0, jsx_runtime_1.jsx)("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" }) }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h3", { style: {
+                                        fontSize: "1.125rem",
+                                        fontWeight: "600",
+                                        color: "#1e293b",
+                                        margin: 0,
+                                        marginBottom: "0.25rem",
+                                    }, children: title }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            fontSize: "0.75rem",
+                            color: "#64748b",
+                            textAlign: "right",
+                        }, children: (0, time_1.formatTime)(event.created_at) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    fontSize: "0.875rem",
+                    lineHeight: "1.5",
+                    color: "#475569",
+                    backgroundColor: "#ffffff",
+                    padding: "1rem",
+                    borderRadius: "0.5rem",
+                    border: "1px solid #e2e8f0",
+                }, children: description })] }));
+};
+exports.AutoBeScenarioEventMovie = AutoBeScenarioEventMovie;
+exports.default = exports.AutoBeScenarioEventMovie;
+function getState(event) {
+    switch (event.type) {
+        case "analyzeScenario":
+            return {
+                title: "Analyze Scenario",
+                description: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Generating analysis report.", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), "Number of documents to write: #", event.files.length] })),
+            };
+        case "prismaComponents":
+            return {
+                title: "Prisma Components",
+                description: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Generating Prisma components.", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), "Number of Prisma schemas would be:", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", { children: ["namespaces: #", event.components.length] }), (0, jsx_runtime_1.jsxs)("li", { children: ["tables: #", event.components
+                                            .map((c) => c.tables.length)
+                                            .reduce((a, b) => a + b, 0)] })] })] })),
+            };
+        case "interfaceGroups":
+            return {
+                title: "Interface Endpoint Groups",
+                description: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Generating interface endpoint groups.", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), "Number of API operation groups would be #", event.groups.length] })),
+            };
+        case "realizeTestReset":
+            return {
+                title: "Realize Test Reset",
+                description: "Resetting test environment.",
+            };
+        default:
+            event;
+            throw new Error("Unknown event type");
+    }
+}
+//# sourceMappingURL=AutoBeScenarioEventMovie.js.map

package/lib/events/AutoBeScenarioEventMovie.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoBeScenarioEventMovie.js","sourceRoot":"","sources":["../../src/events/AutoBeScenarioEventMovie.tsx"],"names":[],"mappings":"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"}

package/lib/events/AutoBeStartEventMovie.d.ts

@@ -0,0 +1,8 @@
+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;
+}
+declare const AutoBeStartEventMovie: (props: IAutoBeStartEventProps) => import("react/jsx-runtime").JSX.Element;
+export default AutoBeStartEventMovie;

package/lib/events/AutoBeStartEventMovie.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AutoBeStartEventMovie = (props) => {
+    const { event } = props;
+    const title = getTitle(event);
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: "flex",
+            justifyContent: "center",
+            marginBottom: "1rem",
+        }, children: (0, jsx_runtime_1.jsx)("div", { className: props.className, style: Object.assign({ backgroundColor: "#f0f0f0", border: "1px solid #e0e0e0", borderRadius: "0.5rem", padding: "0.5rem 1rem" }, props.style), children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                    fontSize: "0.875rem",
+                    color: "#666",
+                    fontWeight: "medium",
+                }, children: ["\uD83D\uDE80 ", title, " has started."] }) }) }));
+};
+function getTitle(event) {
+    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;
+            throw new Error("Unknown event type"); // unreachable
+    }
+}
+exports.default = AutoBeStartEventMovie;
+//# sourceMappingURL=AutoBeStartEventMovie.js.map

package/lib/events/AutoBeStartEventMovie.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoBeStartEventMovie.js","sourceRoot":"","sources":["../../src/events/AutoBeStartEventMovie.tsx"],"names":[],"mappings":";;;AAuBA,MAAM,qBAAqB,GAAG,CAAC,KAA6B,EAAE,EAAE;IAC9D,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxB,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9B,OAAO,CACL,gCACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,YAAY,EAAE,MAAM;SACrB,YAED,gCACE,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,kBACH,eAAe,EAAE,SAAS,EAC1B,MAAM,EAAE,mBAAmB,EAC3B,YAAY,EAAE,QAAQ,EACtB,OAAO,EAAE,aAAa,IACnB,KAAK,CAAC,KAAK,aAGhB,iCACE,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,KAAK,EAAE,MAAM;oBACb,UAAU,EAAE,QAAQ;iBACrB,8BAEG,KAAK,qBACL,GACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,QAAQ,CAAC,KAAsC;IACtD,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;QACnB,KAAK,cAAc;YACjB,OAAO,SAAS,CAAC;QACnB,KAAK,aAAa;YAChB,OAAO,QAAQ,CAAC;QAClB,KAAK,gBAAgB;YACnB,OAAO,WAAW,CAAC;QACrB,KAAK,WAAW;YACd,OAAO,MAAM,CAAC;QAChB,KAAK,cAAc;YACjB,OAAO,SAAS,CAAC;QACnB,KAAK,2BAA2B;YAC9B,OAAO,uBAAuB,CAAC;QACjC,KAAK,kBAAkB;YACrB,OAAO,gBAAgB,CAAC;QAC1B;YACE,KAAqB,CAAC;YACtB,MAAM,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,cAAc;IACzD,CAAC;AACH,CAAC;AAED,kBAAe,qBAAqB,CAAC"}

package/lib/events/index.d.ts

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

package/lib/events/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoBeProgressEventMovie = exports.AutoBeScenarioEventMovie = exports.AutoBeStartEventMovie = void 0;
+var AutoBeStartEventMovie_1 = require("./AutoBeStartEventMovie");
+Object.defineProperty(exports, "AutoBeStartEventMovie", { enumerable: true, get: function () { return __importDefault(AutoBeStartEventMovie_1).default; } });
+var AutoBeScenarioEventMovie_1 = require("./AutoBeScenarioEventMovie");
+Object.defineProperty(exports, "AutoBeScenarioEventMovie", { enumerable: true, get: function () { return __importDefault(AutoBeScenarioEventMovie_1).default; } });
+var AutoBeProgressEventMovie_1 = require("./AutoBeProgressEventMovie");
+Object.defineProperty(exports, "AutoBeProgressEventMovie", { enumerable: true, get: function () { return __importDefault(AutoBeProgressEventMovie_1).default; } });
+//# sourceMappingURL=index.js.map

package/lib/events/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/events/index.ts"],"names":[],"mappings":";;;;;;AAAA,iEAA2E;AAAlE,+IAAA,OAAO,OAAyB;AACzC,uEAAiF;AAAxE,qJAAA,OAAO,OAA4B;AAC5C,uEAAiF;AAAxE,qJAAA,OAAO,OAA4B"}

package/lib/index.d.ts

@@ -0,0 +1,5 @@
+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/lib/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatBubble = exports.AutoBeUserMessageMovie = exports.AutoBeAssistantMessageMovie = void 0;
+__exportStar(require("./events"), exports);
+var AutoBeAssistantMessageMovie_1 = require("./AutoBeAssistantMessageMovie");
+Object.defineProperty(exports, "AutoBeAssistantMessageMovie", { enumerable: true, get: function () { return __importDefault(AutoBeAssistantMessageMovie_1).default; } });
+var AutoBeUserMessageMovie_1 = require("./AutoBeUserMessageMovie");
+Object.defineProperty(exports, "AutoBeUserMessageMovie", { enumerable: true, get: function () { return __importDefault(AutoBeUserMessageMovie_1).default; } });
+var ChatBubble_1 = require("./common/ChatBubble");
+Object.defineProperty(exports, "ChatBubble", { enumerable: true, get: function () { return __importDefault(ChatBubble_1).default; } });
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,6EAAuF;AAA9E,2JAAA,OAAO,OAA+B;AAC/C,mEAA6E;AAApE,iJAAA,OAAO,OAA0B;AAC1C,kDAA4D;AAAnD,yHAAA,OAAO,OAAc"}

package/lib/utils/time.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Formats an ISO timestamp string to display time in Korean locale
+ *
+ * @param isoString - ISO format timestamp string
+ * @returns Formatted time string (HH:mm)
+ */
+export declare const formatTime: (isoString: string) => string;

package/lib/utils/time.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatTime = void 0;
+/**
+ * Formats an ISO timestamp string to display time in Korean locale
+ *
+ * @param isoString - ISO format timestamp string
+ * @returns Formatted time string (HH:mm)
+ */
+const formatTime = (isoString) => {
+    const date = new Date(isoString);
+    return date.toLocaleTimeString("ko-KR", {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+    });
+};
+exports.formatTime = formatTime;
+//# sourceMappingURL=time.js.map

package/lib/utils/time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.js","sourceRoot":"","sources":["../../src/utils/time.ts"],"names":[],"mappings":";;;AAAA;;;;;GAKG;AACI,MAAM,UAAU,GAAG,CAAC,SAAiB,EAAU,EAAE;IACtD,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;IACjC,OAAO,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;QACtC,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,KAAK;KACd,CAAC,CAAC;AACL,CAAC,CAAC;AAPW,QAAA,UAAU,cAOrB"}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@autobe/ui",
+  "type": "commonjs",
+  "version": "0.19.1",
+  "description": "AutoBE UI",
+  "author": "Wrtn Technologies",
+  "homepage": "https://wrtnlabs.io/autobe",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wrtnlabs/autobe.git"
+  },
+  "bugs": {
+    "url": "https://github.com/wrtnlabs/autobe/issues"
+  },
+  "main": "lib/index.js",
+  "devDependencies": {
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.5",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "typescript": "~5.9.2",
+    "@autobe/interface": "0.19.1"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  }
+}

package/src/AutoBeAssistantMessageMovie.tsx

@@ -0,0 +1,22 @@
+import ChatBubble from "./common/ChatBubble";
+
+interface IAssistantMessageProps {
+  text: string;
+  isoTimestamp?: string; // ISO format: "2025-08-13T04:45:20.341Z"
+  assistantName?: string;
+}
+
+const AutoBeAssistantMessageMovie = (props: IAssistantMessageProps) => {
+  const { text, isoTimestamp, assistantName = "AutoBe" } = props;
+
+  return (
+    <ChatBubble
+      content={[text]}
+      direction="left"
+      timestamp={isoTimestamp}
+      assistantName={assistantName}
+    />
+  );
+};
+
+export default AutoBeAssistantMessageMovie;

package/src/AutoBeUserMessageMovie.tsx

@@ -0,0 +1,25 @@
+import { AutoBeUserMessageContent } from "@autobe/interface";
+
+import ChatBubble from "./common/ChatBubble";
+
+interface IAutoBeUserMessageHistoryMovieProps {
+  message: Array<AutoBeUserMessageContent>;
+}
+
+const AutoBeUserMessageMovie = (props: IAutoBeUserMessageHistoryMovieProps) => {
+  const { message } = props;
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+      }}
+    >
+      <ChatBubble content={message} direction="right" assistantName="You" />
+    </div>
+  );
+};
+
+export default AutoBeUserMessageMovie;

package/src/common/ChatBubble.tsx

@@ -0,0 +1,119 @@
+import { AutoBeUserMessageContent } from "@autobe/interface";
+
+import { formatTime } from "../utils/time";
+import { OpenAIContent } from "./openai";
+
+/** Props interface for ChatBubble component */
+export interface IChatBubbleProps {
+  /** Message content - supports text, audio, file, and image types */
+  content: Array<AutoBeUserMessageContent | string>;
+
+  /** Direction of the chat bubble - left or right */
+  direction: "left" | "right";
+  /** Timestamp (ISO format) */
+  timestamp?: string;
+  /** Assistant name (default: "Assistant") */
+  assistantName?: string;
+}
+
+/** Props interface for content renderer functions */
+export interface IContentRendererProps {
+  /** Whether the bubble is positioned on the right side */
+  isRight: boolean;
+}
+
+const ChatBubble = (props: IChatBubbleProps) => {
+  const { content, direction, timestamp, assistantName = "Assistant" } = props;
+
+  const isRight = direction === "right";
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        marginBottom: "1rem",
+        justifyContent: isRight ? "flex-end" : "flex-start",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          maxWidth: "48rem",
+          alignItems: isRight ? "flex-end" : "flex-start",
+        }}
+      >
+        {/* User name/time */}
+        <div
+          style={{
+            marginBottom: "0.25rem",
+            textAlign: isRight ? "right" : "left",
+          }}
+        >
+          <span
+            style={{
+              fontSize: "0.75rem",
+              lineHeight: "1rem",
+              color: "#6b7280",
+            }}
+          >
+            {isRight ? "You" : assistantName}
+            {timestamp && (
+              <>
+                <span
+                  style={{
+                    marginLeft: "0.25rem",
+                    marginRight: "0.25rem",
+                  }}
+                >
+                  •
+                </span>
+                {formatTime(timestamp)}
+              </>
+            )}
+          </span>
+        </div>
+
+        {/* Message bubble */}
+        <div
+          style={{
+            position: "relative",
+            maxWidth: "32rem",
+            paddingLeft: "1rem",
+            paddingRight: "1rem",
+            paddingTop: "0.75rem",
+            paddingBottom: "0.75rem",
+            borderRadius: "1rem",
+            boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+            backgroundColor: isRight ? "#3b82f6" : "#f3f4f6",
+            color: isRight ? "#ffffff" : "#1f2937",
+            borderTopRightRadius: isRight ? "0.375rem" : "1rem",
+            borderTopLeftRadius: isRight ? "1rem" : "0.375rem",
+            border: isRight ? "none" : "1px solid #e5e7eb",
+          }}
+        >
+          {/* Bubble tail */}
+          <div
+            style={{
+              position: "absolute",
+              width: "0.75rem",
+              height: "0.75rem",
+              transform: "rotate(45deg)",
+              backgroundColor: isRight ? "#3b82f6" : "#f3f4f6",
+              right: isRight ? "-0.25rem" : undefined,
+              left: isRight ? undefined : "-0.25rem",
+              top: "0.75rem",
+              borderLeft: isRight ? "none" : "1px solid #e5e7eb",
+              borderBottom: isRight ? "none" : "1px solid #e5e7eb",
+            }}
+          />
+
+          {/* Message content */}
+          <OpenAIContent content={content} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatBubble;

package/src/common/openai/OpenAIContent.tsx

@@ -0,0 +1,53 @@
+import { AutoBeUserMessageContent } from "@autobe/interface";
+
+import { OpenAIUserAudioContent } from "./OpenAIUserAudioContent";
+import { OpenAIUserFileContent } from "./OpenAIUserFileContent";
+import { OpenAIUserImageContent } from "./OpenAIUserImageContent";
+import { OpenAIUserTextContent } from "./OpenAIUserTextContent";
+
+export interface IOpenAIUserContentProps {
+  content: Array<AutoBeUserMessageContent | string>;
+}
+
+export const OpenAIContent = (props: IOpenAIUserContentProps) => {
+  const { content } = props;
+
+  /** Renders a single content item */
+  const renderSingleContent = (
+    item: AutoBeUserMessageContent | string,
+    index: number,
+  ) => {
+    if (typeof item === "string") {
+      return <OpenAIUserTextContent key={index} text={item} />;
+    }
+
+    switch (item.type) {
+      case "text":
+        return <OpenAIUserTextContent key={index} text={item.text} />;
+      case "audio":
+        return <OpenAIUserAudioContent key={index} content={item} />;
+      case "file":
+        return <OpenAIUserFileContent key={index} content={item} />;
+      case "image":
+        return <OpenAIUserImageContent key={index} content={item} />;
+      default:
+        return (
+          <OpenAIUserTextContent key={index} text="Unsupported content type" />
+        );
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.75rem",
+      }}
+    >
+      {content.map((item, index) => renderSingleContent(item, index))}
+    </div>
+  );
+};
+
+export default OpenAIContent;

package/src/common/openai/OpenAIUserAudioContent.tsx

@@ -0,0 +1,70 @@
+import { AutoBeUserMessageAudioContent } from "@autobe/interface";
+
+/** Audio content renderer component for OpenAI messages */
+export const OpenAIUserAudioContent = ({
+  content,
+}: {
+  content: AutoBeUserMessageAudioContent;
+}) => {
+  const isRight = true; // UserContent는 항상 오른쪽
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "1rem",
+        minWidth: "6rem",
+        minHeight: "6rem",
+      }}
+    >
+      {/* Audio Icon */}
+      <div
+        style={{
+          width: "2.5rem",
+          height: "2.5rem",
+          borderRadius: "50%",
+          backgroundColor: isRight ? "rgba(255,255,255,0.2)" : "#3b82f6",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginBottom: "0.5rem",
+        }}
+      >
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          style={{ color: isRight ? "#ffffff" : "#ffffff" }}
+        >
+          <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
+        </svg>
+      </div>
+      <div
+        style={{
+          fontSize: "0.7rem",
+          fontWeight: "bold",
+          color: isRight ? "rgba(255,255,255,0.9)" : "#6b7280",
+          textAlign: "center",
+        }}
+      >
+        AUDIO
+      </div>
+      <div
+        style={{
+          fontSize: "0.65rem",
+          color: isRight ? "rgba(255,255,255,0.7)" : "#9ca3af",
+          textAlign: "center",
+          marginTop: "0.25rem",
+        }}
+      >
+        {content.format.toUpperCase()}
+      </div>
+    </div>
+  );
+};
+
+export default OpenAIUserAudioContent;

package/src/common/openai/OpenAIUserFileContent.tsx

@@ -0,0 +1,76 @@
+import { AutoBeUserMessageFileContent } from "@autobe/interface";
+
+/** File content renderer component for OpenAI messages */
+export const OpenAIUserFileContent = ({
+  content,
+}: {
+  content: AutoBeUserMessageFileContent;
+}) => {
+  const isRight = true; // UserContent는 항상 오른쪽
+  const fileName =
+    content.file.type === "base64"
+      ? content.file.name
+      : `File ID: ${content.file.id}`;
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "1rem",
+        minWidth: "8rem",
+        minHeight: "6rem",
+      }}
+    >
+      {/* File Icon */}
+      <div
+        style={{
+          width: "2.5rem",
+          height: "2.5rem",
+          borderRadius: "0.5rem",
+          backgroundColor: isRight ? "rgba(255,255,255,0.2)" : "#10b981",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginBottom: "0.5rem",
+        }}
+      >
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          style={{ color: "#ffffff" }}
+        >
+          <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
+        </svg>
+      </div>
+      <div
+        style={{
+          fontSize: "0.7rem",
+          fontWeight: "bold",
+          color: isRight ? "rgba(255,255,255,0.9)" : "#6b7280",
+          textAlign: "center",
+          marginBottom: "0.25rem",
+        }}
+      >
+        {fileName.split(".").at(-1)?.toUpperCase()} FILE
+      </div>
+      <div
+        style={{
+          fontSize: "0.65rem",
+          color: isRight ? "rgba(255,255,255,0.7)" : "#9ca3af",
+          textAlign: "center",
+          wordBreak: "break-all",
+          maxWidth: "8rem",
+        }}
+      >
+        {fileName}
+      </div>
+    </div>
+  );
+};
+
+export default OpenAIUserFileContent;