fix(ai-help): show stopped message once + restore search animation (#…

…10632) * fix(ai-help): show "Stopped answering" message only once * fix(ai-help): restore animation while sources are loading
mdn · Mar 15, 2024 · e24a7cc · e24a7cc
1 parent f9756d1
commit e24a7cc
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 16 deletions.
diff --git a/client/src/plus/ai-help/index.scss b/client/src/plus/ai-help/index.scss
@@ -475,21 +475,10 @@
         }
       }
 
-      &.status-stopped .ai-help-message-content {
-        &.empty::after,
-        > :not(ol):not(ul):not(pre):last-child:after,
-        > ol:last-child li:last-child:after,
-        > pre:last-child code:after,
-        > ul:last-child li:last-child:after {
-          color: var(--text-muted);
-          content: "■\00a0Stopped answering";
-          display: block;
-          margin-top: 1.7rem;
-        }
-
-        &.empty::after {
-          margin-left: unset;
-        }
+      .stopped-message {
+        color: var(--text-muted);
+        display: block;
+        margin-top: 1.7rem;
       }
     }
 

diff --git a/client/src/plus/ai-help/index.tsx b/client/src/plus/ai-help/index.tsx
@@ -489,6 +489,11 @@ function AIHelpAssistantResponse({
           >
             {isOffTopic ? SORRY_FRONTEND : message.content}
           </ReactMarkdown>
+          {message.status === "stopped" && (
+            <section className="stopped-message">
+              {"■\u00a0Stopped answering"}
+            </section>
+          )}
           {(message.status === "complete" || isOffTopic) && (
             <>
               <section className="ai-help-feedback">
@@ -536,7 +541,7 @@ function AIHelpAssistantResponseSources({
       <div
         className={[
           "ai-help-message-progress",
-          message.status !== MessageStatus.Pending && "complete",
+          message.status === MessageStatus.Pending ? "active" : "complete",
         ]
           .filter(Boolean)
           .join(" ")}