@autobe/ui 0.29.2 → 0.30.0-dev.20260315

package/src/components/upload/AutoBeChatUploadSendButton.tsx

@@ -1,66 +1,66 @@
-/** Props interface for AutoBeChatUploadSendButton component */
-interface IAutoBeChatUploadSendButtonProps {
-  /** Function to trigger conversation */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
-  /** Whether the button is enabled */
-  enabled: boolean;
-}
-
-/**
- * Chat upload send button component for triggering conversations
- *
- * @param props - Component props
- * @returns JSX element representing the send button
- */
-export const AutoBeChatUploadSendButton = (
-  props: IAutoBeChatUploadSendButtonProps,
-) => {
-  const baseStyles: React.CSSProperties = {
-    padding: "6px",
-    border: "none",
-    borderRadius: "50%", // 4px에서 50%로 변경하여 둥글게
-    backgroundColor: props.enabled ? "#1976d2" : "#e0e0e0",
-    color: props.enabled ? "#ffffff" : "#9e9e9e",
-    cursor: props.enabled ? "pointer" : "not-allowed",
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    transition: "background-color 0.3s ease",
-    outline: "none",
-    width: "32px",
-    height: "32px",
-  };
-
-  const hoverStyles: React.CSSProperties = {
-    ...baseStyles,
-    backgroundColor: props.enabled ? "#1565c0" : "#e0e0e0",
-  };
-
-  return (
-    <button
-      style={baseStyles}
-      onClick={(e) => void props.onClick?.(e)}
-      disabled={!props.enabled}
-      onMouseEnter={(e) => {
-        if (props.enabled) {
-          Object.assign(e.currentTarget.style, hoverStyles);
-        }
-      }}
-      onMouseLeave={(e) => {
-        Object.assign(e.currentTarget.style, baseStyles);
-      }}
-    >
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        style={{ display: "block" }}
-      >
-        <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.59 5.58L20 12l-8-8-8 8z" />
-      </svg>
-    </button>
-  );
-};
-
-export default AutoBeChatUploadSendButton;
+/** Props interface for AutoBeChatUploadSendButton component */
+interface IAutoBeChatUploadSendButtonProps {
+  /** Function to trigger conversation */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
+  /** Whether the button is enabled */
+  enabled: boolean;
+}
+
+/**
+ * Chat upload send button component for triggering conversations
+ *
+ * @param props - Component props
+ * @returns JSX element representing the send button
+ */
+export const AutoBeChatUploadSendButton = (
+  props: IAutoBeChatUploadSendButtonProps,
+) => {
+  const baseStyles: React.CSSProperties = {
+    padding: "6px",
+    border: "none",
+    borderRadius: "50%",
+    backgroundColor: props.enabled ? "#1976d2" : "#e0e0e0",
+    color: props.enabled ? "#ffffff" : "#9e9e9e",
+    cursor: props.enabled ? "pointer" : "not-allowed",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "background-color 0.3s ease",
+    outline: "none",
+    width: "32px",
+    height: "32px",
+  };
+
+  const hoverStyles: React.CSSProperties = {
+    ...baseStyles,
+    backgroundColor: props.enabled ? "#1565c0" : "#e0e0e0",
+  };
+
+  return (
+    <button
+      style={baseStyles}
+      onClick={(e) => void props.onClick?.(e)}
+      disabled={!props.enabled}
+      onMouseEnter={(e) => {
+        if (props.enabled) {
+          Object.assign(e.currentTarget.style, hoverStyles);
+        }
+      }}
+      onMouseLeave={(e) => {
+        Object.assign(e.currentTarget.style, baseStyles);
+      }}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        style={{ display: "block" }}
+      >
+        <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.59 5.58L20 12l-8-8-8 8z" />
+      </svg>
+    </button>
+  );
+};
+
+export default AutoBeChatUploadSendButton;

package/src/components/upload/AutoBeFileUploadBox.tsx

