From a2c116b8118011b0a39e3e9fac54da5ea784d7ba Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Tue, 30 Jan 2024 13:51:16 +0100 Subject: [PATCH 1/3] fix(ai-help): nicer error message Add an icon and background for the error generating answer error message. --- client/src/assets/icons/alert-circle.svg | 3 +++ client/src/plus/ai-help/constants.tsx | 2 +- client/src/plus/ai-help/index.scss | 15 ++++++++++++--- 3 files changed, 16 insertions(+), 4 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 @@ + + + diff --git a/client/src/plus/ai-help/constants.tsx b/client/src/plus/ai-help/constants.tsx index eb7e133f832b..45202df9ea7c 100644 --- a/client/src/plus/ai-help/constants.tsx +++ b/client/src/plus/ai-help/constants.tsx @@ -6,6 +6,6 @@ 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_FAILED = "Error generating your answer!"; +export const MESSAGE_FAILED = "Error generating your answer! Please try again."; export const EVENT_TIMEOUT = 15000; 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"); + } } } From 7d0075099a9545fa38a9ceaef647d9536bd93273 Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Wed, 14 Feb 2024 10:14:59 +0100 Subject: [PATCH 2/3] add try again button --- client/src/plus/ai-help/index.tsx | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/client/src/plus/ai-help/index.tsx b/client/src/plus/ai-help/index.tsx index 3a72fbdb1c68..f6df2eca57f1 100644 --- a/client/src/plus/ai-help/index.tsx +++ b/client/src/plus/ai-help/index.tsx @@ -276,15 +276,18 @@ function AIHelpAssistantResponse({ queuedExamples, setQueue, messages, + retryLastQuestion, }: { message: Message; queuedExamples: Set; setQueue: React.Dispatch>; messages: Message[]; + retryLastQuestion: () => void; }) { const gleanClick = useGleanClick(); const locale = useLocale(); const { highlightedQueueExample } = useUIStatus(); + message.status = MessageStatus.Errored.toString() as MessageStatus; let sample = 0; @@ -329,11 +332,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{" "} + + . + + ) : message.status === MessageStatus.InProgress ? ( + MESSAGE_ANSWERING + ) : ( + MESSAGE_ANSWERED + )} )} {message.content && ( @@ -659,6 +670,7 @@ export function AIHelpInner() { queuedExamples={queuedExamples} setQueue={setQueue} messages={messages} + retryLastQuestion={retryLastQuestion} /> )} From 7d32325f0c3829fee7815fe5579331db7240dbac Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Tue, 20 Feb 2024 09:53:31 +0100 Subject: [PATCH 3/3] fix copy --- client/src/plus/ai-help/constants.tsx | 2 +- client/src/plus/ai-help/index.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/client/src/plus/ai-help/constants.tsx b/client/src/plus/ai-help/constants.tsx index 45202df9ea7c..eb7e133f832b 100644 --- a/client/src/plus/ai-help/constants.tsx +++ b/client/src/plus/ai-help/constants.tsx @@ -6,6 +6,6 @@ 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_FAILED = "Error generating your answer! Please try again."; +export const MESSAGE_FAILED = "Error generating your answer!"; export const EVENT_TIMEOUT = 15000; diff --git a/client/src/plus/ai-help/index.tsx b/client/src/plus/ai-help/index.tsx index f6df2eca57f1..0398eccba747 100644 --- a/client/src/plus/ai-help/index.tsx +++ b/client/src/plus/ai-help/index.tsx @@ -287,7 +287,6 @@ function AIHelpAssistantResponse({ const gleanClick = useGleanClick(); const locale = useLocale(); const { highlightedQueueExample } = useUIStatus(); - message.status = MessageStatus.Errored.toString() as MessageStatus; let sample = 0;