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/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; setQueue: React.Dispatch>; 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{" "} + + . + + ) : message.status === MessageStatus.InProgress ? ( + MESSAGE_ANSWERING + ) : ( + MESSAGE_ANSWERED + )} )} {message.content && ( @@ -659,6 +669,7 @@ export function AIHelpInner() { queuedExamples={queuedExamples} setQueue={setQueue} messages={messages} + retryLastQuestion={retryLastQuestion} /> )}