@autobe/ui 0.19.1 → 0.21.0

package/src/upload/AutoBeChatUploadSendButton.tsx

@@ -0,0 +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;

package/src/upload/AutoBeFileUploadBox.tsx

@@ -0,0 +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;

package/src/upload/AutoBeUploadConfig.ts

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

package/src/upload/AutoBeVoiceRecoderButton.tsx

@@ -0,0 +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;
+  }
+}

package/src/upload/index.ts

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

package/src/utils/AutoBeFileUploader.ts

@@ -0,0 +1,279 @@
+import {
+  AutoBeUserMessageAudioContent,
+  AutoBeUserMessageFileContent,
+  AutoBeUserMessageImageContent,
+} from "@autobe/interface";
+
+export namespace AutoBeFileUploader {
+  interface IConfig {
+    supportAudio?: boolean;
+    file?: (file: File) => Promise<{ id: string }>;
+    image?: (file: File) => Promise<{ url: string }>;
+  }
+  export const isValidFileExtension = (
+    filename: string,
+    supportAudio: boolean,
+    hasFileUploadAPI: boolean,
+  ): boolean => {
+    const extension = filename
+      .toLowerCase()
+      .substring(filename.lastIndexOf("."));
+    const format: IFileFormat | undefined = FORMATS[extension];
+    if (format === undefined) return false;
+    else if (!supportAudio && format.category === "audio") return false;
+
+    // Without file upload API, only support images, audio (if enabled), and PDF
+    if (!hasFileUploadAPI) {
+      if (format.category === "document") return extension === ".pdf";
+      else if (format.category === "video") return false;
+
+      const allowedCategories: string[] = ["image"];
+      if (supportAudio) allowedCategories.push("audio");
+      return allowedCategories.includes(format.category);
+    }
+    return true;
+  };
+
+  export const getAcceptAttribute = (
+    supportAudio: boolean = false,
+    hasFileUploadAPI: boolean = false,
+  ): string => {
+    const acceptParts = Object.values(FORMATS)
+      .filter((format) => {
+        // Audio filter
+        if (!supportAudio && format.category === "audio") return false;
+
+        // Without file upload API, only allow images, audio (if enabled), and PDF
+        if (!hasFileUploadAPI) {
+          if (format.category === "image") return true;
+          if (format.category === "audio" && supportAudio) return true;
+          if (format.category === "document" && format.extension === ".pdf")
+            return true;
+          return false;
+        }
+        return true;
+      })
+      .map((format) => format.extension);
+    return acceptParts.join(",");
+  };
+
+  export const getMimeType = (filename: string): string => {
+    const extension = filename
+      .toLowerCase()
+      .substring(filename.lastIndexOf("."));
+    const format = FORMATS[extension];
+    return format?.mimeType || "application/octet-stream";
+  };
+  export const compose = async (config: IConfig, file: File) => {
+    // Validate file extension first
+    if (
+      !isValidFileExtension(
+        file.name,
+        config.supportAudio ?? false,
+        !!config.file,
+      )
+    )
+      throw new Error(
+        `Unsupported file format: ${file.name}. ${!config.file ? "Only images, PDF, and audio files (if enabled) are supported without file upload API." : ""}`,
+      );
+
+    // Check for image files
+    const extension = file.name
+      .toLowerCase()
+      .substring(file.name.lastIndexOf("."));
+    const format = FORMATS[extension];
+
+    if (format?.category === "image")
+      return {
+        file,
+        content: await composeImageContent(config, file),
+      };
+    else if (
+      config.supportAudio &&
+      format?.category === "audio" &&
+      AUDIO_MIME_VARIANTS.includes(file.type)
+    )
+      return {
+        file,
+        content: await composeAudioContent(file),
+      };
+    return {
+      file,
+      content: await composeFileContent(config, file),
+    };
+  };
+
+  export const convertToBase64 = (file: File): Promise<string> =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        let data: string = reader.result as string;
+
+        // If browser couldn't determine MIME type properly, replace with correct one
+        if (
+          data.startsWith("data:application/octet-stream") ||
+          data.startsWith("data:;")
+        ) {
+          const mimeType = getMimeType(file.name);
+          data = data.replace(/^data:[^;]*/, `data:${mimeType}`);
+        }
+
+        resolve(data);
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+
+  export const readAsText = (file: File): Promise<string> =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const text = reader.result as string;
+        // Convert text to base64
+        const base64 = btoa(unescape(encodeURIComponent(text)));
+        resolve(base64);
+      };
+      reader.onerror = reject;
+      reader.readAsText(file);
+    });
+
+  const composeImageContent = async (
+    config: IConfig,
+    file: File,
+  ): Promise<AutoBeUserMessageImageContent> => ({
+    type: "image",
+    image: config.image
+      ? {
+          type: "url",
+          url: await config.image(file).then((res) => res.url),
+        }
+      : {
+          type: "base64",
+          data: await convertToBase64(file),
+        },
+  });
+
+  const composeAudioContent = async (
+    file: File,
+  ): Promise<AutoBeUserMessageAudioContent> => ({
+    type: "audio",
+    data: (await convertToBase64(file)).split(",")[1]!,
+    format: file.type.includes("wav") ? "wav" : "mp3",
+  });
+
+  const composeFileContent = async (
+    config: IConfig,
+    file: File,
+  ): Promise<AutoBeUserMessageFileContent> => {
+    // Get MIME type for the file
+    const mimeType = getMimeType(file.name);
+
+    // If file upload API is available, use it
+    if (config.file) {
+      return {
+        type: "file",
+        file: {
+          type: "id",
+          id: await config.file(file).then((res) => res.id),
+        } satisfies AutoBeUserMessageFileContent.IId,
+      };
+    }
+
+    // If MIME type starts with text/, read as text and encode to base64 without data URL
+    if (mimeType.startsWith("text/")) {
+      return {
+        type: "file",
+        file: {
+          type: "base64",
+          name: file.name,
+          data: await readAsText(file),
+        } satisfies AutoBeUserMessageFileContent.IBase64,
+      };
+    }
+
+    // For other files, use data URL format
+    return {
+      type: "file",
+      file: {
+        type: "base64",
+        name: file.name,
+        data: await convertToBase64(file),
+      } satisfies AutoBeUserMessageFileContent.IBase64,
+    };
+  };
+}
+
+interface IFileFormat {
+  extension: string;
+  mimeType: string;
+  category: "image" | "audio" | "video" | "document";
+}
+
+const FORMATS: Record<string, IFileFormat> = {
+  // Images
+  ".png": { extension: ".png", mimeType: "image/png", category: "image" },
+  ".jpg": { extension: ".jpg", mimeType: "image/jpeg", category: "image" },
+  ".jpeg": { extension: ".jpeg", mimeType: "image/jpeg", category: "image" },
+  ".gif": { extension: ".gif", mimeType: "image/gif", category: "image" },
+  ".webp": { extension: ".webp", mimeType: "image/webp", category: "image" },
+
+  // Audio
+  ".mp3": { extension: ".mp3", mimeType: "audio/mpeg", category: "audio" },
+  ".wav": { extension: ".wav", mimeType: "audio/wav", category: "audio" },
+
+  // Video
+  ".mp4": { extension: ".mp4", mimeType: "video/mp4", category: "video" },
+  ".mpeg": { extension: ".mpeg", mimeType: "video/mpeg", category: "video" },
+  ".mov": { extension: ".mov", mimeType: "video/quicktime", category: "video" },
+  ".avi": { extension: ".avi", mimeType: "video/x-msvideo", category: "video" },
+  ".webm": { extension: ".webm", mimeType: "video/webm", category: "video" },
+  ".flv": { extension: ".flv", mimeType: "video/x-flv", category: "video" },
+  ".mkv": {
+    extension: ".mkv",
+    mimeType: "video/x-matroska",
+    category: "video",
+  },
+  ".wmv": { extension: ".wmv", mimeType: "video/x-ms-wmv", category: "video" },
+
+  // Documents
+  ".pdf": {
+    extension: ".pdf",
+    mimeType: "application/pdf",
+    category: "document",
+  },
+  ".txt": { extension: ".txt", mimeType: "text/plain", category: "document" },
+  ".md": { extension: ".md", mimeType: "text/plain", category: "document" },
+  ".docx": {
+    extension: ".docx",
+    mimeType:
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    category: "document",
+  },
+  ".html": { extension: ".html", mimeType: "text/html", category: "document" },
+  ".json": {
+    extension: ".json",
+    mimeType: "application/json",
+    category: "document",
+  },
+  ".csv": { extension: ".csv", mimeType: "text/csv", category: "document" },
+  ".xml": {
+    extension: ".xml",
+    mimeType: "application/xml",
+    category: "document",
+  },
+  ".rtf": {
+    extension: ".rtf",
+    mimeType: "application/rtf",
+    category: "document",
+  },
+};
+
+// Alternative MIME types for audio files that browsers might use
+const AUDIO_MIME_VARIANTS = [
+  "audio/mpeg",
+  "audio/mp3",
+  "audio/wav",
+  "audio/x-wav",
+  "audio/wave",
+  "audio/x-wave",
+];

