@elizaos/client 1.5.5-alpha.10

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

@@ -0,0 +1,209 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from './toast';
+
+describe('Toast Component', () => {
+  it('renders basic toast correctly', () => {
+    cy.mountRadix(
+      <ToastProvider>
+        <ToastViewport />
+        <Toast open>
+          <ToastTitle>Notification</ToastTitle>
+          <ToastDescription>This is a toast message</ToastDescription>
+        </Toast>
+      </ToastProvider>
+    );
+
+    cy.contains('Notification').should('be.visible');
+    cy.contains('This is a toast message').should('be.visible');
+  });
+
+  it('renders with action button', () => {
+    const onAction = cy.stub();
+
+    cy.mountRadix(
+      <ToastProvider>
+        <ToastViewport />
+        <Toast open>
+          <ToastTitle>Undo</ToastTitle>
+          <ToastDescription>Your action has been undone</ToastDescription>
+          <ToastAction altText="Redo" onClick={onAction}>
+            Redo
+          </ToastAction>
+        </Toast>
+      </ToastProvider>
+    );
+
+    cy.contains('button', 'Redo').click();
+    cy.wrap(onAction).should('have.been.called');
+  });
+
+  it('renders with close button', () => {
+    cy.mountRadix(
+      <ToastProvider>
+        <ToastViewport />
+        <Toast open>
+          <ToastTitle>Success</ToastTitle>
+          <ToastDescription>Your changes have been saved</ToastDescription>
+          <ToastClose />
+        </Toast>
+      </ToastProvider>
+    );
+
+    cy.get('button[type="button"]').should('exist');
+  });
+
+  it('supports different variants', () => {
+    cy.mountRadix(
+      <ToastProvider>
+        <ToastViewport />
+        <div className="space-y-4">
+          <Toast open variant="default">
+            <ToastTitle>Default Toast</ToastTitle>
+            <ToastDescription>This is a default toast</ToastDescription>
+          </Toast>
+          <Toast open variant="destructive">
+            <ToastTitle>Error</ToastTitle>
+            <ToastDescription>Something went wrong</ToastDescription>
+          </Toast>
+        </div>
+      </ToastProvider>
+    );
+
+    cy.get('[data-state="open"]').should('have.class', 'destructive');
+  });
+
+  it('renders multiple toasts', () => {
+    cy.mountRadix(
+      <ToastProvider>
+        <ToastViewport />
+        <div>
+          <Toast open>
+            <ToastTitle>First Toast</ToastTitle>
+            <ToastDescription>First message</ToastDescription>
+          </Toast>
+          <Toast open>
+            <ToastTitle>Second Toast</ToastTitle>
+            <ToastDescription>Second message</ToastDescription>
+          </Toast>
+        </div>
+      </ToastProvider>
+    );
+
+    cy.contains('First Toast').should('be.visible');
+    cy.contains('Second Toast').should('be.visible');
+  });
+
+  it('handles long content gracefully', () => {
+    cy.mountRadix(
+      <ToastProvider>
+        <ToastViewport />
+        <Toast open>
+          <ToastTitle>Long Title That Should Wrap Properly</ToastTitle>
+          <ToastDescription>
+            This is a very long description that contains a lot of text. It should wrap properly
+            within the toast container and maintain good readability. The toast component should
+            handle long content gracefully without breaking the layout.
+          </ToastDescription>
+        </Toast>
+      </ToastProvider>
+    );
+
+    cy.get('[data-state="open"]').should('be.visible');
+  });
+
+  it('works with custom className', () => {
+    cy.mountRadix(
+      <ToastProvider>
+        <ToastViewport className="custom-viewport" />
+        <Toast open className="custom-toast bg-blue-500">
+          <ToastTitle className="text-white">Custom Styled</ToastTitle>
+          <ToastDescription className="text-blue-100">Custom styled toast</ToastDescription>
+        </Toast>
+      </ToastProvider>
+    );
+
+    cy.get('[data-state="open"]').should('have.class', 'custom-toast');
+    cy.get('[data-state="open"]').should('have.class', 'bg-blue-500');
+  });
+
+  it('supports icons in toast', () => {
+    cy.mountRadix(
+      <ToastProvider>
+        <ToastViewport />
+        <Toast open>
+          <div className="flex items-center gap-2">
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <div>
+              <ToastTitle>Success</ToastTitle>
+              <ToastDescription>Operation completed successfully</ToastDescription>
+            </div>
+          </div>
+        </Toast>
+      </ToastProvider>
+    );
+
+    cy.get('svg').should('be.visible');
+    cy.contains('Success').should('be.visible');
+  });
+
+  it('renders error toast variant', () => {
+    cy.mountRadix(
+      <ToastProvider>
+        <ToastViewport />
+        <Toast open variant="destructive">
+          <div className="flex items-center gap-2">
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <div>
+              <ToastTitle>Error</ToastTitle>
+              <ToastDescription>Failed to save changes</ToastDescription>
+            </div>
+          </div>
+          <ToastClose />
+        </Toast>
+      </ToastProvider>
+    );
+
+    cy.contains('Error').should('be.visible');
+    cy.contains('Failed to save changes').should('be.visible');
+    cy.get('button[type="button"]').should('exist');
+  });
+
+  it('viewport positions toast correctly', () => {
+    cy.mountRadix(
+      <ToastProvider>
+        <ToastViewport className="top-0 right-0" />
+        <Toast open>
+          <ToastTitle>Positioned Toast</ToastTitle>
+          <ToastDescription>This toast is positioned</ToastDescription>
+        </Toast>
+      </ToastProvider>
+    );
+
+    cy.get('[data-state="open"]').should('be.visible');
+  });
+});

