Bug 1970686 - update page chatbot submenu for page summarization r=yjamora,fluent-reviewers,firefox-ai-ml-reviewers,bolsson

Provide content type with context to differentiate page vs selection. Use context for prompt targeting and refactor chatbot footer no longer special page prefix. Update page menu to switch to page type with no selection and default prefs to show summarize with new badge. Add strings for menu updates. Adjust provider url max lengths.

Differential Revision: https://phabricator.services.mozilla.com/D254176

Author: Mardak

browser/app/profile/firefox.js

@@ -2114,10 +2114,9 @@ pref("browser.ml.chat.page", false);
 pref("browser.ml.chat.page.footerBadge", true);
 pref("browser.ml.chat.prompt.prefix", '{"l10nId":"genai-prompt-prefix-selection"}');
 pref("browser.ml.chat.prompts.0", '{"id":"summarize","l10nId":"genai-prompts-summarize"}');
-pref("browser.ml.chat.prompts.1", '{"id":"explain","l10nId":"genai-prompts-explain"}');
-pref("browser.ml.chat.prompts.2", '{"id":"simplify","l10nId":"genai-prompts-simplify","targeting":"channel==\'nightly\'"}');
-pref("browser.ml.chat.prompts.3", '{"id":"quiz","l10nId":"genai-prompts-quiz","targeting":"!provider|regExpMatch(\'gemini\') || region == \'US\'"}');
-pref("browser.ml.chat.prompts.4", '{"id":"proofread", "l10nId":"genai-prompts-proofread"}');
+pref("browser.ml.chat.prompts.1", '{"id":"explain","l10nId":"genai-prompts-explain","targeting":"contentType != \'page\'"}');
+pref("browser.ml.chat.prompts.3", '{"id":"quiz","l10nId":"genai-prompts-quiz","targeting":"(!provider|regExpMatch(\'gemini\') || region == \'US\') && contentType != \'page\'"}');
+pref("browser.ml.chat.prompts.4", '{"id":"proofread", "l10nId":"genai-prompts-proofread","targeting":"contentType != \'page\'"}');
 pref("browser.ml.chat.provider", "");
 pref("browser.ml.chat.shortcuts", true);
 pref("browser.ml.chat.shortcuts.custom", true);

browser/components/genai/GenAI.sys.mjs

@@ -45,6 +45,7 @@ XPCOMUtils.defineLazyPreferenceGetter(
   "browser.ml.chat.openSidebarOnProviderChange",
   true
 );
