search

Automattic / studio

Studio by WordPress.com, a free desktop app that helps developers streamline their local WordPress development workflow.
https://developer.wordpress.com/studio/
GNU General Public License v2.0
138 stars 12 forks source link

Studio: Add animation when we receive a message UI #267

Open kozer opened 1 week ago

kozer commented 1 week ago

Fixes https://github.com/Automattic/dotcom-forge/issues/7679

Proposed Changes

This PR adds animations when the user receives a new message.

Testing Instructions

  1. Open Studio and navigate to AI Assistant tab
  2. Send a message
  3. When you see the message, make sure there is an animation when it appears.

Pre-merge Checklist

kozer commented 1 week ago

@sejas , I tried implementing it with tailwind, but I couldn't make it. It seems that motion div is part of the @wordpress/compoents which are installed, so I ended up using that. The animation is there, however, is not that good as the video you shared ( probably is the background ).

Please, take a look.

NOTE: All the logic we have ( except the CodeBlock part ), is pretty much a ripoff big-sky UI. I'm wondering if it make sense to switch to that.

fluiddot commented 6 days ago

Following https://github.com/Automattic/dotcom-forge/issues/7679 and the animation example, I think we need to tweak the scroll and animations a bit to imitate the bottom-to-top flow. The scroll should always remain at the bottom.

matt-west commented 2 days ago

I wonder if we could space out the animations of the user message and the ... (i.e. thinking) message. This way it will mimic a conversation. Currently, both messages show up at the same time.

Agree 👍

When the assistant comes back with a response, is it possible to display the message in the same bubble as the thinking animation?

At the moment, the thinking bubble is removed and a new bubble is added below. This leads to a weird transition where the height of the chat is initially reduced as the thinking bubble is removed, but then it jumps up again once the new message is added. It would be smoother if we could replace the thinking dots with the new message.

https://github.com/Automattic/studio/assets/417538/d4648244-e78c-4ef3-9839-c3a360a9f1da