fix(ai-help): improve generation error message (#10424)

* fix(ai-help): nicer error message Add an icon and background for the error generating answer error message. * add try again button --------- Co-authored-by: Claas Augner <caugner@mozilla.com>
mdn · Feb 27, 2024 · f1c13d8 · f1c13d8
1 parent b189a17
commit f1c13d8
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 8 deletions.
diff --git a/client/src/assets/icons/alert-circle.svg b/client/src/assets/icons/alert-circle.svg
diff --git a/client/src/plus/ai-help/index.scss b/client/src/plus/ai-help/index.scss
@@ -414,9 +414,18 @@
           mask-image: url("../../assets/icons/progress-check.svg");
         }
 
-        &.errored::before {
-          animation: none;
-          background-color: var(--icon-critical);
+        &.errored {
+          background-color: var(--background-critical);
+          border: 0;
+          border-radius: var(--elem-radius);
+          color: var(--icon-critical);
+          padding: 0.5rem 1rem;
+
+          &::before {
+            animation: none;
+            background-color: var(--icon-critical);
+            mask-image: url("../../assets/icons/alert-circle.svg");
+          }
         }
       }
 

diff --git a/client/src/plus/ai-help/index.tsx b/client/src/plus/ai-help/index.tsx
@@ -276,11 +276,13 @@ function AIHelpAssistantResponse({
   queuedExamples,
   setQueue,
   messages,
+  retryLastQuestion,
 }: {
   message: Message;
   queuedExamples: Set<string>;
   setQueue: React.Dispatch<React.SetStateAction<QueueEntry[]>>;
   messages: Message[];
+  retryLastQuestion: () => void;
 }) {
   const gleanClick = useGleanClick();
   const locale = useLocale();
@@ -329,11 +331,19 @@ function AIHelpAssistantResponse({
             .filter(Boolean)
             .join(" ")}
         >
-          {message.status === MessageStatus.Errored
-            ? MESSAGE_FAILED
-            : message.status === MessageStatus.InProgress
-              ? MESSAGE_ANSWERING
-              : MESSAGE_ANSWERED}
+          {message.status === MessageStatus.Errored ? (
+            <>
+              {MESSAGE_FAILED} Please{" "}
+              <Button type="link" onClickHandler={retryLastQuestion}>
+                try again
+              </Button>
+              .
+            </>
+          ) : message.status === MessageStatus.InProgress ? (
+            MESSAGE_ANSWERING
+          ) : (
+            MESSAGE_ANSWERED
+          )}
         </div>
       )}
       {message.content && (
@@ -659,6 +669,7 @@ export function AIHelpInner() {
                             queuedExamples={queuedExamples}
                             setQueue={setQueue}
                             messages={messages}
+                            retryLastQuestion={retryLastQuestion}
                           />
                         )}
                       </li>