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

kozer · 2024-06-18T10:51:25Z

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

Proposed Changes

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

Also, the following changes have implemented:

Remove the last message if there is an error
Add a "conversation" feeling by delaying the assistant thinking
Move thinking to be a message instead of passing it as a separate component. That ensures that there is no "bump" effect when thinking is added/removed.

Testing Instructions

Open Studio and navigate to AI Assistant tab
Send a message
When you see the message, make sure there is an animation when it appears, like so:

2024-06-26.22-50-26.mp4

Pre-merge Checklist

Have you checked for TypeScript, React or other console errors?

fluiddot

I tested the changes and worked as expected. However, I'm not approving the PR due to the React warning I shared below.

src/components/content-tab-assistant.tsx

sejas

Thanks for adding the animation.
I updated the description of https://github.com/Automattic/dotcom-forge/issues/7679 , let's make the animation from bottom to up, for AI and also User messages.
I think for AI the animation could be in the three dots only, and then replace the text inside.

Current implementation:

message-animation.mp4

…ky, using motion

kozer · 2024-06-19T13:58:59Z

@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

I noticed that we are using like a slide-up animation when the message appears. ~~I'm not sure if it combines well with the animation of scrolling down the content. What do you think about using horizontal animations?~~

~~Left-to-right for AI assistant messages~~
~~Right-to-left for user messages~~

UPDATE: As shared here, the goal is to present messages from bottom to top, so they should be animated vertically.

Additionally, 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.

ai-assistant-animation.mp4

fluiddot · 2024-06-20T13:28:12Z

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 · 2024-06-24T09:07:34Z

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.

Screen.Recording.2024-06-24.at.10.04.33.mov

… UI for better transinsioning

fluiddot

I noticed the following items when testing the latest changes:

Scroll is animated when navigating to the assistant tab

From my side, I think this isn't necessary. I'd expect that the chat starts in the last message without any animation. Additionally, it doesn't scroll completely to the bottom.

ai-animate-scroll-upon-navigation.mp4

Messages are animated when switching sites

Not sure if this effect is on purpose but it might be confusing as it feels like it's removing messages.

ai-message-animated-when-switching-site.mp4

Transition between thinking and AI response

As mentioned by Matt here, it would be great to reuse the same container when transitioning between the thinking state and the AI response. Currently, it's removing message while adding the other.

src/components/content-tab-assistant.tsx

matt-west · 2024-06-27T10:55:19Z

@kozer Let's reduce the delay before showing the thinking bubble to 900 milliseconds. That should be long enough for the user to perceive the delay (reinforcing the conversational nature of the interaction) without it feeling like the assistant is unresponsive.

kozer · 2024-07-02T09:22:46Z

@fluiddot , @matt-west , can you please check this PR again?
I refactor a bit, and I think now it's working as intended.
If, not, I really want some help here
cc: @sejas

Avoids an awkward scroll jump when the assistant responds with a single line message.

matt-west · 2024-07-02T10:04:23Z

Thanks @kozer. This looks much better.

I pushed a minor change to fix an issue where the scroll bar jumped if the assistant returned a single line message. It was because the height of the loading bubble is less than the height of a single message. The fix sets a min-height on the loading bubble to prevent this.

I'm not sure if it's related to this PR, but I noticed that markdown isn't always rendered correctly when a message first appears. Sometimes switching tabs or sending another message fixes it.

Screen.Recording.2024-07-02.at.10.59.47.mov

kozer · 2024-07-02T10:28:56Z

Thanks @kozer. This looks much better.

I pushed a minor change to fix an issue where the scroll bar jumped if the assistant returned a single line message. It was because the height of the loading bubble is less than the height of a single message. The fix sets a min-height on the loading bubble to prevent this.

I'm not sure if it's related to this PR, but I noticed that markdown isn't always rendered correctly when a message first appears. Sometimes switching tabs or sending another message fixes it.

Screen.Recording.2024-07-02.at.10.59.47.mov

I'll check this out. Thanks!

fluiddot

I noticed Markdown syntax in AI responses. The content is only rendered properly after submitting another prompt:

ai-studio-markdown-bug.mp4

src/components/content-tab-assistant.tsx

src/components/chat-message.tsx

src/components/tests/content-tab-assistant.test.tsx

kozer · 2024-07-02T11:41:55Z

@matt-west , it should have been fixed now.
@fluiddot , made changes as requested.

matt-west · 2024-07-02T13:11:15Z

Yep, looks good now. Thanks @kozer!

fluiddot

LGTM 🎊 ! Thanks @kozer for addressing the comments I shared 🙇 !

src/components/chat-message.tsx

katinthehatsite · 2024-07-10T12:08:10Z

