@autobe/ui 0.21.0 → 0.22.0

package/src/{events → components/events}/groups/ValidateEventGroup.tsx

@@ -110,7 +110,7 @@ export const ValidateEventGroup = (props: IValidateEventGroupProps) => {
             style={{
               width: "12px",
               height: "12px",
-              backgroundColor: "#ef4444",
+              backgroundColor: "#f59e0b",
               borderRadius: "2px",
             }}
           />
@@ -122,13 +122,13 @@ export const ValidateEventGroup = (props: IValidateEventGroupProps) => {
 
   const getGroupIconType = () => {
     if (errorEvents === 0) return "success"; // All successful
-    if (successEvents === 0) return "error"; // All failed
+    if (successEvents === 0) return "warning"; // All failed
     return "warning"; // Mixed results
   };
 
   const getGroupVariant = () => {
     if (errorEvents === 0) return "success"; // All successful
-    if (successEvents === 0) return "error"; // All failed
+    if (successEvents === 0) return "warning"; // All failed
     return "warning"; // Mixed results
   };
 

package/src/{events → components/events}/groups/index.ts

@@ -1,3 +1,7 @@
+export {
+  CorrectEventGroup,
+  type ICorrectEventGroupProps,
+} from "./CorrectEventGroup";
 export {
   ValidateEventGroup,
   type IValidateEventGroupProps,

package/src/{events → components/events}/index.ts

@@ -3,6 +3,7 @@ export { default as AutoBeScenarioEventMovie } from "./AutoBeScenarioEventMovie"
 export { default as AutoBeProgressEventMovie } from "./AutoBeProgressEventMovie";
 export { default as AutoBeCompleteEventMovie } from "./AutoBeCompleteEventMovie";
 export { default as AutoBeValidateEventMovie } from "./AutoBeValidateEventMovie";
+export { default as AutoBeCorrectEventMovie } from "./AutoBeCorrectEventMovie";
 export { default as AutoBeEventMovie } from "./AutoBeEventMovie";
 
 // Common components

package/src/components/index.ts

@@ -0,0 +1,7 @@
+export * from "./AutoBeStatusModal";
+export * from "./AutoBeChatMain";
+export * from "./AutoBeUserMessageMovie";
+export * from "./AutoBeAssistantMessageMovie";
+export * from "./common";
+export * from "./events";
+export * from "./upload";

package/src/{upload → components/upload}/AutoBeChatUploadBox.tsx

@@ -11,7 +11,8 @@ import {
   AutoBeFileUploadBox,
   AutoBeVoiceRecoderButton,
 } from ".";
-import { AutoBeFileUploader } from "../utils";
+import { useMediaQuery } from "../../hooks/useMediaQuery";
+import { AutoBeFileUploader } from "../../utils";
 
 export interface IAutoBeBucket {
   file: File;
@@ -158,7 +159,7 @@ export const AutoBeChatUploadBox = (props: AutoBeChatUploadBox.IProps) => {
   return (
     <div
       style={{
-        maxWidth: "768px",
+        maxWidth: useMediaQuery.WIDTH_MD,
         margin: "0 auto",
         padding: "12px",
         borderRadius: "16px",
@@ -270,6 +271,7 @@ export const AutoBeChatUploadBox = (props: AutoBeChatUploadBox.IProps) => {
             ))}
           </div>
         )}
+
         <textarea
           ref={inputRef}
           style={{

package/src/{upload → components/upload}/AutoBeVoiceRecoderButton.tsx

@@ -1,7 +1,7 @@
 import { AutoBeUserMessageAudioContent } from "@autobe/interface";
 import { useState } from "react";
 
-import { AutoBeVoiceRecorder } from "../utils/AutoBeVoiceRecorder";
+import { AutoBeVoiceRecorder } from "../../utils/AutoBeVoiceRecorder";
 
 export const AutoBeVoiceRecoderButton = (
   props: AutoBeVoiceRecoderButton.IProps,

package/src/constant/color.ts

@@ -21,4 +21,8 @@ export const COLORS = {
 /** 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;

package/src/context/AutoBeAgentContext.tsx

@@ -0,0 +1,79 @@
+import {
+  IAutoBePlaygroundHeader,
+  IAutoBeRpcService,
+  IAutoBeTokenUsageJson,
+} from "@autobe/interface";
+import { ILlmSchema } from "@samchon/openapi";
+import { ReactNode, createContext, useContext, useState } from "react";
+import { useEffect } from "react";
+
+import {
+  AutoBeListener,
+  AutoBeListenerState,
+  IAutoBeEventGroup,
+} from "../structure";
+
+interface AutoBeAgentContextType {
+  eventGroups: IAutoBeEventGroup[];
+  tokenUsage: IAutoBeTokenUsageJson | null;
+  state: AutoBeListenerState;
+  header: IAutoBePlaygroundHeader<ILlmSchema.Model>;
+  service: IAutoBeRpcService;
+  listener: AutoBeListener;
+}
+
+const AutoBeAgentContext = createContext<AutoBeAgentContextType | null>(null);
+
+export function AutoBeAgentProvider({
+  children,
+  listener,
+  service,
+  header,
+}: {
+  listener: AutoBeListener;
+  service: IAutoBeRpcService;
+  header: IAutoBePlaygroundHeader<ILlmSchema.Model>;
+  children: ReactNode;
+}) {
+  const [tokenUsage, setTokenUsage] = useState<IAutoBeTokenUsageJson | null>(
+    null,
+  );
+  const [eventGroups, setEventGroups] = useState<IAutoBeEventGroup[]>([]);
+
+  useEffect(() => {
+    listener.on(async (e) => {
+      service
+        .getTokenUsage()
+        .then(setTokenUsage)
+        .catch(() => {});
+      setEventGroups(e);
+    });
+    service
+      .getTokenUsage()
+      .then(setTokenUsage)
+      .catch(() => {});
+  }, []);
+
+  return (
+    <AutoBeAgentContext.Provider
+      value={{
+        eventGroups,
+        tokenUsage,
+        state: listener.getState(),
+        header,
+        service,
+        listener,
+      }}
+    >
+      {children}
+    </AutoBeAgentContext.Provider>
+  );
+}
+
+export function useAutoBeAgent() {
+  const context = useContext(AutoBeAgentContext);
+  if (!context) {
+    throw new Error("useAutoBeAgent must be used within a AutoBeAgentProvider");
+  }
+  return context;
+}

package/src/hooks/index.ts

@@ -1,2 +1,3 @@
+export * from "./useEscapeKey";
 export * from "./useIsomorphicLayoutEffect";
 export * from "./useMediaQuery";

package/src/hooks/useEscapeKey.ts

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+
+/**
+ * Hook to handle ESC key press to close modal or overlay
+ *
+ * @param isOpen - Whether the modal/overlay is open
+ * @param onClose - Callback function to close the modal/overlay
+ */
+export const useEscapeKey = (isOpen: boolean, onClose: () => void): void => {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [isOpen, onClose]);
+};

package/src/hooks/useMediaQuery.ts

@@ -62,7 +62,12 @@ export function useMediaQuery(
 }
 
 export namespace useMediaQuery {
-  export const MIN_WIDTH_LG = "(min-width: 1200px)";
-  export const MIN_WIDTH_MD = "(min-width: 900px)";
-  export const MIN_WIDTH_SM = "(min-width: 600px)";
+  export const WIDTH_XL = "80rem";
+  export const WIDTH_LG = "64rem";
+  export const WIDTH_MD = "48rem";
+  export const WIDTH_SM = "40rem";
+  export const MIN_WIDTH_XL = `(min-width: ${WIDTH_XL})`;
+  export const MIN_WIDTH_LG = `(min-width: ${WIDTH_LG})`;
+  export const MIN_WIDTH_MD = `(min-width: ${WIDTH_MD})`;
+  export const MIN_WIDTH_SM = `(min-width: ${WIDTH_SM})`;
 }

package/src/icons/Receipt.tsx

@@ -0,0 +1,74 @@
+import { COLORS } from "../constant/color";
+
+/** Props interface for ReceiptIcon component */
+interface IReceiptIconProps {
+  /** Width of the icon */
+  width?: number;
+  /** Height of the icon */
+  height?: number;
+  /** Color of the icon */
+  color?: string;
+}
+
+/** Receipt SVG icon component */
+export const ReceiptIcon = ({
+  width = 24,
+  height = 30,
+  color = COLORS.GRAY_TEXT_DARK,
+}: IReceiptIconProps) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 24 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    {/* Receipt Body */}
+    <path
+      d="M2 2H22V24L20 22L18 24L16 22L14 24L12 22L10 24L8 22L6 24L4 22L2 24V2Z"
+      fill={color}
+      fillOpacity="0.1"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    {/* Receipt Lines */}
+    <line
+      x1="6"
+      y1="7"
+      x2="18"
+      y2="7"
+      stroke={color}
+      strokeWidth="1"
+      strokeLinecap="round"
+    />
+    <line
+      x1="6"
+      y1="11"
+      x2="18"
+      y2="11"
+      stroke={color}
+      strokeWidth="1"
+      strokeLinecap="round"
+    />
+    <line
+      x1="6"
+      y1="15"
+      x2="14"
+      y2="15"
+      stroke={color}
+      strokeWidth="1"
+      strokeLinecap="round"
+    />
+    <line
+      x1="6"
+      y1="19"
+      x2="16"
+      y2="19"
+      stroke={color}
+      strokeWidth="1"
+      strokeLinecap="round"
+    />
+  </svg>
+);

package/src/index.ts

@@ -1,13 +1,4 @@
-export * from "./events";
-export { default as AutoBeAssistantMessageMovie } from "./AutoBeAssistantMessageMovie";
-export { default as AutoBeUserMessageMovie } from "./AutoBeUserMessageMovie";
-export { default as ChatBubble } from "./common/ChatBubble";
-export { default as AutoBeChatMain } from "./AutoBeChatMain";
-export type {
-  IChatBubbleProps,
-  IContentRendererProps,
-} from "./common/ChatBubble";
-export { AutoBeFileUploader } from "./utils";
-export * from "./upload";
-export * from "./banner";
+export * from "./components";
+export * from "./utils";
 export * from "./structure";
+export * from "./context/AutoBeAgentContext";

package/lib/AutoBeAssistantMessageMovie.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AutoBeAssistantMessageMovie.js","sourceRoot":"","sources":["../src/AutoBeAssistantMessageMovie.tsx"],"names":[],"mappings":";;;;;;AAAA,qEAA6C;AAQ7C,MAAM,2BAA2B,GAAG,CAAC,KAA6B,EAAE,EAAE;IACpE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,aAAa,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE/D,OAAO,CACL,uBAAC,oBAAU,IACT,OAAO,EAAE,CAAC,IAAI,CAAC,EACf,SAAS,EAAC,MAAM,EAChB,SAAS,EAAE,YAAY,EACvB,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,2BAA2B,CAAC"}

package/lib/AutoBeChatMain.d.ts

@@ -1,16 +0,0 @@
-import { AutoBeUserMessageContent, IAutoBePlaygroundHeader, IAutoBeRpcService, IAutoBeTokenUsageJson } from "@autobe/interface";
-import { ILlmSchema } from "@samchon/openapi";
-import { AutoBeListenerState, IAutoBeEventGroup, IAutoBeUploadConfig } from ".";
-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 declare const AutoBeChatMain: (props: IAutoBeChatMainProps) => import("react/jsx-runtime").JSX.Element;
-export default AutoBeChatMain;

package/lib/AutoBeChatMain.js

@@ -1,51 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AutoBeChatMain = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const _1 = require(".");
-const hooks_1 = require("./hooks");
-const AutoBeChatMain = (props) => {
-    var _a;
-    const bodyContainerRef = (0, react_1.useRef)(null);
-    const scrollAnchorRef = (0, react_1.useRef)(null);
-    const listener = (0, react_1.useRef)({
-        handleDragEnter: () => { },
-        handleDragLeave: () => { },
-        handleDrop: () => { },
-        handleDragOver: () => { },
-    });
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (props.eventGroups.length === 0)
-            return;
-        (_a = scrollAnchorRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-            behavior: "smooth",
-        });
-    }, [(_a = bodyContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight]);
-    const isMinWidthLg = (0, hooks_1.useMediaQuery)(hooks_1.useMediaQuery.MIN_WIDTH_LG);
-    return ((0, jsx_runtime_1.jsxs)("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, children: [!isMinWidthLg && ((0, jsx_runtime_1.jsx)(_1.AutoBeChatBanner, { header: props.header, tokenUsage: props.tokenUsage, state: props.state })), (0, jsx_runtime_1.jsx)("div", { style: {
-                    backgroundColor: "lightblue",
-                    padding: "2rem",
-                    gap: 16,
-                    display: "flex",
-                    flexDirection: "column",
-                }, children: props.eventGroups.map((e, index) => ((0, jsx_runtime_1.jsx)(_1.AutoBeEventMovie, { getFiles: props.service.getFiles, events: e.events, last: index === props.eventGroups.length - 1 }, index))) }), (0, jsx_runtime_1.jsx)("div", { style: { flexGrow: 1, minHeight: "1rem" }, ref: scrollAnchorRef }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    position: "sticky",
-                    bottom: 16,
-                    left: 0,
-                    right: 0,
-                    zIndex: 1000,
-                }, children: (0, jsx_runtime_1.jsx)(_1.AutoBeChatUploadBox, { listener: listener, uploadConfig: props.uploadConfig, conversate: props.conversate, setError: props.setError }) })] }));
-};
-exports.AutoBeChatMain = AutoBeChatMain;
-exports.default = exports.AutoBeChatMain;
-//# sourceMappingURL=AutoBeChatMain.js.map

