@autobe/ui 0.30.3 → 0.30.4-dev.20260324

package/src/components/common/openai/OpenAIUserAudioContent.tsx

@@ -1,70 +1,70 @@
-import { AutoBeUserMessageAudioContent } from "@autobe/interface";
-
-/** Audio content renderer component for OpenAI messages */
-export const OpenAIUserAudioContent = ({
-  content,
-}: {
-  content: AutoBeUserMessageAudioContent;
-}) => {
-  const isRight = true;
-
-  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;
+import { AutoBeUserMessageAudioContent } from "@autobe/interface";
+
+/** Audio content renderer component for OpenAI messages */
+export const OpenAIUserAudioContent = ({
+  content,
+}: {
+  content: AutoBeUserMessageAudioContent;
+}) => {
+  const isRight = true;
+
+  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/components/common/openai/OpenAIUserFileContent.tsx

@@ -1,76 +1,76 @@
-import { AutoBeUserMessageFileContent } from "@autobe/interface";
-
-/** File content renderer component for OpenAI messages */
-export const OpenAIUserFileContent = ({
-  content,
-}: {
-  content: AutoBeUserMessageFileContent;
-}) => {
-  const isRight = true;
-  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;
+import { AutoBeUserMessageFileContent } from "@autobe/interface";
+
+/** File content renderer component for OpenAI messages */
+export const OpenAIUserFileContent = ({
+  content,
+}: {
+  content: AutoBeUserMessageFileContent;
+}) => {
+  const isRight = true;
+  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;

package/src/components/common/openai/OpenAIUserImageContent.tsx

@@ -1,34 +1,34 @@
-import { AutoBeUserImageConversateContent } from "@autobe/interface";
-
-/** Image content renderer component for OpenAI messages */
-export const OpenAIUserImageContent = ({
-  content,
-}: {
-  content: AutoBeUserImageConversateContent;
-}) => {
-  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;
+import { AutoBeUserImageConversateContent } from "@autobe/interface";
+
+/** Image content renderer component for OpenAI messages */
+export const OpenAIUserImageContent = ({
+  content,
+}: {
+  content: AutoBeUserImageConversateContent;
+}) => {
+  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/components/common/openai/OpenAIUserTextContent.tsx

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