@elizaos/client 1.5.5-alpha.10

package/src/components/ui/chat/chat-tts-button.tsx

@@ -0,0 +1,199 @@
+import { useToast } from '@/hooks/use-toast';
+import { createElizaClient } from '@/lib/api-client-config';
+import { UUID } from '@elizaos/core';
+import { useMutation } from '@tanstack/react-query';
+import { Ellipsis, StopCircle, Volume2 } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
+
+// Global ref to track currently playing audio
+let currentlyPlayingAudio: HTMLAudioElement | null = null;
+
+export default function ChatTtsButton({ agentId, text }: { agentId: string; text: string }) {
+  const { toast } = useToast();
+  const [playing, setPlaying] = useState<boolean>(false);
+  const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
+  const [audioUrl, setAudioUrl] = useState<string | null>(null);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const audioBlobRef = useRef<Blob | null>(null);
+
+  const elizaClient = createElizaClient();
+
+  // Cleanup blob URL when component unmounts or audioBlob changes
+  useEffect(() => {
+    return () => {
+      if (audioUrl) {
+        URL.revokeObjectURL(audioUrl);
+      }
+    };
+  }, [audioUrl]);
+
+  const mutation = useMutation({
+    mutationKey: ['tts', text],
+    mutationFn: async () => {
+      console.log('🎵 Starting TTS API call...');
+      console.log('🎵 agentId:', agentId);
+      console.log('🎵 text:', text);
+
+      const response = await elizaClient.audio.generateSpeech(agentId as UUID, { text });
+      console.log('🎵 TTS API response:', response);
+
+      // Convert base64 audio string to Blob
+      const { audio, format } = response;
+
+      // Handle data URL format (data:audio/mp3;base64,...)
+      let audioData: string;
+      let mimeType: string;
+
+      if (audio.startsWith('data:')) {
+        const [header, base64Data] = audio.split(',');
+        const mimeMatch = header.match(/data:([^;]+)/);
+        mimeType = mimeMatch ? mimeMatch[1] : `audio/${format || 'mpeg'}`;
+        audioData = base64Data;
+      } else {
+        // Plain base64 string
+        audioData = audio;
+        mimeType = `audio/${format || 'mpeg'}`;
+      }
+
+      // Convert base64 to Blob
+      const binaryString = atob(audioData);
+      const bytes = new Uint8Array(binaryString.length);
+      for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+      }
+
+      return new Blob([bytes], { type: mimeType });
+    },
+    onSuccess: (data: Blob) => {
+      setAudioBlob(data);
+      audioBlobRef.current = data;
+      const url = URL.createObjectURL(data);
+      setAudioUrl(url);
+
+      // Auto-play after TTS generation
+      setTimeout(() => {
+        play();
+      }, 100);
+    },
+    onError: (e) => {
+      toast({
+        variant: 'destructive',
+        title: 'Unable to read message aloud',
+        description: e.message,
+      });
+    },
+  });
+
+  const play = async () => {
+    if (audioRef.current) {
+      try {
+        // Stop any currently playing audio
+        if (currentlyPlayingAudio && currentlyPlayingAudio !== audioRef.current) {
+          currentlyPlayingAudio.pause();
+          currentlyPlayingAudio.currentTime = 0;
+        }
+
+        // Set this as the currently playing audio
+        currentlyPlayingAudio = audioRef.current;
+
+        audioRef.current.volume = 1.0;
+        audioRef.current.muted = false;
+
+        await audioRef.current.play();
+        setPlaying(true);
+      } catch (err) {
+        toast({
+          variant: 'destructive',
+          title: 'Audio playback failed',
+          description: (err as Error).message,
+        });
+        setPlaying(false);
+      }
+    }
+  };
+
+  const stop = () => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current.currentTime = 0;
+
+      // Clear global reference if this was the currently playing audio
+      if (currentlyPlayingAudio === audioRef.current) {
+        currentlyPlayingAudio = null;
+      }
+    }
+    setPlaying(false);
+  };
+
+  const execute = async () => {
+    if (mutation?.isPending) {
+      return;
+    }
+
+    if (playing) {
+      stop();
+      return;
+    }
+
+    // Check if audio is already available
+    const hasAudioBlob =
+      audioBlob ||
+      audioBlobRef.current ||
+      (audioRef.current?.src && audioRef.current.src.startsWith('blob:'));
+    if (hasAudioBlob) {
+      await play();
+      return;
+    }
+
+    // Generate TTS
+    mutation.mutate();
+  };
+
+  const iconClass = 'text-muted-foreground size-3';
+
+  return (
+    <>
+      {audioBlob ? (
+        <audio
+          crossOrigin="anonymous"
+          playsInline
+          ref={audioRef}
+          src={audioUrl || ''}
+          onEnded={() => {
+            setPlaying(false);
+            // Clear global reference when audio ends
+            if (currentlyPlayingAudio === audioRef.current) {
+              currentlyPlayingAudio = null;
+            }
+          }}
+        >
+          Your browser does not support the audio element.
+        </audio>
+      ) : null}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            size="icon"
+            variant="ghost"
+            type="button"
+            onClick={() => execute()}
+            disabled={mutation?.isPending}
+          >
+            {mutation?.isPending ? (
+              <Ellipsis className={iconClass} />
+            ) : playing ? (
+              <StopCircle className={iconClass} />
+            ) : (
+              <Volume2 className={iconClass} />
+            )}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <p>{playing ? 'Stop' : 'Read aloud'}</p>
+        </TooltipContent>
+      </Tooltip>
+    </>
+  );
+}

