@elizaos/client 1.5.5-alpha.10

package/src/components/ChatInputArea.tsx

@@ -0,0 +1,196 @@
+import React, { useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import { ChatInput } from '@/components/ui/chat/chat-input';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { AudioRecorder } from '@/components/audio-recorder';
+import { Loader2, Paperclip, Send, FileText, X } from 'lucide-react';
+import { Agent, UUID, ChannelType } from '@elizaos/core';
+import type { UploadingFile } from '@/hooks/use-file-upload';
+
+interface ChatInputAreaProps {
+  input: string;
+  setInput: (value: string) => void;
+  inputDisabled: boolean;
+  selectedFiles: UploadingFile[];
+  removeFile: (fileId: string) => void;
+  handleFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleSendMessage: (e: React.FormEvent<HTMLFormElement>) => void;
+  handleKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  chatType: ChannelType.DM | ChannelType.GROUP;
+  targetAgentData?: Agent;
+  formRef: React.RefObject<HTMLFormElement | null>;
+  inputRef: React.RefObject<HTMLTextAreaElement | null>;
+  fileInputRef: React.RefObject<HTMLInputElement | null>;
+}
+
+export const ChatInputArea: React.FC<ChatInputAreaProps> = ({
+  input,
+  setInput,
+  inputDisabled,
+  selectedFiles,
+  removeFile,
+  handleFileChange,
+  handleSendMessage,
+  handleKeyDown,
+  chatType,
+  targetAgentData,
+  formRef,
+  inputRef,
+  fileInputRef,
+}) => {
+  return (
+    <div className="px-2 sm:px-4 pb-2 sm:pb-4 mt-auto flex-shrink-0" data-testid="chat-container">
+      {inputDisabled && (
+        <div className="px-2 pb-2 text-sm text-muted-foreground flex items-center gap-2">
+          <div className="flex gap-0.5 items-center justify-center">
+            <span className="w-[6px] h-[6px] bg-white rounded-full animate-bounce [animation-delay:0s]" />
+            <span className="w-[6px] h-[6px] bg-white rounded-full animate-bounce [animation-delay:0.2s]" />
+            <span className="w-[6px] h-[6px] bg-white rounded-full animate-bounce [animation-delay:0.4s]" />
+          </div>
+          <span className="text-xs sm:text-sm">
+            {chatType === ChannelType.DM && targetAgentData
+              ? `${targetAgentData.name} is thinking`
+              : 'Agent is thinking'}
+          </span>
+          <div className="flex">
+            <span className="animate-pulse [animation-delay:0ms]">.</span>
+            <span className="animate-pulse [animation-delay:200ms]">.</span>
+            <span className="animate-pulse [animation-delay:400ms]">.</span>
+          </div>
+        </div>
+      )}
+      <form
+        ref={formRef}
+        onSubmit={handleSendMessage}
+        className="relative rounded-md border bg-card p-2 sm:p-3"
+      >
+        {selectedFiles.length > 0 && (
+          <div className="flex flex-wrap gap-2 sm:gap-3 p-2 sm:p-3 pb-0 max-h-32 sm:max-h-40 overflow-y-auto">
+            {selectedFiles.map((fileData) => {
+              const blobUrl = fileData.blobUrl || URL.createObjectURL(fileData.file);
+
+              return (
+                <div key={fileData.id} className="relative p-1 sm:p-2">
+                  <div className="relative w-12 h-12 sm:w-16 sm:h-16 rounded-lg overflow-hidden border bg-muted">
+                    {fileData.isUploading && (
+                      <div className="absolute inset-0 bg-black/50 flex items-center justify-center z-10">
+                        <Loader2 className="h-3 w-3 sm:h-4 sm:w-4 animate-spin text-white" />
+                      </div>
+                    )}
+                    {fileData.file.type.startsWith('image/') ? (
+                      <img
+                        alt="Selected file"
+                        src={blobUrl}
+                        className="w-full h-full object-cover"
+                      />
+                    ) : fileData.file.type.startsWith('video/') ? (
+                      <video src={blobUrl} className="w-full h-full object-cover" muted />
+                    ) : (
+                      <div className="w-full h-full flex items-center justify-center bg-muted">
+                        <FileText className="h-4 w-4 sm:h-8 sm:w-8 text-muted-foreground" />
+                      </div>
+                    )}
+                    {fileData.error && (
+                      <div className="absolute bottom-0 left-0 right-0 bg-red-500 text-white text-xs p-1 text-center">
+                        Error
+                      </div>
+                    )}
+                  </div>
+                  <Button
+                    onClick={() => removeFile(fileData.id)}
+                    className="absolute -right-1 -top-1 size-[16px] sm:size-[20px] ring-2 ring-background z-20"
+                    variant="outline"
+                    size="icon"
+                    disabled={fileData.isUploading}
+                  >
+                    <X className="h-2 w-2 sm:h-3 sm:w-3" />
+                  </Button>
+                  <div className="text-xs text-center mt-1 truncate w-12 sm:w-16">
+                    {fileData.file.name}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+        <ChatInput
+          ref={inputRef}
+          onKeyDown={handleKeyDown}
+          value={input}
+          onChange={({ target }) => setInput(target.value)}
+          placeholder={
+            inputDisabled
+              ? chatType === ChannelType.DM && targetAgentData
+                ? `${targetAgentData.name} is thinking...`
+                : 'Agent is processing...'
+              : chatType === ChannelType.DM
+                ? 'Type your message here...'
+                : 'Message group...'
+          }
+          className="min-h-12 resize-none rounded-none bg-card border-0 px-0 py-0 shadow-none focus-visible:ring-0 text-sm sm:text-base"
+          disabled={
+            inputDisabled || (chatType === ChannelType.DM && targetAgentData?.status === 'inactive')
+          }
+          data-testid="chat-input"
+        />
+        <div className="flex items-center pt-0 gap-1">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 sm:h-10 sm:w-10"
+                  onClick={() => {
+                    if (fileInputRef.current) fileInputRef.current.click();
+                  }}
+                >
+                  <Paperclip className="size-3 sm:size-4" />
+                  <span className="sr-only">Attach file</span>
+                </Button>
+                <input
+                  type="file"
+                  ref={fileInputRef}
+                  onChange={handleFileChange}
+                  accept="image/*,video/*,audio/*,.pdf,.doc,.docx,.txt,.rtf,..."
+                  multiple
+                  className="hidden"
+                />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="left">
+              <p>Attach files</p>
+            </TooltipContent>
+          </Tooltip>
+          {chatType === ChannelType.DM && targetAgentData?.id && (
+            <AudioRecorder
+              agentId={targetAgentData.id}
+              onChange={(newInput: string) => setInput(newInput)}
+            />
+          )}
+          <Button
+            disabled={
+              inputDisabled ||
+              (chatType === ChannelType.DM && targetAgentData?.status === 'inactive') ||
+              selectedFiles.some((f) => f.isUploading)
+            }
+            type="submit"
+            size="sm"
+            className="ml-auto gap-1.5 h-[26px] sm:h-[30px] px-2 sm:px-3"
+            data-testid="send-button"
+          >
+            {inputDisabled || selectedFiles.some((f) => f.isUploading) ? (
+              <div className="flex gap-0.5 items-center justify-center">
+                <span className="w-[4px] h-[4px] bg-gray-500 rounded-full animate-bounce [animation-delay:0s]" />
+                <span className="w-[4px] h-[4px] bg-gray-500 rounded-full animate-bounce [animation-delay:0.2s]" />
+                <span className="w-[4px] h-[4px] bg-gray-500 rounded-full animate-bounce [animation-delay:0.4s]" />
+              </div>
+            ) : (
+              <Send className="size-3 sm:size-3.5" />
+            )}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};

package/src/components/ChatMessageListComponent.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { Avatar, AvatarImage } from '@/components/ui/avatar';
+import { ChatMessageList } from '@/components/ui/chat/chat-message-list';
+import { ChatBubble } from '@/components/ui/chat/chat-bubble';
+import { MemoizedMessageContent } from './chat';
+import { UUID, Agent, ChannelType } from '@elizaos/core';
+import type { UiMessage } from '@/hooks/use-query-hooks';
+import { cn } from '@/lib/utils';
+import { getAgentAvatar } from '@/lib/utils';
+
+interface ChatMessageListComponentProps {
+  messages: UiMessage[];
+  isLoadingMessages: boolean;
+  chatType: ChannelType.GROUP | ChannelType.DM;
+  currentClientEntityId: string;
+  targetAgentData?: Agent;
+  allAgents: Partial<Agent>[];
+  animatedMessageId: string | null;
+  scrollRef: React.RefObject<HTMLDivElement | null>;
+  contentRef?: React.RefObject<HTMLDivElement | null>; // Optional content ref for StickToBottom
+  isAtBottom: boolean;
+  scrollToBottom: () => void;
+  disableAutoScroll: () => void;
+  finalChannelId: UUID | undefined;
+  getAgentInMessage?: (agentId: UUID) => Partial<Agent> | undefined;
+  agentAvatarMap?: Record<UUID, string | null>;
+  onDeleteMessage: (messageId: string) => void;
+  onRetryMessage: (messageText: string) => void;
+  selectedGroupAgentId?: UUID | null;
+}
+
+export const ChatMessageListComponent: React.FC<ChatMessageListComponentProps> = ({
+  messages,
+  isLoadingMessages,
+  chatType,
+  currentClientEntityId,
+  targetAgentData,
+  allAgents,
+  animatedMessageId,
+  scrollRef,
+  contentRef,
+  isAtBottom,
+  scrollToBottom,
+  disableAutoScroll,
+  finalChannelId,
+  getAgentInMessage,
+  agentAvatarMap,
+  onDeleteMessage,
+  onRetryMessage,
+  selectedGroupAgentId,
+}) => {
+  // Filter messages based on selected agent in group chat
+  const filteredMessages = React.useMemo(() => {
+    if (chatType === ChannelType.GROUP && selectedGroupAgentId) {
+      return messages.filter((message) => {
+        // Show user messages and messages from selected agent
+        const isUser = message.senderId === currentClientEntityId;
+        const isSelectedAgent = message.senderId === selectedGroupAgentId;
+        return isUser || isSelectedAgent;
+      });
+    }
+    return messages;
+  }, [messages, chatType, selectedGroupAgentId, currentClientEntityId]);
+
+  return (
+    <ChatMessageList
+      key={finalChannelId || 'no-channel'}
+      scrollRef={scrollRef}
+      contentRef={contentRef}
+      isAtBottom={isAtBottom}
+      scrollToBottom={scrollToBottom}
+      disableAutoScroll={disableAutoScroll}
+      className="h-full w-full"
+      data-testid="chat-messages"
+    >
+      {isLoadingMessages && filteredMessages.length === 0 && (
+        <div className="flex flex-1 justify-center items-center">
+          <p>Loading messages...</p>
+        </div>
+      )}
+      {!isLoadingMessages && filteredMessages.length === 0 && (
+        <div className="flex flex-1 justify-center items-center">
+          <p>No messages yet. Start the conversation!</p>
+        </div>
+      )}
+      {filteredMessages.map((message: UiMessage, index: number) => {
+        const isUser = message.senderId === currentClientEntityId;
+        const shouldAnimate =
+          index === filteredMessages.length - 1 &&
+          message.isAgent &&
+          message.id === animatedMessageId;
+
+        const senderAgent =
+          !isUser && getAgentInMessage ? getAgentInMessage(message.senderId) : undefined;
+
+        return (
+          <div
+            key={`${message.id}-${message.createdAt}`}
+            className={cn('flex gap-1', isUser ? 'justify-end' : 'justify-start')}
+          >
+            <ChatBubble
+              variant={isUser ? 'sent' : 'received'}
+              className={`flex flex-col gap-1 ${isUser ? 'flex-row-reverse' : ''}`}
+            >
+              {!isUser && chatType === ChannelType.GROUP && (
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Avatar className="size-5 border rounded-full select-none">
+                    <AvatarImage
+                      src={getAgentAvatar(
+                        senderAgent ||
+                          (agentAvatarMap && message.senderId && allAgents
+                            ? allAgents.find((a: Partial<Agent>) => a.id === message.senderId)
+                            : undefined)
+                      )}
+                    />
+                  </Avatar>
+                  <div>{senderAgent?.name}</div>
+                </div>
+              )}
+              <MemoizedMessageContent
+                message={message}
+                agentForTts={
+                  chatType === ChannelType.DM ? targetAgentData : (senderAgent as Agent | undefined)
+                }
+                shouldAnimate={shouldAnimate}
+                onDelete={onDeleteMessage}
+                onRetry={onRetryMessage}
+                isUser={isUser}
+                getAgentInMessage={chatType === ChannelType.GROUP ? getAgentInMessage : undefined}
+                agentAvatarMap={chatType === ChannelType.GROUP ? agentAvatarMap : undefined}
+                chatType={chatType}
+              />
+            </ChatBubble>
+          </div>
+        );
+      })}
+    </ChatMessageList>
+  );
+};

package/src/components/actionTool.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { cn } from '@/lib/utils';
+import { CheckCircle, ChevronDown, Loader2, Settings, XCircle } from 'lucide-react';
+import { useState } from 'react';
+
+export type ToolPart = {
+  type: string;
+  state: 'input-streaming' | 'input-available' | 'output-available' | 'output-error';
+  input?: Record<string, unknown>;
+  output?: Record<string, unknown>;
+  toolCallId?: string;
+  errorText?: string;
+};
+
+export type ToolProps = {
+  toolPart: ToolPart;
+  defaultOpen?: boolean;
+  className?: string;
+};
+
+const Tool = ({ toolPart, defaultOpen = false, className }: ToolProps) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  const { state, input, output, toolCallId } = toolPart;
+
+  const getStateIcon = () => {
+    switch (state) {
+      case 'input-streaming':
+        return <Loader2 className="h-4 w-4 animate-spin text-blue-500" />;
+      case 'input-available':
+        return <Settings className="h-4 w-4 text-orange-500" />;
+      case 'output-available':
+        return <CheckCircle className="h-4 w-4 text-green-500" />;
+      case 'output-error':
+        return <XCircle className="h-4 w-4 text-red-500" />;
+      default:
+        return <Settings className="text-muted-foreground h-4 w-4" />;
+    }
+  };
+
+  const getStateBadge = () => {
+    const baseClasses = 'px-2 py-1 rounded-full text-xs font-medium';
+    switch (state) {
+      case 'input-streaming':
+        return (
+          <span
+            className={cn(
+              baseClasses,
+              'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
+            )}
+          >
+            Processing
+          </span>
+        );
+      case 'input-available':
+        return (
+          <span
+            className={cn(
+              baseClasses,
+              'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
+            )}
+          >
+            Ready
+          </span>
+        );
+      case 'output-available':
+        return (
+          <span
+            className={cn(
+              baseClasses,
+              'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+            )}
+          >
+            Completed
+          </span>
+        );
+      case 'output-error':
+        return (
+          <span
+            className={cn(
+              baseClasses,
+              'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+            )}
+          >
+            Error
+          </span>
+        );
+      default:
+        return (
+          <span
+            className={cn(
+              baseClasses,
+              'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400'
+            )}
+          >
+            Pending
+          </span>
+        );
+    }
+  };
+
+  const formatValue = (value: unknown): string => {
+    if (value === null) return 'null';
+    if (value === undefined) return 'undefined';
+    if (typeof value === 'string') return value;
+    if (typeof value === 'object') {
+      return JSON.stringify(value, null, 2);
+    }
+    return String(value);
+  };
+
+  return (
+    <div className={cn('border-border mt-3 overflow-hidden rounded-lg border', className)}>
+      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+        <CollapsibleTrigger asChild>
+          <Button
+            variant="ghost"
+            className="bg-background h-auto w-full justify-between rounded-b-none px-3 py-2 font-normal"
+          >
+            <div className="flex items-center gap-2">
+              {getStateIcon()}
+              <span className="font-mono text-sm font-medium">{toolPart.type}</span>
+              {getStateBadge()}
+            </div>
+            <ChevronDown className={cn('h-4 w-4', isOpen && 'rotate-180')} />
+          </Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent
+          className={cn(
+            'border-border border-t',
+            'data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden'
+          )}
+        >
+          <div className="bg-background space-y-3 p-3">
+            {input && Object.keys(input).length > 0 && (
+              <div>
+                <h4 className="text-muted-foreground mb-2 text-sm font-medium">Input</h4>
+                <div className="bg-background rounded border p-2 font-mono text-sm">
+                  {Object.entries(input).map(([key, value]) => (
+                    <div key={key} className="mb-1">
+                      <span className="text-muted-foreground">{key}:</span>{' '}
+                      <span>{formatValue(value)}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {output && (
+              <div>
+                <h4 className="text-muted-foreground mb-2 text-sm font-medium">Output</h4>
+                <div className="bg-background max-h-60 overflow-auto rounded border p-2 font-mono text-sm">
+                  <pre className="whitespace-pre-wrap">{formatValue(output)}</pre>
+                </div>
+              </div>
+            )}
+
+            {state === 'output-error' && toolPart.errorText && (
+              <div>
+                <h4 className="mb-2 text-sm font-medium text-red-500">Error</h4>
+                <div className="bg-background rounded border border-red-200 p-2 text-sm dark:border-red-950 dark:bg-red-900/20">
+                  {toolPart.errorText}
+                </div>
+              </div>
+            )}
+
+            {state === 'input-streaming' && (
+              <div className="text-muted-foreground text-sm">Processing tool call...</div>
+            )}
+
+            {toolCallId && (
+              <div className="text-muted-foreground border-t border-blue-200 pt-2 text-xs">
+                <span className="font-mono">Call ID: {toolCallId}</span>
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+export { Tool };

package/src/components/add-agent-card.tsx

@@ -0,0 +1,77 @@
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { Plus, Settings } from 'lucide-react';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const AddAgentCard: React.FC = () => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate('/create');
+  };
+
+  const handleCardClick = (e: React.MouseEvent) => {
+    // Only trigger if clicking on the card background, not on interactive elements
+    const target = e.target as HTMLElement;
+    if (target.closest('button')) {
+      return;
+    }
+    handleClick();
+  };
+
+  return (
+    <Card
+      className="w-full cursor-pointer hover:shadow-lg transition-all border-2 border-dashed border-muted-foreground/30 bg-card/50 hover:bg-card/80"
+      onClick={handleCardClick}
+      onKeyPress={(e) => e.key === 'Enter' && handleClick()}
+      tabIndex={0}
+      role="button"
+      aria-label="Create new agent"
+      data-testid="add-agent-button"
+    >
+      <CardContent className="p-4 relative">
+        {/* Empty space for toggle alignment */}
+        <div className="absolute top-3 right-3">
+          <div className="h-4 w-8"></div>
+        </div>
+
+        <div className="flex items-start gap-4 pr-10">
+          {/* Icon placeholder matching avatar size */}
+          <div className="h-16 w-16 flex-shrink-0 rounded-xl border-2 border-dashed border-muted-foreground/50 flex items-center justify-center bg-muted/20">
+            <Plus className="h-6 w-6 text-muted-foreground" />
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 min-w-0">
+            <h3 className="font-semibold text-xl mb-1 text-muted-foreground">Create New Agent</h3>
+            <p className="text-sm text-muted-foreground/70 line-clamp-2 leading-relaxed">
+              Add a new AI agent to your <br></br> collection
+            </p>
+          </div>
+        </div>
+
+        <Separator className="my-3" />
+
+        <div className="flex items-center justify-end">
+          {/* Create button styled like New Chat */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleClick();
+            }}
+            className="h-8 px-4 rounded-sm bg-background border-muted-foreground/20 hover:bg-muted/30"
+          >
+            <Plus className="h-4 w-4 mr-2" />
+            Create
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default AddAgentCard;