@autobe/ui 0.20.0 → 0.22.0

package/lib/utils/index.d.ts

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

package/lib/utils/index.js

@@ -17,4 +17,5 @@ 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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uDAAqC;AACrC,wDAAsC;AACtC,yCAAuB"}
+{"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,10 +1,10 @@
 {
   "name": "@autobe/ui",
   "type": "commonjs",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "description": "AutoBE UI",
   "author": "Wrtn Technologies",
-  "homepage": "https://wrtnlabs.io/autobe",
+  "homepage": "https://autobe.dev",
   "repository": {
     "type": "git",
     "url": "https://github.com/wrtnlabs/autobe.git"
@@ -14,22 +14,18 @@
   },
   "main": "lib/index.js",
   "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts"
-    },
-    "./utils": {
-      "types": "./src/utils/index.ts",
-      "import": "./src/utils/index.ts"
-    }
+    ".": "./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.20.0"
+    "@autobe/interface": "0.22.0"
   },
   "dependencies": {
     "@stackblitz/sdk": "^1.11.0",

package/src/{AutoBeAssistantMessageMovie.tsx → components/AutoBeAssistantMessageMovie.tsx}

@@ -6,7 +6,7 @@ interface IAssistantMessageProps {
   assistantName?: string;
 }
 
-const AutoBeAssistantMessageMovie = (props: IAssistantMessageProps) => {
+export const AutoBeAssistantMessageMovie = (props: IAssistantMessageProps) => {
   const { text, isoTimestamp, assistantName = "AutoBe" } = props;
 
   return (

package/src/components/AutoBeChatMain.tsx

@@ -0,0 +1,178 @@
+import { AutoBeUserMessageContent } from "@autobe/interface";
+import { RefObject, useEffect, useRef, useState } from "react";
+
+import { AutoBeChatUploadBox, AutoBeEventMovie, IAutoBeUploadConfig } from "..";
+import { useAutoBeAgent } from "../context/AutoBeAgentContext";
+import { useMediaQuery } from "../hooks";
+import AutoBeStatusModal from "./AutoBeStatusModal";
+
+export interface IAutoBeChatMainProps {
+  isMobile: boolean;
+  conversate: (messages: AutoBeUserMessageContent[]) => Promise<void>;
+  setError: (error: Error) => void;
+  uploadConfig?: IAutoBeUploadConfig;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const AutoBeChatMain = (props: IAutoBeChatMainProps) => {
+  const bodyContainerRef = useRef<HTMLDivElement>(null);
+  const scrollAnchorRef = useRef<HTMLDivElement>(null);
+  const { eventGroups } = useAutoBeAgent();
+  const [isTokenModalOpen, setIsTokenModalOpen] = useState(false);
+
+  const listener: RefObject<AutoBeChatUploadBox.IListener> = useRef({
+    handleDragEnter: () => {},
+    handleDragLeave: () => {},
+    handleDrop: () => {},
+    handleDragOver: () => {},
+  });
+
+  useEffect(() => {
+    if (eventGroups.length === 0) return;
+    scrollAnchorRef.current?.scrollIntoView({
+      behavior: "smooth",
+    });
+  }, [bodyContainerRef.current?.scrollHeight]);
+
+  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,
+        flexGrow: 1,
+        display: "flex",
+        flexDirection: "column",
+        ...props.style,
+      }}
+      className={props.className}
+      ref={bodyContainerRef}
+    >
+      {/* Token Usage Button - Sticky position in top right */}
+      <div
+        style={{
+          position: "sticky",
+          top: "1rem",
+          zIndex: 1001,
+          display: "flex",
+          justifyContent: "flex-end",
+          marginBottom: "-3rem",
+          paddingRight: "1.5rem",
+        }}
+      >
+        <button
+          onClick={() => setIsTokenModalOpen(!isTokenModalOpen)}
+          style={{
+            background: "#f8f9fa",
+            color: "#495057",
+            border: "1px solid #dee2e6",
+            borderRadius: "50%",
+            padding: "0.5rem",
+            width: "2rem",
+            height: "2rem",
+            cursor: "pointer",
+            fontSize: "0.85rem",
+            fontWeight: "400",
+            boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
+            transition: "all 0.2s ease",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+          onMouseOver={(e) => {
+            e.currentTarget.style.transform = "translateY(-1px)";
+            e.currentTarget.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.15)";
+            e.currentTarget.style.background = "#e9ecef";
+            e.currentTarget.style.borderColor = "#adb5bd";
+          }}
+          onMouseOut={(e) => {
+            e.currentTarget.style.transform = "translateY(0)";
+            e.currentTarget.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.1)";
+            e.currentTarget.style.background = "#f8f9fa";
+            e.currentTarget.style.borderColor = "#dee2e6";
+          }}
+          title="View System Status"
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 16v-4" />
+            <path d="M12 8h.01" />
+          </svg>
+        </button>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          maxWidth: useMediaQuery.WIDTH_MD,
+          width: "100%",
+          margin: "0 auto",
+        }}
+      >
+        <div
+          style={{
+            padding: "2rem",
+            gap: 16,
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          {eventGroups.map((e, index) => (
+            <AutoBeEventMovie
+              key={index}
+              events={e.events}
+              last={index === eventGroups.length - 1}
+            />
+          ))}
+        </div>
+      </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>
+
+      {/* System Status Modal */}
+      <AutoBeStatusModal
+        isOpen={isTokenModalOpen}
+        onClose={() => setIsTokenModalOpen(false)}
+      />
+    </div>
+  );
+};
+export default AutoBeChatMain;