upd: work in progress for TTS

client/app/components/chat.tsx

@@ -7,14 +7,22 @@ import {
 import { ChatInput } from "~/components/ui/chat/chat-input";
 import { ChatMessageList } from "~/components/ui/chat/chat-message-list";
 import { AnimatePresence, motion } from "framer-motion";
-import { Copy, CornerDownLeft, Mic, Paperclip } from "lucide-react";
+import {
+    Copy,
+    CornerDownLeft,
+    Mic,
+    Paperclip,
+    Speaker,
+    Volume2,
+} from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { Content, UUID } from "@elizaos/core";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { apiClient } from "~/lib/api";
 import { cn, moment } from "~/lib/utils";
 import { Avatar, AvatarImage } from "./ui/avatar";
 import CopyButton from "./copy-button";
+import ChatTtsButton from "./ui/chat/chat-tts-button";
 
 interface ExtraContentFields {
     user: string;
@@ -169,13 +177,33 @@ export default function Page({ agentId }: { agentId: UUID }) {
                                                     }
                                                 >
                                                     {message?.text}
+
+                                                    {/* Attachments */}
+                                                    {/* <img
+                                                        src="/elizaos.webp"
+                                                        width="100%"
+                                                        height="100%"
+                                                        className="w-64 rounded-md mt-4"
+                                                    /> */}
                                                 </ChatBubbleMessage>
-                                                <div className="flex items-center gap-4 justify-between w-full">
+                                                <div className="flex items-center gap-4 justify-between w-full mt-1">
                                                     {message?.text &&
                                                     !message?.isLoading ? (
-                                                        <CopyButton
-                                                            text={message?.text}
-                                                        />
+                                                        <div className="flex items-center gap-1">
+                                                            <CopyButton
+                                                                text={
+                                                                    message?.text
+                                                                }
+                                                            />
+                                                            <ChatTtsButton
+                                                                agentId={
+                                                                    agentId
+                                                                }
+                                                                text={
+                                                                    message?.text
+                                                                }
+                                                            />
+                                                        </div>
                                                     ) : null}
 
                                                     {message?.createdAt ? (

client/app/components/ui/button.tsx

@@ -24,7 +24,7 @@ const buttonVariants = cva(
         default: "h-9 px-4 py-2",
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        icon: "size-[30px] rounded-md",
       },
     },
     defaultVariants: {

client/app/components/ui/chat/chat-bubble.tsx

@@ -135,7 +135,7 @@ const ChatBubbleTimestamp: React.FC<ChatBubbleTimestampProps> = ({
   className,
   ...props
 }) => (
-  <div className={cn("text-xs text-right", className)} {...props}>
+  <div className={cn("text-xs text-right select-none", className)} {...props}>
     {timestamp}
   </div>
 );

client/app/components/ui/chat/chat-tts-button.tsx

@@ -0,0 +1,43 @@
+import { DotSquare, Ellipsis, StopCircle, Volume2 } from "lucide-react";
+import { Button } from "../button";
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { apiClient } from "~/lib/api";
+
+export default function ChatTtsButton({ agentId, text }: { agentId: string; text: string }) {
+    const [playing, setPlaying] = useState<boolean>(false);
+    const mutation = useMutation({
+        mutationKey: ["tts", text],
+        mutationFn: () => apiClient.speak(agentId, text),
+        onSuccess: () => {
+            setPlaying(true);
+        },
+    });
+
+    const execute = () => {
+        if (mutation?.isPending) return;
+        if (playing) {
+            setPlaying(false);
+        }
+
+        mutation.mutate();
+    };
+
+    const iconClass = "text-muted-foreground size-4";
+    return (
+        <Button
+            size="icon"
+            variant="ghost"
+            onClick={() => execute()}
+            disabled={mutation?.isPending}
+        >
+            {mutation?.isPending ? (
+                <Ellipsis className={iconClass} />
+            ) : playing ? (
+                <StopCircle className={iconClass} />
+            ) : (
+                <Volume2 className={iconClass} />
+            )}
+        </Button>
+    );
+}

client/app/lib/api.ts

@@ -50,10 +50,19 @@ export const apiClient = {
             method: "POST",
             body: {
                 text: message,
-                user: 'user'
+                user: "user",
             },
         }),
     getAgents: () => fetcher({ url: "/agents" }),
     getAgent: (agentId: string): Promise<{ id: UUID; character: Character }> =>
         fetcher({ url: `/agents/${agentId}` }),
+
+    speak: (agentId: string, text: string) =>
+        fetcher({
+            url: `/${agentId}/speak`,
+            method: "POST",
+            body: {
+                text,
+            },
+        }),
 };

client/app/root.tsx

@@ -1,6 +1,5 @@
 import {
     Links,
-    LiveReload,
     Meta,
     Outlet,
     Scripts,
@@ -50,9 +49,8 @@ export function Layout({ children }: { children: React.ReactNode }) {
                 <Meta />
                 <Links />
             </head>
-
-            <body>
-                <QueryClientProvider client={queryClient}>
+            <QueryClientProvider client={queryClient}>
+                <body>
                     <SidebarProvider>
                         <AppSidebar />
                         <SidebarInset>
@@ -61,10 +59,10 @@ export function Layout({ children }: { children: React.ReactNode }) {
                             </div>
                         </SidebarInset>
                     </SidebarProvider>
-                </QueryClientProvider>
-                <Scripts />
-                <ScrollRestoration />
-            </body>
+                    <Scripts />
+                    <ScrollRestoration />
+                </body>
+            </QueryClientProvider>
         </html>
     );
 }