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 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 #3535108: Add client-side validation to prevent large (expensive) image uploads to LLM.

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.

Merged!

unassigning to prep for dashboard: #3538640: Unassign closed AI issues and update metadata in prep for dashboard

Tested changes on branch 1.x :

Scenario	Result	Status
Verify presence and clickability of Image Upload button	Image Upload button is present and clickable	PASS
Image preview after upload	Image preview displayed after upload	PASS
Upload a .jpeg image without a prompt	No prompt provided	PASS
Upload a .jpg image with prompt: create a matching code component	Able to read image and create similar code component	PASS
Upload a .png image with prompt: duplicate the format in code component	Able to read image and create similar code component	PASS
Upload a .gif image with prompt: create a matching code component	Unable to select .gif file	PASS
Upload a .mov file with prompt: create a matching code component	Unable to select .mov file	PASS
Upload a .heic file with prompt: create a matching code component	Unable to select .heic file	PASS
Upload a .svg file with prompt: create a matching code component	Unable to select .svg file	PASS
Upload image file of size 100 MB with a prompt		FAIL
Replace uploaded image: 1. Add image and write a prompt 2. Remove image 3. Add new image and submit	Code component created in reference to new uploaded image	PASS
Remove uploaded image: 1. Add image and write a prompt 2. Remove image and submit	Prompt submitted without image	PASS
Drag-and-drop image upload	Image uploaded, and typed prompt remains as is	PASS
Upload multiple image files in one message	Only one image is uploaded and processed	PASS

Reported :

• https://www.drupal.org/project/experience_builder/issues/3540724
• https://www.drupal.org/project/canvas/issues/3540725