feat(ai-help): add "Report issue with this answer on GitHub" link (#9238

)
mdn · Jul 5, 2023 · 9f9cb5a · 9f9cb5a
1 parent 7f57d19
commit 9f9cb5a
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 10 deletions.
diff --git a/client/src/plus/ai-help/index.scss b/client/src/plus/ai-help/index.scss
@@ -186,9 +186,16 @@
         width: 2.5rem;
       }
 
-      .glean-thumbs {
+      .ai-help-feedback {
+        display: flex;
+        flex-direction: column;
         font-size: var(--type-tiny-font-size);
-        justify-content: flex-end;
+        gap: 0.5rem;
+        text-align: right;
+
+        .glean-thumbs {
+          justify-content: flex-end;
+        }
       }
 
       &.status-pending .ai-help-message-content,

diff --git a/client/src/plus/ai-help/index.tsx b/client/src/plus/ai-help/index.tsx
@@ -2,7 +2,7 @@ import { MutableRefObject, useEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
-import { Quota, useAiChat } from "./use-ai";
+import { Message, MessageRole, Quota, useAiChat } from "./use-ai";
 import { AiLoginBanner, AiUpsellBanner } from "./login-banner";
 import { useUserData } from "../../user-context";
 import Container from "../../ui/atoms/container";
@@ -229,13 +229,21 @@ export function AIHelpInner() {
                                 </ul>
                               </>
                             )}
-                            <GleanThumbs
-                              feature="ai-help-answer"
-                              question={"Is this answer useful?"}
-                              upLabel={"Yes, this answer is useful."}
-                              downLabel={"No, this answer is not useful."}
-                              permanent={true}
-                            />
+                            <section className="ai-help-feedback">
+                              <GleanThumbs
+                                feature="ai-help-answer"
+                                question={"Is this answer useful?"}
+                                upLabel={"Yes, this answer is useful."}
+                                downLabel={"No, this answer is not useful."}
+                                permanent={true}
+                              />
+                              <ReportIssueOnGitHubLink
+                                messages={messages}
+                                currentMessage={message}
+                              >
+                                Report an issue with this answer on GitHub
+                              </ReportIssueOnGitHubLink>
+                            </section>
                           </>
                         )}
                     </>
@@ -526,3 +534,51 @@ function useAutoScroll(
     setAutoScroll,
   };
 }
+
+function ReportIssueOnGitHubLink({
+  messages,
+  currentMessage,
+  children,
+}: {
+  messages: Message[];
+  currentMessage: Message;
+  children: React.ReactNode;
+}) {
+  const currentMessageIndex = messages.indexOf(currentMessage);
+  const firstMessage = messages[0];
+  const questions = messages
+    .slice(0, currentMessageIndex)
+    .filter((message) => message.role === MessageRole.User)
+    .map(({ content }) => content);
+
+  const url = new URL("https://github.com/");
+  url.pathname = "/mdn/ai-feedback/issues/new";
+
+  const sp = new URLSearchParams();
+  sp.set("title", `[AI Help] Question: ${firstMessage.content}`);
+  sp.set("questions", questions.join("---"));
+  sp.set("answer", currentMessage.content);
+  sp.set(
+    "sources",
+    currentMessage.sources
+      ?.map(
+        (source) =>
+          `- [${source.title}](https://developer.mozilla.org${source.url})`
+      )
+      .join("\n") ?? "(None)"
+  );
+  sp.set("template", "ai-help-answer.yml");
+
+  url.search = sp.toString();
+
+  return (
+    <a
+      href={url.href}
+      title="This will take you to GitHub to file a new issue."
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {children}
+    </a>
+  );
+}