Merge pull request #4071 from elizaOS/tcm/text-animation

fix: gui text animation

Author: tcm390

packages/client/src/components/chat.tsx

@@ -43,11 +43,11 @@ const MemoizedMessageContent = React.memo(MessageContent);
 function MessageContent({
   message,
   agentId,
-  isLastMessage,
+  shouldAnimate,
 }: {
   message: ContentWithUser;
   agentId: UUID;
-  isLastMessage: boolean;
+  shouldAnimate: boolean;
 }) {
   return (
     <div className="flex flex-col w-full">
@@ -77,7 +77,7 @@ function MessageContent({
         <div className="py-2">
           {message.name === USER_NAME ? (
             message.text
-          ) : isLastMessage && message.name !== USER_NAME ? (
+          ) : shouldAnimate ? (
             <AIWriter>{message.text}</AIWriter>
           ) : (
             message.text
@@ -87,7 +87,7 @@ function MessageContent({
           message.thought &&
           (message.name === USER_NAME ? (
             message.thought
-          ) : isLastMessage && message.name !== USER_NAME ? (
+          ) : shouldAnimate ? (
             <AIWriter>
               <span className="italic text-muted-foreground">{message.thought}</span>
             </AIWriter>
@@ -167,6 +167,8 @@ export default function Page({
 
   const socketIOManager = SocketIOManager.getInstance();
 
+  const animatedMessageIdRef = useRef<string | null>(null);
+
   useEffect(() => {
     // Initialize Socket.io connection once with our entity ID
     socketIOManager.initialize(entityId, [agentId]);
@@ -226,6 +228,8 @@ export default function Page({
             return old;
           }
 
+          animatedMessageIdRef.current = newMessage.id;
+
           return [...old, newMessage];
         }
       );
@@ -413,7 +417,10 @@ export default function Page({
           >
             {messages.map((message: ContentWithUser, index: number) => {
               const isUser = message.name === USER_NAME;
-
+              const shouldAnimate =
+                index === messages.length - 1 &&
+                message.name !== USER_NAME &&
+                message.id === animatedMessageIdRef.current;
               return (
                 <div
                   key={`${message.id as string}-${message.createdAt}`}
@@ -443,7 +450,7 @@ export default function Page({
                     <MemoizedMessageContent
                       message={message}
                       agentId={agentId}
-                      isLastMessage={index === messages.length - 1}
+                      shouldAnimate={shouldAnimate}
                     />
                   </ChatBubble>
                 </div>

packages/client/src/components/room.tsx

@@ -39,11 +39,11 @@ const MemoizedMessageContent = React.memo(MessageContent);
 
 function MessageContent({
   message,
-  isLastMessage,
+  shouldAnimate,
   isUser,
 }: {
   message: ContentWithUser;
-  isLastMessage: boolean;
+  shouldAnimate: boolean;
   isUser: boolean;
 }) {
   // Only log message details in development mode
@@ -84,7 +84,7 @@ function MessageContent({
         <div className="py-2">
           {isUser ? (
             message.text
-          ) : isLastMessage && !isUser ? (
+          ) : shouldAnimate ? (
             <AIWriter>{message.text}</AIWriter>
           ) : (
             message.text
@@ -94,7 +94,7 @@ function MessageContent({
           <div>
             {isUser ? (
               message.thought
-            ) : isLastMessage && !isUser ? (
+            ) : shouldAnimate ? (
               <AIWriter>
                 <span className="italic text-muted-foreground">{message.thought}</span>
               </AIWriter>
@@ -173,6 +173,8 @@ export default function Page({ serverId }: { serverId: UUID }) {
   const prevServerIdRef = useRef<UUID | null>(null);
   const prevActiveAgentIdsRef = useRef<UUID[]>([]);
 
+  const animatedMessageIdRef = useRef<string | null>(null);
+
   const getAvatar = (agentId: string): string | null => {
     const rooms = roomsData?.get(serverId);
     const room = rooms?.find((room) => room.agentId === agentId);
@@ -278,6 +280,8 @@ export default function Page({ serverId }: { serverId: UUID }) {
             return old;
           }
 
+          animatedMessageIdRef.current = newMessage.id;
+
           return [...old, newMessage];
         }
       );
@@ -481,7 +485,10 @@ export default function Page({ serverId }: { serverId: UUID }) {
             >
               {messages.map((message: ContentWithUser, index: number) => {
                 const isUser = message.name === USER_NAME;
-
+                const shouldAnimate =
+                  index === messages.length - 1 &&
+                  message.name !== USER_NAME &&
+                  message.id === animatedMessageIdRef.current;
                 return (
                   <div
                     key={`${message.id as string}-${message.createdAt}`}
@@ -509,7 +516,7 @@ export default function Page({ serverId }: { serverId: UUID }) {
 
                       <MemoizedMessageContent
                         message={message}
-                        isLastMessage={index === messages.length - 1}
+                        shouldAnimate={shouldAnimate}
                         isUser={isUser}
                       />
                     </ChatBubble>