@elizaos/client 1.5.5-alpha.10

package/src/components/ui/chat/message-loading.tsx

@@ -0,0 +1,48 @@
+// @hidden
+export default function MessageLoading() {
+  return (
+    <svg
+      role="img"
+      aria-label="Loading animation"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="text-foreground"
+      data-testid="loading"
+    >
+      <circle cx="4" cy="12" r="2" fill="currentColor">
+        <animate
+          id="spinner_qFRN"
+          begin="0;spinner_OcgL.end+0.25s"
+          attributeName="cy"
+          calcMode="spline"
+          dur="0.6s"
+          values="12;6;12"
+          keySplines=".33,.66,.66,1;.33,0,.66,.33"
+        />
+      </circle>
+      <circle cx="12" cy="12" r="2" fill="currentColor">
+        <animate
+          begin="spinner_qFRN.begin+0.1s"
+          attributeName="cy"
+          calcMode="spline"
+          dur="0.6s"
+          values="12;6;12"
+          keySplines=".33,.66,.66,1;.33,0,.66,.33"
+        />
+      </circle>
+      <circle cx="20" cy="12" r="2" fill="currentColor">
+        <animate
+          id="spinner_OcgL"
+          begin="spinner_qFRN.begin+0.2s"
+          attributeName="cy"
+          calcMode="spline"
+          dur="0.6s"
+          values="12;6;12"
+          keySplines=".33,.66,.66,1;.33,0,.66,.33"
+        />
+      </circle>
+    </svg>
+  );
+}

package/src/components/ui/checkbox.cy.tsx

