enhance(ai-help): improve off-topic response handling (#10797)

mdn · Mar 27, 2024 · 6fd7a3a · 6fd7a3a
1 parent 8e159b6
commit 6fd7a3a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 32 deletions.
diff --git a/client/src/plus/ai-help/constants.tsx b/client/src/plus/ai-help/constants.tsx
@@ -1,5 +1,5 @@
-export const SORRY_BACKEND_PREFIX = "I'm sorry, but I can't";
-export const SORRY_FRONTEND =
+export const OFF_TOPIC_PREFIX = "I'm sorry, but I can't";
+export const OFF_TOPIC_MESSAGE =
   "I'm sorry, but I can't answer questions outside web development.";
 
 export const MESSAGE_SEARCHING = "Searching for MDN content…";

diff --git a/client/src/plus/ai-help/index.tsx b/client/src/plus/ai-help/index.tsx
@@ -48,14 +48,14 @@ import { useUIStatus } from "../../ui-context";
 import { QueueEntry } from "../../types/playground";
 import { AIHelpLanding } from "./landing";
 import {
-  SORRY_BACKEND_PREFIX,
-  SORRY_FRONTEND,
   MESSAGE_SEARCHING,
   MESSAGE_ANSWERING,
   MESSAGE_FAILED,
   MESSAGE_ANSWERED,
   MESSAGE_SEARCHED,
   MESSAGE_STOPPED,
+  OFF_TOPIC_PREFIX,
+  OFF_TOPIC_MESSAGE,
 } from "./constants";
 import InternalLink from "../../ui/atoms/internal-link";
 import { isPlusSubscriber } from "../../utils";
@@ -291,7 +291,9 @@ function AIHelpAssistantResponse({
 
   const isOffTopic =
     message.role === MessageRole.Assistant &&
-    message.content?.startsWith(SORRY_BACKEND_PREFIX);
+    (message.content?.startsWith(OFF_TOPIC_PREFIX) ||
+      (message.status === MessageStatus.Complete &&
+        OFF_TOPIC_PREFIX.startsWith(message.content)));
 
   function messageForStatus(status: MessageStatus) {
     switch (status) {
@@ -317,26 +319,35 @@ function AIHelpAssistantResponse({
     }
   }
 
+  if (isOffTopic) {
+    message = {
+      ...message,
+      content: OFF_TOPIC_MESSAGE,
+      sources: [],
+    };
+  }
+
   return (
     <>
       {!isOffTopic && <AIHelpAssistantResponseSources message={message} />}
-      {(message.content ||
-        message.status === MessageStatus.InProgress ||
-        message.status === MessageStatus.Errored) && (
-        <div
-          className={[
-            "ai-help-message-progress",
-            message.status === MessageStatus.InProgress && "active",
-            message.status === MessageStatus.Complete && "complete",
-            message.status === MessageStatus.Errored && "errored",
-            message.status === MessageStatus.Stopped && "stopped",
-          ]
-            .filter(Boolean)
-            .join(" ")}
-        >
-          {messageForStatus(message.status)}
-        </div>
-      )}
+      {!isOffTopic &&
+        (message.content ||
+          message.status === MessageStatus.InProgress ||
+          message.status === MessageStatus.Errored) && (
+          <div
+            className={[
+              "ai-help-message-progress",
+              message.status === MessageStatus.InProgress && "active",
+              message.status === MessageStatus.Complete && "complete",
+              message.status === MessageStatus.Errored && "errored",
+              message.status === MessageStatus.Stopped && "stopped",
+            ]
+              .filter(Boolean)
+              .join(" ")}
+          >
+            {messageForStatus(message.status)}
+          </div>
+        )}
       {message.content && (
         <div
           className={[
@@ -488,7 +499,7 @@ function AIHelpAssistantResponse({
               },
             }}
           >
-            {isOffTopic ? SORRY_FRONTEND : message.content}
+            {message.content}
           </ReactMarkdown>
           {message.status === "stopped" && (
             <section className="stopped-message">
@@ -509,15 +520,7 @@ function AIHelpAssistantResponse({
                 )}
                 <ReportIssueOnGitHubLink
                   messages={messages}
-                  currentMessage={{
-                    ...message,
-                    ...(isOffTopic
-                      ? {
-                          content: SORRY_FRONTEND,
-                          sources: [],
-                        }
-                      : {}),
-                  }}
+                  currentMessage={message}
                 >
                   Report an issue with this answer on GitHub
                 </ReportIssueOnGitHubLink>