package/lib/AutoBeChatMain.js.map

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

package/lib/AutoBeUserMessageMovie.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AutoBeUserMessageMovie.js","sourceRoot":"","sources":["../src/AutoBeUserMessageMovie.tsx"],"names":[],"mappings":";;;;;;AAEA,qEAA6C;AAM7C,MAAM,sBAAsB,GAAG,CAAC,KAA0C,EAAE,EAAE;IAC5E,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAE1B,OAAO,CACL,gCACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,GAAG,EAAE,CAAC;SACP,YAED,uBAAC,oBAAU,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,GAAG,GAClE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,sBAAsB,CAAC"}

package/lib/banner/AutoBeAgentInformation.d.ts

@@ -1,15 +0,0 @@
-import { IAutoBePlaygroundHeader, IAutoBePlaygroundVendor } from "@autobe/interface";
-import { ILlmSchema } from "@samchon/openapi";
-export interface IAutoBeAgentInformationProps {
-    header: Omit<IAutoBePlaygroundHeader<ILlmSchema.Model>, "vendor"> & {
-        vendor: Omit<IAutoBePlaygroundVendor, "apiKey">;
-    };
-}
-/**
- * Agent information component displaying model, locale, and configuration
- * details
- *
- * @param props - Component props
- * @returns JSX element representing the agent information
- */
-export declare const AutoBeAgentInformation: ({ header, }: IAutoBeAgentInformationProps) => import("react/jsx-runtime").JSX.Element;

