Fix Redundant Streaming Animation in Chat UI Message History

[jkbrooks]

In the current Eliza UI chat, the streaming animation for agent replies plays every time the chat page is loaded, even for messages that are already part of the chat history. This results in a strange and unnecessary animation replay for all past agent messages on each page load, degrading the user experience.

Proposed Solution

Modify the UI logic to ensure that the streaming animation effect is only applied when a new agent message is initially rendered in the chat. Messages loaded from chat history should not trigger the streaming animation on subsequent page loads or when revisiting a conversation.

Expected Outcome

• The streaming animation effect is only played once per new agent message, enhancing the perceived responsiveness of the agent.
• Chat history messages are displayed immediately without animation on page load, providing a cleaner and more efficient user experience.
• Improved visual clarity and reduced UI clutter by eliminating redundant animations.

Type

Bug fix (or UI Improvement)

Labels (Optional)

• UI
• Bug
• Animation
• User Experience

Detailed Implementation Checklist (Suggested Code Changes - May Not Be Optimal):

Note: The following code changes are AI-generated suggestions and may not be the optimal solution. Developers should review and adapt these suggestions as needed.

To implement this fix, a developer should consider the following code changes:

• 1. Identify the Component Rendering Messages (ui/src/components/chat.tsx or similar):

  • Locate the React component responsible for rendering individual chat messages (likely ChatBubbleMessage or a component that uses react-aiwriter).
  • Find the section of code that implements or triggers the streaming animation (likely involving the react-aiwriter component or similar animation logic).

• 2. Introduce a Mechanism to Track Animated Messages:

  • State Variable for Animated Message IDs: In the chat component (e.g., ui/src/components/chat.tsx), introduce a new state variable (e.g., animatedMessageIds) using useState. This state variable will be used to keep track of the IDs of messages that have already played their streaming animation. Initialize it as an empty array.

  // Example code snippet in ui/src/components/chat.tsx (approximate location)
  
  const Chat = ({ agentId }: { agentId: UUID }) => {
      // ... existing state variables ...

•   const [animatedMessageIds, setAnimatedMessageIds] = useState<string[]>([]);
    // ... rest of the component ...
  

  };

• 3. Conditionally Apply Animation Based on Message ID:

  • Check if Message ID is Animated: In the message rendering logic within ChatBubbleMessage or the relevant component, add a conditional check to see if the current message's ID is already present in the animatedMessageIds state variable.
  • Apply Animation Conditionally: Only apply the streaming animation (e.g., using react-aiwriter or similar) if the message ID is not in animatedMessageIds.
  • Update animatedMessageIds on Animation Completion: After the streaming animation finishes playing for a new message, update the animatedMessageIds state by adding the message's ID to it. This ensures that the animation is not replayed on subsequent renders.

  // Example code snippet in ui/src/components/chat/chat-bubble.tsx (approximate location - assuming using react-aiwriter)
  
  const ChatBubbleMessage = React.forwardRef<HTMLDivElement, ChatBubbleMessageProps>(
      ({ className, variant, layout, isLoading = false, children, ...props }, ref) => {
          const messageId = ... // Assuming you have a way to access message ID here
  

•       const hasAnimated = animatedMessageIds.includes(messageId); // Check if message ID is in animatedMessageIds
  

•       const shouldAnimate = !isLoading && !hasAnimated; // Animate only if not loading and not already animated
  
        return (
            <div
                className={cn(chatBubbleMessageVariants({ variant, layout, className }), "break-words")}
                ref={ref}
                {...props}
            >
                {isLoading ? (
                    <MessageLoading />
                ) : (
  

•                   children
  

•                   <AIWriter 
  

•                       onTypingEnd={() => { // Callback after animation finishes
  

•                           if (shouldAnimate) {
  

•                               setAnimatedMessageIds(prevIds => [...prevIds, messageId]); // Add message ID to animatedMessageIds
  

•                           }
  

•                       }}
  

•                       // ... other AIWriter props
  

•                   >
  

•                       {children} 
  

•                   </AIWriter>
                )}
            </div>
        );
    }
  

  );

• 4. Ensure Unique Message IDs are Available:

  • Verify that each message in the chat history has a unique and stable ID that can be used to track whether its animation has already been played. If not, ensure message objects are structured to include a unique ID (e.g., using the id property from your Memory type or generating a unique ID when messages are loaded or created).

• 5. Testing:

  • Run the UI locally (pnpm dev in the ui directory).
  • Navigate to the chat UI and load a chat history with multiple agent messages.
  • Verify that the streaming animation only plays once for each agent message when the chat is initially loaded or when new messages are received.
  • Ensure that navigating away from the chat and returning, or reloading the page, does not cause the streaming animation to replay for history messages.
  • Check for any console errors in the browser's developer tools.

• 6. Commit and Create Pull Request:

  • Commit the code changes with a descriptive commit message (e.g., "fix(ui): Prevent redundant streaming animation for chat history messages").
  • Create a pull request to merge the changes into the main branch.

Additional Notes for Developer:

• The suggested code changes assume the use of react-aiwriter for the streaming animation. If a different animation library or technique is used, adjust the code changes accordingly.
• Ensure that the message ID used for tracking animation status is unique and stable across sessions to prevent redundant animations even after refreshing the page or closing and reopening the chat.
• Consider performance implications if you are rendering a very long chat history with many messages. Optimizing the animation logic and state management might be necessary for large datasets.
• Add comments to the code to explain the changes and the logic for conditional animation triggering.

By implementing these changes, the UI should correctly apply the streaming animation only to new agent messages, providing a smoother and more user-friendly chat experience.