@autobe/ui 0.21.0 → 0.22.1

package/src/banner/AutoBeChatState.tsx

@@ -1,152 +0,0 @@
-import {
-  AutoBeAnalyzeCompleteEvent,
-  AutoBeInterfaceCompleteEvent,
-  AutoBePrismaCompleteEvent,
-  AutoBeRealizeCompleteEvent,
-  AutoBeTestCompleteEvent,
-} from "@autobe/interface";
-
-import { AutoBeListenerState } from "..";
-import { COLORS } from "../constant/color";
-
-export interface IAutoBeChatStateProps {
-  state: AutoBeListenerState;
-}
-
-/** Common styles for step items */
-const getStepItemStyle = (isActive: boolean): React.CSSProperties => ({
-  padding: "12px",
-  backgroundColor: COLORS.GRAY_BACKGROUND,
-  borderRadius: "6px",
-  borderLeft: `4px solid ${isActive ? "#007bff" : COLORS.GRAY_BORDER}`,
-});
-
-const stepTitleStyle: React.CSSProperties = {
-  fontWeight: "bold",
-  fontSize: "0.9rem",
-  marginBottom: "4px",
-  color: COLORS.GRAY_TEXT_DARK,
-};
-
-const stepDataStyle: React.CSSProperties = {
-  fontSize: "0.85rem",
-  color: COLORS.GRAY_TEXT_MEDIUM,
-  lineHeight: "1.4",
-};
-
-/** Props interface for StateStep component */
-interface IStateStepProps {
-  /** Step name */
-  step: string;
-
-  data:
-    | AutoBeAnalyzeCompleteEvent
-    | AutoBePrismaCompleteEvent
-    | AutoBeInterfaceCompleteEvent
-    | AutoBeTestCompleteEvent
-    | AutoBeRealizeCompleteEvent;
-}
-
-/** Component for displaying active state step */
-const StateStep = ({ step, data }: IStateStepProps) => (
-  <div style={getStepItemStyle(true)}>
-    <div
-      style={stepTitleStyle}
-    >{`${step.charAt(0).toUpperCase()}${step.slice(1)}`}</div>
-    <div style={stepDataStyle}>
-      {Object.entries(getStepCount(data))
-        .map(([key, value]) => `${key}: ${value.toLocaleString()}`)
-        .join(" • ")}
-    </div>
-    <div style={stepDataStyle}>
-      ⏱️ {(Math.floor((data.elapsed / 60_000) * 100) / 100).toLocaleString()}{" "}
-      mins
-    </div>
-  </div>
-);
-
-/** Component for displaying empty state step */
-const StateEmpty = ({ step }: { step: string }) => (
-  <div style={getStepItemStyle(false)}>
-    <div
-      style={stepTitleStyle}
-    >{`${step.charAt(0).toUpperCase()}${step.slice(1)}`}</div>
-    <div style={stepDataStyle}>0 items • ⏱️ 0 mins</div>
-  </div>
-);
-
-/** Component to display development state information */
-export const AutoBeChatState = (props: IAutoBeChatStateProps) => {
-  const containerStyle: React.CSSProperties = {
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px",
-  };
-
-  const steps = ["analyze", "prisma", "interface", "test", "realize"] as const;
-
-  return (
-    <div style={containerStyle}>
-      <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
-        {steps.map((stepType) =>
-          props.state[stepType] ? (
-            <StateStep
-              key={stepType}
-              step={stepType}
-              data={props.state[stepType]}
-            />
-          ) : (
-            <StateEmpty key={stepType} step={stepType} />
-          ),
-        )}
-      </div>
-    </div>
-  );
-};
-
-/** Calculate count data based on step type */
-const getStepCount = (
-  data:
-    | AutoBeAnalyzeCompleteEvent
-    | AutoBePrismaCompleteEvent
-    | AutoBeInterfaceCompleteEvent
-    | AutoBeTestCompleteEvent
-    | AutoBeRealizeCompleteEvent,
-): Record<string, number> => {
-  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: { models: unknown[] }) => f.models.length)
-          .reduce((a: number, b: number) => 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 satisfies never;
-      throw new Error(`Unknown step type: ${data}`);
-  }
-};

package/src/banner/AutoBeTokenUsage.tsx

