fix(ai-help): add short and extended explanatory guidance (#9215)

#9214
#9208

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

@@ -21,6 +21,7 @@ import { useLocation } from "react-router-dom";
 import { isExternalUrl } from "./utils";
 import { useGleanClick } from "../../telemetry/glean-context";
 import { AI_HELP } from "../../telemetry/constants";
+import MDNModal from "../../ui/atoms/modal";
 
 type Category = "apis" | "css" | "html" | "http" | "js" | "learn";
 
@@ -101,6 +102,7 @@ export function AIHelpInner() {
   const footerRef = useRef<HTMLDivElement>(null);
   const [query, setQuery] = useState("");
   const [isExample, setIsExample] = useState(false);
+  const [showDisclaimer, setShowDisclaimer] = useState(false);
   const { hash } = useLocation();
   const gleanClick = useGleanClick();
 
@@ -337,8 +339,60 @@ export function AIHelpInner() {
             <div className="ai-help-footer-text">
               <span>
                 Results based on MDN's most recent documentation and powered by
-                OpenAI GPT-3.5
+                GPT-3.5, an LLM by OpenAI. Please verify information
+                independently as LLM responses may not be 100% accurate. Read
+                our{" "}
+                <Button
+                  type="link"
+                  onClickHandler={() => setShowDisclaimer(true)}
+                >
+                  full guidance
+                </Button>{" "}
+                for more details.
               </span>
+              <MDNModal
+                isOpen={showDisclaimer}
+                onRequestClose={() => setShowDisclaimer(false)}
+              >
+                <header className="modal-header">
+                  <h2 className="modal-heading">AI Help Usage Guidance</h2>
+                  <Button
+                    onClickHandler={() => setShowDisclaimer(false)}
+                    type="action"
+                    icon="cancel"
+                    extraClasses="close-button"
+                  />
+                </header>
+                <div className="modal-body">
+                  <p>
+                    Our AI Help feature employs GPT-3.5, a Language Learning
+                    Model (LLM) developed by OpenAI. While it's designed to
+                    offer helpful and relevant information drawn from MDN's
+                    comprehensive documentation, it's important to bear in mind
+                    that it is an LLM and may not produce perfectly accurate
+                    information in every circumstance.
+                  </p>
+                  <p>
+                    We strongly advise all users to cross-verify the information
+                    generated by this AI Help feature, particularly for complex
+                    or critical topics. While we strive for accuracy and
+                    relevance, the nature of AI means that responses may vary in
+                    precision.
+                  </p>
+                  <p>
+                    The AI Help feature provides links at the end of its
+                    responses to support further reading and verification within
+                    the MDN documentation. These links are intended to
+                    facilitate deeper understanding and context.
+                  </p>
+                  <p>
+                    As you use the AI Help feature, keep in mind its nature as
+                    an LLM. It's not perfect, but it's here to assist you as
+                    best as it can. We're excited to have you try AI Help, and
+                    we hope it makes your MDN experience even better.
+                  </p>
+                </div>
+              </MDNModal>
             </div>
           </>
         )}