@autobe/ui 0.20.0 → 0.21.0

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;

package/src/banner/AutoBeAgentInformation.tsx

@@ -0,0 +1,102 @@
+import {
+  IAutoBePlaygroundHeader,
+  IAutoBePlaygroundVendor,
+} from "@autobe/interface";
+import { ILlmSchema } from "@samchon/openapi";
+import { ReactNode } from "react";
+
+import { COLORS } from "../constant/color";
+
+export interface IAutoBeAgentInformationProps {
+  header: Omit<IAutoBePlaygroundHeader<ILlmSchema.Model>, "vendor"> & {
+    vendor: Omit<IAutoBePlaygroundVendor, "apiKey">;
+  };
+}
+
+/** Props interface for InfoRow component */
+interface IInfoRowProps {
+  /** Label text */
+  label: string;
+  /** Value to display */
+  value: ReactNode;
+}
+
+/** Props interface for InfoLabel component */
+interface IInfoLabelProps {
+  /** Label text */
+  children: string;
+}
+
+/** Props interface for InfoValue component */
+interface IInfoValueProps {
+  /** Value content */
+  children: ReactNode;
+}
+
+/** Info row component with consistent flex layout */
+const InfoRow = ({ label, value }: IInfoRowProps) => (
+  <div
+    style={{
+      display: "flex",
+      alignItems: "center",
+      padding: "4px 0",
+      gap: "8px",
+    }}
+  >
+    <InfoLabel>{label + ":"}</InfoLabel>
+    <InfoValue>{value}</InfoValue>
+  </div>
+);
+
+/** Info label component with consistent styling */
+const InfoLabel = ({ children }: IInfoLabelProps) => (
+  <span
+    style={{
+      color: COLORS.GRAY_TEXT_MEDIUM,
+      fontWeight: "500",
+      fontSize: "0.875rem",
+    }}
+  >
+    {children}
+  </span>
+);
+
+/** Info value component with styling */
+const InfoValue = ({ children }: IInfoValueProps) => (
+  <span
+    style={{
+      color: COLORS.GRAY_TEXT_DARK,
+      fontWeight: "600",
+      fontSize: "0.875rem",
+    }}
+  >
+    {children}
+  </span>
+);
+
+/**
+ * Agent information component displaying model, locale, and configuration
+ * details
+ *
+ * @param props - Component props
+ * @returns JSX element representing the agent information
+ */
+export const AutoBeAgentInformation = ({
+  header,
+}: IAutoBeAgentInformationProps) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "6px",
+      }}
+    >
+      <InfoRow label="AI Model" value={header.vendor.model} />
+      <InfoRow label="Schema Model" value={header.model} />
+      <InfoRow label="Locale" value={header.locale} />
+      <InfoRow label="Timezone" value={header.timezone} />
+      <InfoRow label="Semaphore" value={header.vendor.semaphore ?? 16} />
+    </div>
+  );
+};

package/src/banner/AutoBeChatBanner.tsx

@@ -0,0 +1,72 @@
+import { IAutoBeTokenUsageJson } from "@autobe/interface";
+
+import { Collapsible } from "../common";
+import { COLORS, SHADOWS } from "../constant/color";
+import {
+  AutoBeAgentInformation,
+  IAutoBeAgentInformationProps,
+} from "./AutoBeAgentInformation";
+import { AutoBeChatState, IAutoBeChatStateProps } from "./AutoBeChatState";
+import { AutoBeTokenUsage } from "./AutoBeTokenUsage";
+
+/** 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 const AutoBeChatBanner = (props: IAutoBeChatBannerProps) => {
+  return (
+    <header
+      style={{
+        padding: "0 48",
+        position: "sticky",
+        top: "12px",
+        marginBottom: "1rem",
+        zIndex: 10,
+      }}
+    >
+      <div
+        style={{
+          border: `1px solid ${COLORS.GRAY_BORDER}`,
+          borderRadius: "8px",
+          backgroundColor: COLORS.GRAY_BACKGROUND,
+          padding: "0 16px 16px 16px",
+          boxShadow: SHADOWS.CARD,
+          width: "100%",
+        }}
+      >
+        <h3>Summaries</h3>
+
+        <Collapsible
+          title="Agent Information"
+          defaultCollapsed={true}
+          animated={true}
+        >
+          <AutoBeAgentInformation header={props.header} />
+        </Collapsible>
+        <br />
+        <Collapsible
+          title="Token Usage"
+          defaultCollapsed={false}
+          animated={true}
+        >
+          <AutoBeTokenUsage tokenUsage={props.tokenUsage} />
+        </Collapsible>
+        <br />
+        <Collapsible title="Chat State" defaultCollapsed={true} animated={true}>
+          <AutoBeChatState state={props.state} />
+        </Collapsible>
+      </div>
+    </header>
+  );
+};
+
+export default AutoBeChatBanner;

package/src/banner/AutoBeChatState.tsx

@@ -0,0 +1,152 @@
+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

@@ -0,0 +1,152 @@
+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

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

package/src/common/Collapsible.tsx

@@ -0,0 +1,95 @@
+import { ReactNode, useState } from "react";
+
+import { COLORS } from "../constant/color";
+
+/** Props interface for Collapsible component */
+interface ICollapsibleProps {
+  /** Title to display in the header */
+  title: string;
+  /** Content to be collapsed/expanded */
+  children: ReactNode;
+  /** Initial collapsed state */
+  defaultCollapsed?: boolean;
+  /** Whether to show animation */
+  animated?: boolean;
+}
+
+/** Reusable collapsible component with toggle functionality */
+export const Collapsible = ({
+  title,
+  children,
+  defaultCollapsed = false,
+  animated = true,
+}: ICollapsibleProps) => {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+
+  return (
+    <div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          marginBottom: isCollapsed ? "0" : "12px",
+        }}
+      >
+        <button
+          onClick={() => setIsCollapsed(!isCollapsed)}
+          style={{
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            padding: "4px",
+            borderRadius: "4px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transition: animated ? "background-color 0.2s" : "none",
+            color: COLORS.GRAY_TEXT_MEDIUM,
+            marginRight: "8px",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = COLORS.GRAY_BORDER_LIGHT;
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = "transparent";
+          }}
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            style={{
+              transform: isCollapsed ? "rotate(-90deg)" : "rotate(0deg)",
+              transition: animated ? "transform 0.2s ease" : "none",
+            }}
+          >
+            <path d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z" />
+          </svg>
+        </button>
+        <h3
+          style={{
+            margin: 0,
+            fontSize: "1.125rem",
+            fontWeight: "600",
+            color: COLORS.GRAY_TEXT_DARK,
+          }}
+        >
+          {title}
+        </h3>
+      </div>
+      {!isCollapsed && (
+        <div
+          style={{
+            opacity: isCollapsed ? 0 : 1,
+            transition: animated ? "opacity 0.2s ease" : "none",
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Collapsible;

package/src/common/index.ts

@@ -0,0 +1,2 @@
+export * from "./Collapsible";
+export * from "./ChatBubble";