npm - @elizaos/client - Versions diffs - 1.6.1-alpha.4 → 1.6.1-alpha.5 - Mend

@elizaos/client 1.6.1-alpha.4 → 1.6.1-alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

package/dist/index.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <title>ElizaOS - Client</title>
-    <script type="module" crossorigin src="/assets/main-C4q5_rtN.js"></script>
+    <script type="module" crossorigin src="/assets/main-4tyUgNqd.js"></script>
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@elizaos/client",
-  "version": "1.6.1-alpha.4",
+  "version": "1.6.1-alpha.5",
   "description": "Web client interface for ElizaOS agents",
   "repository": {
     "type": "git",
@@ -61,8 +61,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@elizaos/api-client": "1.6.1-alpha.4",
-    "@elizaos/core": "1.6.1-alpha.4",
+    "@elizaos/api-client": "1.6.1-alpha.5",
+    "@elizaos/core": "1.6.1-alpha.5",
+    "@evilmartians/agent-prism-data": "^0.0.4",
+    "@evilmartians/agent-prism-types": "^0.0.4",
     "@hookform/resolvers": "^5.1.1",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.1.3",
@@ -84,6 +86,7 @@
     "@uidotdev/usehooks": "^2.4.1",
     "buffer": "^6.0.3",
     "class-variance-authority": "^0.7.1",
+    "classnames": "^2.5.1",
     "clsx": "2.1.1",
     "cmdk": "^1.0.4",
     "date-fns": "^4.1.0",
@@ -96,6 +99,7 @@
     "react-force-graph": "^1.47.6",
     "react-force-graph-2d": "^1.27.1",
     "react-joyride": "^2.9.3",
+    "react-json-pretty": "^2.2.0",
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^2.1.7",
     "react-router": "^7.3.0",
@@ -157,5 +161,5 @@
     "vite-tsconfig-paths": "^5.1.4",
     "wait-on": "^8.0.3"
   },
-  "gitHead": "39870dec366b5a412c69999b3e4b8f114fa10ea7"
+  "gitHead": "90c052c82d42bdbfac79771ccdbcd6a1be939562"
 }

package/src/components/agent-prism/Avatar.tsx ADDED Viewed

