@autobe/ui 0.19.1 → 0.21.0

package/lib/upload/index.js

@@ -0,0 +1,22 @@
+"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("./AutoBeFileUploadBox"), exports);
+__exportStar(require("./AutoBeVoiceRecoderButton"), exports);
+__exportStar(require("./AutoBeChatUploadBox"), exports);
+__exportStar(require("./AutoBeChatUploadSendButton"), exports);
+__exportStar(require("./AutoBeUploadConfig"), exports);
+//# sourceMappingURL=index.js.map

package/lib/upload/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/upload/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,wDAAsC;AACtC,6DAA2C;AAC3C,wDAAsC;AACtC,+DAA6C;AAC7C,uDAAqC"}

package/lib/utils/AutoBeFileUploader.d.ts

@@ -0,0 +1,28 @@
+import { AutoBeUserMessageAudioContent, AutoBeUserMessageFileContent, AutoBeUserMessageImageContent } from "@autobe/interface";
+export declare 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;
+    export const getAcceptAttribute: (supportAudio?: boolean, hasFileUploadAPI?: boolean) => string;
+    export const getMimeType: (filename: string) => string;
+    export const compose: (config: IConfig, file: File) => Promise<{
+        file: File;
+        content: AutoBeUserMessageImageContent;
+    } | {
+        file: File;
+        content: AutoBeUserMessageAudioContent;
+    } | {
+        file: File;
+        content: AutoBeUserMessageFileContent;
+    }>;
+    export const convertToBase64: (file: File) => Promise<string>;
+    export const readAsText: (file: File) => Promise<string>;
+    export {};
+}

package/lib/utils/AutoBeFileUploader.js

@@ -0,0 +1,237 @@
+"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.AutoBeFileUploader = void 0;
+var AutoBeFileUploader;
+(function (AutoBeFileUploader) {
+    AutoBeFileUploader.isValidFileExtension = (filename, supportAudio, hasFileUploadAPI) => {
+        const extension = filename
+            .toLowerCase()
+            .substring(filename.lastIndexOf("."));
+        const format = 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 = ["image"];
+            if (supportAudio)
+                allowedCategories.push("audio");
+            return allowedCategories.includes(format.category);
+        }
+        return true;
+    };
+    AutoBeFileUploader.getAcceptAttribute = (supportAudio = false, hasFileUploadAPI = false) => {
+        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(",");
+    };
+    AutoBeFileUploader.getMimeType = (filename) => {
+        const extension = filename
+            .toLowerCase()
+            .substring(filename.lastIndexOf("."));
+        const format = FORMATS[extension];
+        return (format === null || format === void 0 ? void 0 : format.mimeType) || "application/octet-stream";
+    };
+    AutoBeFileUploader.compose = (config, file) => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        // Validate file extension first
+        if (!AutoBeFileUploader.isValidFileExtension(file.name, (_a = config.supportAudio) !== null && _a !== void 0 ? _a : 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 === null || format === void 0 ? void 0 : format.category) === "image")
+            return {
+                file,
+                content: yield composeImageContent(config, file),
+            };
+        else if (config.supportAudio &&
+            (format === null || format === void 0 ? void 0 : format.category) === "audio" &&
+            AUDIO_MIME_VARIANTS.includes(file.type))
+            return {
+                file,
+                content: yield composeAudioContent(file),
+            };
+        return {
+            file,
+            content: yield composeFileContent(config, file),
+        };
+    });
+    AutoBeFileUploader.convertToBase64 = (file) => new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            let data = reader.result;
+            // If browser couldn't determine MIME type properly, replace with correct one
+            if (data.startsWith("data:application/octet-stream") ||
+                data.startsWith("data:;")) {
+                const mimeType = AutoBeFileUploader.getMimeType(file.name);
+                data = data.replace(/^data:[^;]*/, `data:${mimeType}`);
+            }
+            resolve(data);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+    AutoBeFileUploader.readAsText = (file) => new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            const text = reader.result;
+            // Convert text to base64
+            const base64 = btoa(unescape(encodeURIComponent(text)));
+            resolve(base64);
+        };
+        reader.onerror = reject;
+        reader.readAsText(file);
+    });
+    const composeImageContent = (config, file) => __awaiter(this, void 0, void 0, function* () {
+        return ({
+            type: "image",
+            image: config.image
+                ? {
+                    type: "url",
+                    url: yield config.image(file).then((res) => res.url),
+                }
+                : {
+                    type: "base64",
+                    data: yield AutoBeFileUploader.convertToBase64(file),
+                },
+        });
+    });
+    const composeAudioContent = (file) => __awaiter(this, void 0, void 0, function* () {
+        return ({
+            type: "audio",
+            data: (yield AutoBeFileUploader.convertToBase64(file)).split(",")[1],
+            format: file.type.includes("wav") ? "wav" : "mp3",
+        });
+    });
+    const composeFileContent = (config, file) => __awaiter(this, void 0, void 0, function* () {
+        // Get MIME type for the file
+        const mimeType = AutoBeFileUploader.getMimeType(file.name);
+        // If file upload API is available, use it
+        if (config.file) {
+            return {
+                type: "file",
+                file: {
+                    type: "id",
+                    id: yield config.file(file).then((res) => res.id),
+                },
+            };
+        }
+        // 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: yield AutoBeFileUploader.readAsText(file),
+                },
+            };
+        }
+        // For other files, use data URL format
+        return {
+            type: "file",
+            file: {
+                type: "base64",
+                name: file.name,
+                data: yield AutoBeFileUploader.convertToBase64(file),
+            },
+        };
+    });
+})(AutoBeFileUploader || (exports.AutoBeFileUploader = AutoBeFileUploader = {}));
+const FORMATS = {
+    // 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",
+];
+//# sourceMappingURL=AutoBeFileUploader.js.map