package/src/components/ui/toast.tsx

@@ -0,0 +1,126 @@
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { type VariantProps, cva } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      className
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  {
+    variants: {
+      variant: {
+        default: 'border bg-background text-foreground',
+        destructive:
+          'destructive group border-destructive bg-destructive text-destructive-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+      className
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      'absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn('text-sm font-semibold [&+div]:text-xs', className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn('text-sm opacity-90', className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};

package/src/components/ui/toaster.tsx

@@ -0,0 +1,29 @@
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from '@/components/ui/toast';
+import { useToast } from '@/hooks/use-toast';
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(({ id, title, description, action, ...props }) => (
+        <Toast key={id} {...props}>
+          <div className="grid gap-1">
+            {title && <ToastTitle>{title}</ToastTitle>}
+            {description && <ToastDescription>{description}</ToastDescription>}
+          </div>
+          {action}
+          <ToastClose />
+        </Toast>
+      ))}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}

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

@@ -0,0 +1,244 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
+
+describe('Tooltip Component', () => {
+  it('renders tooltip on hover', () => {
+    cy.mount(
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>Hover me</TooltipTrigger>
+          <TooltipContent>
+            <p>Tooltip content</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+
+    // Just verify the trigger renders and basic structure exists
+    cy.contains('Hover me').should('be.visible');
+    cy.get('button').should('exist');
+  });
+
+  it('supports custom content', () => {
+    cy.mount(
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>
+            <button>Click for info</button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <div className="flex items-center gap-2">
+              <span>💡</span>
+              <span>This is helpful information</span>
+            </div>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+
+    // Verify the button renders and has tooltip structure
+    cy.get('button').should('be.visible');
+    cy.contains('Click for info').should('exist');
+  });
+
+  it('works with disabled elements', () => {
+    cy.mount(
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button disabled className="opacity-50">
+              Disabled button
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>This button is disabled</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+
+    // Verify disabled button exists and tooltip structure
+    cy.get('button').should('be.disabled');
+    cy.get('button').should('have.class', 'opacity-50');
+    cy.contains('Disabled button').should('exist');
+  });
+
+  it('supports different positions', () => {
+    cy.mount(
+      <TooltipProvider>
+        <div className="flex gap-8 p-20">
+          <Tooltip>
+            <TooltipTrigger>Top</TooltipTrigger>
+            <TooltipContent side="top">
+              <p>Tooltip on top</p>
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger>Bottom</TooltipTrigger>
+            <TooltipContent side="bottom">
+              <p>Tooltip on bottom</p>
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger>Left</TooltipTrigger>
+            <TooltipContent side="left">
+              <p>Tooltip on left</p>
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger>Right</TooltipTrigger>
+            <TooltipContent side="right">
+              <p>Tooltip on right</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      </TooltipProvider>
+    );
+
+    // Verify all position triggers render
+    cy.contains('Top').should('be.visible');
+    cy.contains('Bottom').should('be.visible');
+    cy.contains('Left').should('be.visible');
+    cy.contains('Right').should('be.visible');
+  });
+
+  it('supports custom delay', () => {
+    cy.mount(
+      <TooltipProvider delayDuration={200}>
+        <Tooltip>
+          <TooltipTrigger>Quick tooltip</TooltipTrigger>
+          <TooltipContent>
+            <p>Shows after 200ms</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+
+    // Verify tooltip with delay configuration renders
+    cy.contains('Quick tooltip').should('be.visible');
+    cy.get('button').should('exist');
+  });
+
+  it('works with icons as triggers', () => {
+    cy.mount(
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>
+            <svg width="20" height="20" viewBox="0 0 20 20" data-testid="info-icon">
+              <circle cx="10" cy="10" r="10" fill="currentColor" />
+            </svg>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Information tooltip</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+
+    // Verify icon trigger renders correctly
+    cy.get('[data-testid="info-icon"]').should('exist');
+    cy.get('svg').should('be.visible');
+    cy.get('circle').should('exist');
+  });
+
+  it('supports keyboard navigation', () => {
+    cy.mount(
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>
+            <button>Tab to me</button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Keyboard accessible</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+
+    // Verify button can be focused for keyboard accessibility
+    cy.get('button').should('exist');
+    cy.get('button').first().focus();
+    cy.get('button').first().should('have.focus');
+  });
+
+  it('handles long content', () => {
+    cy.mount(
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>Long tooltip</TooltipTrigger>
+          <TooltipContent className="max-w-xs">
+            <p>
+              This is a very long tooltip content that should wrap properly and not exceed the
+              maximum width constraint we have set.
+            </p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+
+    // Verify trigger and structure for long content
+    cy.contains('Long tooltip').should('be.visible');
+    cy.get('button').should('exist');
+  });
+
+  it('works in forms', () => {
+    cy.mount(
+      <TooltipProvider>
+        <form className="space-y-4">
+          <div className="flex items-center gap-2">
+            <label htmlFor="email">Email</label>
+            <Tooltip>
+              <TooltipTrigger type="button">
+                <span className="text-gray-400">?</span>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Enter your email address</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+          <input id="email" type="email" className="border rounded px-2 py-1" />
+        </form>
+      </TooltipProvider>
+    );
+
+    // Verify form integration works
+    cy.get('form').should('exist');
+    cy.get('label[for="email"]').should('contain', 'Email');
+    cy.contains('?').should('be.visible');
+    cy.get('input[type="email"]').should('exist');
+  });
+
+  it('can be controlled programmatically', () => {
+    const ControlledTooltip = () => {
+      const [open, setOpen] = React.useState(false);
+
+      return (
+        <TooltipProvider>
+          <div>
+            <button onClick={() => setOpen(!open)}>Toggle tooltip</button>
+            <Tooltip open={open}>
+              <TooltipTrigger>Target</TooltipTrigger>
+              <TooltipContent>
+                <p>Controlled tooltip</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </TooltipProvider>
+      );
+    };
+
+    cy.mount(<ControlledTooltip />);
+
+    cy.contains('Controlled tooltip').should('not.exist');
+    cy.contains('Toggle tooltip').click();
+    cy.contains('Controlled tooltip').should('be.visible');
+    cy.contains('Toggle tooltip').click();
+    cy.contains('Controlled tooltip').should('not.exist');
+  });
+});

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 overflow-hidden select-none rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };