[PP-1] Image upload feature in AI Chatbot

I'll assign it to me as this still needs some more work.

Here are few examples that we could use to test this:

Prompt 1:

I want to build a hero component with heading, text and a slot for buttons. The highlighted part of the heading should use bold from CKEditor.

Prompt 2:
I want to build a hero component with heading, text and slot for buttons. There's also an image which is displayed on the right on desktop and hidden on mobile.

I've added som comments - most is just NIT and doesn't actually stop merging.

The bigger parts more UX questions, that I think laurii should answer if they are needed.

Thanks for the review @Marcus_Johansson. I have made the changes which does not require inputs from @laurii.Remaining things can be done once we get the confirmation from @laurii.

The current state of the MR works fine for creating simple code components. but there are some issues when there is an image which are as follows:-

• When a user uploads an image as mentioned in #8's prompt 2 📌 [PP-1] Image upload feature in AI Chatbot Active It makes it hard for the ai to generate exact similar doodle. It identifies that a doodle is present but does not generate one which is exact similar.
• When a user uploads an image like this → then it does insert an image which is close to this(in this case it inserted and image of forest without the human)

It does create simple components such as this → one very well. Also as discussed with @laurii that if we tell the AI bot to create a component and also which image to insert in the images section then it does take care of that as well.

@Marcus_Johansson, @laurii we can discuss further what all needs to be taken care of in this issue.

We have four options:

1. Do nothing, let them overspend
2. Client-side validation preventing large uploads
3. Client-side modal informing them it's too big
4. Convert/downscale the image ourselves before passing to AI

I have created a follow-up issue which enables the client side validation of size for image uploads 📌 Client-side validation preventing large image uploads to LLM Active .

Uploading the SS showing how the image upload icon looks like.

I have merged all the new changes and also tested that no existing scenario is breaking and the new once are working as expected. Marking this NR.

Addressed feedbacks.

On attaching image, it seems to be hidden under help text.

I tested it manually and similar component gets created but it it has image, it is not replaced by a placeholder image as image url is wrong (not sure if this is an issue or not).

Created 🐛 XB AI: Image not displaying actual URL in generated component Active for #19 image issue.
Other changes looks good to me. Moving it to RTBC.

Merged!

Automatically closed - issue fixed for 2 weeks with no activity.

unassigning to prep for dashboard: 📌 Unassign closed AI issues and update metadata in prep for dashboard Active