@autobe/ui 0.29.2 → 0.30.0-dev.20260315

package/src/components/common/Collapsible.tsx

@@ -1,95 +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: "0",
-            borderRadius: "1rem",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            transition: animated ? "background-color 0.2s" : "none",
-            color: COLORS.GRAY_TEXT_MEDIUM,
-            marginRight: "1rem",
-          }}
-          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>
-        <h4
-          style={{
-            margin: 0,
-            fontSize: "1rem",
-            fontWeight: "600",
-            color: COLORS.GRAY_TEXT_DARK,
-          }}
-        >
-          {title}
-        </h4>
-      </div>
-      {!isCollapsed && (
-        <div
-          style={{
-            opacity: isCollapsed ? 0 : 1,
-            transition: animated ? "opacity 0.2s ease" : "none",
-          }}
-        >
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Collapsible;
+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: "0",
+            borderRadius: "1rem",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transition: animated ? "background-color 0.2s" : "none",
+            color: COLORS.GRAY_TEXT_MEDIUM,
+            marginRight: "1rem",
+          }}
+          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>
+        <h4
+          style={{
+            margin: 0,
+            fontSize: "1rem",
+            fontWeight: "600",
+            color: COLORS.GRAY_TEXT_DARK,
+          }}
+        >
+          {title}
+        </h4>
+      </div>
+      {!isCollapsed && (
+        <div
+          style={{
+            opacity: isCollapsed ? 0 : 1,
+            transition: animated ? "opacity 0.2s ease" : "none",
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Collapsible;

package/src/components/common/CompactSessionIndicator.tsx

@@ -1,73 +1,73 @@
-import { IAutoBeAgentSession } from "../../structure";
-
-export function CompactSessionIndicator(props: CompactSessionIndicator.IProps) {
-  //----
-  // EVENT HANDLERS
-  //----
-  const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!props.isActive) {
-      e.currentTarget.style.backgroundColor = "#e5e7eb";
-    }
-  };
-
-  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!props.isActive) {
-      e.currentTarget.style.backgroundColor = "#f3f4f6";
-    }
-  };
-
-  const handleClick = () => {
-    props.onSelect?.(props.session.id);
-  };
-
-  //----
-  // STYLES
-  //----
-  const indicatorStyle: React.CSSProperties = {
-    width: "36px",
-    height: "36px",
-    borderRadius: "0.5rem",
-    backgroundColor: props.isActive ? "#3b82f6" : "#f3f4f6",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "pointer",
-    transition: "all 0.2s ease",
-    margin: "0 auto",
-    color: props.isActive ? "#ffffff" : "#6b7280",
-    fontSize: "0.875rem",
-    fontWeight: "500",
-  };
-
-  //----
-  // RENDER
-  //----
-  return (
-    <div
-      style={indicatorStyle}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      onClick={handleClick}
-      title={props.session.title}
-    >
-      {props.session.title.charAt(0).toUpperCase()}
-    </div>
-  );
-}
-
-export namespace CompactSessionIndicator {
-  export interface IProps {
-    /** Session data to display */
-    session: IAutoBeAgentSession;
-
-    /** Whether this session is currently active */
-    isActive: boolean;
-
-    /**
-     * Callback when session indicator is clicked
-     *
-     * @param sessionId - ID of the selected session
-     */
-    onSelect?: (sessionId: string) => void;
-  }
-}
+import { IAutoBeAgentSession } from "../../structure";
+
+export function CompactSessionIndicator(props: CompactSessionIndicator.IProps) {
+  //----
+  // EVENT HANDLERS
+  //----
+  const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!props.isActive) {
+      e.currentTarget.style.backgroundColor = "#e5e7eb";
+    }
+  };
+
+  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!props.isActive) {
+      e.currentTarget.style.backgroundColor = "#f3f4f6";
+    }
+  };
+
+  const handleClick = () => {
+    props.onSelect?.(props.session.id);
+  };
+
+  //----
+  // STYLES
+  //----
+  const indicatorStyle: React.CSSProperties = {
+    width: "36px",
+    height: "36px",
+    borderRadius: "0.5rem",
+    backgroundColor: props.isActive ? "#3b82f6" : "#f3f4f6",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    transition: "all 0.2s ease",
+    margin: "0 auto",
+    color: props.isActive ? "#ffffff" : "#6b7280",
+    fontSize: "0.875rem",
+    fontWeight: "500",
+  };
+
+  //----
+  // RENDER
+  //----
+  return (
+    <div
+      style={indicatorStyle}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onClick={handleClick}
+      title={props.session.title}
+    >
+      {props.session.title.charAt(0).toUpperCase()}
+    </div>
+  );
+}
+
+export namespace CompactSessionIndicator {
+  export interface IProps {
+    /** Session data to display */
+    session: IAutoBeAgentSession;
+
+    /** Whether this session is currently active */
+    isActive: boolean;
+
+    /**
+     * Callback when session indicator is clicked
+     *
+     * @param sessionId - ID of the selected session
+     */
+    onSelect?: (sessionId: string) => void;
+  }
+}

