Merge branch 'experiments' into next

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);
-    }
-  }
 }

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 &&

client/src/ui/atoms/thumbs/index.tsx

@@ -16,33 +16,48 @@ 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);
   }
 }
 
 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);
     }
   };