enhance(ai-help): disable top banner if quota banner is visible (#10532)

* refactor(ai-help): move AiHelpBanner into AIHelpInner

* enhance(ai-help): change top banner if quota banner is visible

1. Change the background-color.
2. Hide the "Upgrade Now" button.
3. Add a margin equivalent to the height of the button to avoid layout shift.

Author: caugner

Diff for: client/src/plus/ai-help/banners.tsx

@@ -6,13 +6,15 @@ import { useUserData } from "../../user-context";
 import { PlusLoginBanner } from "../common/login-banner";
 import { isPlusSubscriber } from "../../utils";
 
-export function AiHelpBanner() {
+export function AiHelpBanner({
+  isDisabled = false,
+}: { isDisabled?: boolean } = {}) {
   const user = useUserData();
 
   const isSubscriber = useMemo(() => isPlusSubscriber(user), [user]);
 
   return (
-    <div className="ai-help-banner">
+    <div className={`ai-help-banner ${isDisabled ? "disabled" : ""}`}>
       <p>
         <Icon name="bell-ring" />
         <strong>

Diff for: client/src/plus/ai-help/index.scss

@@ -152,6 +152,16 @@
     .auth-container {
       margin-top: 1rem;
     }
+
+    &.disabled {
+      background-color: var(--background-secondary);
+
+      margin-bottom: 2.25rem;
+
+      .button {
+        display: none;
+      }
+    }
   }
 
   .ai-help-inner {

Diff for: client/src/plus/ai-help/index.tsx

@@ -124,9 +124,6 @@ function AIHelpAuthenticated() {
           </a>
         </p>
       </Container>
-      <Container>
-        <AiHelpBanner />
-      </Container>
       <AIHelpInner />
     </div>
   );
@@ -635,6 +632,7 @@ export function AIHelpInner() {
         messageId={messages.length === 2 ? messages[0]?.messageId : undefined}
       />
       <Container>
+        <AiHelpBanner isDisabled={isQuotaExceeded(quota)} />
         {isQuotaLoading || isHistoryLoading ? (
           <Loading />
         ) : (