Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enhance(ai-help): improve stopped state #10580

Merged
merged 6 commits into from
Feb 29, 2024
Merged

enhance(ai-help): improve stopped state #10580

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2bac251
feat(ui): add --text-muted color
caugner Feb 23, 2024
e6c3f77
enhance(ai-help): add "Stopped answering" in new line
caugner Feb 23, 2024
bdb3968
fix(ai-help): animate status icon only if active
caugner Feb 23, 2024
2c4fee6
refactor(ai-help): extract messageForStatus() helper
caugner Feb 23, 2024
855b097
enhance(ai-help): add suffix to answer status if stopped
caugner Feb 23, 2024
2a1e122
Merge branch 'main' into improve-ai-help-stopped-state
caugner Feb 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions client/src/plus/ai-help/constants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
14 changes: 8 additions & 6 deletions client/src/plus/ai-help/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,7 +383,6 @@
color: var(--text-secondary);

&::before {
animation: pulse 1s infinite alternate;
background-color: var(--text-secondary);
content: "";
display: inline-block;
Expand All @@ -408,8 +407,11 @@
}
}

&.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");
}
Expand All @@ -422,7 +424,6 @@
padding: 0.5rem 1rem;

&::before {
animation: none;
background-color: var(--icon-critical);
mask-image: url("../../assets/icons/alert-circle.svg");
}
Expand Down Expand Up @@ -466,9 +467,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 {
Expand Down
43 changes: 29 additions & 14 deletions client/src/plus/ai-help/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -290,12 +291,36 @@ function AIHelpAssistantResponse({

let sample = 0;

function messageForStatus(status: MessageStatus) {
switch (status) {
case MessageStatus.Errored:
return (
<>
{MESSAGE_FAILED} Please{" "}
<Button type="link" onClickHandler={retryLastQuestion}>
try again
</Button>
.
</>
);

case MessageStatus.Stopped:
return MESSAGE_STOPPED;

case MessageStatus.InProgress:
return MESSAGE_ANSWERING;

default:
return MESSAGE_ANSWERED;
}
}

return (
<>
<div
className={[
"ai-help-message-progress",
message.status !== MessageStatus.Pending && "complete",
message.status === MessageStatus.Pending && "active",
]
.filter(Boolean)
.join(" ")}
Expand Down Expand Up @@ -325,25 +350,15 @@ function AIHelpAssistantResponse({
<div
className={[
"ai-help-message-progress",
message.status === MessageStatus.InProgress && "active",
message.status === MessageStatus.Complete && "complete",
message.status === MessageStatus.Errored && "errored",
message.status === MessageStatus.Stopped && "stopped",
]
.filter(Boolean)
.join(" ")}
>
{message.status === MessageStatus.Errored ? (
<>
{MESSAGE_FAILED} Please{" "}
<Button type="link" onClickHandler={retryLastQuestion}>
try again
</Button>
.
</>
) : message.status === MessageStatus.InProgress ? (
MESSAGE_ANSWERING
) : (
MESSAGE_ANSWERED
)}
{messageForStatus(message.status)}
</div>
)}
{message.content && (
Expand Down
2 changes: 2 additions & 0 deletions client/src/ui/_vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: I wouldn't add further sass variables if we don't need them anywhere, just define the css variable directly

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll keep it, as I had wanted to use this color in other circumstances before (being familiar with Bootstrap).

$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;
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions client/src/ui/base/_themes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down Expand Up @@ -283,6 +284,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};
Expand Down
Loading