@@ -0,0 +1,170 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import { Checkbox } from './checkbox';
+
+describe('Checkbox Component', () => {
+  it('renders correctly with default props', () => {
+    cy.mount(<Checkbox />);
+
+    cy.get('[data-testid="checkbox"]').should('exist');
+    cy.get('[data-testid="checkbox"]').should('have.attr', 'role', 'checkbox');
+    cy.get('[data-testid="checkbox"]').should('have.attr', 'aria-checked', 'false');
+  });
+
+  it('can be checked and unchecked', () => {
+    cy.mount(<Checkbox />);
+
+    // Initially unchecked
+    cy.get('[data-testid="checkbox"]').should('have.attr', 'aria-checked', 'false');
+
+    // Click to check
+    cy.get('[data-testid="checkbox"]').click();
+    cy.get('[data-testid="checkbox"]').should('have.attr', 'aria-checked', 'true');
+
+    // Click to uncheck
+    cy.get('[data-testid="checkbox"]').click();
+    cy.get('[data-testid="checkbox"]').should('have.attr', 'aria-checked', 'false');
+  });
+
+  it('works as controlled component', () => {
+    const TestComponent = () => {
+      const [checked, setChecked] = React.useState(false);
+
+      return (
+        <div>
+          <Checkbox
+            checked={checked}
+            onCheckedChange={(value) => {
+              if (typeof value === 'boolean') {
+                setChecked(value);
+              }
+            }}
+          />
+          <p>{checked ? 'Checked' : 'Unchecked'}</p>
+        </div>
+      );
+    };
+
+    cy.mount(<TestComponent />);
+
+    cy.contains('Unchecked').should('exist');
+    cy.get('[data-testid="checkbox"]').click();
+    cy.contains('Checked').should('exist');
+  });
+
+  it('can be disabled', () => {
+    cy.mount(<Checkbox disabled />);
+
+    cy.get('[data-testid="checkbox"]').should('be.disabled');
+    cy.get('[data-testid="checkbox"]').should('have.attr', 'data-disabled');
+  });
+
+  it('supports indeterminate state', () => {
+    cy.mount(<Checkbox checked="indeterminate" />);
+
+    cy.get('[data-testid="checkbox"]').should('have.attr', 'aria-checked', 'mixed');
+  });
+
+  it('applies custom className', () => {
+    cy.mount(<Checkbox className="custom-checkbox h-6 w-6" />);
+
+    cy.get('[data-testid="checkbox"]')
+      .should('have.class', 'custom-checkbox')
+      .should('have.class', 'h-6')
+      .should('have.class', 'w-6');
+  });
+
+  it('works with labels', () => {
+    cy.mount(
+      <div className="flex items-center space-x-2">
+        <Checkbox id="terms" />
+        <label
+          htmlFor="terms"
+          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        >
+          Accept terms and conditions
+        </label>
+      </div>
+    );
+
+    // Clicking the label should check the checkbox
+    cy.get('label').click();
+    cy.get('[data-testid="checkbox"]').should('have.attr', 'aria-checked', 'true');
+  });
+
+  it('handles onCheckedChange callback', () => {
+    const onCheckedChange = cy.stub();
+
+    cy.mount(<Checkbox onCheckedChange={onCheckedChange} />);
+
+    cy.get('[data-testid="checkbox"]').click();
+    cy.wrap(onCheckedChange).should('have.been.calledWith', true);
+
+    cy.get('[data-testid="checkbox"]').click();
+    cy.wrap(onCheckedChange).should('have.been.calledWith', false);
+  });
+
+  it('renders multiple checkboxes in a form', () => {
+    cy.mount(
+      <form className="space-y-4">
+        <div className="flex items-center space-x-2">
+          <Checkbox id="option1" />
+          <label htmlFor="option1">Option 1</label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="option2" />
+          <label htmlFor="option2">Option 2</label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="option3" />
+          <label htmlFor="option3">Option 3</label>
+        </div>
+      </form>
+    );
+
+    cy.get('[data-testid="checkbox"]').should('have.length', 3);
+
+    // Check first and third options
+    cy.get('#option1').click();
+    cy.get('#option3').click();
+
+    cy.get('#option1').should('have.attr', 'aria-checked', 'true');
+    cy.get('#option2').should('have.attr', 'aria-checked', 'false');
+    cy.get('#option3').should('have.attr', 'aria-checked', 'true');
+  });
+
+  it('supports keyboard navigation', () => {
+    cy.mount(<Checkbox />);
+
+    // Initially unchecked
+    cy.get('[data-testid="checkbox"]').should('have.attr', 'aria-checked', 'false');
+
+    // Focus and verify focus
+    cy.get('[data-testid="checkbox"]').focus();
+    cy.get('[data-testid="checkbox"]').should('have.focus');
+
+    // Test that the checkbox is focusable and accessible via keyboard
+    // Note: Radix UI checkbox may handle space key internally
+    // For now, let's verify it's keyboard accessible
+    cy.get('[data-testid="checkbox"]')
+      .should('have.attr', 'role', 'checkbox')
+      .should('not.have.attr', 'disabled');
+  });
+
+  it('maintains visual focus indicator', () => {
+    cy.mount(<Checkbox />);
+
+    cy.get('[data-testid="checkbox"]').focus();
+    cy.get('[data-testid="checkbox"]').should('have.class', 'focus-visible:ring-1');
+  });
+
+  it('supports data attributes', () => {
+    cy.mount(<Checkbox data-testid="custom-checkbox" data-field="agree" />);
+
+    cy.get('[data-testid="custom-checkbox"]')
+      .should('exist')
+      .should('have.attr', 'data-field', 'agree');
+  });
+});

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+  'data-testid'?: string;
+}
+
+const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+  ({ className, ...props }, ref) => (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      className={cn(
+        'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        className
+      )}
+      data-testid={props['data-testid'] || 'checkbox'}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+        <Check className="h-4 w-4" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+);
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/src/components/ui/collapsible.cy.tsx