@@ -0,0 +1,164 @@
+import { cn } from "@/lib/utils";
+import { User } from "lucide-react";
+import { useState, type ComponentPropsWithRef, type ReactElement } from "react";
+import {
+  ROUNDED_CLASSES,
+  type ColorVariant,
+  type ComponentSize,
+} from "./shared.ts";
+export type AvatarSize = Extract<
+  ComponentSize,
+  "4" | "6" | "8" | "9" | "10" | "11" | "12" | "16"
+>;
+const sizeClasses: Record<AvatarSize, string> = {
+  "4": "size-4 text-xs",
+  "6": "size-6 text-xs",
+  "8": "size-8 text-xs",
+  "9": "size-9 text-sm",
+  "10": "size-10 text-base",
+  "11": "size-11 text-lg",
+  "12": "size-12 text-xl",
+  "16": "size-16 text-2xl",
+};
+const iconSizeClasses: Record<AvatarSize, string> = {
+  "4": "size-3",
+  "6": "size-4",
+  "8": "size-6",
+  "9": "size-7",
+  "10": "size-8",
+  "11": "size-9",
+  "12": "size-10",
+  "16": "size-12",
+};
+const textSizeClasses: Record<AvatarSize, string> = {
+  "4": "text-xs",
+  "6": "text-xs",
+  "8": "text-xs",
+  "9": "text-sm",
+  "10": "text-base",
+  "11": "text-lg",
+  "12": "text-xl",
+  "16": "text-2xl",
+};
+const bgColorClasses: Record<ColorVariant, string> = {
+  gray: "bg-muted-foreground",
+  red: "bg-destructive",
+  orange: "bg-chart-1",
+  yellow: "bg-chart-5",
+  teal: "bg-chart-2",
+  indigo: "bg-primary",
+  purple: "bg-primary",
+  sky: "bg-chart-4",
+  cyan: "bg-chart-3",
+  emerald: "bg-accent",
+};
+export type AvatarProps = ComponentPropsWithRef<"div"> & {
+  /**
+   * The image source for the avatar
+   */
+  src?: string;
+  /**
+   * The alt text for the avatar
+   */
+  alt?: string;
+  /**
+   * The size of the avatar
+   * @default "md"
+   */
+  size?: AvatarSize;
+  /**
+   * The border radius of the avatar
+   * @default "full"
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+  /**
+   * Background color theme for the letter avatar
+   * Uses the unified color theme system
+   * @default "gray"
+   */
+  bgColor?: ColorVariant;
+  /**
+   * Text color for the letter avatar
+   * @default "white"
+   */
+  textColor?: "white" | "black";
+  /**
+   * Custom letter to display (will use first letter of alt if not provided)
+   */
+  letter?: string;
+  /**
+   * Optional className for additional styling
+   */
+  className?: string;
+};
+export const Avatar = ({
+  src,
+  alt = "Avatar",
+  size = "10",
+  rounded = "full",
+  bgColor = "gray",
+  textColor = "white",
+  letter,
+  className = "",
+  ...rest
+}: AvatarProps): ReactElement => {
+  const [error, setError] = useState(false);
+  const displayLetter = letter ? letter.charAt(0) : alt.charAt(0).toUpperCase();
+  const actualTextColor = textColor === "white" ? "text-white" : "text-black";
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center overflow-hidden",
+        "bg-muted",
+        error && "border border-border",
+        sizeClasses[size],
+        textSizeClasses[size],
+        ROUNDED_CLASSES[rounded],
+        className,
+      )}
+      {...rest}
+    >
+      {error ? (
+        <User
+          className={cn(
+            iconSizeClasses[size],
+            "text-muted-foreground",
+          )}
+        />
+      ) : (
+        <>
+          {src ? (
+            <img
+              src={src}
+              alt={alt}
+              className="h-full w-full object-cover"
+              onError={() => setError(true)}
+            />
+          ) : (
+            <div
+              className={cn(
+                "flex h-full w-full items-center justify-center",
+                bgColorClasses[bgColor],
+                actualTextColor,
+                "font-medium",
+              )}
+            >
+              {displayLetter}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};

package/src/components/agent-prism/Badge.tsx ADDED Viewed

@@ -0,0 +1,109 @@
+import type { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import {
+  COLOR_THEME_CLASSES,
+  type ColorVariant,
+  type ComponentSize,
+} from "./shared.ts";
+type BadgeSize = Extract<ComponentSize, "4" | "5" | "6" | "7">;
+const sizeClasses: Record<BadgeSize, string> = {
+  "4": "px-1 gap-1 h-4",
+  "5": "px-1.5 gap-1 h-5",
+  "6": "px-2 gap-1.5 h-6",
+  "7": "px-2.5 gap-2 h-7",
+};
+const textSizes: Record<BadgeSize, string> = {
+  "4": "text-xs font-normal leading-3",
+  "5": "text-xs font-medium",
+  "6": "text-sm font-medium",
+  "7": "text-sm font-medium",
+};
+export type BadgeProps = ComponentPropsWithRef<"span"> & {
+  /**
+   * The content of the badge
+   */
+  label: ReactNode;
+  /**
+   * The color theme of the badge
+   * Uses the unified color theme system
+   * @default "gray"
+   */
+  theme: ColorVariant;
+  /**
+   * The visual variant of the badge
+   * @default "solid"
+   */
+  variant?: "solid" | "outline";
+  /**
+   * The size of the badge
+   * @default "md"
+   */
+  size?: BadgeSize;
+  /**
+   * Optional icon to display at the start of the badge
+   */
+  iconStart?: ReactElement;
+  /**
+   * Optional icon to display at the end of the badge
+   */
+  iconEnd?: ReactElement;
+  /**
+   * Optional className for additional styling
+   */
+  className?: string;
+};
+export const Badge = ({
+  label,
+  theme = "gray",
+  variant = "solid",
+  size = "4",
+  iconStart,
+  iconEnd,
+  className = "",
+  ...rest
+}: BadgeProps): ReactElement => {
+  const { bg, darkBg, text, darkText } = COLOR_THEME_CLASSES[theme];
+  const variantClasses =
+    variant === "outline"
+      ? `border ${text} ${darkText} bg-transparent dark:bg-transparent border-current`
+      : `${bg} ${text} ${darkBg} ${darkText}`;
+  return (
+    <span
+      className={cn(
+        "inline-flex min-w-0 items-center overflow-hidden rounded font-medium",
+        variantClasses,
+        sizeClasses[size],
+        className,
+      )}
+      {...rest}
+    >
+      {iconStart && <span className="shrink-0">{iconStart}</span>}
+      <span
+        className={cn(
+          textSizes[size],
+          "min-w-0 max-w-full flex-shrink-0 truncate tracking-normal",
+        )}
+      >
+        {label}
+      </span>
+      {iconEnd && <span className="shrink-0">{iconEnd}</span>}
+    </span>
+  );
+};

package/src/components/agent-prism/Button.tsx ADDED Viewed

@@ -0,0 +1,138 @@
+import type { ComponentPropsWithRef, ReactElement } from "react";
+import { cn } from "@/lib/utils";
+import {
+  ROUNDED_CLASSES,
+  type ColorVariant,
+  type ComponentSize,
+} from "./shared.ts";
+type ButtonSize = Extract<
+  ComponentSize,
+  "6" | "7" | "8" | "9" | "10" | "11" | "12" | "16"
+>;
+const BASE_CLASSES =
+  "inline-flex items-center justify-center font-medium transition-all duration-200";
+const sizeClasses = {
+  "6": "h-6 px-2 gap-1 text-xs",
+  "7": "h-7 px-2 gap-1 text-xs",
+  "8": "h-8 px-2 gap-1 text-xs",
+  "9": "h-9 px-2.5 gap-2 text-sm",
+  "10": "h-10 px-4 gap-2 text-sm",
+  "11": "h-11 px-5 gap-3 text-base",
+  "12": "h-12 px-5 gap-2.5 text-base",
+  "16": "h-16 px-7 gap-3 text-lg",
+};
+const filledThemeClasses: Record<ColorVariant, string> = {
+  gray: "bg-muted text-muted-foreground",
+  purple: "bg-primary text-primary-foreground",
+  indigo: "bg-primary text-primary-foreground",
+  orange: "bg-chart-1 text-primary-foreground",
+  teal: "bg-chart-2 text-primary-foreground",
+  cyan: "bg-chart-3 text-primary-foreground",
+  sky: "bg-chart-4 text-primary-foreground",
+  yellow: "bg-chart-5 text-primary-foreground",
+  emerald: "bg-accent text-accent-foreground",
+  red: "bg-destructive text-destructive-foreground",
+};
+const variantClasses = {
+  filled: "",
+  outlined:
+    "border border-2 bg-transparent text-foreground border-border",
+  ghost: "bg-transparent text-muted-foreground",
+};
+export type ButtonProps = ComponentPropsWithRef<"button"> & {
+  /**
+   * The size of the button
+   * @default "6"
+   */
+  size?: ButtonSize;
+  /**
+   * The color theme of the button
+   * @default "gray"
+   */
+  theme?: ColorVariant;
+  /**
+   * The border radius of the button
+   * @default "md"
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+  /**
+   * The visual variant of the button
+   * @default "filled"
+   */
+  variant?: "filled" | "outlined" | "ghost";
+  /**
+   * Makes the button full width
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * Optional icon to display at the start of the button
+   */
+  iconStart?: ReactElement;
+  /**
+   * Optional icon to display at the end of the button
+   */
+  iconEnd?: ReactElement;
+};
+export const Button = ({
+  children,
+  size = "6",
+  theme = "gray",
+  rounded = "md",
+  variant = "filled",
+  fullWidth = false,
+  disabled = false,
+  iconStart,
+  iconEnd,
+  type = "button",
+  onClick,
+  className = "",
+  ...rest
+}: ButtonProps) => {
+  const widthClass = fullWidth ? "w-full" : "";
+  const stateClasses = disabled
+    ? "cursor-not-allowed opacity-50"
+    : "hover:opacity-70";
+  const filledThemeClass =
+    variant === "filled"
+      ? filledThemeClasses[theme] || filledThemeClasses.gray
+      : "";
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        BASE_CLASSES,
+        sizeClasses[size],
+        ROUNDED_CLASSES[rounded],
+        variantClasses[variant],
+        filledThemeClass,
+        widthClass,
+        stateClasses,
+        className,
+      )}
+      {...rest}
+    >
+      {iconStart && <span className="mr-1">{iconStart}</span>}
+      {children}
+      {iconEnd && <span className="ml-1">{iconEnd}</span>}
+    </button>
+  );
+};

package/src/components/agent-prism/CollapseAndExpandControls.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+import type { ComponentPropsWithRef } from "react";
+import { ChevronsUpDown, ChevronsDownUp } from "lucide-react";
+import { IconButton } from "./IconButton.tsx";
+export type SpanCardExpandAllButtonProps = ComponentPropsWithRef<"button"> & {
+  onExpandAll: () => void;
+};
+export type SpanCardCollapseAllButtonProps = ComponentPropsWithRef<"button"> & {
+  onCollapseAll: () => void;
+};
+export const ExpandAllButton = ({
+  onExpandAll,
+  ...rest
+}: SpanCardExpandAllButtonProps) => {
+  return (
+    <IconButton
+      size="7"
+      onClick={onExpandAll}
+      aria-label="Expand all"
+      {...rest}
+    >
+      <ChevronsUpDown className="size-3.5" />
+    </IconButton>
+  );
+};
+export const CollapseAllButton = ({
+  onCollapseAll,
+  ...rest
+}: SpanCardCollapseAllButtonProps) => {
+  return (
+    <IconButton
+      size="7"
+      onClick={onCollapseAll}
+      aria-label="Collapse all"
+      {...rest}
+    >
+      <ChevronsDownUp className="size-3.5" />
+    </IconButton>
+  );
+};

package/src/components/agent-prism/CollapsibleSection.tsx ADDED Viewed

@@ -0,0 +1,121 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { cn } from "@/lib/utils";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+export interface CollapsibleSectionProps {
+  /**
+   * The title text displayed in the trigger button
+   */
+  title: string;
+  /**
+   * The content to display on the right side of the title
+   */
+  rightContent?: React.ReactNode;
+  /**
+   * The content to display when the section is expanded
+   */
+  children: React.ReactNode;
+  /**
+   * Whether the section starts in an open state
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Optional className for the root container
+   */
+  className?: string;
+  /**
+   * Optional className for the trigger button
+   */
+  triggerClassName?: string;
+  /**
+   * Optional className for the content area
+   */
+  contentClassName?: string;
+  /**
+   * Optional callback fired when the section is expanded or collapsed
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
+  title,
+  rightContent,
+  children,
+  defaultOpen = false,
+  className = "",
+  triggerClassName = "",
+  contentClassName = "",
+  onOpenChange,
+}) => {
+  const [open, setOpen] = React.useState(defaultOpen);
+  const handleOpenChange = React.useCallback(
+    (open: boolean): void => {
+      setOpen(open);
+      onOpenChange?.(open);
+    },
+    [onOpenChange],
+  );
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>): void => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleOpenChange(!open);
+      }
+    },
+    [handleOpenChange, open],
+  );
+  return (
+    <Collapsible.Root
+      open={open}
+      onOpenChange={handleOpenChange}
+      className={cn("rounded-lg", className)}
+    >
+      <Collapsible.Trigger asChild>
+        <div
+          tabIndex={0}
+          role="button"
+          className={cn(
+            "mb-1 flex w-full items-center justify-between gap-2 rounded-lg px-1 py-3 text-left text-sm font-medium text-foreground",
+            triggerClassName,
+          )}
+          onKeyDown={handleKeyDown}
+          aria-expanded={open}
+          aria-label={`${open ? "Collapse" : "Expand"} content of "${title}" section`}
+        >
+          <div className="flex w-full items-center gap-2">
+            <ChevronDown
+              className={cn(
+                "h-3 w-3 text-muted-foreground transition-transform duration-200",
+                open && "rotate-180",
+              )}
+            />
+            <span className="truncate">{title}</span>
+          </div>
+          {rightContent}
+        </div>
+      </Collapsible.Trigger>
+      <Collapsible.Content
+        className={cn(
+          "data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown",
+          contentClassName,
+        )}
+      >
+        {children}
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};