enhance(ai-help): improve stopped state (#10580)

* feat(ui): add --text-muted color

* enhance(ai-help): add "Stopped answering" in new line

* fix(ai-help): animate status icon only if active

* refactor(ai-help): extract messageForStatus() helper

* enhance(ai-help): add suffix to answer status if stopped

Author: caugner

Diff for: client/src/plus/ai-help/constants.tsx

@@ -6,6 +6,7 @@ export const MESSAGE_SEARCHING = "Searching for MDN content…";
 export const MESSAGE_SEARCHED = "Consulted MDN content:";
 export const MESSAGE_ANSWERING = "Generating your answer…";
 export const MESSAGE_ANSWERED = "Answer:";
+export const MESSAGE_STOPPED = "Answer (stopped):";
 export const MESSAGE_FAILED = "Error generating your answer!";
 
 export const EVENT_TIMEOUT = 15000;

Diff for: client/src/plus/ai-help/index.scss

@@ -397,7 +397,6 @@
         color: var(--text-secondary);
 
         &::before {
-          animation: pulse 1s infinite alternate;
           background-color: var(--text-secondary);
           content: "";
           display: inline-block;
@@ -422,8 +421,11 @@
           }
         }
 
+        &.active::before {
+          animation: pulse 1s infinite alternate;
+        }
+
         &.complete::before {
-          animation: none;
           background-color: var(--ai-help-icon);
           mask-image: url("../../assets/icons/progress-check.svg");
         }
@@ -436,7 +438,6 @@
           padding: 0.5rem 1rem;
 
           &::before {
-            animation: none;
             background-color: var(--icon-critical);
             mask-image: url("../../assets/icons/alert-circle.svg");
           }
@@ -480,9 +481,10 @@
         > ol:last-child li:last-child:after,
         > pre:last-child code:after,
         > ul:last-child li:last-child:after {
-          content: "…";
-          margin-left: 0.25rem;
-          vertical-align: baseline;
+          color: var(--text-muted);
+          content: "■\00a0Stopped answering";
+          display: block;
+          margin-top: 1.7rem;
         }
 
         &.empty::after {

Diff for: client/src/plus/ai-help/index.tsx

@@ -55,6 +55,7 @@ import {
   MESSAGE_FAILED,
   MESSAGE_ANSWERED,
   MESSAGE_SEARCHED,
+  MESSAGE_STOPPED,
 } from "./constants";
 import InternalLink from "../../ui/atoms/internal-link";
 import { isPlusSubscriber } from "../../utils";
@@ -287,12 +288,36 @@ function AIHelpAssistantResponse({
 
   let sample = 0;
 
+  function messageForStatus(status: MessageStatus) {
+    switch (status) {
+      case MessageStatus.Errored:
+        return (
+          <>
+            {MESSAGE_FAILED} Please{" "}
+            <Button type="link" onClickHandler={retryLastQuestion}>
+              try again
+            </Button>
+            .
+          </>
+        );
+
+      case MessageStatus.Stopped:
+        return MESSAGE_STOPPED;
+
+      case MessageStatus.InProgress:
+        return MESSAGE_ANSWERING;
+
+      default:
+        return MESSAGE_ANSWERED;
+    }
+  }
+
   return (
     <>
       <div
         className={[
           "ai-help-message-progress",
-          message.status !== MessageStatus.Pending && "complete",
+          message.status === MessageStatus.Pending && "active",
         ]
           .filter(Boolean)
           .join(" ")}
@@ -322,25 +347,15 @@ function AIHelpAssistantResponse({
         <div
           className={[
             "ai-help-message-progress",
+            message.status === MessageStatus.InProgress && "active",
             message.status === MessageStatus.Complete && "complete",
             message.status === MessageStatus.Errored && "errored",
+            message.status === MessageStatus.Stopped && "stopped",
           ]
             .filter(Boolean)
             .join(" ")}
         >
-          {message.status === MessageStatus.Errored ? (
-            <>
-              {MESSAGE_FAILED} Please{" "}
-              <Button type="link" onClickHandler={retryLastQuestion}>
-                try again
-              </Button>
-              .
-            </>
-          ) : message.status === MessageStatus.InProgress ? (
-            MESSAGE_ANSWERING
-          ) : (
-            MESSAGE_ANSWERED
-          )}
+          {messageForStatus(message.status)}
         </div>
       )}
       {message.content && (

Diff for: client/src/ui/_vars.scss

@@ -159,6 +159,7 @@ $mdn-theme-light-text-active: #{$mdn-color-neutral-50};
 $mdn-theme-light-text-inactive: #{$mdn-color-neutral-40}a6;
 $mdn-theme-light-text-link: $mdn-color-light-theme-blue-60;
 $mdn-theme-light-text-invert: $mdn-color-white;
+$mdn-theme-light-text-muted: #6f6f6f;
 $mdn-theme-light-background-primary: $mdn-color-white;
 $mdn-theme-light-background-secondary: $mdn-color-neutral-light-70;
 $mdn-theme-light-background-tertiary: $mdn-color-white;
@@ -206,6 +207,7 @@ $mdn-theme-dark-text-active: #{$mdn-color-neutral-50};
 $mdn-theme-dark-text-inactive: #{$mdn-color-neutral-20}a6;
 $mdn-theme-dark-text-link: $mdn-color-dark-theme-blue-30;
 $mdn-theme-dark-text-invert: $mdn-color-neutral-90;
+$mdn-theme-dark-text-muted: #858585;
 $mdn-theme-dark-background-primary: $mdn-color-neutral-90;
 $mdn-theme-dark-background-secondary: $mdn-color-neutral-75;
 $mdn-theme-dark-background-tertiary: $mdn-color-neutral-90;

Diff for: client/src/ui/base/_themes.scss

@@ -10,6 +10,7 @@
   --text-link: #{$mdn-theme-light-text-link};
   --text-visited: #551a8b; // Source: https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/modules/libpref/init/StaticPrefList.yaml#1787-1790
   --text-invert: #{$mdn-theme-light-text-invert};
+  --text-muted: #{$mdn-theme-light-text-muted};
 
   --background-primary: #{$mdn-theme-light-background-primary};
   --background-secondary: #{$mdn-theme-light-background-secondary};
@@ -283,6 +284,7 @@
   --text-link: #{$mdn-theme-dark-text-link};
   --text-visited: #ffadff; // Source: https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/modules/libpref/init/StaticPrefList.yaml#1794-1797
   --text-invert: #{$mdn-theme-dark-text-invert};
+  --text-muted: #{$mdn-theme-dark-text-muted};
 
   --background-primary: #{$mdn-theme-dark-background-primary};
   --background-secondary: #{$mdn-theme-dark-background-secondary};