src/components/chat-message.tsx

 				aria-labelledby={ id }
 				className={ cx(
+					'inline-block p-3 rounded border border-gray-300 overflow-x-auto select-text',
 					'inline-block p-3 rounded border overflow-x-auto select-text',


@kozer Is there a reason we are adding this line twice - once with border-gray-300 and the second tine without it but with all other identical classes?

Good catch Kat! No, just leftover from while no was working on it. Feel free to clean it up! Thanks for looking at this one!

Studio: Add animation when we receive a message UI

54d8b27

kozer requested a review from a team June 18, 2024 10:51

kozer self-assigned this Jun 18, 2024

kozer added the Studio AI Assistant label Jun 18, 2024

fluiddot reviewed Jun 18, 2024

View reviewed changes

src/components/content-tab-assistant.tsx Outdated Show resolved Hide resolved

sejas reviewed Jun 18, 2024

View reviewed changes

kozer added 2 commits June 19, 2024 16:17

Update: Remove tailwind animate and switch to the same logic as big-s…

a9e7a82

…ky, using motion

Update: Fix animation

08be417

kozer added 7 commits June 19, 2024 17:10

Merge branch 'trunk' into add/animation_chat_message

5f0d01e

Merge branch 'trunk' into add/animation_chat_message

500fe7e

Update: Fix various issues after merge

cd96b73

Update: Fix lint issues

e9df922

Merge branch 'trunk' into add/animation_chat_message

cfdf76f

Update: Fix minor issues from merge

1569472

Update: fix types and make the animate a bit smoother

b7a66ad

kozer requested review from sejas and fluiddot June 20, 2024 10:53

fluiddot reviewed Jun 20, 2024

View reviewed changes

kozer added 5 commits June 21, 2024 11:42

Update: Remove unecessary thinking role

94ee506

Merge branch 'trunk' into add/animation_chat_message

16e33bf

Update: Fix ui elements after merge

aceffa8

Update:Add back unauthenticated

5680fc4

Update: Remove extra styles

dfbdc5b

kozer added 4 commits June 25, 2024 11:40

Merge branch 'trunk' into add/animation_chat_message

e34eeaf

Update: Add thinking message in messages, instead of adding it in the…

8a27203

… UI for better transinsioning

Merge branch 'trunk' into add/animation_chat_message

9ac3b84

Update: Fix animations and some tests

0152754

fluiddot reviewed Jun 27, 2024

View reviewed changes

Merge branch 'trunk' into add/animation_chat_message

c615866

kozer added 10 commits June 27, 2024 15:35

Merge branch 'trunk' into add/animation_chat_message

12b6435

Update: refactor ChatMessage component to use message as prop

8eb05bb

Merge branch 'trunk' into add/animation_chat_message

8d89d97

Update: thinking delay reduction

76539bd

Merge branch 'trunk' into add/animation_chat_message

c393f98

Update: Fix lint errors

9330e03

Update: Component handling animation

b709d77

Merge branch 'trunk' into add/animation_chat_message

89da5aa

Update: fix tests

274ca8b

Update: Refactor

a7bf7fa

kozer requested a review from fluiddot July 2, 2024 09:21

Set min-height on loading bubble

08d1aea

Avoids an awkward scroll jump when the assistant responds with a single line message.

fluiddot reviewed Jul 2, 2024

View reviewed changes

kozer added 4 commits July 2, 2024 14:16

Update: Render markdown correctly on last message

7ee1dc7

Update: remove unecessary keys

a74f6ea

Update: dont spread message array

b39a879

Update: update based on comments

0537bdd

kozer requested a review from fluiddot July 2, 2024 11:42

fluiddot approved these changes Jul 2, 2024

View reviewed changes

src/components/chat-message.tsx Show resolved Hide resolved

kozer merged commit 2188ae0 into trunk Jul 3, 2024
10 checks passed

kozer deleted the add/animation_chat_message branch July 3, 2024 06:28

katinthehatsite reviewed Jul 10, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kozer commented Jun 18, 2024 •

edited

Loading

fluiddot left a comment

sejas left a comment •

edited

Loading

kozer commented Jun 19, 2024

fluiddot left a comment •

edited

Loading

fluiddot commented Jun 20, 2024

matt-west commented Jun 24, 2024

fluiddot left a comment

matt-west commented Jun 27, 2024 •

edited

Loading

kozer commented Jul 2, 2024

matt-west commented Jul 2, 2024

kozer commented Jul 2, 2024

fluiddot left a comment

kozer commented Jul 2, 2024

matt-west commented Jul 2, 2024

fluiddot left a comment

katinthehatsite Jul 10, 2024

kozer Jul 13, 2024

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

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

Conversation

kozer commented Jun 18, 2024 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

fluiddot left a comment

Choose a reason for hiding this comment

sejas left a comment • edited Loading

Choose a reason for hiding this comment

kozer commented Jun 19, 2024

fluiddot left a comment • edited Loading

Choose a reason for hiding this comment

fluiddot commented Jun 20, 2024

matt-west commented Jun 24, 2024

fluiddot left a comment

Choose a reason for hiding this comment

Scroll is animated when navigating to the assistant tab

Messages are animated when switching sites

Transition between thinking and AI response

matt-west commented Jun 27, 2024 • edited Loading

kozer commented Jul 2, 2024

matt-west commented Jul 2, 2024

kozer commented Jul 2, 2024

fluiddot left a comment

Choose a reason for hiding this comment

kozer commented Jul 2, 2024

matt-west commented Jul 2, 2024

fluiddot left a comment

Choose a reason for hiding this comment

katinthehatsite Jul 10, 2024

Choose a reason for hiding this comment

kozer Jul 13, 2024

Choose a reason for hiding this comment

kozer commented Jun 18, 2024 •

edited

Loading

sejas left a comment •

edited

Loading

fluiddot left a comment •

edited

Loading

matt-west commented Jun 27, 2024 •

edited

Loading