@autobe/ui 0.29.2 → 0.30.0-dev.20260315

package/src/components/common/AutoBeConfigInput.tsx

@@ -1,185 +1,185 @@
-import { CSSProperties } from "react";
-
-export interface IAutoBeConfigInputProps {
-  label: string;
-  value: string | number;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  type?: "text" | "password" | "url" | "number" | "list";
-  icon?: string;
-  suggestions?: Array<{ value: string; label?: string }>;
-  min?: number;
-  max?: number;
-  style?: CSSProperties;
-  disabled?: boolean;
-  required?: boolean;
-}
-
-/**
- * Common input component for configuration forms Supports text, password, url,
- * and number inputs with optional suggestions
- */
-export const AutoBeConfigInput = (props: IAutoBeConfigInputProps) => {
-  const {
-    label,
-    value,
-    onChange,
-    placeholder,
-    type = "text",
-    icon,
-    suggestions,
-    min,
-    max,
-    style,
-    disabled = false,
-    required = false,
-  } = props;
-
-  console.log("suggestions", suggestions);
-  const suggestionId = `suggestions-${label.replace(/\s+/g, "-").toLowerCase()}`;
-
-  // Check if field is required and empty
-  const isEmpty =
-    value === "" || (typeof value === "string" && value.trim() === "");
-  const isRequiredEmpty = required && isEmpty;
-
-  return (
-    <div style={{ ...style }}>
-      <label
-        style={{
-          display: "block",
-          fontSize: "0.875rem",
-          fontWeight: "500",
-          color: isRequiredEmpty ? "#dc3545" : "#374151",
-          marginBottom: "0.5rem",
-        }}
-      >
-        {icon && `${icon} `}
-        {label}
-        {required && (
-          <span style={{ color: "#dc3545", marginLeft: "0.25rem" }}>*</span>
-        )}
-      </label>
-      {type === "list" ? (
-        <select
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={disabled}
-          style={{
-            width: "100%",
-            padding: "0.75rem",
-            border: `1px solid ${isRequiredEmpty ? "#dc3545" : "#d1d5db"}`,
-            borderRadius: "8px",
-            fontSize: "0.875rem",
-            transition: "border-color 0.2s ease",
-            outline: "none",
-            boxSizing: "border-box",
-            backgroundColor: disabled
-              ? "#f9fafb"
-              : isRequiredEmpty
-                ? "#fef2f2"
-                : "white",
-            color: disabled ? "#9ca3af" : "#000000",
-            cursor: disabled ? "not-allowed" : "pointer",
-          }}
-          onFocus={(e) => {
-            if (!disabled && !isRequiredEmpty) {
-              e.currentTarget.style.borderColor = "#3b82f6";
-            }
-          }}
-          onBlur={(e) => {
-            if (!disabled) {
-              const newIsEmpty =
-                e.currentTarget.value === "" ||
-                e.currentTarget.value.trim() === "";
-              const newIsRequiredEmpty = required && newIsEmpty;
-              e.currentTarget.style.borderColor = newIsRequiredEmpty
-                ? "#dc3545"
-                : "#d1d5db";
-            }
-          }}
-        >
-          {placeholder && (
-            <option value="" disabled>
-              {placeholder}
-            </option>
-          )}
-          {suggestions?.map((suggestion, index) => (
-            <option key={index} value={suggestion.value}>
-              {suggestion.label || suggestion.value}
-            </option>
-          ))}
-        </select>
-      ) : (
-        <input
-          type={type}
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder={placeholder}
-          list={suggestions ? suggestionId : undefined}
-          min={min}
-          max={max}
-          disabled={disabled}
-          style={{
-            width: "100%",
-            padding: "0.75rem",
-            border: `1px solid ${isRequiredEmpty ? "#dc3545" : "#d1d5db"}`,
-            borderRadius: "8px",
-            fontSize: "0.875rem",
-            transition: "border-color 0.2s ease",
-            outline: "none",
-            boxSizing: "border-box",
-            backgroundColor: disabled
-              ? "#f9fafb"
-              : isRequiredEmpty
-                ? "#fef2f2"
-                : "white",
-            color: disabled ? "#9ca3af" : "#000000",
-          }}
-          onFocus={(e) => {
-            if (!disabled && !isRequiredEmpty) {
-              e.currentTarget.style.borderColor = "#3b82f6";
-            }
-          }}
-          onBlur={(e) => {
-            if (!disabled) {
-              const newIsEmpty =
-                e.currentTarget.value === "" ||
-                e.currentTarget.value.trim() === "";
-              const newIsRequiredEmpty = required && newIsEmpty;
-              e.currentTarget.style.borderColor = newIsRequiredEmpty
-                ? "#dc3545"
-                : "#d1d5db";
-            }
-          }}
-        />
-      )}
-      {isRequiredEmpty && (
-        <div
-          style={{
-            fontSize: "0.75rem",
-            color: "#dc3545",
-            marginTop: "0.25rem",
-            display: "flex",
-            alignItems: "center",
-            gap: "0.25rem",
-          }}
-        >
-          <span>⚠️</span>
-          This field is required
-        </div>
-      )}
-      {suggestions && type !== "list" && (
-        <datalist id={suggestionId} style={{ cursor: "pointer" }}>
-          {suggestions.map((suggestion, index) => (
-            <option key={index} value={suggestion.value}>
-              {suggestion.label || suggestion.value}
-            </option>
-          ))}
-        </datalist>
-      )}
-    </div>
-  );
-};
-
-export default AutoBeConfigInput;
+import { CSSProperties } from "react";
+
+export interface IAutoBeConfigInputProps {
+  label: string;
+  value: string | number;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  type?: "text" | "password" | "url" | "number" | "list";
+  icon?: string;
+  suggestions?: Array<{ value: string; label?: string }>;
+  min?: number;
+  max?: number;
+  style?: CSSProperties;
+  disabled?: boolean;
+  required?: boolean;
+}
+
+/**
+ * Common input component for configuration forms Supports text, password, url,
+ * and number inputs with optional suggestions
+ */
+export const AutoBeConfigInput = (props: IAutoBeConfigInputProps) => {
+  const {
+    label,
+    value,
+    onChange,
+    placeholder,
+    type = "text",
+    icon,
+    suggestions,
+    min,
+    max,
+    style,
+    disabled = false,
+    required = false,
+  } = props;
+
+  console.log("suggestions", suggestions);
+  const suggestionId = `suggestions-${label.replace(/\s+/g, "-").toLowerCase()}`;
+
+  // Check if field is required and empty
+  const isEmpty =
+    value === "" || (typeof value === "string" && value.trim() === "");
+  const isRequiredEmpty = required && isEmpty;
+
+  return (
+    <div style={{ ...style }}>
+      <label
+        style={{
+          display: "block",
+          fontSize: "0.875rem",
+          fontWeight: "500",
+          color: isRequiredEmpty ? "#dc3545" : "#374151",
+          marginBottom: "0.5rem",
+        }}
+      >
+        {icon && `${icon} `}
+        {label}
+        {required && (
+          <span style={{ color: "#dc3545", marginLeft: "0.25rem" }}>*</span>
+        )}
+      </label>
+      {type === "list" ? (
+        <select
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          disabled={disabled}
+          style={{
+            width: "100%",
+            padding: "0.75rem",
+            border: `1px solid ${isRequiredEmpty ? "#dc3545" : "#d1d5db"}`,
+            borderRadius: "8px",
+            fontSize: "0.875rem",
+            transition: "border-color 0.2s ease",
+            outline: "none",
+            boxSizing: "border-box",
+            backgroundColor: disabled
+              ? "#f9fafb"
+              : isRequiredEmpty
+                ? "#fef2f2"
+                : "white",
+            color: disabled ? "#9ca3af" : "#000000",
+            cursor: disabled ? "not-allowed" : "pointer",
+          }}
+          onFocus={(e) => {
+            if (!disabled && !isRequiredEmpty) {
+              e.currentTarget.style.borderColor = "#3b82f6";
+            }
+          }}
+          onBlur={(e) => {
+            if (!disabled) {
+              const newIsEmpty =
+                e.currentTarget.value === "" ||
+                e.currentTarget.value.trim() === "";
+              const newIsRequiredEmpty = required && newIsEmpty;
+              e.currentTarget.style.borderColor = newIsRequiredEmpty
+                ? "#dc3545"
+                : "#d1d5db";
+            }
+          }}
+        >
+          {placeholder && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
+          {suggestions?.map((suggestion, index) => (
+            <option key={index} value={suggestion.value}>
+              {suggestion.label || suggestion.value}
+            </option>
+          ))}
+        </select>
+      ) : (
+        <input
+          type={type}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          list={suggestions ? suggestionId : undefined}
+          min={min}
+          max={max}
+          disabled={disabled}
+          style={{
+            width: "100%",
+            padding: "0.75rem",
+            border: `1px solid ${isRequiredEmpty ? "#dc3545" : "#d1d5db"}`,
+            borderRadius: "8px",
+            fontSize: "0.875rem",
+            transition: "border-color 0.2s ease",
+            outline: "none",
+            boxSizing: "border-box",
+            backgroundColor: disabled
+              ? "#f9fafb"
+              : isRequiredEmpty
+                ? "#fef2f2"
+                : "white",
+            color: disabled ? "#9ca3af" : "#000000",
+          }}
+          onFocus={(e) => {
+            if (!disabled && !isRequiredEmpty) {
+              e.currentTarget.style.borderColor = "#3b82f6";
+            }
+          }}
+          onBlur={(e) => {
+            if (!disabled) {
+              const newIsEmpty =
+                e.currentTarget.value === "" ||
+                e.currentTarget.value.trim() === "";
+              const newIsRequiredEmpty = required && newIsEmpty;
+              e.currentTarget.style.borderColor = newIsRequiredEmpty
+                ? "#dc3545"
+                : "#d1d5db";
+            }
+          }}
+        />
+      )}
+      {isRequiredEmpty && (
+        <div
+          style={{
+            fontSize: "0.75rem",
+            color: "#dc3545",
+            marginTop: "0.25rem",
+            display: "flex",
+            alignItems: "center",
+            gap: "0.25rem",
+          }}
+        >
+          <span>⚠️</span>
+          This field is required
+        </div>
+      )}
+      {suggestions && type !== "list" && (
+        <datalist id={suggestionId} style={{ cursor: "pointer" }}>
+          {suggestions.map((suggestion, index) => (
+            <option key={index} value={suggestion.value}>
+              {suggestion.label || suggestion.value}
+            </option>
+          ))}
+        </datalist>
+      )}
+    </div>
+  );
+};
+
+export default AutoBeConfigInput;

package/src/components/common/ChatBubble.tsx

@@ -1,119 +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;
+import { AutoBeUserConversateContent } 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<AutoBeUserConversateContent | 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;