package/lib/banner/AutoBeAgentInformation.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AutoBeAgentInformation = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const color_1 = require("../constant/color");
-/** Info row component with consistent flex layout */
-const InfoRow = ({ label, value }) => ((0, jsx_runtime_1.jsxs)("div", { style: {
-        display: "flex",
-        alignItems: "center",
-        padding: "4px 0",
-        gap: "8px",
-    }, children: [(0, jsx_runtime_1.jsx)(InfoLabel, { children: label + ":" }), (0, jsx_runtime_1.jsx)(InfoValue, { children: value })] }));
-/** Info label component with consistent styling */
-const InfoLabel = ({ children }) => ((0, jsx_runtime_1.jsx)("span", { style: {
-        color: color_1.COLORS.GRAY_TEXT_MEDIUM,
-        fontWeight: "500",
-        fontSize: "0.875rem",
-    }, children: children }));
-/** Info value component with styling */
-const InfoValue = ({ children }) => ((0, jsx_runtime_1.jsx)("span", { style: {
-        color: color_1.COLORS.GRAY_TEXT_DARK,
-        fontWeight: "600",
-        fontSize: "0.875rem",
-    }, children: children }));
-/**
- * Agent information component displaying model, locale, and configuration
- * details
- *
- * @param props - Component props
- * @returns JSX element representing the agent information
- */
-const AutoBeAgentInformation = ({ header, }) => {
-    var _a;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: "6px",
-        }, children: [(0, jsx_runtime_1.jsx)(InfoRow, { label: "AI Model", value: header.vendor.model }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "Schema Model", value: header.model }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "Locale", value: header.locale }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "Timezone", value: header.timezone }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "Semaphore", value: (_a = header.vendor.semaphore) !== null && _a !== void 0 ? _a : 16 })] }));
-};
-exports.AutoBeAgentInformation = AutoBeAgentInformation;
-//# sourceMappingURL=AutoBeAgentInformation.js.map

