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

Author: caugner

Diff for: 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 for: 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(" ")}