fix(ai-help): use GPT-3.5 for free users (#10205)

client/src/plus/ai-help/banners.tsx

@@ -1,6 +1,38 @@
+import { useMemo } from "react";
 import { AI_HELP } from "../../telemetry/constants";
+import { Icon } from "../../ui/atoms/icon";
 import { SignUpLink } from "../../ui/atoms/signup-link";
+import { useUserData } from "../../user-context";
 import { PlusLoginBanner } from "../common/login-banner";
+import { isPlusSubscriber } from "../../utils";
+
+export function AiHelpBanner() {
+  const user = useUserData();
+
+  const isSubscriber = useMemo(() => isPlusSubscriber(user), [user]);
+
+  return (
+    <div className="ai-help-banner">
+      <p>
+        <Icon name="bell-ring" />
+        <strong>
+          {isSubscriber
+            ? "GPT-4-powered AI Help."
+            : "Supercharge your AI Help experience with our paid subscriptions."}
+        </strong>
+      </p>
+      <p>
+        {isSubscriber
+          ? "Now with chat history, enhanced context, and optimized prompts."
+          : "Upgrade to MDN Plus 5 or MDN Supporter 10 to unlock the potential of GPT-4-powered AI Help."}
+      </p>
+      <p>This is a beta feature.</p>
+      {!isSubscriber && (
+        <SignUpLink gleanContext={`${AI_HELP}: upsell-banner`} toPlans={true} />
+      )}
+    </div>
+  );
+}
 
 export function AiLoginBanner() {
   return (

client/src/plus/ai-help/index.tsx

@@ -19,7 +19,7 @@ import {
   Quota,
   useAiChat,
 } from "./use-ai";
-import { AiUpsellBanner } from "./banners";
+import { AiHelpBanner, AiUpsellBanner } from "./banners";
 import { useUserData } from "../../user-context";
 import Container from "../../ui/atoms/container";
 import { FeatureId, MDN_PLUS_TITLE } from "../../constants";
@@ -57,6 +57,7 @@ import {
   MESSAGE_SEARCHED,
 } from "./constants";
 import InternalLink from "../../ui/atoms/internal-link";
+import { isPlusSubscriber } from "../../utils";
 
 type Category = "apis" | "css" | "html" | "http" | "js" | "learn";
 
@@ -124,14 +125,7 @@ function AIHelpAuthenticated() {
         </p>
       </Container>
       <Container>
-        <div className="ai-help-banner">
-          <p>
-            <Icon name="bell-ring" />
-            <strong>GPT-4-powered AI Help.</strong>
-          </p>
-          <p>Now with chat history, enhanced context, and optimized prompts.</p>
-          <p>This is a beta feature.</p>
-        </div>
+        <AiHelpBanner />
       </Container>
       <AIHelpInner />
     </div>
@@ -526,6 +520,7 @@ export function AIHelpInner() {
   const { queuedExamples, setQueue } = useUIStatus();
   const { hash } = useLocation();
   const gleanClick = useGleanClick();
+  const user = useUserData();
 
   const {
     isFinished,
@@ -551,7 +546,7 @@ export function AIHelpInner() {
   const isQuotaLoading = quota === undefined;
   const hasQuota = !isQuotaLoading && quota !== null;
   const hasConversation = messages.length > 0;
-  const gptVersion = "GPT-4";
+  const gptVersion = isPlusSubscriber(user) ? "GPT-4" : "GPT-3.5";
 
   function isQuotaExceeded(quota: Quota | null | undefined): quota is Quota {
     return quota ? quota.remaining <= 0 : false;

client/src/plus/ai-help/landing.scss

@@ -64,7 +64,7 @@
 
       @media screen and (min-width: $screen-md) {
         flex-direction: row;
-        gap: 4rem;
+        gap: 3rem;
         justify-content: space-between;
       }
 

client/src/plus/ai-help/landing.tsx

@@ -51,7 +51,7 @@ export function AIHelpLanding() {
               <GPT4SVG />
               <figcaption>
                 <h3>GPT-4-Powered</h3>
-                <p>Now based on GPT-4 for peak performance</p>
+                <p>Unlock GPT-4's potential with our paid subscriptions</p>
               </figcaption>
             </figure>
           </div>

client/src/plus/offer-overview/offer-overview-feature/index.tsx

@@ -1,5 +1,6 @@
 import { Button } from "../../../ui/atoms/button";
 import "./index.scss";
+import screenshotAiHelp from "../../../../public/assets/ai-help/ai-help_light.png";
 
 function OfferOverviewFeature({ id, img, imgAlt, children }) {
   return (
@@ -23,14 +24,14 @@ function OfferOverviewFeature({ id, img, imgAlt, children }) {
 export default function OfferOverviewFeatures() {
   return (
     <section id="features">
-      <OfferOverviewFeature id="ai-help" img="/assets/ai-help.png" imgAlt="">
+      <OfferOverviewFeature id="ai-help" img={screenshotAiHelp} imgAlt="">
         <section aria-labelledby="ai-help-section-title">
           <h2 id="ai-help-section-title">AI Help</h2>
           <h3>Get real-time assistance and support.</h3>
           <p>
             No need to scroll through page after page to find your answers.
             Introducing an AI assistant that can answer all your web development
-            questions in real time. Powered by OpenAI GPT 3.5.
+            questions in real time. Powered by OpenAI GPT-3.5 and GPT-4.
           </p>
           <Button href="/en-US/plus/docs/features/ai-help" target="_self">
             Learn more →

copy/plus/features/ai-help.md

@@ -6,12 +6,13 @@ title: AI Help
 
 > Get real-time assistance and support
 
-AI Help, available for both free and paid MDN Plus subscribers, utilizes GPT-4
-Turbo technology from OpenAI to enhance the MDN experience. It offers quick and
-effective access to MDN's broad database. It specializes in searching and
-summarizing MDN content to directly address your queries. Additionally, for web
-development queries not covered in MDN, AI Help draws on its external knowledge,
-always indicating when the sources are from outside MDN.
+AI Help, available for both free and paid MDN Plus subscribers, utilizes OpenAI
+GPT-3.5 for free users and GPT-4 for paying subscribers to enhance the MDN
+experience. It offers quick and effective access to MDN's broad database. It
+specializes in searching and summarizing MDN content to directly address your
+queries. Additionally, for web development queries not covered in MDN, AI Help
+draws on its external knowledge, always indicating when the sources are from
+outside MDN.
 
 ## Key Features