package/src/utils/AutoBeVoiceRecorder.ts

@@ -0,0 +1,95 @@
+import { AutoBeUserMessageAudioContent } from "@autobe/interface";
+
+import { AutoBeFileUploader } from "./AutoBeFileUploader";
+
+export namespace AutoBeVoiceRecorder {
+  export const start = async (
+    onComplete: (content: {
+      file: File;
+      content: AutoBeUserMessageAudioContent;
+    }) => void,
+  ): Promise<MediaRecorder> => {
+    const stream: MediaStream = await navigator.mediaDevices.getUserMedia({
+      audio: true,
+    });
+    const recorder: MediaRecorder = new MediaRecorder(stream);
+    const chunks: Blob[] = [];
+
+    recorder.ondataavailable = (event) => {
+      if (event.data.size > 0) chunks.push(event.data);
+    };
+    recorder.onstop = async () => {
+      try {
+        const audioBlob = new Blob(chunks, { type: "audio/webm" });
+        const wavBlob = await convertToWav(audioBlob);
+        const audioFile = new File([wavBlob], `recording-${Date.now()}.wav`, {
+          type: "audio/wav",
+        });
+
+        const base64 = await AutoBeFileUploader.convertToBase64(audioFile);
+        const content: AutoBeUserMessageAudioContent = {
+          type: "audio",
+          data: base64,
+          format: "wav",
+        };
+        onComplete({
+          file: audioFile,
+          content,
+        });
+      } finally {
+        stream.getTracks().forEach((track) => track.stop());
+      }
+    };
+    return recorder;
+  };
+}
+
+const convertToWav = async (audioBlob: Blob): Promise<Blob> => {
+  const audioContext = new AudioContext();
+  const arrayBuffer = await audioBlob.arrayBuffer();
+  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+
+  // Create WAV file
+  const length = audioBuffer.length;
+  const sampleRate = audioBuffer.sampleRate;
+  const numberOfChannels = audioBuffer.numberOfChannels;
+
+  // Calculate WAV file size
+  const wavLength = 44 + length * numberOfChannels * 2;
+  const buffer = new ArrayBuffer(wavLength);
+  const view = new DataView(buffer);
+
+  // WAV file header
+  const writeString = (offset: number, string: string) => {
+    for (let i = 0; i < string.length; i++) {
+      view.setUint8(offset + i, string.charCodeAt(i));
+    }
+  };
+
+  writeString(0, "RIFF");
+  view.setUint32(4, wavLength - 8, true);
+  writeString(8, "WAVE");
+  writeString(12, "fmt ");
+  view.setUint32(16, 16, true); // fmt chunk size
+  view.setUint16(20, 1, true); // PCM format
+  view.setUint16(22, numberOfChannels, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * numberOfChannels * 2, true); // byte rate
+  view.setUint16(32, numberOfChannels * 2, true); // block align
+  view.setUint16(34, 16, true); // bits per sample
+  writeString(36, "data");
+  view.setUint32(40, length * numberOfChannels * 2, true);
+
+  // Write audio data
+  let offset = 44;
+  for (let i = 0; i < length; i++) {
+    for (let channel = 0; channel < numberOfChannels; channel++) {
+      const sample = audioBuffer.getChannelData(channel)[i]!;
+      const value = Math.max(-1, Math.min(1, sample));
+      view.setInt16(offset, value * 0x7fff, true);
+      offset += 2;
+    }
+  }
+
+  return new Blob([buffer], { type: "audio/wav" });
+};

package/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from "./AutoBeFileUploader";
+export * from "./AutoBeVoiceRecorder";
+export * from "./time";
+export * from "./number";

package/src/utils/number.ts

@@ -0,0 +1,17 @@
+export const toCompactNumberFormat = (value: number) => {
+  const units = [
+    { value: 1_000_000_000_000_000, symbol: "Q" },
+    { value: 1_000_000_000_000, symbol: "T" },
+    { value: 1_000_000_000, symbol: "B" },
+    { value: 1_000_000, symbol: "M" },
+    { value: 1_000, symbol: "K" },
+  ];
+
+  for (const unit of units) {
+    if (value >= unit.value) {
+      return (value / unit.value).toFixed(1) + unit.symbol;
+    }
+  }
+
+  return value.toString();
+};