Use positive/negative sentiment feedback component for AI comment feedback
<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Label this issue](https://contributors.gitlab.com/manage-issue?action=label&projectId=278964&issueIid=523545) - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=523545) </details> <!--IssueSummary end--> # Proposal As a follow up to #521724 this issue proposes an alternative to using the standard emoji reactions in favor of feedback mechanisms that could be reused by GitLab Duo features: - An area for actions related to the AI response - An area for feedback associated to the specific response - Controls would be specific per user ![image](/uploads/f5d2df74edd174186e50544117ff2beb/image.png) ## Tooltips to inform usage This approach of using buttons conveys action but in doing so it might not be clear to all what :thumbsup: and :thumbsdown: mean. To help with that scenario we would display tooltips on hover of the buttons. This example is specific to the goals of #521724. By using buttons & tooltips we achieve the messaging goals with fewer elements visible at one time on the screen. | Mention GitLabDuo for questions | Positive feedback | | ------ | ------ | | ![image](/uploads/ef5b04a640cb181c28b9745a191341cd/image.png) | ![image](/uploads/1bebd190e1b9c78d96e1e229b8263691/image.png) | ## Feedback capture To give user feedback that the rating was received we could use a toast. Additionally the industry uses this feedback pattern of thumbs up/down as a way to invoke a feedback form. This is optional for the goals of #521724. There are valid concerns that I share that [having a form could be a burden](https://gitlab.com/gitlab-org/gitlab/-/issues/521724#note_2383462304) from capturing the general sentiment even if the description is optional. | Toast | Could open form that on Submit would show toast (optional) | | ------ | ------ | | ![image](/uploads/058ab4e3e879eee6b00fe1b654ad6a4d/image.png) | ![image](/uploads/ad1e6fcfcd231798078caba14024edc5/image.png) | ## Rated state When a rating is received, the simplest thing to do is to treat the thumbs up/down button as toggle buttons like we do with our editor toolbar for actions like bold/italic/strikethrough. This allows the user to change their mind on the rating. Once selected I don't think a user can remove the fact that they rated a diff comment. In the example below it is showing a rating of "positive feedback". ![image](/uploads/2e7549209639e11becf77958ff3ff93e/image.png) ## Alongside emoji reactions #521724 correctly recognizes that users do want to give feedback to the responses. However we risk conflating what emoji reactions already means to users and having a feedback capture for AI responses. By introducing a separate mechanism for AI response actions and feedback we don't need to create extra logic/conditions around emoji reactions https://gitlab.com/gitlab-org/gitlab/-/issues/521724#note_2382085575. We could have a dedicated feedback component to add to the GitLab Duo feedback. The example below shows how the feedback mechanism with a positive feedback rated would sit along side emoji reactions. By using icons and emojis these concepts of rating and reaction are separated. ![image](/uploads/948d23c27370ec19f56aab574e008d5e/image.png)
issue