[Freestyler] Ability to unclick a rating

This sends the correct Rating back to the Client effectively removing
the user's rating.

Also render Report issue even when rate buttons are not rendered.



Bug: 377428838
Change-Id: I9d5b171cc12ebf70f2a117cfbf7a6aaf56fd596c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5993738
Auto-Submit: Nikolay Vitkov <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>

Author: Lightning00Blade

front_end/core/host/AidaClient.ts

@@ -16,6 +16,7 @@ export enum Entity {
 }
 
 export const enum Rating {
+  SENTIMENT_UNSPECIFIED = 'SENTIMENT_UNSPECIFIED',
   POSITIVE = 'POSITIVE',
   NEGATIVE = 'NEGATIVE',
 }

front_end/panels/freestyler/components/FreestylerChatUi.ts

@@ -737,14 +737,14 @@ export class FreestylerChatUi extends HTMLElement {
       // clang-format on
     }
 
-    const shouldShowSuggestions = (isLast && !this.#props.isLoading && message.suggestions);
     // clang-format off
     return html`
-      <section class="chat-message answer" jslog=${VisualLogging.section('answer')}>
+      <section
+        class="chat-message answer"
+        jslog=${VisualLogging.section('answer')}
+      >
         <div class="message-info">
-          <devtools-icon
-            name="smart-assistant"
-          ></devtools-icon>
+          <devtools-icon name="smart-assistant"></devtools-icon>
           <div class="message-name">
             <h2>${lockedString(UIStringsNotTranslate.ai)}</h2>
           </div>
@@ -758,14 +758,17 @@ export class FreestylerChatUi extends HTMLElement {
             });
           },
         )}
-        ${
-          message.answer
-            ? html`<p>${this.#renderTextAsMarkdown(message.answer)}</p>`
-            : LitHtml.nothing
-        }
+        ${message.answer
+          ? html`<p>${this.#renderTextAsMarkdown(message.answer)}</p>`
+          : LitHtml.nothing}
         ${this.#renderError(message)}
         <div class="actions">
-          ${this.#renderUserActionRow(message.rpcId, shouldShowSuggestions ? message.suggestions : undefined)}
+          ${isLast && this.#props.isLoading
+            ? LitHtml.nothing
+            : this.#renderUserActionRow(
+                message.rpcId,
+                isLast ? message.suggestions : undefined,
+              )}
         </div>
       </section>
     `;

front_end/panels/freestyler/components/UserActionRow.ts

@@ -139,6 +139,11 @@ export class UserActionRow extends HTMLElement {
 
   #handleRateClick(rating: Host.AidaClient.Rating): void {
     if (this.#currentRating === rating) {
+      this.#currentRating = undefined;
+      this.#isShowingFeedbackForm = false;
+      // This effectively reset the user rating
+      this.#props.onFeedbackSubmit(Host.AidaClient.Rating.SENTIMENT_UNSPECIFIED);
+      this.#render();
       return;
     }
 
@@ -168,36 +173,42 @@ export class UserActionRow extends HTMLElement {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(REPORT_URL);
   };
 
-  #renderButtons(): LitHtml.TemplateResult {
+  #renderButtons(): LitHtml.LitTemplate {
     // clang-format off
-    return html`
-      <devtools-button
-        .data=${{
-          variant: Buttons.Button.Variant.ICON,
-          size: Buttons.Button.Size.SMALL,
-          iconName: 'thumb-up',
-          toggledIconName: 'thumb-up-filled',
-          toggled: this.#currentRating === Host.AidaClient.Rating.POSITIVE,
-          toggleType: Buttons.Button.ToggleType.PRIMARY,
-          title: lockedString(UIStringsNotTranslate.thumbsUp),
-          jslogContext: 'thumbs-up',
-        } as Buttons.Button.ButtonData}
-        @click=${() => this.#handleRateClick(Host.AidaClient.Rating.POSITIVE)}
-      ></devtools-button>
+    const rateButtons = html`
       <devtools-button
-        .data=${{
-          variant: Buttons.Button.Variant.ICON,
-          size: Buttons.Button.Size.SMALL,
-          iconName: 'thumb-down',
-          toggledIconName: 'thumb-down-filled',
-          toggled: this.#currentRating === Host.AidaClient.Rating.NEGATIVE,
-          toggleType: Buttons.Button.ToggleType.PRIMARY,
-          title: lockedString(UIStringsNotTranslate.thumbsDown),
-          jslogContext: 'thumbs-down',
-        } as Buttons.Button.ButtonData}
-        @click=${() => this.#handleRateClick(Host.AidaClient.Rating.NEGATIVE)}
-      ></devtools-button>
-      <div class="vertical-separator"></div>
+          .data=${{
+            variant: Buttons.Button.Variant.ICON,
+            size: Buttons.Button.Size.SMALL,
+            iconName: 'thumb-up',
+            toggledIconName: 'thumb-up-filled',
+            toggled: this.#currentRating === Host.AidaClient.Rating.POSITIVE,
+            toggleType: Buttons.Button.ToggleType.PRIMARY,
+            title: lockedString(UIStringsNotTranslate.thumbsUp),
+            jslogContext: 'thumbs-up',
+          } as Buttons.Button.ButtonData}
+          @click=${() => this.#handleRateClick(Host.AidaClient.Rating.POSITIVE)}
+        ></devtools-button>
+        <devtools-button
+          .data=${{
+            variant: Buttons.Button.Variant.ICON,
+            size: Buttons.Button.Size.SMALL,
+            iconName: 'thumb-down',
+            toggledIconName: 'thumb-down-filled',
+            toggled: this.#currentRating === Host.AidaClient.Rating.NEGATIVE,
+            toggleType: Buttons.Button.ToggleType.PRIMARY,
+            title: lockedString(UIStringsNotTranslate.thumbsDown),
+            jslogContext: 'thumbs-down',
+          } as Buttons.Button.ButtonData}
+          @click=${() => this.#handleRateClick(Host.AidaClient.Rating.NEGATIVE)}
+        ></devtools-button>
+        <div class="vertical-separator"></div>`;
+    // clang-format off
+
+    // clang-format off
+    return html`
+    <div class="rate-buttons">
+      ${this.#props.showRateButtons ? rateButtons : LitHtml.nothing}
       <devtools-button
         .data=${
           {
@@ -210,7 +221,7 @@ export class UserActionRow extends HTMLElement {
         }
         @click=${this.#handleReportClick}
       ></devtools-button>
-    `;
+    </div>`;
     // clang-format on
   }
 
@@ -240,6 +251,10 @@ export class UserActionRow extends HTMLElement {
   };
 
   #renderFeedbackForm(): LitHtml.LitTemplate {
+    if (!this.#isShowingFeedbackForm) {
+      return LitHtml.nothing;
+    }
+
     // clang-format off
     return html`
       <form class="feedback-form" @submit=${this.#handleSubmit}>
@@ -295,11 +310,10 @@ export class UserActionRow extends HTMLElement {
   }
 
   #renderSuggestions(): LitHtml.LitTemplate {
-    // clang-format off
     if (!this.#props.suggestions) {
       return LitHtml.nothing;
     }
-
+    // clang-format off
     return html`<div class="suggestions-container">
       <div class="scroll-button-container left hidden" ${LitHtml.Directives.ref(this.#suggestionsLeftScrollButtonContainerRef)}>
         <devtools-button
@@ -347,15 +361,10 @@ export class UserActionRow extends HTMLElement {
     LitHtml.render(
       html`
         <div class="feedback">
-          <div class="rate-buttons">
-            ${this.#props.showRateButtons ? this.#renderButtons() : LitHtml.nothing}
-          </div>
-          ${this.#props.suggestions ? this.#renderSuggestions() : LitHtml.nothing}
+          ${this.#renderButtons()}
+          ${this.#renderSuggestions()}
         </div>
-        ${this.#isShowingFeedbackForm
-          ? this.#renderFeedbackForm()
-          : LitHtml.nothing
-        }
+        ${this.#renderFeedbackForm()}
       `,
       this.#shadow,
       {host: this},

front_end/panels/freestyler/components/userActionRow.css

@@ -16,7 +16,7 @@
   display: flex;
   gap: var(--sys-size-8);
   justify-content: space-between;
-  align-items: flex-end;
+  align-items: center;
 }
 
 .rate-buttons {
@@ -100,12 +100,21 @@
 
   .scroll-button-container.left {
     left: 0;
-    background: linear-gradient(90deg, var(--sys-color-cdt-base-container) 0%, var(--sys-color-cdt-base-container) 50%, transparent);
+    background: linear-gradient(
+      90deg,
+      var(--sys-color-cdt-base-container) 0%,
+      var(--sys-color-cdt-base-container) 50%,
+      transparent
+    );
   }
 
   .scroll-button-container.right {
     right: 0;
-    background: linear-gradient(90deg, transparent, var(--sys-color-cdt-base-container) 50%);
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--sys-color-cdt-base-container) 50%
+    );
     justify-content: flex-end;
   }
 }