Enhancement: Remove Image Attachments and Fix Wide Aspect Ratio Image Previews

[Jozef833]

Motivation and Context

1. Images with very wide aspect ratios occlude the chat textbox. Also, it is currently not possible to remove image attachments.
2. This PR enables the removal of image attachments in the QuestionInput component. It also fixes the image preview CSS to limit the maximum width of the preview so it doesn't occlude the entire chat textbox.
3. This contributes to scenarios where users have wide images, as well as when they attached an image they didn't mean to attach.
4. Enhancement: Remove Image Attachments and Fix Wide Aspect Ratio Image Previews #1211
5. All users of this app should benefit from this contribution.

Description

To fix the wide images issue, I made the image max width 108px. It must be max width and not just width so that very tall aspect ratio images do not overflow. The image height adjusts to be at most as tall as the chat textbox.

To support deleting images, I made the image preview gray out and darken on hover. A red trash icon also appears, indicating image attachment removal.

The image preview and trash icon are centered so it should look good.

Contribution Checklist

• I have built and tested the code locally and in a deployed app
• For frontend changes, I have pulled the latest code from main, built the frontend, and committed all static files.
• This is a change for all users of this app. No code or asset is specific to my use case or my organization.
• I didn't break any existing functionality 😄

[Jozef833]

@microsoft-github-policy-service agree