From 7ff7ac5a9aa48a3482431ac62b13e575f30f3645 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 21 Nov 2023 23:35:11 +0100
Subject: [PATCH 1/2] chore(ai-help): remember feedback by message id

Prevents rating a message multiple times as useful/not useful.
---
 client/src/plus/ai-help/index.tsx    |  2 +-
 client/src/ui/atoms/thumbs/index.tsx | 50 +++++++++++++++++++---------
 2 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/client/src/plus/ai-help/index.tsx b/client/src/plus/ai-help/index.tsx
index 4b1463e47ad6..714d2b34a52f 100644
--- a/client/src/plus/ai-help/index.tsx
+++ b/client/src/plus/ai-help/index.tsx
@@ -565,12 +565,12 @@ export function AIHelpInner() {
                                   <section className="ai-help-feedback">
                                     <GleanThumbs
                                       feature="ai-help-answer"
+                                      featureKey={message.messageId}
                                       question={"Was this answer useful?"}
                                       upLabel={"Yes, this answer was useful."}
                                       downLabel={
                                         "No, this answer was not useful."
                                       }
-                                      permanent={true}
                                       callback={async (value) => {
                                         user?.experiments?.active &&
                                           message.messageId &&
diff --git a/client/src/ui/atoms/thumbs/index.tsx b/client/src/ui/atoms/thumbs/index.tsx
index 2541aa69bcae..ec05f11e7bfd 100644
--- a/client/src/ui/atoms/thumbs/index.tsx
+++ b/client/src/ui/atoms/thumbs/index.tsx
@@ -16,26 +16,40 @@ function getPreviouslySubmitted() {
   }
 }
 
-function isPreviouslySubmitted(feature: string): boolean {
+function isPreviouslySubmitted(feature: string, key?: string): boolean {
   try {
-    return feature in getPreviouslySubmitted();
+    const db = getPreviouslySubmitted();
+    if (key) {
+      return key in db[feature];
+    } else {
+      return feature in db;
+    }
   } catch (e) {
     return false;
   }
 }
 
-function markPreviouslySubmitted(feature: string, value: boolean) {
+function markPreviouslySubmitted(
+  feature: string,
+  value: boolean,
+  key?: string
+) {
   try {
-    window?.localStorage?.setItem(
-      LOCAL_STORAGE_KEY,
-      JSON.stringify({
-        ...getPreviouslySubmitted(),
-        [feature]: {
-          submitted_at: Date.now(),
-          value,
-        },
-      })
-    );
+    const db = getPreviouslySubmitted();
+
+    const state = {
+      submitted_at: Date.now(),
+      value,
+    };
+
+    db[feature] = key
+      ? {
+          ...db[feature],
+          [key]: state,
+        }
+      : state;
+
+    window?.localStorage?.setItem(LOCAL_STORAGE_KEY, JSON.stringify(db));
   } catch (e) {
     console.warn("Unable to write thumbs state to localStorage", e);
   }
@@ -43,6 +57,7 @@ function markPreviouslySubmitted(feature: string, value: boolean) {
 
 export function GleanThumbs({
   feature,
+  featureKey = undefined,
   question = "Is this feature useful?",
   confirmation = "Thank you for your feedback! ❤️",
   upLabel = "This feature is useful.",
@@ -51,6 +66,7 @@ export function GleanThumbs({
   callback,
 }: {
   feature: string;
+  featureKey?: string;
   question?: string;
   confirmation?: string;
   upLabel?: string;
@@ -63,15 +79,17 @@ export function GleanThumbs({
   const gleanClick = useGleanClick();
 
   useEffect(() => {
-    setPreviouslySubmitted(!permanent && isPreviouslySubmitted(feature));
-  }, [feature, permanent, setPreviouslySubmitted]);
+    setPreviouslySubmitted(
+      !permanent && isPreviouslySubmitted(feature, featureKey)
+    );
+  }, [feature, featureKey, permanent, setPreviouslySubmitted]);
 
   const handleThumbs = async (value: "up" | "down") => {
     gleanClick(`${THUMBS}: ${feature} -> ${value === "up" ? 1 : 0}`);
     await callback?.(value);
     setSubmitted(true);
     if (!permanent) {
-      markPreviouslySubmitted(feature, value === "up");
+      markPreviouslySubmitted(feature, value === "up", featureKey);
     }
   };
 

From bada1cff727cccbab966d638d59cc75913cda3ec Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 21 Nov 2023 23:40:45 +0100
Subject: [PATCH 2/2] fixup! fix(ai-help): generalize button icon style

---
 client/src/plus/ai-help/index.scss | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/src/plus/ai-help/index.scss b/client/src/plus/ai-help/index.scss
index f542f6f2ce47..e502ece37c52 100644
--- a/client/src/plus/ai-help/index.scss
+++ b/client/src/plus/ai-help/index.scss
@@ -11,6 +11,15 @@
     --plus-link: var(--ai-help-link);
   }
 
+  .button.action.has-icon {
+    // Reduce button icon contrast to make it less prominent.
+    --button-color: var(--icon-secondary);
+
+    &:hover {
+      --button-color: var(--icon-primary);
+    }
+  }
+
   > .ai-help-main {
     --ai-top: calc(var(--top-nav-height) + 1px + 1rem);
     column-gap: 1rem;
@@ -494,13 +503,4 @@
       margin: 0.5rem 0;
     }
   }
-
-  .button.action.has-icon {
-    // Reduce button icon contrast to make it less prominent.
-    --button-color: var(--icon-secondary);
-
-    &:hover {
-      --button-color: var(--icon-primary);
-    }
-  }
 }