From 2bac251323053a55d216bebfcb85babd0066df6b Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Fri, 23 Feb 2024 16:54:07 +0100 Subject: [PATCH 1/5] feat(ui): add --text-muted color --- client/src/ui/_vars.scss | 2 ++ client/src/ui/base/_themes.scss | 2 ++ 2 files changed, 4 insertions(+) diff --git a/client/src/ui/_vars.scss b/client/src/ui/_vars.scss index 5f97a83aebd9..c77a0ba3bfa6 100644 --- a/client/src/ui/_vars.scss +++ b/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 --git a/client/src/ui/base/_themes.scss b/client/src/ui/base/_themes.scss index 183861105850..bf4218ffa6b3 100644 --- a/client/src/ui/base/_themes.scss +++ b/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}; @@ -218,6 +219,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}; From e6c3f77738c2c1e5c3f466ef05b7a65a22caa837 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Fri, 23 Feb 2024 16:54:33 +0100 Subject: [PATCH 2/5] enhance(ai-help): add "Stopped answering" in new line --- client/src/plus/ai-help/index.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/client/src/plus/ai-help/index.scss b/client/src/plus/ai-help/index.scss index a1aaca724179..a8191e1f9fd1 100644 --- a/client/src/plus/ai-help/index.scss +++ b/client/src/plus/ai-help/index.scss @@ -457,9 +457,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 { From bdb3968df6de871720733687353a43e9483a775c Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Fri, 23 Feb 2024 16:59:23 +0100 Subject: [PATCH 3/5] fix(ai-help): animate status icon only if active --- client/src/plus/ai-help/index.scss | 7 ++++--- client/src/plus/ai-help/index.tsx | 4 +++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/client/src/plus/ai-help/index.scss b/client/src/plus/ai-help/index.scss index a8191e1f9fd1..20a27f030d87 100644 --- a/client/src/plus/ai-help/index.scss +++ b/client/src/plus/ai-help/index.scss @@ -383,7 +383,6 @@ color: var(--text-secondary); &::before { - animation: pulse 1s infinite alternate; background-color: var(--text-secondary); content: ""; display: inline-block; @@ -408,14 +407,16 @@ } } + &.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"); } &.errored::before { - animation: none; background-color: var(--icon-critical); } } diff --git a/client/src/plus/ai-help/index.tsx b/client/src/plus/ai-help/index.tsx index f09b77f8fd5b..715b5f8a9efd 100644 --- a/client/src/plus/ai-help/index.tsx +++ b/client/src/plus/ai-help/index.tsx @@ -293,7 +293,7 @@ function AIHelpAssistantResponse({
Date: Fri, 23 Feb 2024 17:02:40 +0100 Subject: [PATCH 4/5] refactor(ai-help): extract messageForStatus() helper --- client/src/plus/ai-help/index.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/client/src/plus/ai-help/index.tsx b/client/src/plus/ai-help/index.tsx index 715b5f8a9efd..6e1214d76a72 100644 --- a/client/src/plus/ai-help/index.tsx +++ b/client/src/plus/ai-help/index.tsx @@ -331,11 +331,7 @@ function AIHelpAssistantResponse({ .filter(Boolean) .join(" ")} > - {message.status === MessageStatus.Errored - ? MESSAGE_FAILED - : message.status === MessageStatus.InProgress - ? MESSAGE_ANSWERING - : MESSAGE_ANSWERED} + {messageForStatus(message.status)}
)} {message.content && ( @@ -517,6 +513,19 @@ function AIHelpAssistantResponse({ ); } +function messageForStatus(status: MessageStatus) { + switch (status) { + case MessageStatus.Errored: + return MESSAGE_FAILED; + + case MessageStatus.InProgress: + return MESSAGE_ANSWERING; + + default: + return MESSAGE_ANSWERED; + } +} + export function AIHelpInner() { const formRef = useRef(null); const inputRef = useRef(null); From 855b0978d2521acbf751c2a64a4306ba86831cd7 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Fri, 23 Feb 2024 17:05:42 +0100 Subject: [PATCH 5/5] enhance(ai-help): add suffix to answer status if stopped --- client/src/plus/ai-help/constants.tsx | 1 + client/src/plus/ai-help/index.tsx | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/client/src/plus/ai-help/constants.tsx b/client/src/plus/ai-help/constants.tsx index eb7e133f832b..2b4159ee1270 100644 --- a/client/src/plus/ai-help/constants.tsx +++ b/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 --git a/client/src/plus/ai-help/index.tsx b/client/src/plus/ai-help/index.tsx index 6e1214d76a72..ee0195da046a 100644 --- a/client/src/plus/ai-help/index.tsx +++ b/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"; @@ -518,6 +519,9 @@ function messageForStatus(status: MessageStatus) { case MessageStatus.Errored: return MESSAGE_FAILED; + case MessageStatus.Stopped: + return MESSAGE_STOPPED; + case MessageStatus.InProgress: return MESSAGE_ANSWERING;