+XPCOMUtils.defineLazyPreferenceGetter(lazy, "chatPage", "browser.ml.chat.page");
 XPCOMUtils.defineLazyPreferenceGetter(
   lazy,
   "chatPromptPrefix",
@@ -122,7 +123,7 @@ export const GenAI = {
         link3:
           "https://www.anthropic.com/legal/archive/628feec9-7df9-4d38-bc69-fbf104df47b0",
         linksId: "genai-settings-chat-claude-links",
-        maxLength: 15020,
+        maxLength: 14150,
         name: "Anthropic Claude",
         tooltipId: "genai-onboarding-claude-tooltip",
       },
@@ -142,7 +143,7 @@ export const GenAI = {
         link1: "https://openai.com/terms",
         link2: "https://openai.com/privacy",
         linksId: "genai-settings-chat-chatgpt-links",
-        maxLength: 14140,
+        maxLength: 13700,
         name: "ChatGPT",
         tooltipId: "genai-onboarding-chatgpt-tooltip",
       },
@@ -225,7 +226,7 @@ export const GenAI = {
         link1: "https://mistral.ai/terms/#terms-of-service-le-chat",
         link2: "https://mistral.ai/terms/#privacy-policy",
         linksId: "genai-settings-chat-lechat-links",
-        maxLength: 3680,
+        maxLength: 13350,
         name: "Le Chat Mistral",
         tooltipId: "genai-onboarding-lechat-tooltip",
       },
@@ -647,32 +648,77 @@ export const GenAI = {
       { provider }
     );
     menu.menupopup?.remove();
+
+    // Determine if we have selection or should use page content
+    const context = {
+      contentType: "selection",
+      selection: nsContextMenu.selectionInfo.fullText ?? "",
+    };
+    if (lazy.chatPage && !context.selection) {
+      // Get page content for prompts when no selection
+      try {
+        const actor =
+          nsContextMenu.browser.browsingContext.currentWindowContext.getActor(
+            "GenAI"
+          );
+        context.selection = await actor.sendQuery("GetReadableText");
+        context.contentType = "page";
+      } catch (ex) {
+        console.warn("Failed to get page content", ex);
+      }
+    }
+
     await this.addAskChatItems(
       nsContextMenu.browser,
-      { selection: nsContextMenu.selectionInfo.fullText ?? "" },
-      promptObj => menu.appendItem(promptObj.label),
+      context,
+      promptObj => {
+        const item = menu.appendItem(promptObj.label);
+        if (promptObj.badge) {
+          item.setAttribute("badge", promptObj.badge);
+        }
+        return item;
+      },
       "menu"
     );
 
-    // Add separator and remove provider option
-    const hasPrompts = menu.itemCount > 0;
-    if (hasPrompts) {
-      menu.menupopup.appendChild(doc.createXULElement("menuseparator"));
-      const removeItem = menu.appendItem("");
-      doc.l10n.setAttributes(
-        removeItem,
-        provider ? "genai-menu-remove-provider" : "genai-menu-remove-generic",
-        { provider }
-      );
-      removeItem.addEventListener("command", () => {
-        Glean.genaiChatbot.contextmenuRemove.record({
-          provider: this.getProviderId(),
+    // For page which currently only shows 1 prompt, make it less empty with an
+    // Open or Choose options depending on provider
+    if (context.contentType == "page") {
+      const openItem = menu.appendItem("");
+      if (lazy.chatProvider && provider) {
+        doc.l10n.setAttributes(openItem, "genai-menu-open-provider", {
+          provider,
         });
-        Services.prefs.clearUserPref("browser.ml.chat.provider");
+      } else {
+        doc.l10n.setAttributes(
+          openItem,
+          lazy.chatProvider
+            ? "genai-menu-open-generic"
+            : "genai-menu-choose-chatbot"
+        );
+      }
+      openItem.addEventListener("command", () => {
+        const window = nsContextMenu.browser.ownerGlobal;
+        window.SidebarController.show("viewGenaiChatSidebar");
       });
     }
 
-    nsContextMenu.showItem(menu, hasPrompts);
+    // Add remove provider option
+    menu.menupopup.appendChild(doc.createXULElement("menuseparator"));
+    const removeItem = menu.appendItem("");
+    doc.l10n.setAttributes(
+      removeItem,
+      provider ? "genai-menu-remove-provider" : "genai-menu-remove-generic",
+      { provider }
+    );
+    removeItem.addEventListener("command", () => {
+      Glean.genaiChatbot.contextmenuRemove.record({
+        provider: this.getProviderId(),
+      });
+      Services.prefs.clearUserPref("browser.ml.chat.provider");
+    });
+
+    nsContextMenu.showItem(menu, true);
   },
 
   /**
@@ -716,6 +762,20 @@ export const GenAI = {
         msg?.attributes.forEach(attr => (toFormat[idx][attr.name] = attr.value))
     );
 
+    // Specially handle page summarization prompt
+    if (context.contentType == "page") {
+      for (const promptObj of toFormat) {
+        if (promptObj.id == "summarize") {
+          const [badge, label] = await lazy.l10n.formatValues([
+            "genai-menu-new-badge",
+            "genai-menu-summarize-page",
+          ]);
+          promptObj.badge = badge;
+          promptObj.label = label;
+        }
+      }
+    }
+
     return lazy.ASRouterTargeting.findMatchingMessage({
       messages,
       returnAll: true,

browser/components/genai/chat.html

@@ -50,8 +50,11 @@
     <div id="browser-container"></div>
     <div id="summarize-btn-container">
       <span class="badge">New</span>
-      <moz-button id="summarize-button" size="default"
-        >Summarize current page
+      <moz-button
+        data-l10n-id="genai-page-button-summarize"
+        id="summarize-button"
+        size="default"
+      >
       </moz-button>
     </div>
   </body>

browser/components/genai/chat.js

@@ -591,26 +591,18 @@ function showOnboarding(length) {
 }
 
 async function summarizeCurrentPage() {
-  Services.prefs.setCharPref(
-    "browser.ml.chat.prompt.prefix",
-    'I\'m on page "%tabTitle%" from "%url%". Use this "%selection|8000%" as my selection.'
-  );
-
   let browser = topChromeWindow.gBrowser.selectedBrowser;
   let actor = browser.browsingContext.currentWindowContext.getActor("GenAI");
   let articleTextContent = await actor.sendQuery("GetReadableText");
 
   await lazy.GenAI.addAskChatItems(
     browser,
-    { selection: articleTextContent },
+    { contentType: "page", selection: articleTextContent },
     (promptObj, context) => {
       if (promptObj.id === "summarize") {
         lazy.GenAI.handleAskChat(promptObj, context);
       }
     },
-    "page"
+    "footer"
   );
-
-  // reset prefix to default
-  Services.prefs.clearUserPref("browser.ml.chat.prompt.prefix");
 }

browser/components/genai/tests/browser/browser_chat_page.js

@@ -8,6 +8,65 @@ const { sinon } = ChromeUtils.importESModule(
   "resource://testing-common/Sinon.sys.mjs"
 );
 
+// Bug 1895789 to standarize contextmenu helpers in BrowserTestUtils
+async function openContextMenu() {
+  const contextMenu = document.getElementById("contentAreaContextMenu");
+  const promise = BrowserTestUtils.waitForEvent(contextMenu, "popupshown");
+  await BrowserTestUtils.synthesizeMouse(
+    null,
+    0,
+    0,
+    { type: "contextmenu" },
+    gBrowser.selectedBrowser
+  );
+  await promise;
+}
+
+async function hideContextMenu() {
+  const contextMenu = document.getElementById("contentAreaContextMenu");
+  const promise = BrowserTestUtils.waitForEvent(contextMenu, "popuphidden");
+  contextMenu.hidePopup();
+  await promise;
+}
+
+add_setup(async function () {
+  await SpecialPowers.pushPrefEnv({
+    set: [["test.wait300msAfterTabSwitch", true]],
+  });
+});
+
+/**
+ * Check page menu has summarize prompt
+ */
+add_task(async function test_page_menu_prompt() {
+  const sandbox = sinon.createSandbox();
+  const stub = sandbox.stub(GenAI, "handleAskChat");
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      ["browser.ml.chat.provider", "http://localhost:8080"],
+      ["browser.ml.chat.page", true],
+    ],
+  });
+  await BrowserTestUtils.withNewTab("about:blank", async () => {
+    await openContextMenu();
+    await TestUtils.waitForCondition(
+      () =>
+        document.getElementById("context-ask-chat").getItemAtIndex(0)?.label ==
+        "Summarize Page",
+      "page prompt added"
+    );
+    document.getElementById("context-ask-chat").getItemAtIndex(0).click();
+    await hideContextMenu();
+  });
+
+  Assert.equal(stub.callCount, 1, "one menu prompt");
+  Assert.equal(stub.firstCall.args[0].id, "summarize", "summarize prompt");
+  Assert.ok(stub.firstCall.args[0].badge, "new badge");
+
+  sandbox.restore();
+  SidebarController.hide();
+});
+
 /**
  * Check badge toggle by prefs
  */

browser/locales/en-US/browser/genai.ftl

@@ -46,16 +46,30 @@ genai-prompts-proofread =
 
 ## Chatbot menu shortcuts
 
+genai-menu-no-provider =
+    .label = Ask an AI Chatbot
+genai-menu-choose-chatbot =
+    .label = Choose an AI Chatbot
 genai-menu-ask-generic =
-    .label = Ask AI chatbot
+    .label = Ask AI Chatbot
 # $provider (string) - name of the provider
 genai-menu-ask-provider =
     .label = Ask { $provider }
+genai-menu-open-generic =
+    .label = Open AI Chatbot
+# $provider (string) - name of the provider
+genai-menu-open-provider =
+    .label = Open { $provider }
 genai-menu-remove-generic =
-    .label = Remove AI chatbot
+    .label = Remove AI Chatbot
 # $provider (string) - name of the provider
 genai-menu-remove-provider =
     .label = Remove { $provider }
+genai-menu-remove-sidebar =
+    .label = Remove from Sidebar
+
+genai-menu-new-badge = New
+genai-menu-summarize-page = Summarize Page
 
 genai-input-ask-generic =
     .placeholder = Ask AI chatbot…
@@ -105,6 +119,10 @@ genai-options-hide-shortcut =
 genai-options-about-chatbot =
     .label = About AI chatbots in { -brand-short-name }
 
+## Chatbot footer
+
+genai-page-button-summarize = Summarize page
+
 ## Chatbot onboarding
 
 genai-chatbot-contextual-title = Use an AI chatbot without switching tabs