@@ -0,0 +1,283 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible';
+import { Button } from './button';
+
+describe('Collapsible Component', () => {
+  it('renders basic collapsible', () => {
+    cy.mount(
+      <Collapsible>
+        <CollapsibleTrigger>Toggle Content</CollapsibleTrigger>
+        <CollapsibleContent>
+          <p>This is collapsible content</p>
+        </CollapsibleContent>
+      </Collapsible>
+    );
+
+    cy.contains('Toggle Content').should('be.visible');
+    cy.contains('This is collapsible content').should('not.exist');
+  });
+
+  it('toggles content on click', () => {
+    cy.mount(
+      <Collapsible>
+        <CollapsibleTrigger asChild>
+          <Button variant="outline">Show More</Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="p-4 border rounded">
+            <p>Additional content that can be toggled</p>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    );
+
+    // Initially collapsed
+    cy.contains('Additional content').should('not.exist');
+
+    // Click to expand
+    cy.contains('button', 'Show More').click();
+    cy.contains('Additional content').should('be.visible');
+
+    // Click to collapse
+    cy.contains('button', 'Show More').click();
+    cy.contains('Additional content').should('not.exist');
+  });
+
+  it('works as controlled component', () => {
+    const TestComponent = () => {
+      const [open, setOpen] = React.useState(false);
+
+      return (
+        <div>
+          <p>Is open: {open ? 'Yes' : 'No'}</p>
+          <Collapsible open={open} onOpenChange={setOpen}>
+            <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+            <CollapsibleContent>
+              <p>Controlled content</p>
+            </CollapsibleContent>
+          </Collapsible>
+          <button onClick={() => setOpen(!open)}>External Toggle</button>
+        </div>
+      );
+    };
+
+    cy.mount(<TestComponent />);
+
+    cy.contains('Is open: No').should('be.visible');
+    cy.contains('Controlled content').should('not.exist');
+
+    // Use external toggle
+    cy.contains('button', 'External Toggle').click();
+    cy.contains('Is open: Yes').should('be.visible');
+    cy.contains('Controlled content').should('be.visible');
+
+    // Use internal trigger
+    cy.contains('Toggle').click();
+    cy.contains('Is open: No').should('be.visible');
+    cy.contains('Controlled content').should('not.exist');
+  });
+
+  it('supports default open state', () => {
+    cy.mount(
+      <Collapsible defaultOpen>
+        <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+        <CollapsibleContent>
+          <p>Initially visible content</p>
+        </CollapsibleContent>
+      </Collapsible>
+    );
+
+    cy.contains('Initially visible content').should('be.visible');
+
+    // Click to collapse
+    cy.contains('Toggle').click();
+    cy.contains('Initially visible content').should('not.exist');
+  });
+
+  it('can be disabled', () => {
+    cy.mount(
+      <Collapsible disabled>
+        <CollapsibleTrigger asChild>
+          <Button disabled>Disabled Toggle</Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <p>This content cannot be toggled</p>
+        </CollapsibleContent>
+      </Collapsible>
+    );
+
+    cy.contains('button', 'Disabled Toggle').should('be.disabled');
+    cy.contains('This content cannot be toggled').should('not.exist');
+
+    // Try to click
+    cy.contains('button', 'Disabled Toggle').click({ force: true });
+    cy.contains('This content cannot be toggled').should('not.exist');
+  });
+
+  it('supports custom className', () => {
+    cy.mount(
+      <Collapsible className="custom-collapsible border p-4">
+        <CollapsibleTrigger className="custom-trigger text-blue-600">
+          Click to expand
+        </CollapsibleTrigger>
+        <CollapsibleContent className="custom-content mt-4">
+          <p>Styled content</p>
+        </CollapsibleContent>
+      </Collapsible>
+    );
+
+    cy.get('.custom-collapsible').should('have.class', 'border');
+    cy.get('.custom-trigger').should('have.class', 'text-blue-600');
+
+    cy.contains('Click to expand').click();
+    cy.get('.custom-content').should('have.class', 'mt-4');
+  });
+
+  it('handles multiple collapsibles', () => {
+    cy.mount(
+      <div className="space-y-4">
+        <Collapsible>
+          <CollapsibleTrigger>First Section</CollapsibleTrigger>
+          <CollapsibleContent>
+            <p>First content</p>
+          </CollapsibleContent>
+        </Collapsible>
+
+        <Collapsible>
+          <CollapsibleTrigger>Second Section</CollapsibleTrigger>
+          <CollapsibleContent>
+            <p>Second content</p>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+    );
+
+    // Both initially collapsed
+    cy.contains('First content').should('not.exist');
+    cy.contains('Second content').should('not.exist');
+
+    // Expand first
+    cy.contains('First Section').click();
+    cy.contains('First content').should('be.visible');
+    cy.contains('Second content').should('not.exist');
+
+    // Expand second
+    cy.contains('Second Section').click();
+    cy.contains('First content').should('be.visible');
+    cy.contains('Second content').should('be.visible');
+  });
+
+  it('works with complex content', () => {
+    cy.mount(
+      <Collapsible>
+        <div className="flex items-center justify-between">
+          <h3 className="font-semibold">Advanced Settings</h3>
+          <CollapsibleTrigger asChild>
+            <Button variant="ghost" size="sm">
+              <span>Show</span>
+            </Button>
+          </CollapsibleTrigger>
+        </div>
+        <CollapsibleContent>
+          <div className="mt-4 space-y-4">
+            <div>
+              <label>Option 1</label>
+              <input type="checkbox" />
+            </div>
+            <div>
+              <label>Option 2</label>
+              <input type="checkbox" />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    );
+
+    cy.contains('Advanced Settings').should('be.visible');
+    cy.get('input[type="checkbox"]').should('not.exist');
+
+    cy.contains('button', 'Show').click();
+    cy.get('input[type="checkbox"]').should('have.length', 2);
+  });
+
+  it('animates smoothly', () => {
+    cy.mount(
+      <Collapsible>
+        <CollapsibleTrigger>Animate</CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="p-4 bg-gray-100">
+            <p>This content animates in and out</p>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    );
+
+    cy.contains('Animate').click();
+    cy.contains('This content animates').should('be.visible');
+  });
+
+  it('handles nested collapsibles', () => {
+    cy.mount(
+      <Collapsible>
+        <CollapsibleTrigger>Outer Collapsible</CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="p-4 border">
+            <p>Outer content</p>
+            <Collapsible>
+              <CollapsibleTrigger>Inner Collapsible</CollapsibleTrigger>
+              <CollapsibleContent>
+                <p className="p-4 bg-gray-100">Inner content</p>
+              </CollapsibleContent>
+            </Collapsible>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    );
+
+    // Both initially collapsed
+    cy.contains('Outer content').should('not.exist');
+    cy.contains('Inner content').should('not.exist');
+
+    // Expand outer
+    cy.contains('Outer Collapsible').click();
+    cy.contains('Outer content').should('be.visible');
+    cy.contains('Inner content').should('not.exist');
+
+    // Expand inner
+    cy.contains('Inner Collapsible').click();
+    cy.contains('Inner content').should('be.visible');
+  });
+
+  it('maintains state during content updates', () => {
+    const TestComponent = () => {
+      const [count, setCount] = React.useState(0);
+
+      return (
+        <div>
+          <button onClick={() => setCount(count + 1)}>Update Count: {count}</button>
+          <Collapsible>
+            <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+            <CollapsibleContent>
+              <p>Content with count: {count}</p>
+            </CollapsibleContent>
+          </Collapsible>
+        </div>
+      );
+    };
+
+    cy.mount(<TestComponent />);
+
+    // Expand collapsible
+    cy.contains('Toggle').click();
+    cy.contains('Content with count: 0').should('be.visible');
+
+    // Update count
+    cy.contains('button', 'Update Count: 0').click();
+
+    // Content should still be visible with new count
+    cy.contains('Content with count: 1').should('be.visible');
+  });
+});

package/src/components/ui/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };