feat(ui) Assistant Avatar

[gregclark-defenseunicorns]

User Story

As a LFAI user
I want manage my assistant's avatar
So that I can have control over the assistants I use

Acceptance Criteria

Given the assistant has a file uploaded for the avatar image
When the "Avatar Image" Modal opens
Then the "Upload" radio button is selected
And I see the profile circle displaying the uploaded file
And I see 2 tertiary Buttons reading "Change" with an edit icon and "Remove" with a trash icon
And 2 Buttons reading "Cancel" and "Save"

When I click on the "Change" Button
Then the file explorer window is opened
And only .jpg and .png files are selectable
And When I select and upload an image (.jpg or .png)
Then the file explorer window closes
And the profile circle is updated
And displays the new image

When I click the remove Button
Then the image is deleted
And the File Uploader displays the empty state
And I see the label text "Upload image"
And I see the description "Supported file types are .jpg and .png."
And I see a tertiary Button reading "Upload from computer" with the Upload icon

When I click the "Upload from computer" Button
Then the file explorer window is opened
And only .jpg and .png files are selectable
And When I select and upload an image (.jpg or .png)
Then the file explorer window closes
And the profile circle is updated
And displays the new image

When I click the "Cancel" Button
Then all changes are deleted
And the Modal closes

When I click the "Save" Button and NO image is uploaded
Then the Modal closes
And the avatar reverts back to the default pictogram of "User"

When I click the "Save" Button and an image is uploaded
Then the Modal closes
And the avatar image is updated

---

Given the assistant has a Pictogram as its avatar
When the "Avatar Image" Modal opens
Then the "Pictogram" radio button is selected
And I see a Search input
And I see a grid of all the Carbon Pictograms (see library below)
And I see the respective Pictogram selected for my assistant (auto scroll to selected pictogram)
And 2 Button reading "Cancel" and "Save"

When I type into the Search input
Then the Pictograms that have the inputted text in their name display
And all other Pictograms disappear

When I click the "Cancel" Button
Then all changes are deleted
And the Modal closes

When I click the "Save" Button
Then the Modal closes
And the avatar image is updated

Additional context

Pictograms Library

Design Links

• Uploaded Avatar Image Modal
• Select Avatar Upload Modal
• Upload Avatar Image Modal (empty state)
• Pictogram Avatar Image Modal