package/src/components/ui/chat/code-block.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  variant?: 'user' | 'agent';
+}
+
+interface CodeBlockCodeProps {
+  code: string;
+  language?: string;
+  className?: string;
+  variant?: 'user' | 'agent';
+}
+
+interface CodeBlockGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
+  ({ className, children, variant = 'agent', ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'not-prose relative overflow-hidden rounded-lg border border-border',
+          className
+        )}
+        style={{ backgroundColor: '#0f172a', color: 'white' }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+CodeBlock.displayName = 'CodeBlock';
+
+const CodeBlockGroup = React.forwardRef<HTMLDivElement, CodeBlockGroupProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex items-center justify-between border-b border-border px-4 py-2 text-sm text-muted-foreground bg-muted/30 dark:bg-slate-800/50',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+CodeBlockGroup.displayName = 'CodeBlockGroup';
+
+const CodeBlockCode = React.forwardRef<HTMLDivElement, CodeBlockCodeProps>(
+  ({ code, language = 'text', className, variant = 'agent', ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('overflow-x-auto p-4', className)}
+        style={{ backgroundColor: 'transparent' }}
+        {...props}
+      >
+        <pre className="text-sm whitespace-pre-wrap" style={{ color: 'white' }}>
+          <code className="font-mono" style={{ color: 'white' }}>
+            {code}
+          </code>
+        </pre>
+      </div>
+    );
+  }
+);
+CodeBlockCode.displayName = 'CodeBlockCode';
+
+export { CodeBlock, CodeBlockCode, CodeBlockGroup };

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

