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

package/src/components/agent-prism/Tabs.tsx

@@ -0,0 +1,141 @@
+import type { ComponentPropsWithRef } from "react";
+
+import * as RadixTabs from "@radix-ui/react-tabs";
+import { cn } from "@/lib/utils";
+import * as React from "react";
+
+export interface TabItem<T extends string = string> {
+  value: T;
+  label: string;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export type TabTheme = "underline" | "pill";
+
+const BASE_TRIGGER =
+  "text-sm font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed";
+
+const THEMES = {
+  underline: {
+    list: "h-9 flex border-b border-border ",
+    trigger: `w-full justify-center px-3 ${BASE_TRIGGER} 
+      text-muted-foreground hover:text-foreground data-[state=active]:text-foreground
+       dark:hover:text-gray-200 dark:data-[state=active]:text-gray-200
+      border-b-2 border-transparent data-[state=active]:border-primary 
+      dark:data-[state=active]:border-muted -mb-[2px]
+      hover:border-muted `,
+  },
+  pill: {
+    list: "h-9 inline-flex gap-1 p-1 bg-muted rounded-lg",
+    trigger: `px-3 ${BASE_TRIGGER} rounded-md
+      text-muted-foreground hover:text-foreground data-[state=active]:text-foreground
+       dark:hover:text-gray-200 dark:data-[state=active]:text-gray-200
+      hover:bg-accent data-[state=active]:bg-card data-[state=active]:shadow-sm
+      dark:hover:bg-gray-700 dark:data-[state=active]:bg-gray-600 dark:data-[state=active]:shadow-none`,
+  },
+} as const;
+
+export type TabsProps<T extends string = string> = Omit<
+  ComponentPropsWithRef<"div">,
+  "dir"
+> & {
+  /**
+   * Array of tab items to display
+   */
+  items: TabItem<T>[];
+
+  /**
+   * The initially selected tab value (uncontrolled)
+   */
+  defaultValue?: T;
+
+  /**
+   * The currently selected tab value (controlled)
+   */
+  value?: T;
+
+  /**
+   * Callback fired when the selected tab changes
+   */
+  onValueChange?: (value: T) => void;
+
+  /**
+   * Visual theme variant for the tabs
+   * @default "underline"
+   */
+  theme?: TabTheme;
+
+  /**
+   * Optional className for the root container
+   */
+  className?: string;
+
+  /**
+   * Optional className for the tabs list container
+   */
+  tabsListClassName?: string;
+
+  /**
+   * Optional className for individual tab triggers
+   */
+  triggerClassName?: string;
+
+  /**
+   * The direction of the content of the tabs
+   */
+  dir?: "ltr" | "rtl";
+};
+
+export const Tabs = <T extends string = string>({
+  items,
+  defaultValue,
+  value,
+  onValueChange,
+  theme = "underline",
+  className = "",
+  tabsListClassName = "",
+  triggerClassName = "",
+  dir,
+  ...rest
+}: TabsProps<T>) => {
+  const defaultTab = defaultValue || items[0]?.value;
+
+  const currentTheme = THEMES[theme];
+
+  return (
+    <RadixTabs.Root
+      className={className}
+      defaultValue={!value ? defaultTab : undefined}
+      value={value}
+      onValueChange={onValueChange as (value: string) => void}
+      dir={dir}
+      {...rest}
+    >
+      <RadixTabs.List
+        className={cn(currentTheme.list, tabsListClassName)}
+        aria-label="Navigation tabs"
+      >
+        {items.map((item: TabItem) => (
+          <RadixTabs.Trigger
+            key={item.value}
+            value={item.value}
+            disabled={item.disabled}
+            className={cn(
+              "flex items-center overflow-hidden",
+              currentTheme.trigger,
+              triggerClassName,
+            )}
+          >
+            {item.icon && (
+              <span className="mr-2 text-muted-foreground group-data-[state=active]:text-current ">
+                {item.icon}
+              </span>
+            )}
+            <span className="truncate">{item.label}</span>
+          </RadixTabs.Trigger>
+        ))}
+      </RadixTabs.List>
+    </RadixTabs.Root>
+  );
+};

package/src/components/agent-prism/TextInput.tsx

@@ -0,0 +1,142 @@
+import { cn } from "@/lib/utils";
+import { X } from "lucide-react";
+import {
+  useRef,
+  type ChangeEvent,
+  type ComponentPropsWithRef,
+  type ReactNode,
+  type RefObject,
+} from "react";
+
+export type TextInputProps = ComponentPropsWithRef<"input"> & {
+  /**
+   * Callback fired when the input value changes
+   */
+  onValueChange?: (value: string) => void;
+
+  /**
+   * Icon to display at the start of the input
+   */
+  startIcon?: ReactNode;
+
+  /**
+   * Callback fired when the clear button is clicked. If this callback is provided,
+   * the clear button will be shown.
+   */
+  onClear?: () => void;
+
+  /**
+   * Ref to the input element
+   */
+  ref?: RefObject<HTMLInputElement | null>;
+
+  /**
+   * Optional className for the input element
+   */
+  inputClassName?: string;
+
+  /**
+   * Unique identifier for the input (required)
+   */
+  id: string;
+
+  /**
+   * Label text for the input
+   */
+  label?: string;
+
+  /**
+   * Whether to visually hide the label while keeping it for screen readers
+   * @default false
+   */
+  hideLabel?: boolean;
+};
+
+const iconBaseClassName =
+  "absolute top-1/2 -translate-y-1/2 flex items-center justify-center text-foreground";
+
+export const TextInput = ({
+  className,
+  onChange,
+  onValueChange,
+  startIcon,
+  onClear,
+  ref,
+  inputClassName,
+  label,
+  hideLabel = false,
+  id,
+  ...rest
+}: TextInputProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange?.(e);
+    onValueChange?.(e.target.value);
+  };
+
+  const handleClear = () => {
+    onClear?.();
+
+    if (ref) {
+      ref.current?.focus();
+      return;
+    }
+
+    inputRef.current?.focus();
+  };
+
+  return (
+    <div className={cn("w-full", className)}>
+      {label && (
+        <label
+          htmlFor={id}
+          className={cn(
+            "block text-sm font-medium text-foreground ",
+            hideLabel && "sr-only",
+          )}
+        >
+          {label}
+        </label>
+      )}
+      <div
+        className={cn(
+          "relative flex w-full items-center justify-center",
+          label && !hideLabel && "mt-1",
+        )}
+      >
+        <input
+          id={id}
+          ref={ref || inputRef}
+          onChange={handleChange}
+          className={cn(
+            inputClassName,
+            "flex h-7 items-center truncate",
+            "w-full px-2",
+            !!startIcon && "pl-8",
+            !!onClear && "pr-8",
+            "rounded border border-border bg-transparent ",
+            "text-foreground placeholder:text-muted-foreground ",
+            "hover:border-border dark:hover:border-gray-700",
+          )}
+          {...rest}
+        />
+        {startIcon && (
+          <div className={cn(iconBaseClassName, "left-2")} aria-hidden>
+            {startIcon}
+          </div>
+        )}
+        {onClear && rest.value && (
+          <button
+            className={cn(iconBaseClassName, "right-2")}
+            aria-label="Clear input value"
+            onClick={handleClear}
+            type="button"
+          >
+            <X className="size-4" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/agent-prism/TimestampBadge.tsx

@@ -0,0 +1,28 @@
+import type { ComponentPropsWithRef } from "react";
+
+import { Badge, type BadgeProps } from "./Badge";
+
+export type TimestampBadgeProps = ComponentPropsWithRef<"span"> & {
+  timestamp: number;
+  size?: BadgeProps["size"];
+};
+
+export const TimestampBadge = ({
+  timestamp,
+  size,
+  ...rest
+}: TimestampBadgeProps) => {
+  return (
+    <Badge
+      variant="outline"
+      theme="gray"
+      size={size}
+      {...rest}
+      label={formatTimestamp(timestamp)}
+    />
+  );
+};
+
+function formatTimestamp(timestamp: number): string {
+  return new Date(timestamp).toLocaleString();
+}

package/src/components/agent-prism/TokensBadge.tsx

@@ -0,0 +1,26 @@
+import type { ComponentPropsWithRef } from "react";
+
+import { Coins } from "lucide-react";
+
+import { Badge, type BadgeProps } from "./Badge";
+
+export type TokensBadgeProps = ComponentPropsWithRef<"span"> & {
+  tokensCount: number;
+  size?: BadgeProps["size"];
+};
+
+export const TokensBadge = ({
+  tokensCount,
+  size,
+  ...rest
+}: TokensBadgeProps) => {
+  return (
+    <Badge
+      iconStart={<Coins className="size-2.5" />}
+      theme="gray"
+      size={size}
+      {...rest}
+      label={tokensCount}
+    />
+  );
+};

package/src/components/agent-prism/TraceList/TraceList.tsx

@@ -0,0 +1,80 @@
+import type { TraceRecord } from "@evilmartians/agent-prism-types";
+
+import { cn } from "@/lib/utils";
+import { ArrowLeft } from "lucide-react";
+
+import { Badge, type BadgeProps } from "../Badge.tsx";
+import { IconButton } from "../IconButton.tsx";
+import { TraceListItem } from "./TraceListItem.tsx";
+
+type TraceRecordWithBadges = TraceRecord & {
+  badges?: Array<BadgeProps>;
+};
+
+type TraceListProps = {
+  traces: TraceRecordWithBadges[];
+  expanded: boolean;
+  onExpandStateChange: (expanded: boolean) => void;
+  className?: string;
+  onTraceSelect?: (trace: TraceRecord) => void;
+  selectedTrace?: TraceRecord;
+};
+
+export const TraceList = ({
+  traces,
+  expanded,
+  onExpandStateChange,
+  className,
+  onTraceSelect,
+  selectedTrace,
+}: TraceListProps) => {
+  return (
+    <div
+      className={cn(
+        "w-full min-w-0",
+        "flex flex-col gap-3",
+        expanded ? "w-full" : "w-fit",
+        className,
+      )}
+    >
+      <header className="flex min-h-6 items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <h2
+            className={cn(
+              "font-semibold text-lg text-foreground",
+              !expanded && "hidden",
+            )}
+          >
+            Traces
+          </h2>
+
+          <Badge
+            size="5"
+            theme="teal"
+            aria-label={`Total number of traces: ${traces.length}`}
+            label={traces.length}
+          />
+        </div>
+
+      </header>
+
+      {expanded && (
+        <ul className="flex flex-col items-center overflow-hidden rounded border border-border ">
+          {traces.map((trace) => (
+            <li
+              className="w-full list-none border-b-border [&:not(:last-child)]:border-b"
+              key={trace.id}
+            >
+              <TraceListItem
+                trace={trace}
+                onClick={() => onTraceSelect?.(trace)}
+                isSelected={selectedTrace?.id === trace.id}
+                badges={trace.badges}
+              />
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};

package/src/components/agent-prism/TraceList/TraceListItem.tsx

@@ -0,0 +1,79 @@
+import type { TraceRecord } from "@evilmartians/agent-prism-types";
+
+import { cn } from "@/lib/utils";
+import { useCallback, type KeyboardEvent } from "react";
+
+import { type AvatarProps } from "../Avatar.tsx";
+import { Badge, type BadgeProps } from "../Badge.tsx";
+import { PriceBadge } from "../PriceBadge.tsx";
+import { TimestampBadge } from "../TimestampBadge.tsx";
+import { TokensBadge } from "../TokensBadge.tsx";
+import { TraceListItemHeader } from "./TraceListItemHeader.tsx";
+
+interface TraceListItemProps {
+  trace: TraceRecord;
+  badges?: Array<BadgeProps>;
+  avatar?: AvatarProps;
+  onClick?: () => void;
+  isSelected?: boolean;
+}
+
+export const TraceListItem = ({
+  trace,
+  avatar,
+  onClick,
+  badges,
+  isSelected,
+}: TraceListItemProps) => {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent): void => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClick?.();
+      }
+    },
+    [onClick],
+  );
+
+  const { name, agentDescription, totalCost, totalTokens, startTime } = trace;
+
+  return (
+    <div
+      className={cn(
+        "group w-full",
+        "flex flex-col gap-2.5 p-4",
+        "cursor-pointer",
+        isSelected
+          ? "bg-muted"
+          : "bg-card",
+      )}
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      aria-label={`Select trace ${name}`}
+    >
+      <TraceListItemHeader trace={trace} avatar={avatar} />
+
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="mr-4 max-w-full truncate text-sm text-muted-foreground ">
+          {agentDescription}
+        </span>
+
+        {typeof totalCost === "number" && <PriceBadge cost={totalCost} />}
+
+        {typeof totalTokens === "number" && (
+          <TokensBadge tokensCount={totalTokens} />
+        )}
+
+        {badges?.map((badge, index) => (
+          <Badge key={index} theme={badge.theme} size="4" label={badge.label} />
+        ))}
+
+        {typeof startTime === "number" && (
+          <TimestampBadge timestamp={startTime} />
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/agent-prism/TraceList/TraceListItemHeader.tsx

@@ -0,0 +1,46 @@
+import type { TraceRecord } from "@evilmartians/agent-prism-types";
+
+import { formatDuration } from "@evilmartians/agent-prism-data";
+
+import { Avatar, type AvatarProps } from "../Avatar.tsx";
+import { Badge } from "../Badge.tsx";
+
+interface TraceListItemHeaderProps {
+  trace: TraceRecord;
+  avatar?: AvatarProps;
+}
+
+export const TraceListItemHeader = ({
+  trace,
+  avatar,
+}: TraceListItemHeaderProps) => {
+  return (
+    <header className="flex min-w-0 flex-wrap items-center justify-between gap-2">
+      <div className="flex min-w-0 items-center gap-1.5 overflow-hidden">
+        {avatar && <Avatar size="4" {...avatar} />}
+
+        <h3 className="font-medium max-w-full truncate text-sm text-foreground">
+          {trace.name}
+        </h3>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Badge
+          size="5"
+          theme="gray"
+          variant="outline"
+          label={
+            trace.spansCount === 1 ? "1 span" : `${trace.spansCount} spans`
+          }
+        />
+
+        <Badge
+          size="5"
+          theme="gray"
+          variant="outline"
+          label={formatDuration(trace.durationMs)}
+        />
+      </div>
+    </header>
+  );
+};