package/src/components/common/CompactSessionList.tsx

@@ -1,82 +1,82 @@
-import { IAutoBeAgentSession } from "../../structure";
-import { CompactSessionIndicator } from "./CompactSessionIndicator";
-
-export function CompactSessionList(props: CompactSessionList.IProps) {
-  //----
-  // VARIABLES
-  //----
-  const maxItems = props.maxItems ?? 8;
-  const displaySessions = props.sessions.slice(0, maxItems);
-  const remainingCount = props.sessions.length - maxItems;
-
-  //----
-  // STYLES
-  //----
-  const containerStyle: React.CSSProperties = {
-    display: "flex",
-    flexDirection: "column",
-    gap: "0.5rem",
-  };
-
-  const remainingIndicatorStyle: React.CSSProperties = {
-    width: "36px",
-    height: "36px",
-    borderRadius: "0.5rem",
-    backgroundColor: "#f3f4f6",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    margin: "0 auto",
-    color: "#6b7280",
-    fontSize: "0.75rem",
-    fontWeight: "500",
-  };
-
-  //----
-  // RENDER
-  //----
-  return (
-    <div style={containerStyle}>
-      {displaySessions.map((session) => (
-        <CompactSessionIndicator
-          key={session.id}
-          session={session}
-          isActive={session.id === props.activeSessionId}
-          onSelect={props.onSessionSelect}
-        />
-      ))}
-      {remainingCount > 0 && (
-        <div
-          style={remainingIndicatorStyle}
-          title={`+${remainingCount} more conversations`}
-        >
-          +{remainingCount}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export namespace CompactSessionList {
-  export interface IProps {
-    /** List of sessions to display */
-    sessions: IAutoBeAgentSession[];
-
-    /** Currently active session ID */
-    activeSessionId?: string | null;
-
-    /**
-     * Maximum number of sessions to display
-     *
-     * @default 8
-     */
-    maxItems?: number;
-
-    /**
-     * Callback when a session is selected
-     *
-     * @param sessionId - ID of the selected session
-     */
-    onSessionSelect?: (sessionId: string) => void;
-  }
-}
+import { IAutoBeAgentSession } from "../../structure";
+import { CompactSessionIndicator } from "./CompactSessionIndicator";
+
+export function CompactSessionList(props: CompactSessionList.IProps) {
+  //----
+  // VARIABLES
+  //----
+  const maxItems = props.maxItems ?? 8;
+  const displaySessions = props.sessions.slice(0, maxItems);
+  const remainingCount = props.sessions.length - maxItems;
+
+  //----
+  // STYLES
+  //----
+  const containerStyle: React.CSSProperties = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5rem",
+  };
+
+  const remainingIndicatorStyle: React.CSSProperties = {
+    width: "36px",
+    height: "36px",
+    borderRadius: "0.5rem",
+    backgroundColor: "#f3f4f6",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: "0 auto",
+    color: "#6b7280",
+    fontSize: "0.75rem",
+    fontWeight: "500",
+  };
+
+  //----
+  // RENDER
+  //----
+  return (
+    <div style={containerStyle}>
+      {displaySessions.map((session) => (
+        <CompactSessionIndicator
+          key={session.id}
+          session={session}
+          isActive={session.id === props.activeSessionId}
+          onSelect={props.onSessionSelect}
+        />
+      ))}
+      {remainingCount > 0 && (
+        <div
+          style={remainingIndicatorStyle}
+          title={`+${remainingCount} more conversations`}
+        >
+          +{remainingCount}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export namespace CompactSessionList {
+  export interface IProps {
+    /** List of sessions to display */
+    sessions: IAutoBeAgentSession[];
+
+    /** Currently active session ID */
+    activeSessionId?: string | null;
+
+    /**
+     * Maximum number of sessions to display
+     *
+     * @default 8
+     */
+    maxItems?: number;
+
+    /**
+     * Callback when a session is selected
+     *
+     * @param sessionId - ID of the selected session
+     */
+    onSessionSelect?: (sessionId: string) => void;
+  }
+}

package/src/components/common/index.ts

@@ -1,8 +1,8 @@
-export * from "./ActionButton";
-export * from "./ActionButtonGroup";
-export * from "./AutoBeConfigInput";
-export * from "./Collapsible";
-export * from "./ChatBubble";
-export * from "./CompactSessionIndicator";
-export * from "./CompactSessionList";
-export * from "./openai";
+export * from "./ActionButton";
+export * from "./ActionButtonGroup";
+export * from "./AutoBeConfigInput";
+export * from "./Collapsible";
+export * from "./ChatBubble";
+export * from "./CompactSessionIndicator";
+export * from "./CompactSessionList";
+export * from "./openai";

package/src/components/common/openai/OpenAIContent.tsx

@@ -1,53 +1,53 @@
-import { AutoBeUserMessageContent } from "@autobe/interface";
-
-import { OpenAIUserAudioContent } from "./OpenAIUserAudioContent";
-import { OpenAIUserFileContent } from "./OpenAIUserFileContent";
-import { OpenAIUserImageContent } from "./OpenAIUserImageContent";
-import { OpenAIUserTextContent } from "./OpenAIUserTextContent";
-
-export interface IOpenAIUserContentProps {
-  content: Array<AutoBeUserMessageContent | string>;
-}
-
-export const OpenAIContent = (props: IOpenAIUserContentProps) => {
-  const { content } = props;
-
-  /** Renders a single content item */
-  const renderSingleContent = (
-    item: AutoBeUserMessageContent | string,
-    index: number,
-  ) => {
-    if (typeof item === "string") {
-      return <OpenAIUserTextContent key={index} text={item} />;
-    }
-
-    switch (item.type) {
-      case "text":
-        return <OpenAIUserTextContent key={index} text={item.text} />;
-      case "audio":
-        return <OpenAIUserAudioContent key={index} content={item} />;
-      case "file":
-        return <OpenAIUserFileContent key={index} content={item} />;
-      case "image":
-        return <OpenAIUserImageContent key={index} content={item} />;
-      default:
-        return (
-          <OpenAIUserTextContent key={index} text="Unsupported content type" />
-        );
-    }
-  };
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "0.75rem",
-      }}
-    >
-      {content.map((item, index) => renderSingleContent(item, index))}
-    </div>
-  );
-};
-
-export default OpenAIContent;
+import { AutoBeUserConversateContent } from "@autobe/interface";
+
+import { OpenAIUserAudioContent } from "./OpenAIUserAudioContent";
+import { OpenAIUserFileContent } from "./OpenAIUserFileContent";
+import { OpenAIUserImageContent } from "./OpenAIUserImageContent";
+import { OpenAIUserTextContent } from "./OpenAIUserTextContent";
+
+export interface IOpenAIUserContentProps {
+  content: Array<AutoBeUserConversateContent | string>;
+}
+
+export const OpenAIContent = (props: IOpenAIUserContentProps) => {
+  const { content } = props;
+
+  /** Renders a single content item */
+  const renderSingleContent = (
+    item: AutoBeUserConversateContent | string,
+    index: number,
+  ) => {
+    if (typeof item === "string") {
+      return <OpenAIUserTextContent key={index} text={item} />;
+    }
+
+    switch (item.type) {
+      case "text":
+        return <OpenAIUserTextContent key={index} text={item.text} />;
+      case "audio":
+        return <OpenAIUserAudioContent key={index} content={item} />;
+      case "file":
+        return <OpenAIUserFileContent key={index} content={item} />;
+      case "image":
+        return <OpenAIUserImageContent key={index} content={item} />;
+      default:
+        return (
+          <OpenAIUserTextContent key={index} text="Unsupported content type" />
+        );
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.75rem",
+      }}
+    >
+      {content.map((item, index) => renderSingleContent(item, index))}
+    </div>
+  );
+};
+
+export default OpenAIContent;