package/lib/utils/AutoBeFileUploader.js.map

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

package/lib/utils/AutoBeVoiceRecorder.d.ts

@@ -0,0 +1,7 @@
+import { AutoBeUserMessageAudioContent } from "@autobe/interface";
+export declare namespace AutoBeVoiceRecorder {
+    const start: (onComplete: (content: {
+        file: File;
+        content: AutoBeUserMessageAudioContent;
+    }) => void) => Promise<MediaRecorder>;
+}

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":";;;;;;;;;;;;AAEA,6DAA0D;AAE1D,IAAiB,mBAAmB,CAwCnC;AAxCD,WAAiB,mBAAmB;IACrB,yBAAK,GAAG,CACnB,UAGU,EACc,EAAE;QAC1B,MAAM,MAAM,GAAgB,MAAM,SAAS,CAAC,YAAY,CAAC,YAAY,CAAC;YACpE,KAAK,EAAE,IAAI;SACZ,CAAC,CAAC;QACH,MAAM,QAAQ,GAAkB,IAAI,aAAa,CAAC,MAAM,CAAC,CAAC;QAC1D,MAAM,MAAM,GAAW,EAAE,CAAC;QAE1B,QAAQ,CAAC,eAAe,GAAG,CAAC,KAAK,EAAE,EAAE;YACnC,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC;gBAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACnD,CAAC,CAAC;QACF,QAAQ,CAAC,MAAM,GAAG,GAAS,EAAE;YAC3B,IAAI,CAAC;gBACH,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC;gBAC3D,MAAM,OAAO,GAAG,MAAM,YAAY,CAAC,SAAS,CAAC,CAAC;gBAC9C,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,aAAa,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE;oBACnE,IAAI,EAAE,WAAW;iBAClB,CAAC,CAAC;gBAEH,MAAM,MAAM,GAAG,MAAM,uCAAkB,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;gBACnE,MAAM,OAAO,GAAkC;oBAC7C,IAAI,EAAE,OAAO;oBACb,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,KAAK;iBACd,CAAC;gBACF,UAAU,CAAC;oBACT,IAAI,EAAE,SAAS;oBACf,OAAO;iBACR,CAAC,CAAC;YACL,CAAC;oBAAS,CAAC;gBACT,MAAM,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;YACtD,CAAC;QACH,CAAC,CAAA,CAAC;QACF,OAAO,QAAQ,CAAC;IAClB,CAAC,CAAA,CAAC;AACJ,CAAC,EAxCgB,mBAAmB,mCAAnB,mBAAmB,QAwCnC;AAED,MAAM,YAAY,GAAG,CAAO,SAAe,EAAiB,EAAE;IAC5D,MAAM,YAAY,GAAG,IAAI,YAAY,EAAE,CAAC;IACxC,MAAM,WAAW,GAAG,MAAM,SAAS,CAAC,WAAW,EAAE,CAAC;IAClD,MAAM,WAAW,GAAG,MAAM,YAAY,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;IAEpE,kBAAkB;IAClB,MAAM,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC;IAClC,MAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC;IAC1C,MAAM,gBAAgB,GAAG,WAAW,CAAC,gBAAgB,CAAC;IAEtD,0BAA0B;IAC1B,MAAM,SAAS,GAAG,EAAE,GAAG,MAAM,GAAG,gBAAgB,GAAG,CAAC,CAAC;IACrD,MAAM,MAAM,GAAG,IAAI,WAAW,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,IAAI,QAAQ,CAAC,MAAM,CAAC,CAAC;IAElC,kBAAkB;IAClB,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,EAAE;QACrD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACvC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QAClD,CAAC;IACH,CAAC,CAAC;IAEF,WAAW,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACvB,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC;IACvC,WAAW,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACvB,WAAW,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;IACxB,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB;IAC/C,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa;IAC1C,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,gBAAgB,EAAE,IAAI,CAAC,CAAC;IAC3C,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;IACrC,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,UAAU,GAAG,gBAAgB,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY;IACzE,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,gBAAgB,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,cAAc;IAC9D,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,kBAAkB;IAChD,WAAW,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;IACxB,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,gBAAgB,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC;IAExD,mBAAmB;IACnB,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QAChC,KAAK,IAAI,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,gBAAgB,EAAE,OAAO,EAAE,EAAE,CAAC;YAC5D,MAAM,MAAM,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAAE,CAAC;YACvD,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;YAChD,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,IAAI,CAAC,CAAC;YAC5C,MAAM,IAAI,CAAC,CAAC;QACd,CAAC;IACH,CAAC;IAED,OAAO,IAAI,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC;AACnD,CAAC,CAAA,CAAC"}

