@elizaos/client 1.5.5-alpha.10

package/src/components/ui/card.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+      data-slot="card"
+      {...props}
+    />
+  )
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex flex-col space-y-1.5 bg-black/50 rounded-t-lg p-2', className)}
+      data-slot="card-header"
+      {...props}
+    />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+      data-slot="card-title"
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    data-slot="card-description"
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} data-slot="card-content" {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex items-center p-6 pt-0', className)}
+      data-slot="card-footer"
+      {...props}
+    />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/src/components/ui/chat/animated-markdown.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import * as React from 'react';
+import { Markdown } from './markdown';
+
+interface AnimatedMarkdownProps {
+  children: string;
+  className?: string;
+  variant?: 'user' | 'agent';
+  shouldAnimate?: boolean;
+  messageId?: string;
+  maxDurationMs?: number; // Optional prop to control cap duration
+}
+
+export const AnimatedMarkdown: React.FC<AnimatedMarkdownProps> = ({
+  children,
+  className,
+  variant = 'agent',
+  shouldAnimate = false,
+  messageId,
+  maxDurationMs = 10000,
+}) => {
+  const [visibleText, setVisibleText] = React.useState(shouldAnimate ? '' : children);
+
+  React.useEffect(() => {
+    if (!shouldAnimate || !children.trim()) {
+      setVisibleText(children);
+      return;
+    }
+
+    const safeDuration = Math.max(1000, maxDurationMs);
+
+    setVisibleText('');
+
+    const TYPING_INTERVAL = 20;
+    const totalChars = children.length;
+    const totalSteps = Math.ceil(safeDuration / TYPING_INTERVAL);
+    const charsPerStep = Math.max(1, Math.ceil(totalChars / totalSteps));
+
+    let visibleCharCount = 0;
+    const interval = setInterval(() => {
+      visibleCharCount += charsPerStep;
+      if (visibleCharCount >= totalChars) {
+        setVisibleText(children);
+        clearInterval(interval);
+      } else {
+        setVisibleText(children.slice(0, visibleCharCount));
+      }
+    }, TYPING_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, [children, shouldAnimate, messageId, maxDurationMs]);
+
+  return (
+    <Markdown className={className} variant={variant}>
+      {visibleText}
+    </Markdown>
+  );
+};

package/src/components/ui/chat/chat-bubble.tsx

@@ -0,0 +1,178 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { cn } from '@/lib/utils';
+import { type VariantProps, cva } from 'class-variance-authority';
+import * as React from 'react';
+import { Button } from '../button';
+import MessageLoading from './message-loading';
+
+// ChatBubble
+const chatBubbleVariant = cva('flex gap-2 max-w-[60%] relative group', {
+  variants: {
+    variant: {
+      received: 'self-start',
+      sent: 'self-end flex-row-reverse',
+    },
+    layout: {
+      default: '',
+      ai: 'max-w-full w-full items-center',
+    },
+  },
+  defaultVariants: {
+    variant: 'received',
+    layout: 'default',
+  },
+});
+
+interface ChatBubbleProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof chatBubbleVariant> {}
+
+const ChatBubble = React.forwardRef<HTMLDivElement, ChatBubbleProps>(
+  ({ className, variant, layout, children, ...props }, ref) => (
+    <div
+      className={cn(chatBubbleVariant({ variant, layout, className }), 'relative group')}
+      ref={ref}
+      {...props}
+    >
+      {React.Children.map(children, (child) =>
+        React.isValidElement(child) &&
+        typeof child.type !== 'string' &&
+        child.type !== React.Fragment
+          ? React.cloneElement(child, {
+              variant,
+              layout,
+            } as React.ComponentProps<typeof child.type>)
+          : child
+      )}
+    </div>
+  )
+);
+ChatBubble.displayName = 'ChatBubble';
+
+// ChatBubbleAvatar
+interface ChatBubbleAvatarProps {
+  src?: string;
+  fallback?: string;
+  className?: string;
+}
+
+const ChatBubbleAvatar: React.FC<ChatBubbleAvatarProps> = ({ src, fallback, className }) => (
+  <Avatar className={className}>
+    <AvatarImage src={src} alt="Avatar" />
+    <AvatarFallback>{fallback}</AvatarFallback>
+  </Avatar>
+);
+
+// ChatBubbleMessage
+const chatBubbleMessageVariants = cva('', {
+  variants: {
+    variant: {
+      received: 'text-secondary-foreground',
+      sent: 'px-5 py-2.5 bg-secondary text-secondary-foreground rounded-lg',
+    },
+    layout: {
+      default: '',
+      ai: 'border-t w-full rounded-none bg-transparent',
+    },
+  },
+  defaultVariants: {
+    variant: 'received',
+    layout: 'default',
+  },
+});
+
+interface ChatBubbleMessageProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof chatBubbleMessageVariants> {
+  isLoading?: boolean;
+}
+
+const ChatBubbleMessage = React.forwardRef<HTMLDivElement, ChatBubbleMessageProps>(
+  ({ className, variant, layout, isLoading = false, children, ...props }, ref) => (
+    <div
+      className={cn(
+        chatBubbleMessageVariants({ variant, layout, className }),
+        'break-words max-w-full whitespace-pre-wrap'
+      )}
+      ref={ref}
+      {...props}
+    >
+      {isLoading ? (
+        <div className="flex items-center space-x-2">
+          <MessageLoading />
+        </div>
+      ) : (
+        children
+      )}
+    </div>
+  )
+);
+ChatBubbleMessage.displayName = 'ChatBubbleMessage';
+
+// ChatBubbleTimestamp
+interface ChatBubbleTimestampProps extends React.HTMLAttributes<HTMLDivElement> {
+  timestamp: string;
+}
+
+const ChatBubbleTimestamp: React.FC<ChatBubbleTimestampProps> = ({
+  timestamp,
+  className,
+  ...props
+}) => (
+  <div className={cn('text-xs text-right select-none', className)} {...props}>
+    {timestamp}
+  </div>
+);
+
+// ChatBubbleAction
+type ChatBubbleActionProps = React.ComponentProps<typeof Button> & {
+  icon: React.ReactNode;
+};
+
+const ChatBubbleAction: React.FC<ChatBubbleActionProps> = ({
+  icon,
+  onClick,
+  className,
+  variant = 'ghost',
+  size = 'icon',
+  ...props
+}) => (
+  <Button variant={variant} size={size} className={className} onClick={onClick} {...props}>
+    {icon}
+  </Button>
+);
+
+interface ChatBubbleActionWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'sent' | 'received';
+  className?: string;
+}
+
+const ChatBubbleActionWrapper = React.forwardRef<HTMLDivElement, ChatBubbleActionWrapperProps>(
+  ({ variant, className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'absolute top-1/2 -translate-y-1/2 flex opacity-0 group-hover:opacity-100 transition-opacity duration-200',
+        variant === 'sent'
+          ? '-left-1 -translate-x-full flex-row-reverse'
+          : '-right-1 translate-x-full',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+);
+ChatBubbleActionWrapper.displayName = 'ChatBubbleActionWrapper';
+
+export {
+  ChatBubble,
+  ChatBubbleAvatar,
+  ChatBubbleMessage,
+  ChatBubbleTimestamp,
+  chatBubbleVariant,
+  chatBubbleMessageVariants,
+  ChatBubbleAction,
+  ChatBubbleActionWrapper,
+};

package/src/components/ui/chat/chat-container.tsx

@@ -0,0 +1,51 @@
+import { cn } from '@/lib/utils';
+import { StickToBottom } from 'use-stick-to-bottom';
+
+export type ChatContainerRootProps = {
+  children: React.ReactNode;
+  className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export type ChatContainerContentProps = {
+  children: React.ReactNode;
+  className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export type ChatContainerScrollAnchorProps = {
+  className?: string;
+  ref?: React.RefObject<HTMLDivElement>;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+function ChatContainerRoot({ children, className, ...props }: ChatContainerRootProps) {
+  return (
+    <StickToBottom
+      className={cn('flex overflow-y-auto', className)}
+      resize="smooth"
+      initial="smooth"
+      role="log"
+      {...props}
+    >
+      {children}
+    </StickToBottom>
+  );
+}
+
+function ChatContainerContent({ children, className, ...props }: ChatContainerContentProps) {
+  return (
+    <StickToBottom.Content className={cn('flex w-full flex-col', className)} {...props}>
+      {children}
+    </StickToBottom.Content>
+  );
+}
+
+function ChatContainerScrollAnchor({ className, ...props }: ChatContainerScrollAnchorProps) {
+  return (
+    <div
+      className={cn('h-px w-full shrink-0 scroll-mt-4', className)}
+      aria-hidden="true"
+      {...props}
+    />
+  );
+}
+
+export { ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor };

package/src/components/ui/chat/chat-input.cy.tsx

@@ -0,0 +1,169 @@
+/// <reference types="cypress" />
+/// <reference path="../../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import { ChatInput } from './chat-input';
+
+// Test component for form submission
+const TestForm = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setValue('');
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <ChatInput value={value} onChange={(e) => setValue(e.target.value)} />
+      <button type="submit">Send</button>
+    </form>
+  );
+};
+
+// Test component for chat form
+const TestChatForm = () => {
+  const [messages, setMessages] = React.useState<string[]>([]);
+  const [input, setInput] = React.useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (input.trim()) {
+      setMessages([...messages, input]);
+      setInput('');
+    }
+  };
+
+  return (
+    <div>
+      <div className="messages">
+        {messages.map((msg, i) => (
+          <div key={i}>{msg}</div>
+        ))}
+      </div>
+      <form onSubmit={handleSubmit}>
+        <ChatInput
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Type a message..."
+        />
+        <button type="submit">Send</button>
+      </form>
+    </div>
+  );
+};
+
+describe('ChatInput Component', () => {
+  it('renders correctly with default props', () => {
+    cy.mount(<ChatInput placeholder="Type a message..." />);
+
+    cy.get('textarea').should('exist');
+    cy.get('textarea').should('have.attr', 'placeholder', 'Type a message...');
+    cy.get('textarea').should('have.attr', 'name', 'message');
+    cy.get('textarea').should('have.class', 'resize-none');
+  });
+
+  it('accepts user input', () => {
+    cy.mount(<ChatInput />);
+
+    cy.get('textarea').type('Hello, this is a test message');
+    cy.get('textarea').should('have.value', 'Hello, this is a test message');
+  });
+
+  it('applies custom placeholder', () => {
+    cy.mount(<ChatInput placeholder="Write your message here..." />);
+
+    cy.get('textarea').should('have.attr', 'placeholder', 'Write your message here...');
+  });
+
+  it('handles onChange events', () => {
+    const onChange = cy.stub();
+    cy.mount(<ChatInput onChange={onChange} />);
+
+    cy.get('textarea').type('Test');
+    cy.wrap(onChange).should('have.been.called');
+  });
+
+  it('handles onKeyDown events', () => {
+    const onKeyDown = cy.stub();
+    cy.mount(<ChatInput onKeyDown={onKeyDown} />);
+
+    cy.get('textarea').type('{enter}');
+    cy.wrap(onKeyDown).should('have.been.called');
+  });
+
+  it('can be disabled', () => {
+    cy.mount(<ChatInput disabled />);
+
+    cy.get('textarea').should('be.disabled');
+    cy.get('textarea').should('have.class', 'disabled:cursor-not-allowed');
+    cy.get('textarea').should('have.class', 'disabled:opacity-50');
+  });
+
+  it('applies custom className', () => {
+    cy.mount(<ChatInput className="custom-class" />);
+
+    cy.get('textarea').should('have.class', 'custom-class');
+  });
+
+  it('clears input on submit', () => {
+    cy.mount(<TestForm />);
+
+    cy.get('textarea').type('Test message');
+    cy.get('textarea').should('have.value', 'Test message');
+    cy.get('button').click();
+    cy.get('textarea').should('have.value', '');
+  });
+
+  it('works with autoComplete', () => {
+    cy.mount(<ChatInput autoComplete="on" />);
+
+    cy.get('textarea').should('have.attr', 'autocomplete', 'on');
+  });
+
+  it('supports maxLength', () => {
+    cy.mount(<ChatInput maxLength={100} />);
+
+    cy.get('textarea').should('have.attr', 'maxlength', '100');
+  });
+
+  it('maintains focus after mount', () => {
+    cy.mount(<ChatInput autoFocus />);
+
+    cy.get('textarea').should('have.focus');
+  });
+
+  it('handles paste events', () => {
+    const onPaste = cy.stub();
+    cy.mount(<ChatInput onPaste={onPaste} />);
+
+    cy.get('textarea').trigger('paste');
+    cy.wrap(onPaste).should('have.been.called');
+  });
+
+  it('supports different input modes', () => {
+    cy.mount(<ChatInput inputMode="text" />);
+
+    cy.get('textarea').should('have.attr', 'inputmode', 'text');
+  });
+
+  it('works in a chat form', () => {
+    cy.mount(<TestChatForm />);
+
+    cy.get('textarea').type('First message');
+    cy.get('button').click();
+    cy.get('.messages').should('contain', 'First message');
+    cy.get('textarea').should('have.value', '');
+
+    cy.get('textarea').type('Second message');
+    cy.get('button').click();
+    cy.get('.messages').should('contain', 'Second message');
+  });
+
+  it('supports data attributes', () => {
+    cy.mount(<ChatInput data-testid="chat-input" data-cy="chat-input" />);
+
+    cy.get('[data-testid="chat-input"]').should('exist');
+    cy.get('[data-cy="chat-input"]').should('exist');
+  });
+});

package/src/components/ui/chat/chat-input.tsx

@@ -0,0 +1,47 @@
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
+import * as React from 'react';
+
+interface ChatInputProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const MAX_HEIGHT = 160;
+
+const ChatInput = React.forwardRef<HTMLTextAreaElement, ChatInputProps>(
+  ({ className, ...props }, ref) => {
+    const internalRef = React.useRef<HTMLTextAreaElement | null>(null);
+
+    const combinedRef = (node: HTMLTextAreaElement) => {
+      if (typeof ref === 'function') ref(node);
+      else if (ref) ref.current = node;
+      internalRef.current = node;
+    };
+
+    const resizeTextarea = () => {
+      const textarea = internalRef.current;
+      if (textarea) {
+        textarea.style.height = 'auto';
+        textarea.style.height = Math.min(textarea.scrollHeight, MAX_HEIGHT) + 'px';
+      }
+    };
+
+    React.useEffect(() => {
+      resizeTextarea();
+    }, [props.value]);
+
+    return (
+      <Textarea
+        autoComplete="off"
+        ref={combinedRef}
+        name="message"
+        className={cn(
+          'px-4 py-3 bg-background text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring disabled:cursor-not-allowed disabled:opacity-50 w-full rounded-md flex items-center h-16 resize-none',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+ChatInput.displayName = 'ChatInput';
+
+export { ChatInput };

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

@@ -0,0 +1,61 @@
+import { Button } from '@/components/ui/button';
+import { ArrowDown } from 'lucide-react';
+import * as React from 'react';
+
+interface ChatMessageListProps extends React.HTMLAttributes<HTMLDivElement> {
+  scrollRef: React.RefObject<HTMLDivElement | null>;
+  contentRef?: React.RefObject<HTMLDivElement | null>; // Optional content ref for StickToBottom
+  isAtBottom: boolean;
+  scrollToBottom: () => void;
+  disableAutoScroll: () => void;
+  smooth?: boolean;
+}
+
+const ChatMessageList = React.forwardRef<HTMLDivElement, ChatMessageListProps>(
+  (
+    {
+      className,
+      children,
+      scrollRef,
+      contentRef,
+      isAtBottom,
+      scrollToBottom,
+      disableAutoScroll,
+      ...props
+    },
+    _ref
+  ) => {
+    return (
+      <div className="relative w-full h-full overflow-hidden">
+        <div
+          className={`flex flex-col w-full h-full p-2 overflow-y-auto ${className}`}
+          ref={scrollRef}
+          onWheel={disableAutoScroll}
+          onTouchMove={disableAutoScroll}
+          {...props}
+        >
+          <div className="flex flex-col gap-10" ref={contentRef}>
+            {children}
+          </div>
+        </div>
+
+        {!isAtBottom && (
+          <Button
+            onClick={() => {
+              scrollToBottom();
+            }}
+            size="icon"
+            variant="outline"
+            className="absolute bottom-2 left-1/2 transform -translate-x-1/2 inline-flex rounded-full shadow-md"
+          >
+            <ArrowDown className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+    );
+  }
+);
+
+ChatMessageList.displayName = 'ChatMessageList';
+
+export { ChatMessageList };