package/lib/banner/AutoBeAgentInformation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AutoBeAgentInformation.js","sourceRoot":"","sources":["../../src/banner/AutoBeAgentInformation.tsx"],"names":[],"mappings":";;;;AAOA,6CAA2C;AA4B3C,qDAAqD;AACrD,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAiB,EAAE,EAAE,CAAC,CACnD,iCACE,KAAK,EAAE;QACL,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,OAAO;QAChB,GAAG,EAAE,KAAK;KACX,aAED,uBAAC,SAAS,cAAE,KAAK,GAAG,GAAG,GAAa,EACpC,uBAAC,SAAS,cAAE,KAAK,GAAa,IAC1B,CACP,CAAC;AAEF,mDAAmD;AACnD,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAmB,EAAE,EAAE,CAAC,CACnD,iCACE,KAAK,EAAE;QACL,KAAK,EAAE,cAAM,CAAC,gBAAgB;QAC9B,UAAU,EAAE,KAAK;QACjB,QAAQ,EAAE,UAAU;KACrB,YAEA,QAAQ,GACJ,CACR,CAAC;AAEF,wCAAwC;AACxC,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAmB,EAAE,EAAE,CAAC,CACnD,iCACE,KAAK,EAAE;QACL,KAAK,EAAE,cAAM,CAAC,cAAc;QAC5B,UAAU,EAAE,KAAK;QACjB,QAAQ,EAAE,UAAU;KACrB,YAEA,QAAQ,GACJ,CACR,CAAC;AAEF;;;;;;GAMG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,GACuB,EAAE,EAAE;;IACjC,OAAO,CACL,iCACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,GAAG,EAAE,KAAK;SACX,aAED,uBAAC,OAAO,IAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,GAAI,EACxD,uBAAC,OAAO,IAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,GAAI,EACrD,uBAAC,OAAO,IAAC,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,CAAC,MAAM,GAAI,EAChD,uBAAC,OAAO,IAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,GAAI,EACpD,uBAAC,OAAO,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,MAAA,MAAM,CAAC,MAAM,CAAC,SAAS,mCAAI,EAAE,GAAI,IAC/D,CACP,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,sBAAsB,0BAkBjC"}

package/lib/banner/AutoBeChatBanner.d.ts

@@ -1,15 +0,0 @@
-import { IAutoBeTokenUsageJson } from "@autobe/interface";
-import { IAutoBeAgentInformationProps } from "./AutoBeAgentInformation";
-import { IAutoBeChatStateProps } from "./AutoBeChatState";
-/** Props interface for AutoBeChatBanner component */
-interface IAutoBeChatBannerProps {
-    /** Agent information to display */
-    header: IAutoBeAgentInformationProps["header"];
-    /** Token usage data to display */
-    tokenUsage: IAutoBeTokenUsageJson | null;
-    /** Chat state to display */
-    state: IAutoBeChatStateProps["state"];
-}
-/** Chat banner component with collapsible token usage display */
-export declare const AutoBeChatBanner: (props: IAutoBeChatBannerProps) => import("react/jsx-runtime").JSX.Element;
-export default AutoBeChatBanner;

package/lib/banner/AutoBeChatBanner.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AutoBeChatBanner = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const common_1 = require("../common");
-const color_1 = require("../constant/color");
-const AutoBeAgentInformation_1 = require("./AutoBeAgentInformation");
-const AutoBeChatState_1 = require("./AutoBeChatState");
-const AutoBeTokenUsage_1 = require("./AutoBeTokenUsage");
-/** Chat banner component with collapsible token usage display */
-const AutoBeChatBanner = (props) => {
-    return ((0, jsx_runtime_1.jsx)("header", { style: {
-            padding: "0 48",
-            position: "sticky",
-            top: "12px",
-            marginBottom: "1rem",
-            zIndex: 10,
-        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                border: `1px solid ${color_1.COLORS.GRAY_BORDER}`,
-                borderRadius: "8px",
-                backgroundColor: color_1.COLORS.GRAY_BACKGROUND,
-                padding: "0 16px 16px 16px",
-                boxShadow: color_1.SHADOWS.CARD,
-                width: "100%",
-            }, children: [(0, jsx_runtime_1.jsx)("h3", { children: "Summaries" }), (0, jsx_runtime_1.jsx)(common_1.Collapsible, { title: "Agent Information", defaultCollapsed: true, animated: true, children: (0, jsx_runtime_1.jsx)(AutoBeAgentInformation_1.AutoBeAgentInformation, { header: props.header }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(common_1.Collapsible, { title: "Token Usage", defaultCollapsed: false, animated: true, children: (0, jsx_runtime_1.jsx)(AutoBeTokenUsage_1.AutoBeTokenUsage, { tokenUsage: props.tokenUsage }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(common_1.Collapsible, { title: "Chat State", defaultCollapsed: true, animated: true, children: (0, jsx_runtime_1.jsx)(AutoBeChatState_1.AutoBeChatState, { state: props.state }) })] }) }));
-};
-exports.AutoBeChatBanner = AutoBeChatBanner;
-exports.default = exports.AutoBeChatBanner;
-//# sourceMappingURL=AutoBeChatBanner.js.map

package/lib/banner/AutoBeChatBanner.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AutoBeChatBanner.js","sourceRoot":"","sources":["../../src/banner/AutoBeChatBanner.tsx"],"names":[],"mappings":";;;;AAEA,sCAAwC;AACxC,6CAAoD;AACpD,qEAGkC;AAClC,uDAA2E;AAC3E,yDAAsD;AActD,iEAAiE;AAC1D,MAAM,gBAAgB,GAAG,CAAC,KAA6B,EAAE,EAAE;IAChE,OAAO,CACL,mCACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,QAAQ;YAClB,GAAG,EAAE,MAAM;YACX,YAAY,EAAE,MAAM;YACpB,MAAM,EAAE,EAAE;SACX,YAED,iCACE,KAAK,EAAE;gBACL,MAAM,EAAE,aAAa,cAAM,CAAC,WAAW,EAAE;gBACzC,YAAY,EAAE,KAAK;gBACnB,eAAe,EAAE,cAAM,CAAC,eAAe;gBACvC,OAAO,EAAE,kBAAkB;gBAC3B,SAAS,EAAE,eAAO,CAAC,IAAI;gBACvB,KAAK,EAAE,MAAM;aACd,aAED,uDAAkB,EAElB,uBAAC,oBAAW,IACV,KAAK,EAAC,mBAAmB,EACzB,gBAAgB,EAAE,IAAI,EACtB,QAAQ,EAAE,IAAI,YAEd,uBAAC,+CAAsB,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,GAAI,GACpC,EACd,gCAAM,EACN,uBAAC,oBAAW,IACV,KAAK,EAAC,aAAa,EACnB,gBAAgB,EAAE,KAAK,EACvB,QAAQ,EAAE,IAAI,YAEd,uBAAC,mCAAgB,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,GAAI,GACtC,EACd,gCAAM,EACN,uBAAC,oBAAW,IAAC,KAAK,EAAC,YAAY,EAAC,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,YACpE,uBAAC,iCAAe,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,GAC3B,IACV,GACC,CACV,CAAC;AACJ,CAAC,CAAC;AA7CW,QAAA,gBAAgB,oBA6C3B;AAEF,kBAAe,wBAAgB,CAAC"}

package/lib/banner/AutoBeChatState.d.ts

@@ -1,6 +0,0 @@
-import { AutoBeListenerState } from "..";
-export interface IAutoBeChatStateProps {
-    state: AutoBeListenerState;
-}
-/** Component to display development state information */
-export declare const AutoBeChatState: (props: IAutoBeChatStateProps) => import("react/jsx-runtime").JSX.Element;

package/lib/banner/AutoBeChatState.js

@@ -1,80 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AutoBeChatState = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const color_1 = require("../constant/color");
-/** Common styles for step items */
-const getStepItemStyle = (isActive) => ({
-    padding: "12px",
-    backgroundColor: color_1.COLORS.GRAY_BACKGROUND,
-    borderRadius: "6px",
-    borderLeft: `4px solid ${isActive ? "#007bff" : color_1.COLORS.GRAY_BORDER}`,
-});
-const stepTitleStyle = {
-    fontWeight: "bold",
-    fontSize: "0.9rem",
-    marginBottom: "4px",
-    color: color_1.COLORS.GRAY_TEXT_DARK,
-};
-const stepDataStyle = {
-    fontSize: "0.85rem",
-    color: color_1.COLORS.GRAY_TEXT_MEDIUM,
-    lineHeight: "1.4",
-};
-/** Component for displaying active state step */
-const StateStep = ({ step, data }) => ((0, jsx_runtime_1.jsxs)("div", { style: getStepItemStyle(true), children: [(0, jsx_runtime_1.jsx)("div", { style: stepTitleStyle, children: `${step.charAt(0).toUpperCase()}${step.slice(1)}` }), (0, jsx_runtime_1.jsx)("div", { style: stepDataStyle, children: Object.entries(getStepCount(data))
-                .map(([key, value]) => `${key}: ${value.toLocaleString()}`)
-                .join(" • ") }), (0, jsx_runtime_1.jsxs)("div", { style: stepDataStyle, children: ["\u23F1\uFE0F ", (Math.floor((data.elapsed / 60000) * 100) / 100).toLocaleString(), " ", "mins"] })] }));
-/** Component for displaying empty state step */
-const StateEmpty = ({ step }) => ((0, jsx_runtime_1.jsxs)("div", { style: getStepItemStyle(false), children: [(0, jsx_runtime_1.jsx)("div", { style: stepTitleStyle, children: `${step.charAt(0).toUpperCase()}${step.slice(1)}` }), (0, jsx_runtime_1.jsx)("div", { style: stepDataStyle, children: "0 items \u2022 \u23F1\uFE0F 0 mins" })] }));
-/** Component to display development state information */
-const AutoBeChatState = (props) => {
-    const containerStyle = {
-        display: "flex",
-        flexDirection: "column",
-        gap: "12px",
-    };
-    const steps = ["analyze", "prisma", "interface", "test", "realize"];
-    return ((0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: steps.map((stepType) => props.state[stepType] ? ((0, jsx_runtime_1.jsx)(StateStep, { step: stepType, data: props.state[stepType] }, stepType)) : ((0, jsx_runtime_1.jsx)(StateEmpty, { step: stepType }, stepType))) }) }));
-};
-exports.AutoBeChatState = AutoBeChatState;
-/** Calculate count data based on step type */
-const getStepCount = (data) => {
-    switch (data.type) {
-        case "analyzeComplete": {
-            return {
-                Documents: Object.keys(data.files).length,
-                "Actor Roles": data.roles.length,
-            };
-        }
-        case "prismaComplete": {
-            return {
-                Namespaces: data.result.data.files.length,
-                Models: data.result.data.files
-                    .map((f) => f.models.length)
-                    .reduce((a, b) => a + b, 0),
-            };
-        }
-        case "interfaceComplete": {
-            return {
-                Operations: data.document.operations.length,
-                Schemas: Object.keys(data.document.components.schemas).length,
-            };
-        }
-        case "testComplete": {
-            return {
-                Functions: data.files.length,
-            };
-        }
-        case "realizeComplete": {
-            return {
-                Controllers: Object.keys(data.controllers).length,
-                Functions: data.functions.length,
-            };
-        }
-        default:
-            data;
-            throw new Error(`Unknown step type: ${data}`);
-    }
-};
-//# sourceMappingURL=AutoBeChatState.js.map

package/lib/banner/AutoBeChatState.js.map

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

package/lib/banner/AutoBeTokenUsage.d.ts

@@ -1,14 +0,0 @@
-import { IAutoBeTokenUsageJson } from "@autobe/interface";
-/** Props interface for TokenUsageCard component */
-interface ITokenUsageCardProps {
-    /** Token usage data to display */
-    tokenUsage: IAutoBeTokenUsageJson | null;
-}
-/**
- * Token usage card component displaying input, output, and total token counts
- *
- * @param props - Component props
- * @returns JSX element representing the token usage card
- */
-export declare const AutoBeTokenUsage: ({ tokenUsage }: ITokenUsageCardProps) => import("react/jsx-runtime").JSX.Element;
-export default AutoBeTokenUsage;