package/lib/utils/index.d.ts

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

package/lib/utils/index.js

@@ -0,0 +1,21 @@
+"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);
+__exportStar(require("./number"), 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;AACvB,2CAAyB"}

package/lib/utils/number.d.ts

@@ -0,0 +1 @@
+export declare const toCompactNumberFormat: (value: number) => string;

package/lib/utils/number.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCompactNumberFormat = void 0;
+const toCompactNumberFormat = (value) => {
+    const units = [
+        { value: 1000000000000000, symbol: "Q" },
+        { value: 1000000000000, symbol: "T" },
+        { value: 1000000000, symbol: "B" },
+        { value: 1000000, symbol: "M" },
+        { value: 1000, symbol: "K" },
+    ];
+    for (const unit of units) {
+        if (value >= unit.value) {
+            return (value / unit.value).toFixed(1) + unit.symbol;
+        }
+    }
+    return value.toString();
+};
+exports.toCompactNumberFormat = toCompactNumberFormat;
+//# sourceMappingURL=number.js.map

package/lib/utils/number.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number.js","sourceRoot":"","sources":["../../src/utils/number.ts"],"names":[],"mappings":";;;AAAO,MAAM,qBAAqB,GAAG,CAAC,KAAa,EAAE,EAAE;IACrD,MAAM,KAAK,GAAG;QACZ,EAAE,KAAK,EAAE,gBAAqB,EAAE,MAAM,EAAE,GAAG,EAAE;QAC7C,EAAE,KAAK,EAAE,aAAiB,EAAE,MAAM,EAAE,GAAG,EAAE;QACzC,EAAE,KAAK,EAAE,UAAa,EAAE,MAAM,EAAE,GAAG,EAAE;QACrC,EAAE,KAAK,EAAE,OAAS,EAAE,MAAM,EAAE,GAAG,EAAE;QACjC,EAAE,KAAK,EAAE,IAAK,EAAE,MAAM,EAAE,GAAG,EAAE;KAC9B,CAAC;IAEF,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAI,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACxB,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;QACvD,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;AAC1B,CAAC,CAAC;AAhBW,QAAA,qBAAqB,yBAgBhC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@autobe/ui",
   "type": "commonjs",
-  "version": "0.19.1",
+  "version": "0.21.0",
   "description": "AutoBE UI",
   "author": "Wrtn Technologies",
   "homepage": "https://wrtnlabs.io/autobe",
@@ -13,13 +13,24 @@
     "url": "https://github.com/wrtnlabs/autobe/issues"
   },
   "main": "lib/index.js",
