[COMPASS-7039] Align AI Query Input with recent designs Created: 24/Jul/23  Updated: 03/Oct/23  Resolved: 22/Aug/23

Status: Closed
Project: Compass
Component/s: GAI, Query Bar, UI / UX
Affects Version/s: None
Fix Version/s: No version

Type: Task Priority: Major - P3
Reporter: Rhys Howell Assignee: Rhys Howell
Resolution: Done Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Epic Link: COMPASS-6866
Story Points: 3
Documentation Changes: Not Needed
Sprint: Iteration Iguanodon

 Description   

This ticket involves updating the UI for the ai query experience to match the up to date designs. Once completed let's sync with design and ensure the experience is what we were thinking.
At the time of writing this involves:

  • Move the ai robot button to the left of the text input (currently it's on the right).
  • Update the `title` text properties of various buttons.
  • Show the `Ask AI` button when the query bar filter has content (shown pushed to the right side instead of placeholder).
  • Showing error state in the input area. This is the red warning icon that is shown when an error occurs.
  • Ensuring that the overlaying items like the success, generate button, ai robot icon button, and error icon don't impede user typing experience (related to https://jira.mongodb.org/browse/COMPASS-7036 )

Figma designs:
https://www.figma.com/file/Ip4CPowv3Uxxhu3klyXA0e/Generative-AI-in-Compass-MVP?type=design&node-id=1125%3A67271&mode=dev 



 Comments   
Comment by Githook User [ 25/Aug/23 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass-query-bar): add ask ai button to query bar when filter has content COMPASS-7039 (#4746)
Branch: ga-releases
https://github.com/mongodb-js/compass/commit/42914f472b0cf19b34e2b251cb9f78156ef770f3

Comment by Githook User [ 24/Aug/23 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass-query-bar): add ask ai button to query bar when filter has content COMPASS-7039 (#4746)
Branch: COMPASS-7106-create-aggregation-from-query
https://github.com/mongodb-js/compass/commit/42914f472b0cf19b34e2b251cb9f78156ef770f3

Comment by Githook User [ 24/Aug/23 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass-query-bar): add ask ai button to query bar when filter has content COMPASS-7039 (#4746)
Branch: COMPASS-7073-align-storages
https://github.com/mongodb-js/compass/commit/42914f472b0cf19b34e2b251cb9f78156ef770f3

Comment by Githook User [ 24/Aug/23 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: chore(compass-components): update ai input styles COMPASS-7039 (#4741)
Branch: COMPASS-7073-align-storages
https://github.com/mongodb-js/compass/commit/460a436b71672347def83b2a6956cd19df8a7fc1

Comment by Githook User [ 23/Aug/23 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass-query-bar): add ask ai button to query bar when filter has content COMPASS-7039 (#4746)
Branch: beta-releases
https://github.com/mongodb-js/compass/commit/42914f472b0cf19b34e2b251cb9f78156ef770f3

Comment by Githook User [ 22/Aug/23 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass-query-bar): add ask ai button to query bar when filter has content COMPASS-7039 (#4746)
Branch: bump-query-parser-to-ts
https://github.com/mongodb-js/compass/commit/42914f472b0cf19b34e2b251cb9f78156ef770f3

Comment by Githook User [ 22/Aug/23 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: chore(compass-components): update ai input styles COMPASS-7039 (#4741)
Branch: bump-query-parser-to-ts
https://github.com/mongodb-js/compass/commit/460a436b71672347def83b2a6956cd19df8a7fc1

Comment by Githook User [ 22/Aug/23 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass-query-bar): add ask ai button to query bar when filter has content COMPASS-7039 (#4746)
Branch: COMPASS-7120-hide-ai-feedback-options-with-telemetry-disabled
https://github.com/mongodb-js/compass/commit/42914f472b0cf19b34e2b251cb9f78156ef770f3

Comment by Githook User [ 22/Aug/23 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass-query-bar): add ask ai button to query bar when filter has content COMPASS-7039 (#4746)
Branch: main
https://github.com/mongodb-js/compass/commit/42914f472b0cf19b34e2b251cb9f78156ef770f3

Comment by Githook User [ 22/Aug/23 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: chore(compass-components): update ai input styles COMPASS-7039 (#4741)
Branch: ga-releases
https://github.com/mongodb-js/compass/commit/460a436b71672347def83b2a6956cd19df8a7fc1

Comment by Githook User [ 21/Aug/23 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: chore(compass-components): update ai input styles COMPASS-7039 (#4741)
Branch: compass-7098-atlas-login-in-settings
https://github.com/mongodb-js/compass/commit/460a436b71672347def83b2a6956cd19df8a7fc1

Comment by Githook User [ 21/Aug/23 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: chore(compass-components): update ai input styles COMPASS-7039 (#4741)
Branch: beta-releases
https://github.com/mongodb-js/compass/commit/460a436b71672347def83b2a6956cd19df8a7fc1

Comment by Githook User [ 20/Aug/23 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: chore(compass-components): update ai input styles COMPASS-7039 (#4741)
Branch: main
https://github.com/mongodb-js/compass/commit/460a436b71672347def83b2a6956cd19df8a7fc1

Generated at Wed Feb 07 22:45:08 UTC 2024 using Jira 9.7.1#970001-sha1:2222b88b221c4928ef0de3161136cc90c8356a66.