@@ -1,123 +1,123 @@
-import { ReactNode, useState } from "react";
-
-export interface IAutoBeFileUploadBoxProps {
-  extensionError: ReactNode | null;
-  onClick: () => void;
-  enabled: boolean;
-}
-
-export const AutoBeFileUploadBox = (props: IAutoBeFileUploadBoxProps) => {
-  const [isHovered, setIsHovered] = useState(false);
-
-  const hasError = !!props.extensionError;
-
-  const getButtonStyles = () => {
-    const baseStyles = {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      width: "40px",
-      height: "40px",
-      padding: "0",
-      border: "1px solid",
-      borderRadius: "50%",
-      cursor: props.enabled ? "pointer" : "not-allowed",
-      backgroundColor: hasError ? "#fef2f2" : "transparent",
-      borderColor: hasError ? "#f87171" : isHovered ? "#3b82f6" : "#d1d5db",
-      opacity: props.enabled ? 1 : 0.5,
-      transition: "all 0.3s ease",
-      position: "relative" as const,
-    };
-
-    if (isHovered && props.enabled) {
-      return {
-        ...baseStyles,
-        backgroundColor: hasError ? "#fef2f2" : "#f3f4f6",
-        borderColor: hasError ? "#f87171" : "#3b82f6",
-      };
-    }
-
-    return baseStyles;
-  };
-
-  const iconColor = hasError ? "#ef4444" : "#6b7280";
-
-  return (
-    <div style={{ position: "relative", display: "inline-block" }}>
-      <button
-        onClick={props.onClick}
-        disabled={!props.enabled}
-        style={getButtonStyles()}
-        onMouseEnter={() => {
-          setIsHovered(true);
-        }}
-        onMouseLeave={() => {
-          setIsHovered(false);
-        }}
-      >
-        {hasError ? (
-          // Error Icon (SVG)
-          <svg
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            style={{ color: iconColor }}
-          >
-            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
-          </svg>
-        ) : (
-          // Add Icon (SVG)
-          <svg
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            style={{ color: iconColor }}
-          >
-            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-          </svg>
-        )}
-      </button>
-
-      {/* Custom Tooltip - Always show when there's an error */}
-      {hasError && (
-        <div
-          style={{
-            position: "absolute",
-            bottom: "100%",
-            left: "50%",
-            transform: "translateX(-50%)",
-            marginBottom: "8px",
-            padding: "8px 12px",
-            backgroundColor: "#ef4444",
-            color: "#ffffff",
-            borderRadius: "6px",
-            fontSize: "14px",
-            whiteSpace: "nowrap",
-            zIndex: 1000,
-            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-          }}
-        >
-          {props.extensionError}
-          {/* Tooltip Arrow */}
-          <div
-            style={{
-              position: "absolute",
-              top: "100%",
-              left: "50%",
-              transform: "translateX(-50%)",
-              width: 0,
-              height: 0,
-              borderLeft: "6px solid transparent",
-              borderRight: "6px solid transparent",
-              borderTop: "6px solid #ef4444",
-            }}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default AutoBeFileUploadBox;
+import { ReactNode, useState } from "react";
+
+export interface IAutoBeFileUploadBoxProps {
+  extensionError: ReactNode | null;
+  onClick: () => void;
+  enabled: boolean;
+}
+
+export const AutoBeFileUploadBox = (props: IAutoBeFileUploadBoxProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const hasError = !!props.extensionError;
+
+  const getButtonStyles = () => {
+    const baseStyles = {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "40px",
+      height: "40px",
+      padding: "0",
+      border: "1px solid",
+      borderRadius: "50%",
+      cursor: props.enabled ? "pointer" : "not-allowed",
+      backgroundColor: hasError ? "#fef2f2" : "transparent",
+      borderColor: hasError ? "#f87171" : isHovered ? "#3b82f6" : "#d1d5db",
+      opacity: props.enabled ? 1 : 0.5,
+      transition: "all 0.3s ease",
+      position: "relative" as const,
+    };
+
+    if (isHovered && props.enabled) {
+      return {
+        ...baseStyles,
+        backgroundColor: hasError ? "#fef2f2" : "#f3f4f6",
+        borderColor: hasError ? "#f87171" : "#3b82f6",
+      };
+    }
+
+    return baseStyles;
+  };
+
+  const iconColor = hasError ? "#ef4444" : "#6b7280";
+
+  return (
+    <div style={{ position: "relative", display: "inline-block" }}>
+      <button
+        onClick={props.onClick}
+        disabled={!props.enabled}
+        style={getButtonStyles()}
+        onMouseEnter={() => {
+          setIsHovered(true);
+        }}
+        onMouseLeave={() => {
+          setIsHovered(false);
+        }}
+      >
+        {hasError ? (
+          // Error Icon (SVG)
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            style={{ color: iconColor }}
+          >
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
+          </svg>
+        ) : (
+          // Add Icon (SVG)
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            style={{ color: iconColor }}
+          >
+            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+          </svg>
+        )}
+      </button>
+
+      {/* Custom Tooltip - Always show when there's an error */}
+      {hasError && (
+        <div
+          style={{
+            position: "absolute",
+            bottom: "100%",
+            left: "50%",
+            transform: "translateX(-50%)",
+            marginBottom: "8px",
+            padding: "8px 12px",
+            backgroundColor: "#ef4444",
+            color: "#ffffff",
+            borderRadius: "6px",
+            fontSize: "14px",
+            whiteSpace: "nowrap",
+            zIndex: 1000,
+            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+          }}
+        >
+          {props.extensionError}
+          {/* Tooltip Arrow */}
+          <div
+            style={{
+              position: "absolute",
+              top: "100%",
+              left: "50%",
+              transform: "translateX(-50%)",
+              width: 0,
+              height: 0,
+              borderLeft: "6px solid transparent",
+              borderRight: "6px solid transparent",
+              borderTop: "6px solid #ef4444",
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AutoBeFileUploadBox;

package/src/components/upload/AutoBeUploadConfig.ts

@@ -1,5 +1,5 @@
-export interface IAutoBeUploadConfig {
-  supportAudio?: boolean;
-  file?: (file: File) => Promise<{ id: string }>;
-  image?: (file: File) => Promise<{ url: string }>;
-}
+export interface IAutoBeUploadConfig {
+  supportAudio?: boolean;
+  file?: (file: File) => Promise<{ id: string }>;
+  image?: (file: File) => Promise<{ url: string }>;
+}

package/src/components/upload/AutoBeVoiceRecoderButton.tsx

@@ -1,100 +1,100 @@
-import { AutoBeUserMessageAudioContent } from "@autobe/interface";
-import { useState } from "react";
-
-import { AutoBeVoiceRecorder } from "../../utils/AutoBeVoiceRecorder";
-
-export const AutoBeVoiceRecoderButton = (
-  props: AutoBeVoiceRecoderButton.IProps,
-) => {
-  const [isRecording, setIsRecording] = useState(false);
-  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(
-    null,
-  );
-
-  const startRecording = async () => {
-    const recorder = await AutoBeVoiceRecorder.start(props.onComplete);
-    recorder.start();
-    setMediaRecorder(recorder);
-    setIsRecording(true);
-  };
-
-  const stopRecording = () => {
-    if (mediaRecorder && mediaRecorder.state !== "inactive") {
-      mediaRecorder.stop();
-      setIsRecording(false);
-    }
-  };
-
-  const baseStyles: React.CSSProperties = {
-    padding: "6px",
-    border: "1px solid",
-    borderColor: isRecording ? "#f44336" : "#e0e0e0",
-    borderRadius: "4px",
-    backgroundColor: isRecording ? "#ffebee" : "transparent",
-    color: isRecording ? "#f44336" : "#1976d2",
-    cursor: props.enabled ? "pointer" : "not-allowed",
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    transition: "all 0.3s ease",
-    outline: "none",
-    width: "32px",
-    height: "32px",
-    opacity: props.enabled ? 1 : 0.5,
-  };
-
-  const hoverStyles: React.CSSProperties = {
-    ...baseStyles,
-    backgroundColor: isRecording ? "#f44336" : "#f5f5f5",
-    borderColor: isRecording ? "#d32f2f" : "#1976d2",
-    color: isRecording ? "#ffffff" : "#1976d2",
-  };
-
-  return (
-    <button
-      style={baseStyles}
-      onClick={isRecording ? stopRecording : () => void startRecording()}
-      disabled={!props.enabled}
-      onMouseEnter={(e) => {
-        if (props.enabled) {
-          Object.assign(e.currentTarget.style, hoverStyles);
-        }
-      }}
-      onMouseLeave={(e) => {
-        Object.assign(e.currentTarget.style, baseStyles);
-      }}
-    >
-      {isRecording ? (
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          style={{ display: "block" }}
-        >
-          <path d="M6 6h12v12H6z" />
-        </svg>
-      ) : (
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          style={{ display: "block" }}
-        >
-          <path d="M12 2C13.1 2 14 2.9 14 4V10C14 11.1 13.1 12 12 12C10.9 12 10 11.1 10 10V4C10 2.9 10.9 2 12 2ZM19 10V12C19 15.866 15.866 19 12 19C8.134 19 5 15.866 5 12V10H7V12C7 14.761 9.239 17 12 17C14.761 17 17 14.761 17 12V10H19ZM11 20V22H13V20H16V22H8V20H11Z" />
-        </svg>
-      )}
-    </button>
-  );
-};
-
-export namespace AutoBeVoiceRecoderButton {
-  export interface IProps {
-    enabled: boolean;
-    onComplete: (content: {
-      file: File;
-      content: AutoBeUserMessageAudioContent;
-    }) => void;
-  }
-}
+import { AutoBeUserMessageAudioContent } from "@autobe/interface";
+import { useState } from "react";
+
+import { AutoBeVoiceRecorder } from "../../utils/AutoBeVoiceRecorder";
+
+export const AutoBeVoiceRecoderButton = (
+  props: AutoBeVoiceRecoderButton.IProps,
+) => {
+  const [isRecording, setIsRecording] = useState(false);
+  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(
+    null,
+  );
+
+  const startRecording = async () => {
+    const recorder = await AutoBeVoiceRecorder.start(props.onComplete);
+    recorder.start();
+    setMediaRecorder(recorder);
+    setIsRecording(true);
+  };
+
+  const stopRecording = () => {
+    if (mediaRecorder && mediaRecorder.state !== "inactive") {
+      mediaRecorder.stop();
+      setIsRecording(false);
+    }
+  };
+
+  const baseStyles: React.CSSProperties = {
+    padding: "6px",
+    border: "1px solid",
+    borderColor: isRecording ? "#f44336" : "#e0e0e0",
+    borderRadius: "4px",
+    backgroundColor: isRecording ? "#ffebee" : "transparent",
+    color: isRecording ? "#f44336" : "#1976d2",
+    cursor: props.enabled ? "pointer" : "not-allowed",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "all 0.3s ease",
+    outline: "none",
+    width: "32px",
+    height: "32px",
+    opacity: props.enabled ? 1 : 0.5,
+  };
+
+  const hoverStyles: React.CSSProperties = {
+    ...baseStyles,
+    backgroundColor: isRecording ? "#f44336" : "#f5f5f5",
+    borderColor: isRecording ? "#d32f2f" : "#1976d2",
+    color: isRecording ? "#ffffff" : "#1976d2",
+  };
+
+  return (
+    <button
+      style={baseStyles}
+      onClick={isRecording ? stopRecording : () => void startRecording()}
+      disabled={!props.enabled}
+      onMouseEnter={(e) => {
+        if (props.enabled) {
+          Object.assign(e.currentTarget.style, hoverStyles);
+        }
+      }}
+      onMouseLeave={(e) => {
+        Object.assign(e.currentTarget.style, baseStyles);
+      }}
+    >
+      {isRecording ? (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          style={{ display: "block" }}
+        >
+          <path d="M6 6h12v12H6z" />
+        </svg>
+      ) : (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          style={{ display: "block" }}
+        >
+          <path d="M12 2C13.1 2 14 2.9 14 4V10C14 11.1 13.1 12 12 12C10.9 12 10 11.1 10 10V4C10 2.9 10.9 2 12 2ZM19 10V12C19 15.866 15.866 19 12 19C8.134 19 5 15.866 5 12V10H7V12C7 14.761 9.239 17 12 17C14.761 17 17 14.761 17 12V10H19ZM11 20V22H13V20H16V22H8V20H11Z" />
+        </svg>
+      )}
+    </button>
+  );
+};
+
+export namespace AutoBeVoiceRecoderButton {
+  export interface IProps {
+    enabled: boolean;
+    onComplete: (content: {
+      file: File;
+      content: AutoBeUserMessageAudioContent;
+    }) => void;
+  }
+}

package/src/components/upload/index.ts

@@ -1,5 +1,5 @@
-export * from "./AutoBeFileUploadBox";
-export * from "./AutoBeVoiceRecoderButton";
-export * from "./AutoBeChatUploadBox";
-export * from "./AutoBeChatUploadSendButton";
-export * from "./AutoBeUploadConfig";
+export * from "./AutoBeFileUploadBox";
+export * from "./AutoBeVoiceRecoderButton";
+export * from "./AutoBeChatUploadBox";
+export * from "./AutoBeChatUploadSendButton";
+export * from "./AutoBeUploadConfig";

package/src/constant/color.ts

@@ -1,28 +1,28 @@
-/** Color tokens for consistent styling */
-export const COLORS = {
-  // Gray scale
-  GRAY_BORDER: "#d1d5db",
-  GRAY_BACKGROUND: "#f9fafb",
-  GRAY_BORDER_LIGHT: "#e5e7eb",
-  GRAY_TEXT_DARK: "#1f2937",
-  GRAY_TEXT_MEDIUM: "#4b5563",
-
-  // Token value colors
-  TOKEN_INPUT: "#2563eb", // Blue
-  TOKEN_OUTPUT: "#16a34a", // Green
-  TOKEN_TOTAL: "#9333ea", // Purple
-
-  // Table colors
-  TABLE_BORDER: "#eee",
-  TABLE_BORDER_THICK: "#ddd",
-  TABLE_HEADER_BG: "#f5f5f5",
-} as const;
-
-/** Shadow styles */
-export const SHADOWS = {
-  CARD: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-  BANNER: "0 1px 2px 0 rgba(0, 0, 0, 0.1)",
-  STRONG: "0 4px 12px 0 rgba(0, 0, 0, 0.15)",
-  BUTTON: "0 2px 8px 0 rgba(0, 0, 0, 0.12)",
-  BUTTON_HOVER: "0 4px 16px 0 rgba(0, 0, 0, 0.2)",
-} as const;
+/** Color tokens for consistent styling */
+export const COLORS = {
+  // Gray scale
+  GRAY_BORDER: "#d1d5db",
+  GRAY_BACKGROUND: "#f9fafb",
+  GRAY_BORDER_LIGHT: "#e5e7eb",
+  GRAY_TEXT_DARK: "#1f2937",
+  GRAY_TEXT_MEDIUM: "#4b5563",
+
+  // Token value colors
+  TOKEN_INPUT: "#2563eb", // Blue
+  TOKEN_OUTPUT: "#16a34a", // Green
+  TOKEN_TOTAL: "#9333ea", // Purple
+
+  // Table colors
+  TABLE_BORDER: "#eee",
+  TABLE_BORDER_THICK: "#ddd",
+  TABLE_HEADER_BG: "#f5f5f5",
+} as const;
+
+/** Shadow styles */
+export const SHADOWS = {
+  CARD: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+  BANNER: "0 1px 2px 0 rgba(0, 0, 0, 0.1)",
+  STRONG: "0 4px 12px 0 rgba(0, 0, 0, 0.15)",
+  BUTTON: "0 2px 8px 0 rgba(0, 0, 0, 0.12)",
+  BUTTON_HOVER: "0 4px 16px 0 rgba(0, 0, 0, 0.2)",
+} as const;