@autobe/ui 0.19.1 → 0.20.0

package/lib/utils/AutoBeVoiceRecorder.js

@@ -0,0 +1,94 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoBeVoiceRecorder = void 0;
+const AutoBeFileUploader_1 = require("./AutoBeFileUploader");
+var AutoBeVoiceRecorder;
+(function (AutoBeVoiceRecorder) {
+    AutoBeVoiceRecorder.start = (onComplete) => __awaiter(this, void 0, void 0, function* () {
+        const stream = yield navigator.mediaDevices.getUserMedia({
+            audio: true,
+        });
+        const recorder = new MediaRecorder(stream);
+        const chunks = [];
+        recorder.ondataavailable = (event) => {
+            if (event.data.size > 0)
+                chunks.push(event.data);
+        };
+        recorder.onstop = () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const audioBlob = new Blob(chunks, { type: "audio/webm" });
+                const wavBlob = yield convertToWav(audioBlob);
+                const audioFile = new File([wavBlob], `recording-${Date.now()}.wav`, {
+                    type: "audio/wav",
+                });
+                const base64 = yield AutoBeFileUploader_1.AutoBeFileUploader.convertToBase64(audioFile);
+                const content = {
+                    type: "audio",
+                    data: base64,
+                    format: "wav",
+                };
+                onComplete({
+                    file: audioFile,
+                    content,
+                });
+            }
+            finally {
+                stream.getTracks().forEach((track) => track.stop());
+            }
+        });
+        return recorder;
+    });
+})(AutoBeVoiceRecorder || (exports.AutoBeVoiceRecorder = AutoBeVoiceRecorder = {}));
+const convertToWav = (audioBlob) => __awaiter(void 0, void 0, void 0, function* () {
+    const audioContext = new AudioContext();
+    const arrayBuffer = yield audioBlob.arrayBuffer();
+    const audioBuffer = yield 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, 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" });
+});
+//# sourceMappingURL=AutoBeVoiceRecorder.js.map

package/lib/utils/AutoBeVoiceRecorder.js.map

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

package/lib/utils/index.d.ts

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

package/lib/utils/index.js

@@ -0,0 +1,20 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AutoBeFileUploader"), exports);
+__exportStar(require("./AutoBeVoiceRecorder"), exports);
+__exportStar(require("./time"), exports);
+//# sourceMappingURL=index.js.map

package/lib/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uDAAqC;AACrC,wDAAsC;AACtC,yCAAuB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@autobe/ui",
   "type": "commonjs",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "description": "AutoBE UI",
   "author": "Wrtn Technologies",
   "homepage": "https://wrtnlabs.io/autobe",
@@ -13,13 +13,28 @@
     "url": "https://github.com/wrtnlabs/autobe/issues"
   },
   "main": "lib/index.js",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./utils": {
+      "types": "./src/utils/index.ts",
+      "import": "./src/utils/index.ts"
+    }
+  },
   "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"
+    "@autobe/interface": "0.20.0"
+  },
+  "dependencies": {
+    "@stackblitz/sdk": "^1.11.0",
+    "jszip": "^3.10.1",
+    "tstl": "^3.0.0"
   },
   "scripts": {
     "build": "tsc",

package/src/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/AutoBeFileUploadBox.tsx

@@ -0,0 +1,124 @@
+import { ReactNode, useState } from "react";
+
+export const AutoBeFileUploadBox = (props: AutoBeFileUploadBox.IProps) => {
+  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;
+export namespace AutoBeFileUploadBox {
+  export interface IProps {
+    extensionError: ReactNode | null;
+    onClick: () => void;
+    enabled: boolean;
+  }
+}

package/src/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 2c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2s-2-.9-2-2V4c0-1.1.9-2 2-2zm5.3 6.7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-1.9 1.9c.03.33.05.66.05 1v.5c0 2.8-2.2 5-5 5s-5-2.2-5-5v-.5c0-.34.02-.67.05-1L4.9 10.1c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l1.9 1.9c1.8-1.6 4.3-1.6 6.1 0l1.9-1.9zM19 10.5v.5c0 3.9-3.1 7-7 7s-7-3.1-7-7v-.5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5v.5c0 2.2 1.8 4 4 4s4-1.8 4-4v-.5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5z" />
+        </svg>
+      )}
+    </button>
+  );
+};
+
+export namespace AutoBeVoiceRecoderButton {
+  export interface IProps {
+    enabled: boolean;
+    onComplete: (content: {
+      file: File;
+      content: AutoBeUserMessageAudioContent;
+    }) => void;
+  }
+}