From f1c13d8afd87f3741ce53df101be27d79700799e Mon Sep 17 00:00:00 2001
From: Florian Dieminger <me@fiji-flo.de>
Date: Tue, 27 Feb 2024 17:33:48 +0100
Subject: [PATCH] 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>
---
 client/src/assets/icons/alert-circle.svg |  3 +++
 client/src/plus/ai-help/index.scss       | 15 ++++++++++++---
 client/src/plus/ai-help/index.tsx        | 21 ++++++++++++++++-----
 3 files changed, 31 insertions(+), 8 deletions(-)
 create mode 100644 client/src/assets/icons/alert-circle.svg

diff --git a/client/src/assets/icons/alert-circle.svg b/client/src/assets/icons/alert-circle.svg
new file mode 100644
index 000000000000..3693f8eafccd
--- /dev/null
+++ b/client/src/assets/icons/alert-circle.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9 12.9H11.1V7.5H12.9M12.9 16.5H11.1V14.7H12.9M12 3C10.8181 3 9.64778 3.23279 8.55585 3.68508C7.46392 4.13738 6.47177 4.80031 5.63604 5.63604C3.94821 7.32387 3 9.61305 3 12C3 14.3869 3.94821 16.6761 5.63604 18.364C6.47177 19.1997 7.46392 19.8626 8.55585 20.3149C9.64778 20.7672 10.8181 21 12 21C14.3869 21 16.6761 20.0518 18.364 18.364C20.0518 16.6761 21 14.3869 21 12C21 10.8181 20.7672 9.64778 20.3149 8.55585C19.8626 7.46392 19.1997 6.47177 18.364 5.63604C17.5282 4.80031 16.5361 4.13738 15.4442 3.68508C14.3522 3.23279 13.1819 3 12 3Z" fill="#D30038"/>
+</svg>
diff --git a/client/src/plus/ai-help/index.scss b/client/src/plus/ai-help/index.scss
index a1aaca724179..576fac29af26 100644
--- 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
index f09b77f8fd5b..add5376a6e2c 100644
--- 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>