@autobe/ui 0.22.1 → 0.23.0

package/src/components/common/ActionButton.tsx

@@ -0,0 +1,205 @@
+export function ActionButton(props: ActionButton.IProps) {
+  //----
+  // STYLES
+  //----
+  const baseButtonStyle: React.CSSProperties = {
+    background: "rgba(255, 255, 255, 0.9)",
+    border: "1px solid rgba(0, 0, 0, 0.1)",
+    cursor: "pointer",
+    padding: "0.25rem",
+    borderRadius: "0.375rem",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#4b5563",
+    transition: "all 0.2s ease",
+    width: "1.5rem",
+    height: "1.5rem",
+    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
+  };
+
+  const getHoverColors = (variant: ActionButton.Variant) => {
+    switch (variant) {
+      case "edit":
+        return {
+          backgroundColor: "#f1f5f9",
+          color: "#475569",
+          borderColor: "#cbd5e1",
+          boxShadow: "0 2px 4px rgba(71, 85, 105, 0.12)",
+        };
+      case "delete":
+        return {
+          backgroundColor: "#fef2f2",
+          color: "#dc2626",
+          borderColor: "#fecaca",
+          boxShadow: "0 2px 4px rgba(220, 38, 38, 0.15)",
+        };
+      case "save":
+        return {
+          backgroundColor: "#f0fdf4",
+          color: "#22c55e",
+          borderColor: "#bbf7d0",
+          boxShadow: "0 2px 4px rgba(34, 197, 94, 0.15)",
+        };
+      case "cancel":
+        return {
+          backgroundColor: "#fff1f2",
+          color: "#ef4444",
+          borderColor: "#fecdd3",
+          boxShadow: "0 2px 4px rgba(239, 68, 68, 0.15)",
+        };
+      default:
+        return {
+          backgroundColor: "#f1f5f9",
+          color: "#475569",
+          borderColor: "#cbd5e1",
+          boxShadow: "0 2px 4px rgba(71, 85, 105, 0.12)",
+        };
+    }
+  };
+
+  const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const hoverColors = getHoverColors(props.variant);
+    e.currentTarget.style.backgroundColor = hoverColors.backgroundColor;
+    e.currentTarget.style.color = hoverColors.color;
+    e.currentTarget.style.borderColor = hoverColors.borderColor;
+    e.currentTarget.style.boxShadow = hoverColors.boxShadow;
+    e.currentTarget.style.transform = "translateY(-1px)";
+  };
+
+  const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.9)";
+    e.currentTarget.style.color = "#4b5563";
+    e.currentTarget.style.borderColor = "rgba(0, 0, 0, 0.1)";
+    e.currentTarget.style.boxShadow = "0 1px 2px rgba(0, 0, 0, 0.1)";
+    e.currentTarget.style.transform = "translateY(0)";
+  };
+
+  //----
+  // ICONS
+  //----
+  const renderIcon = () => {
+    switch (props.variant) {
+      case "edit":
+        return (
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+            <path d="m18.5 2.5 a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4Z" />
+          </svg>
+        );
+      case "delete":
+        return (
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M18 6L6 18" />
+            <path d="M6 6l12 12" />
+          </svg>
+        );
+      case "save":
+        return (
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <polyline points="20,6 9,17 4,12" />
+          </svg>
+        );
+      case "cancel":
+        return (
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M18 6L6 18" />
+            <path d="M6 6l12 12" />
+          </svg>
+        );
+      default:
+        return null;
+    }
+  };
+
+  const getTitle = () => {
+    switch (props.variant) {
+      case "edit":
+        return "Edit title";
+      case "delete":
+        return "Delete conversation";
+      case "save":
+        return "Save changes";
+      case "cancel":
+        return "Cancel editing";
+      default:
+        return "";
+    }
+  };
+
+  //----
+  // RENDER
+  //----
+  return (
+    <button
+      onClick={props.onClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      style={{
+        ...baseButtonStyle,
+        ...props.style,
+      }}
+      title={props.title ?? getTitle()}
+      disabled={props.disabled}
+    >
+      {renderIcon()}
+    </button>
+  );
+}
+
+export namespace ActionButton {
+  export type Variant = "edit" | "delete" | "save" | "cancel";
+
+  export interface IProps {
+    /** Button variant that determines icon and hover colors */
+    variant: Variant;
+
+    /** Click handler */
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+
+    /** Custom title for tooltip */
+    title?: string;
+
+    /** Whether button is disabled */
+    disabled?: boolean;
+
+    /** Custom style overrides */
+    style?: React.CSSProperties;
+  }
+}

package/src/components/common/ActionButtonGroup.tsx

@@ -0,0 +1,80 @@
+import { ActionButton } from "./ActionButton";
+
+export function ActionButtonGroup(props: ActionButtonGroup.IProps) {
+  //----
+  // STYLES
+  //----
+  const containerStyle: React.CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.375rem",
+    flexShrink: 0,
+  };
+
+  //----
+  // RENDER
+  //----
+  return (
+    <div style={containerStyle}>
+      {/* Edit button */}
+      {props.onEdit && (
+        <ActionButton
+          variant="edit"
+          onClick={(e) => {
+            e.stopPropagation();
+            props.onEdit?.();
+          }}
+        />
+      )}
+
+      {/* Delete button */}
+      {props.onDelete && (
+        <ActionButton
+          variant="delete"
+          onClick={(e) => {
+            e.stopPropagation();
+            props.onDelete?.();
+          }}
+        />
+      )}
+
+      {/* Save button */}
+      {props.onSave && (
+        <ActionButton
+          variant="save"
+          onClick={(e) => {
+            e.stopPropagation();
+            props.onSave?.();
+          }}
+        />
+      )}
+
+      {/* Cancel button */}
+      {props.onCancel && (
+        <ActionButton
+          variant="cancel"
+          onClick={(e) => {
+            e.stopPropagation();
+            props.onCancel?.();
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+export namespace ActionButtonGroup {
+  export interface IProps {
+    /** Edit handler - if provided, edit button will be shown */
+    onEdit?: () => void;
+
+    /** Delete handler - if provided, delete button will be shown */
+    onDelete?: () => void;
+
+    /** Save handler - if provided, save button will be shown */
+    onSave?: () => void;
+
+    /** Cancel handler - if provided, cancel button will be shown */
+    onCancel?: () => void;
+  }
+}

package/src/components/common/AutoBeConfigInput.tsx

@@ -0,0 +1,185 @@
+import { CSSProperties } from "react";
+
+export interface IAutoBeConfigInputProps {
+  label: string;
+  value: string | number;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  type?: "text" | "password" | "url" | "number" | "list";
+  icon?: string;
+  suggestions?: Array<{ value: string; label?: string }>;
+  min?: number;
+  max?: number;
+  style?: CSSProperties;
+  disabled?: boolean;
+  required?: boolean;
+}
+
+/**
+ * Common input component for configuration forms Supports text, password, url,
+ * and number inputs with optional suggestions
+ */
+export const AutoBeConfigInput = (props: IAutoBeConfigInputProps) => {
+  const {
+    label,
+    value,
+    onChange,
+    placeholder,
+    type = "text",
+    icon,
+    suggestions,
+    min,
+    max,
+    style,
+    disabled = false,
+    required = false,
+  } = props;
+
+  console.log("suggestions", suggestions);
+  const suggestionId = `suggestions-${label.replace(/\s+/g, "-").toLowerCase()}`;
+
+  // Check if field is required and empty
+  const isEmpty =
+    value === "" || (typeof value === "string" && value.trim() === "");
+  const isRequiredEmpty = required && isEmpty;
+
+  return (
+    <div style={{ ...style }}>
+      <label
+        style={{
+          display: "block",
+          fontSize: "0.875rem",
+          fontWeight: "500",
+          color: isRequiredEmpty ? "#dc3545" : "#374151",
+          marginBottom: "0.5rem",
+        }}
+      >
+        {icon && `${icon} `}
+        {label}
+        {required && (
+          <span style={{ color: "#dc3545", marginLeft: "0.25rem" }}>*</span>
+        )}
+      </label>
+      {type === "list" ? (
+        <select
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          disabled={disabled}
+          style={{
+            width: "100%",
+            padding: "0.75rem",
+            border: `1px solid ${isRequiredEmpty ? "#dc3545" : "#d1d5db"}`,
+            borderRadius: "8px",
+            fontSize: "0.875rem",
+            transition: "border-color 0.2s ease",
+            outline: "none",
+            boxSizing: "border-box",
+            backgroundColor: disabled
+              ? "#f9fafb"
+              : isRequiredEmpty
+                ? "#fef2f2"
+                : "white",
+            color: disabled ? "#9ca3af" : "#000000",
+            cursor: disabled ? "not-allowed" : "pointer",
+          }}
+          onFocus={(e) => {
+            if (!disabled && !isRequiredEmpty) {
+              e.currentTarget.style.borderColor = "#3b82f6";
+            }
+          }}
+          onBlur={(e) => {
+            if (!disabled) {
+              const newIsEmpty =
+                e.currentTarget.value === "" ||
+                e.currentTarget.value.trim() === "";
+              const newIsRequiredEmpty = required && newIsEmpty;
+              e.currentTarget.style.borderColor = newIsRequiredEmpty
+                ? "#dc3545"
+                : "#d1d5db";
+            }
+          }}
+        >
+          {placeholder && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
+          {suggestions?.map((suggestion, index) => (
+            <option key={index} value={suggestion.value}>
+              {suggestion.label || suggestion.value}
+            </option>
+          ))}
+        </select>
+      ) : (
+        <input
+          type={type}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          list={suggestions ? suggestionId : undefined}
+          min={min}
+          max={max}
+          disabled={disabled}
+          style={{
+            width: "100%",
+            padding: "0.75rem",
+            border: `1px solid ${isRequiredEmpty ? "#dc3545" : "#d1d5db"}`,
+            borderRadius: "8px",
+            fontSize: "0.875rem",
+            transition: "border-color 0.2s ease",
+            outline: "none",
+            boxSizing: "border-box",
+            backgroundColor: disabled
+              ? "#f9fafb"
+              : isRequiredEmpty
+                ? "#fef2f2"
+                : "white",
+            color: disabled ? "#9ca3af" : "#000000",
+          }}
+          onFocus={(e) => {
+            if (!disabled && !isRequiredEmpty) {
+              e.currentTarget.style.borderColor = "#3b82f6";
+            }
+          }}
+          onBlur={(e) => {
+            if (!disabled) {
+              const newIsEmpty =
+                e.currentTarget.value === "" ||
+                e.currentTarget.value.trim() === "";
+              const newIsRequiredEmpty = required && newIsEmpty;
+              e.currentTarget.style.borderColor = newIsRequiredEmpty
+                ? "#dc3545"
+                : "#d1d5db";
+            }
+          }}
+        />
+      )}
+      {isRequiredEmpty && (
+        <div
+          style={{
+            fontSize: "0.75rem",
+            color: "#dc3545",
+            marginTop: "0.25rem",
+            display: "flex",
+            alignItems: "center",
+            gap: "0.25rem",
+          }}
+        >
+          <span>⚠️</span>
+          This field is required
+        </div>
+      )}
+      {suggestions && type !== "list" && (
+        <datalist id={suggestionId}>
+          {suggestions.map((suggestion, index) => (
+            <option key={index} value={suggestion.value}>
+              {suggestion.label || suggestion.value}
+            </option>
+          ))}
+        </datalist>
+      )}
+    </div>
+  );
+};
+
+export default AutoBeConfigInput;

package/src/components/common/CompactSessionIndicator.tsx

@@ -0,0 +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;
+  }
+}

package/src/components/common/CompactSessionList.tsx

@@ -0,0 +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;
+  }
+}

package/src/components/common/index.ts

@@ -1,2 +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";

package/src/components/events/AutoBeEventGroupMovie.tsx

@@ -0,0 +1,18 @@
+import { IAutoBeEventGroup } from "../../structure";
+import { AutoBeEventMovie } from "./AutoBeEventMovie";
+
+export interface IAutoBeEventGroupMovieProps {
+  eventGroups: IAutoBeEventGroup[];
+}
+
+export const AutoBeEventGroupMovie = (props: IAutoBeEventGroupMovieProps) => {
+  return props.eventGroups.map((e, index) => (
+    <AutoBeEventMovie
+      key={index}
+      events={e.events}
+      last={index === props.eventGroups.length - 1}
+    />
+  ));
+};
+
+export default AutoBeEventGroupMovie;

package/src/components/events/AutoBeEventMovie.tsx

@@ -26,6 +26,10 @@ export function AutoBeEventMovie<Event extends AutoBeEvent>(
 ) {
   const { service } = useAutoBeAgent();
 
+  if (service === null) {
+    console.error("Service is not available");
+    return null;
+  }
   const back: Event = props.events[props.events.length - 1]!;
   switch (back.type) {
     case "userMessage":
@@ -117,6 +121,7 @@ export function AutoBeEventMovie<Event extends AutoBeEvent>(
     case "realizeAuthorizationComplete":
     case "vendorRequest":
     case "vendorResponse":
+    case "vendorTimeout":
     case "jsonParseError":
     case "jsonValidateError":
     case "consentFunctionCall":