@@ -0,0 +1,131 @@
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { MessageCircle, X } from 'lucide-react';
+import type React from 'react';
+import { useRef, useState } from 'react';
+
+export type ChatPosition = 'bottom-right' | 'bottom-left';
+export type ChatSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+const chatConfig = {
+  dimensions: {
+    sm: 'sm:max-w-sm sm:max-h-[500px]',
+    md: 'sm:max-w-md sm:max-h-[600px]',
+    lg: 'sm:max-w-lg sm:max-h-[700px]',
+    xl: 'sm:max-w-xl sm:max-h-[800px]',
+    full: 'sm:w-full sm:h-full',
+  },
+  positions: {
+    'bottom-right': 'bottom-5 right-5',
+    'bottom-left': 'bottom-5 left-5',
+  },
+  chatPositions: {
+    'bottom-right': 'sm:bottom-[calc(100%+10px)] sm:right-0',
+    'bottom-left': 'sm:bottom-[calc(100%+10px)] sm:left-0',
+  },
+  states: {
+    open: 'pointer-events-auto opacity-100 visible scale-100 translate-y-0',
+    closed: 'pointer-events-none opacity-0 invisible scale-100 sm:translate-y-5',
+  },
+};
+
+interface ExpandableChatProps extends React.HTMLAttributes<HTMLDivElement> {
+  position?: ChatPosition;
+  size?: ChatSize;
+  icon?: React.ReactNode;
+}
+
+const ExpandableChat: React.FC<ExpandableChatProps> = ({
+  className,
+  position = 'bottom-right',
+  size = 'md',
+  icon,
+  children,
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const chatRef = useRef<HTMLDivElement>(null);
+
+  const toggleChat = () => setIsOpen(!isOpen);
+
+  return (
+    <div className={cn(`fixed ${chatConfig.positions[position]} z-50`, className)} {...props}>
+      <div
+        ref={chatRef}
+        className={cn(
+          'flex flex-col bg-background border sm:rounded-md shadow-md overflow-hidden transition-all duration-250 ease-out sm:absolute sm:w-[90vw] sm:h-[80vh] fixed inset-0 w-full h-full sm:inset-auto',
+          chatConfig.chatPositions[position],
+          chatConfig.dimensions[size],
+          isOpen ? chatConfig.states.open : chatConfig.states.closed,
+          className
+        )}
+      >
+        {children}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="absolute top-2 right-2 sm:hidden"
+          onClick={toggleChat}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+      <ExpandableChatToggle icon={icon} isOpen={isOpen} toggleChat={toggleChat} />
+    </div>
+  );
+};
+
+ExpandableChat.displayName = 'ExpandableChat';
+
+const ExpandableChatHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  ...props
+}) => (
+  <div className={cn('flex items-center justify-between p-4 border-b', className)} {...props} />
+);
+
+ExpandableChatHeader.displayName = 'ExpandableChatHeader';
+
+const ExpandableChatBody: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  ...props
+}) => <div className={cn('flex-grow overflow-y-auto', className)} {...props} />;
+
+ExpandableChatBody.displayName = 'ExpandableChatBody';
+
+const ExpandableChatFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  ...props
+}) => <div className={cn('border-t p-4', className)} {...props} />;
+
+ExpandableChatFooter.displayName = 'ExpandableChatFooter';
+
+interface ExpandableChatToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: React.ReactNode;
+  isOpen: boolean;
+  toggleChat: () => void;
+}
+
+const ExpandableChatToggle: React.FC<ExpandableChatToggleProps> = ({
+  className,
+  icon,
+  isOpen,
+  toggleChat,
+  ...props
+}) => (
+  <Button
+    variant="default"
+    onClick={toggleChat}
+    className={cn(
+      'w-14 h-14 rounded-full shadow-md flex items-center justify-center hover:shadow-lg hover:shadow-black/30 transition-all duration-300',
+      className
+    )}
+    {...props}
+  >
+    {isOpen ? <X className="h-6 w-6" /> : icon || <MessageCircle className="h-6 w-6" />}
+  </Button>
+);
+
+ExpandableChatToggle.displayName = 'ExpandableChatToggle';
+
+export { ExpandableChat, ExpandableChatHeader, ExpandableChatBody, ExpandableChatFooter };

package/src/components/ui/chat/hooks/useAutoScroll.ts