@@ -1,152 +0,0 @@
-import { IAutoBeTokenUsageJson } from "@autobe/interface";
-import { ReactNode } from "react";
-
-import { COLORS } from "../constant/color";
-import { toCompactNumberFormat } from "../utils";
-
-/** Props interface for TokenUsageCard component */
-interface ITokenUsageCardProps {
-  /** Token usage data to display */
-  tokenUsage: IAutoBeTokenUsageJson | null;
-}
-
-/** Props interface for TokenRow component */
-interface ITokenRowProps {
-  /** Label text */
-  label: string;
-  /** Value to display */
-  value: ReactNode;
-  /** Whether this is the total row with border */
-  isTotal?: boolean;
-}
-
-/** Props interface for TokenLabel component */
-interface ITokenLabelProps {
-  /** Label text */
-  children: string;
-  /** Whether this is a total label */
-  isTotal?: boolean;
-}
-
-/** Props interface for TokenValue component */
-interface ITokenValueProps {
-  /** Value content */
-  children: ReactNode;
-  /** Color variant for the value */
-  variant: "input" | "cachedInput" | "output" | "total";
-}
-
-/** Token row component with consistent flex layout */
-const TokenRow = ({ label, value, isTotal = false }: ITokenRowProps) => (
-  <div
-    style={{
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      ...(isTotal && {
-        paddingTop: "8px",
-        borderTop: `1px solid ${COLORS.GRAY_BORDER_LIGHT}`,
-      }),
-    }}
-  >
-    <TokenLabel isTotal={isTotal}>{label}</TokenLabel>
-    {value}
-  </div>
-);
-
-/** Token label component with consistent styling */
-const TokenLabel = ({ children, isTotal = false }: ITokenLabelProps) => (
-  <span
-    style={{
-      color: isTotal ? COLORS.GRAY_TEXT_DARK : COLORS.GRAY_TEXT_MEDIUM,
-      fontWeight: isTotal ? "600" : "500",
-    }}
-  >
-    {children}
-  </span>
-);
-
-/** Token value component with variant-based styling */
-const TokenValue = ({ children, variant }: ITokenValueProps) => {
-  const getVariantStyles = () => {
-    switch (variant) {
-      case "input":
-        return { color: COLORS.TOKEN_INPUT, fontWeight: "600" };
-      case "cachedInput":
-        return {
-          color: COLORS.GRAY_TEXT_MEDIUM,
-          fontWeight: "400",
-          fontSize: "0.875rem",
-        };
-      case "output":
-        return { color: COLORS.TOKEN_OUTPUT, fontWeight: "600" };
-      case "total":
-        return {
-          color: COLORS.TOKEN_TOTAL,
-          fontWeight: "700",
-          fontSize: "1.125rem",
-        };
-      default:
-        variant satisfies never;
-        return {};
-    }
-  };
-
-  return <span style={getVariantStyles()}>{children}</span>;
-};
-
-/**
- * Token usage card component displaying input, output, and total token counts
- *
- * @param props - Component props
- * @returns JSX element representing the token usage card
- */
-export const AutoBeTokenUsage = ({ tokenUsage }: ITokenUsageCardProps) => {
-  return (
-    <>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "8px",
-        }}
-      >
-        <TokenRow
-          label="Input:"
-          value={
-            <TokenValue variant="input">
-              {toCompactNumberFormat(tokenUsage?.aggregate.input.total ?? 0)}
-            </TokenValue>
-          }
-        />
-        <TokenRow
-          label="Cached Input:"
-          value={
-            <TokenValue variant="cachedInput">
-              {toCompactNumberFormat(tokenUsage?.aggregate.input.cached ?? 0)}
-            </TokenValue>
-          }
-        />
-        <TokenRow
-          label="Output:"
-          value={
-            <TokenValue variant="output">
-              {toCompactNumberFormat(tokenUsage?.aggregate.output.total ?? 0)}
-            </TokenValue>
-          }
-        />
-        <TokenRow
-          label="Total:"
-          value={
-            <TokenValue variant="total">
-              {toCompactNumberFormat(tokenUsage?.aggregate.total ?? 0)}
-            </TokenValue>
-          }
-          isTotal
-        />
-      </div>
-    </>
-  );
-};
-
-export default AutoBeTokenUsage;

package/src/banner/index.ts

@@ -1,4 +0,0 @@
-export * from "./AutoBeChatBanner";
-export * from "./AutoBeTokenUsage";
-export * from "./AutoBeChatState";
-export * from "./AutoBeAgentInformation";