+  "exports": {
+    ".": "./lib/index.js",
+    "./utils": "./lib/utils/index.js",
+    "./hooks": "./lib/hooks/index.js"
+  },
   "devDependencies": {
+    "@samchon/openapi": "^4.7.1",
     "@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.21.0"
+  },
+  "dependencies": {
+    "@stackblitz/sdk": "^1.11.0",
+    "jszip": "^3.10.1",
+    "tstl": "^3.0.0"
   },
   "scripts": {
     "build": "tsc",

package/src/AutoBeChatMain.tsx

@@ -0,0 +1,123 @@
+import {
+  AutoBeUserMessageContent,
+  IAutoBePlaygroundHeader,
+  IAutoBeRpcService,
+  IAutoBeTokenUsageJson,
+} from "@autobe/interface";
+import { ILlmSchema } from "@samchon/openapi";
+import { RefObject, useEffect, useRef } from "react";
+
+import {
+  AutoBeChatBanner,
+  AutoBeChatUploadBox,
+  AutoBeEventMovie,
+  AutoBeListenerState,
+  IAutoBeEventGroup,
+  IAutoBeUploadConfig,
+} from ".";
+import { useMediaQuery } from "./hooks";
+
+export interface IAutoBeChatMainProps {
+  isMobile: boolean;
+  eventGroups: IAutoBeEventGroup[];
+  service: IAutoBeRpcService;
+  conversate: (messages: AutoBeUserMessageContent[]) => Promise<void>;
+  setError: (error: Error) => void;
+  uploadConfig?: IAutoBeUploadConfig;
+  tokenUsage: IAutoBeTokenUsageJson | null;
+  header: IAutoBePlaygroundHeader<ILlmSchema.Model>;
+  state: AutoBeListenerState;
+}
+
+export const AutoBeChatMain = (props: IAutoBeChatMainProps) => {
+  const bodyContainerRef = useRef<HTMLDivElement>(null);
+  const scrollAnchorRef = useRef<HTMLDivElement>(null);
+
+  const listener: RefObject<AutoBeChatUploadBox.IListener> = useRef({
+    handleDragEnter: () => {},
+    handleDragLeave: () => {},
+    handleDrop: () => {},
+    handleDragOver: () => {},
+  });
+
+  useEffect(() => {
+    if (props.eventGroups.length === 0) return;
+    scrollAnchorRef.current?.scrollIntoView({
+      behavior: "smooth",
+    });
+  }, [bodyContainerRef.current?.scrollHeight]);
+
+  const isMinWidthLg = useMediaQuery(useMediaQuery.MIN_WIDTH_LG);
+  return (
+    <div
+      onDragEnter={(e) => listener.current.handleDragEnter(e)}
+      onDragLeave={(e) => listener.current.handleDragLeave(e)}
+      onDragOver={(e) => listener.current.handleDragOver(e)}
+      onDrop={(e) => listener.current.handleDrop(e)}
+      style={{
+        position: "relative",
+        overflowY: "auto",
+        margin: 0,
+        backgroundColor: "lightblue",
+        flexGrow: 1,
+        display: "flex",
+        flexDirection: "column",
+      }}
+      ref={bodyContainerRef}
+    >
+      {!isMinWidthLg && (
+        <AutoBeChatBanner
+          header={props.header}
+          tokenUsage={props.tokenUsage}
+          state={props.state}
+        />
+      )}
+
+      <div
+        style={{
+          backgroundColor: "lightblue",
+          padding: "2rem",
+          gap: 16,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        {props.eventGroups.map((e, index) => (
+          <AutoBeEventMovie
+            key={index}
+            getFiles={props.service.getFiles}
+            events={e.events}
+            last={index === props.eventGroups.length - 1}
+          />
+        ))}
+      </div>
+
+      {/*
+       * Prompt input area
+       * this flexGrow: 1 means that the prompt input area will take up the remaining space
+       * so that the upload box will be at the bottom of the screen
+       */}
+      <div
+        style={{ flexGrow: 1, minHeight: "1rem" }}
+        ref={scrollAnchorRef}
+      ></div>
+      <div
+        style={{
+          position: "sticky",
+          bottom: 16,
+          left: 0,
+          right: 0,
+          zIndex: 1000,
+        }}
+      >
+        <AutoBeChatUploadBox
+          listener={listener}
+          uploadConfig={props.uploadConfig}
+          conversate={props.conversate}
+          setError={props.setError}
+        />
+      </div>
+    </div>
+  );
+};
+export default AutoBeChatMain;