@@ -0,0 +1,86 @@
+// Enhanced with StickToBottom for better UX
+import { useCallback, useRef, useState, useEffect } from 'react';
+import { useStickToBottom } from 'use-stick-to-bottom';
+
+interface ScrollState {
+  isAtBottom: boolean;
+  autoScrollEnabled: boolean;
+}
+
+interface UseAutoScrollOptions {
+  offset?: number;
+  smooth?: boolean;
+}
+
+export function useAutoScroll(options: UseAutoScrollOptions = {}) {
+  const { smooth = false } = options;
+  const userHasScrolled = useRef(false); // To track if user manually scrolled up
+
+  // Use StickToBottom for enhanced scroll behavior
+  const stickToBottom = useStickToBottom({
+    initial: smooth ? 'smooth' : 'instant',
+    resize: smooth ? 'smooth' : 'instant',
+  });
+
+  const [scrollState, setScrollState] = useState<ScrollState>({
+    isAtBottom: true,
+    autoScrollEnabled: true,
+  });
+
+  // Sync our state with StickToBottom's state
+  useEffect(() => {
+    const isAtBottom = stickToBottom.isAtBottom;
+
+    if (isAtBottom) {
+      // User is at bottom - reset user control and enable auto-scroll
+      userHasScrolled.current = false;
+      setScrollState({ isAtBottom: true, autoScrollEnabled: true });
+    } else {
+      // User is not at bottom
+      setScrollState((prev) => ({
+        ...prev,
+        isAtBottom: false,
+        autoScrollEnabled: userHasScrolled.current ? false : prev.autoScrollEnabled,
+      }));
+    }
+  }, [stickToBottom.isAtBottom]);
+
+  // Enhanced scroll to bottom using StickToBottom
+  const scrollToBottom = useCallback(
+    (instant?: boolean) => {
+      const animation = instant ? 'instant' : smooth ? 'smooth' : 'instant';
+      stickToBottom.scrollToBottom({
+        animation,
+        preserveScrollPosition: false, // Always scroll to bottom when called
+      });
+
+      // Update our state
+      setScrollState({ isAtBottom: true, autoScrollEnabled: true });
+      userHasScrolled.current = false;
+    },
+    [stickToBottom.scrollToBottom, smooth]
+  );
+
+  // Enhanced disable auto-scroll using StickToBottom
+  const disableAutoScroll = useCallback(() => {
+    if (!stickToBottom.isAtBottom) {
+      userHasScrolled.current = true; // User has taken control by scrolling up
+      stickToBottom.stopScroll(); // Stop any ongoing scroll animations
+      setScrollState((prev) => ({
+        ...prev,
+        autoScrollEnabled: false, // Disable auto-scroll
+      }));
+    }
+  }, [stickToBottom.isAtBottom, stickToBottom.stopScroll]);
+
+  return {
+    scrollRef: stickToBottom.scrollRef,
+    contentRef: stickToBottom.contentRef, // Expose content ref for proper StickToBottom usage
+    isAtBottom: scrollState.isAtBottom,
+    autoScrollEnabled: scrollState.autoScrollEnabled,
+    scrollToBottom: () => scrollToBottom(false), // Expose a non-instant scroll by default
+    disableAutoScroll,
+    // Expose StickToBottom instance for advanced usage if needed
+    _stickToBottom: stickToBottom,
+  };
+}

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

