Studio: Add the initial welcome prompts UI component

[katinthehatsite]

Related to https://github.com/Automattic/dotcom-forge/issues/7411

Proposed Changes

This PR adds a welcome component that offers two welcome messages and three prompts:

• the welcome component is displayed when the user is starting the chat
• if the user already has some messages in their chat that they had before, the welcome component is not displayed
• if you click on one of the prompts such as "How do I improve the performace of my site" (that has an arrow right by it), it sends the message to Assistant and the welcome component disappears starting the chat

Testing Instructions

• Pull the changes from this branch locally
• Start the app with the AI assistant: STUDIO_AI=true npm start
• Create a new site to ensure that you get a fresh chat
• Observe that the welcome component appears
• Try clicking on one of the prompts
• Confirm that the message gets sent to the assistant
• Confirm that the welcome component disappears and the conversation with the assistant starts

Some notes

• This PR does not have the functionality for clearing the messages and resetting the welcome component (I will implement it as a part of https://github.com/Automattic/dotcom-forge/issues/7697)
• Because we are making the request to the backend and not using localStorage, you will see that there is a slight delay for the welcome component to appear - 2-3 seconds. There is nothing really we can do with the speed of it but perhaps we can improve the UI with some sort of loading spinner before the initial prompts load
• At the moment, when you select one of the prompts or add your own message, the welcome component disappears. Should we keep it in the conversation or keep this current behavior? I did not see the indication in the issue description

Pre-merge Checklist

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

[katinthehatsite]

Thanks for the review @jeroenpf

When i have the assistant open for one site, and then create a new site, the focus of the studio app switches to the new site, but i still see the messages of the site that was previously active. This is perhaps a pre-existing problem so if you feel its not something we should fix in this PR its probably a good idea to create a separate issue for it.

For this bit, this is already present on trunk. Let's open the issue to fix it, I think this will require some refactoring work on content-tab-assistant.tsx. I will add a new issue and link it here once done.

[katinthehatsite]

Opened the issue for creating a new site and messages not being empty: https://github.com/Automattic/dotcom-forge/issues/7762

[katinthehatsite]

I looked through the design and noticed that the Welcome messages should stay on the screen when the message is set but the prompts should disappear. I will refactor a bit and then re-request the review

[katinthehatsite]

@jeroenpf I made a couple of changes such as:

• Reduced some margins between the messages in the WelcomeComponent
• Added cursor pointer to the example prompts to indicated that they can be clicked
• I checked the designs and it seems that when you click on the example prompts or send a message, the welcome messages should stay in chat but the prompts should disappear. I implemented this behaviour.

Let me know what you think!

[matt-west]

Thanks for implementing this @katinthehatsite.

The suggested action buttons should have hover and focus states. You can find these on the Components page in the Figma file.

Default	Hover	Focussed

The vertical padding for these buttons should be a little less than the regular messages. px-3 py-2 instead of p-3.

[katinthehatsite]

Thanks @matt-west - I will update based on your comment 👍 did not notice that bit in Figma