@@ -0,0 +1,209 @@
+'use client';
+
+import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { cn } from '@/lib/utils';
+import { CodeBlock, CodeBlockCode } from './code-block';
+
+interface MarkdownProps {
+  children: string;
+  className?: string;
+  components?: Record<string, React.ComponentType<any>>;
+  variant?: 'user' | 'agent';
+}
+
+const createComponents = (variant: 'user' | 'agent' = 'agent') => ({
+  // Code blocks
+  pre: ({ children, className, ...props }: any) => {
+    // Check if this contains a code element with a language class
+    const hasCodeWithLanguage = React.Children.toArray(children).some((child: any) => {
+      return (
+        React.isValidElement(child) &&
+        (child.props as any)?.className &&
+        /language-\w+/.test((child.props as any).className)
+      );
+    });
+
+    if (hasCodeWithLanguage) {
+      // Find the code element
+      const codeChild = React.Children.toArray(children).find((child: any) => {
+        return (
+          React.isValidElement(child) &&
+          (child.props as any)?.className &&
+          /language-\w+/.test((child.props as any).className)
+        );
+      }) as React.ReactElement;
+
+      const codeClassName = (codeChild.props as any).className || '';
+      const languageMatch = codeClassName.match(/language-(\w+)/);
+      const language = languageMatch ? languageMatch[1] : 'text';
+      const code = String((codeChild.props as any).children || '').trim();
+
+      return (
+        <CodeBlock>
+          {language && language !== 'text' && (
+            <div className="flex items-center justify-between px-4 py-2 text-xs bg-black/30 text-white border-b border-border">
+              <span className="font-mono uppercase tracking-wide">{language}</span>
+            </div>
+          )}
+          <CodeBlockCode code={code} language={language} />
+        </CodeBlock>
+      );
+    }
+
+    // Regular pre block (not code)
+    return (
+      <pre
+        className={cn(
+          'overflow-x-auto rounded-md bg-black dark:bg-black/50 border border-border p-4 text-sm font-mono text-white dark:text-white',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </pre>
+    );
+  },
+
+  // Inline code
+  code: ({ className, children, ...props }: any) => {
+    // If this has a language class, it's likely part of a code block handled by pre above
+    const hasLanguage = className && /language-\w+/.test(className);
+
+    if (hasLanguage) {
+      // Let the pre component handle this
+      return (
+        <code className={className} {...props}>
+          {children}
+        </code>
+      );
+    }
+
+    // Regular inline code
+    return (
+      <code
+        className={cn(
+          'relative rounded bg-muted/60 dark:bg-slate-800/60 px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-foreground dark:text-slate-100 border border-border/50',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </code>
+    );
+  },
+
+  // Headers
+  h1: ({ className, ...props }: any) => (
+    <h1 className={cn('mt-2 scroll-m-20 text-xl font-bold tracking-tight', className)} {...props} />
+  ),
+  h2: ({ className, ...props }: any) => (
+    <h2
+      className={cn('mt-2 scroll-m-20 text-lg font-semibold tracking-tight', className)}
+      {...props}
+    />
+  ),
+  h3: ({ className, ...props }: any) => (
+    <h3
+      className={cn('mt-2 scroll-m-20 text-base font-semibold tracking-tight', className)}
+      {...props}
+    />
+  ),
+  h4: ({ className, ...props }: any) => (
+    <h4
+      className={cn('mt-2 scroll-m-20 text-sm font-semibold tracking-tight', className)}
+      {...props}
+    />
+  ),
+
+  // Paragraphs
+  p: ({ className, ...props }: any) => <p className={cn('leading-7', className)} {...props} />,
+
+  // Lists
+  ul: ({ className, ...props }: any) => (
+    <ul className={cn('my-2 ml-6 list-disc [&>li]:mt-1', className)} {...props} />
+  ),
+  ol: ({ className, ...props }: any) => (
+    <ol className={cn('my-2 ml-6 list-decimal [&>li]:mt-1', className)} {...props} />
+  ),
+
+  // Links
+  a: ({ className, ...props }: any) => (
+    <a
+      className={cn('font-medium text-primary underline underline-offset-4', className)}
+      {...props}
+    />
+  ),
+
+  // Blockquotes
+  blockquote: ({ className, ...props }: any) => (
+    <blockquote
+      className={cn('mt-2 border-l-2 border-muted-foreground/20 pl-6 italic', className)}
+      {...props}
+    />
+  ),
+
+  // Tables
+  table: ({ className, ...props }: any) => (
+    <div className="my-2 w-full overflow-y-auto">
+      <table className={cn('w-full', className)} {...props} />
+    </div>
+  ),
+  th: ({ className, ...props }: any) => (
+    <th
+      className={cn(
+        'border border-muted-foreground/20 px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right',
+        className
+      )}
+      {...props}
+    />
+  ),
+  td: ({ className, ...props }: any) => (
+    <td
+      className={cn(
+        'border border-muted-foreground/20 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right',
+        className
+      )}
+      {...props}
+    />
+  ),
+
+  // Images
+  img: ({ className, alt, ...props }: any) => (
+    <img className={cn('rounded-md', className)} alt={alt} {...props} />
+  ),
+
+  // Horizontal rule
+  hr: ({ ...props }: any) => <hr className="my-4 border-muted-foreground/20" {...props} />,
+
+  // Strong/Bold
+  strong: ({ className, ...props }: any) => (
+    <strong className={cn('font-semibold', className)} {...props} />
+  ),
+
+  // Emphasis/Italic
+  em: ({ className, ...props }: any) => <em className={cn('italic', className)} {...props} />,
+});
+
+const Markdown = React.memo<MarkdownProps>(
+  ({ children, className, components, variant = 'agent', ...props }) => {
+    const defaultComponents = React.useMemo(() => createComponents(variant), [variant]);
+    const mergedComponents = React.useMemo(
+      () => ({ ...defaultComponents, ...components }),
+      [defaultComponents, components]
+    );
+
+    return (
+      <div className={cn('markdown-content', className)} {...props}>
+        <ReactMarkdown remarkPlugins={[remarkGfm]} components={mergedComponents}>
+          {children}
+        </ReactMarkdown>
+      </div>
+    );
+  }
+);
+
+Markdown.displayName = 'Markdown';
+
+export { Markdown, type MarkdownProps };