Leo AI becomes an installable PWA

browser/banners/BUILD.gn

@@ -0,0 +1,22 @@
+# Copyright (c) 2024 The Brave Authors. All rights reserved.
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this file,
+# You can obtain one at https://mozilla.org/MPL/2.0/.
+
+if (!is_android) {
+  source_set("browser_tests") {
+    defines = [ "HAS_OUT_OF_PROC_TEST_RUNNER" ]
+
+    testonly = true
+
+    sources = [ "app_banner_manager_desktop_browsertest.cc" ]
+
+    deps = [
+      "//brave/components/constants",
+      "//chrome/browser",
+      "//chrome/test:test_support",
+      "//chrome/test:test_support_ui",
+      "//content/public/common",
+    ]
+  }
+}

browser/banners/app_banner_manager_desktop_browsertest.cc

@@ -0,0 +1,57 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+#include "chrome/browser/banners/app_banner_manager_desktop.h"
+
+#include "brave/components/constants/webui_url_constants.h"
+#include "chrome/browser/banners/test_app_banner_manager_desktop.h"
+#include "chrome/browser/ui/browser.h"
+#include "chrome/test/base/in_process_browser_test.h"
+#include "chrome/test/base/ui_test_utils.h"
+#include "content/public/common/url_constants.h"
+#include "content/public/test/browser_test.h"
+#include "testing/gtest/include/gtest/gtest.h"
+
+namespace webapps {
+
+class AppBannerManagerDesktopBrowserTest_Brave : public InProcessBrowserTest {
+ public:
+  AppBannerManagerDesktopBrowserTest_Brave() = default;
+  ~AppBannerManagerDesktopBrowserTest_Brave() override = default;
+
+  AppBannerManagerDesktopBrowserTest_Brave(
+      const AppBannerManagerDesktopBrowserTest_Brave&) = delete;
+  AppBannerManagerDesktopBrowserTest_Brave& operator=(
+      const AppBannerManagerDesktopBrowserTest_Brave&) = delete;
+
+  void SetUp() override {
+    TestAppBannerManagerDesktop::SetUp();
+    InProcessBrowserTest::SetUp();
+  }
+};
+
+IN_PROC_BROWSER_TEST_F(AppBannerManagerDesktopBrowserTest_Brave,
+                       InstallableWebUI) {
+  TestAppBannerManagerDesktop* manager =
+      TestAppBannerManagerDesktop::FromWebContents(
+          browser()->tab_strip_model()->GetActiveWebContents());
+
+  // Iterate through kInstallablePWAWebUIHosts and navigate to each one,
+  // checking that it's installable and promotable. If they have a bad
+  // webmanifest or aren't on the ChromeUI scheme, the test should fail.
+  for (const auto& host : kInstallablePWAWebUIHosts) {
+    SCOPED_TRACE(testing::Message() << "Host: " << host);
+
+    ASSERT_TRUE(ui_test_utils::NavigateToURL(
+        browser(), GURL(base::StrCat({"chrome://", host}))));
+
+    ASSERT_TRUE(manager->WaitForInstallableCheck());
+
+    EXPECT_EQ(InstallableWebAppCheckResult::kYes_Promotable,
+              manager->GetInstallableWebAppCheckResult());
+  }
+}
+
+}  // namespace webapps

browser/ui/webui/ai_chat/ai_chat_ui.cc

@@ -73,6 +73,8 @@ AIChatUI::AIChatUI(content::WebUI* web_ui)
   webui::SetupWebUIDataSource(source, kAiChatUiGenerated, IDR_AI_CHAT_UI_HTML);
 
   source->AddResourcePath("styles.css", IDR_AI_CHAT_UI_CSS);
+  source->AddResourcePath("manifest.webmanifest", IDR_AI_CHAT_UI_MANIFEST);
+  source->AddResourcePath("pwa_icon.svg", IDR_AI_CHAT_UI_PWA_ICON);
 
   for (const auto& str : ai_chat::GetLocalizedStrings()) {
     source->AddString(str.name,

chromium_src/chrome/browser/favicon/favicon_utils.cc

@@ -21,7 +21,8 @@ bool ShouldThemifyFaviconForEntry(content::NavigationEntry* entry) {
   // Don't theme for certain brave favicons which are full color
   if (virtual_url.SchemeIs(content::kChromeUIScheme) &&
       (virtual_url.host_piece() == kRewardsPageHost ||
-       virtual_url.host_piece() == kWalletPageHost)) {
+       virtual_url.host_piece() == kWalletPageHost ||
+       virtual_url.host_piece() == kAIChatUIHost)) {
     return false;
   }
   return ShouldThemifyFaviconForEntry_ChromiumImpl(entry);

chromium_src/chrome/browser/web_applications/web_app_helpers.cc

@@ -0,0 +1,23 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+#include "base/containers/contains.h"
+#include "brave/components/constants/webui_url_constants.h"
+
+// Make sure IsValidWebAppUrl also checks for allowed Brave WebUI hosts
+#define IsValidWebAppUrl IsValidWebAppUrl_ChromiumImpl
+
+#include "src/chrome/browser/web_applications/web_app_helpers.cc"
+#undef IsValidWebAppUrl
+
+namespace web_app {
+
+bool IsValidWebAppUrl(const GURL& app_url) {
+  return IsValidWebAppUrl_ChromiumImpl(app_url) ||
+         (app_url.SchemeIs(content::kChromeUIScheme) &&
+          base::Contains(kInstallablePWAWebUIHosts, app_url.host_piece()));
+}
+
+}  // namespace web_app

chromium_src/chrome/browser/web_applications/web_app_helpers_unittest.cc

@@ -0,0 +1,14 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+#include "src/chrome/browser/web_applications/web_app_helpers_unittest.cc"
+
+namespace web_app {
+
+TEST(WebAppHelpers, Brave_IsValidWebAppUrl) {
+  EXPECT_TRUE(IsValidWebAppUrl(GURL("chrome://leo-ai")));
+}
+
+}  // namespace web_app

chromium_src/components/webapps/browser/banners/DEPS

@@ -0,0 +1,3 @@
+include_rules = [
+  "+brave/components/constants",
+]

chromium_src/components/webapps/browser/banners/app_banner_manager.cc

@@ -0,0 +1,19 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+#include "base/containers/contains.h"
+#include "brave/components/constants/webui_url_constants.h"
+
+// Include password_manager constants before override so we don't override the
+// definition.
+#include "components/password_manager/content/common/web_ui_constants.h"
+
+// Add some extra items to WebUI hosts considered valid for PWAs
+#define kChromeUIPasswordManagerHost \
+  kChromeUIPasswordManagerHost &&    \
+      !base::Contains(kInstallablePWAWebUIHosts, url.host_piece())
+
+#include "src/components/webapps/browser/banners/app_banner_manager.cc"
+#undef kChromeUIPasswordManagerHost

components/ai_chat/core/browser/constants.cc

@@ -22,6 +22,7 @@ base::span<const webui::LocalizedString> GetLocalizedStrings() {
   static constexpr auto kLocalizedStrings = std::to_array<
       webui::LocalizedString>(
       {{"siteTitle", IDS_CHAT_UI_TITLE},
+       {"pwaTitle", IDS_CHAT_UI_PWA_TITLE},
        {"summarizeFailedLabel", IDS_CHAT_UI_SUMMARIZE_FAILED_LABEL},
        {"acceptButtonLabel", IDS_CHAT_UI_ACCEPT_BUTTON_LABEL},
        {"summarizeButtonLabel", IDS_CHAT_UI_SUMMARIZE_BUTTON_LABEL},

components/ai_chat/resources/ai_chat_ui_resources.grdp

@@ -6,4 +6,6 @@
   <include name="IDR_AI_CHAT_UNTRUSTED_CONVERSATION_UI_HTML"
     file="../ai_chat/resources/untrusted_conversation_frame/untrusted_conversation_frame.html"
     type="BINDATA" />
+  <include name="IDR_AI_CHAT_UI_MANIFEST" file="../ai_chat/resources/page/manifest.webmanifest" type="BINDATA" />
+  <include name="IDR_AI_CHAT_UI_PWA_ICON" file="../ai_chat/resources/page/pwa_icon.svg" type="BINDATA" />
 </grit-part>

components/ai_chat/resources/page/ai_chat_ui.html

@@ -15,6 +15,7 @@
     <script src="/strings.js"></script>
     <script src="chat_ui.bundle.js" type="module"></script>
     <link rel="icon" href="//resources/brave-icons/social-leo-favicon-fullheight-color.svg">
+    <link rel="manifest" href="manifest.webmanifest">
     <style>
       @media (prefers-color-scheme: dark) {
         body {

components/ai_chat/resources/page/manifest.webmanifest

@@ -0,0 +1,15 @@
+{
+  "short_name": "$i18n{siteTitle}",
+  "name": "$i18n{pwaTitle}",
+  "icons": [
+    {
+      "src": "/pwa_icon.svg",
+      "type": "image/svg+xml",
+      "sizes": "any"
+    }
+  ],
+  "start_url": "/?source=pwa",
+  "id": "chrome://leo-ai/",
+  "display": "standalone",
+  "scope": "chrome://leo-ai/"
+}

components/ai_chat/resources/page/state/conversation_context.tsx

@@ -4,6 +4,7 @@
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
+import { getLocale } from '$web-common/locale'
 import * as Mojom from '../../common/mojom'
 import useIsConversationVisible from '../hooks/useIsConversationVisible'
 import useSendFeedback, { defaultSendFeedbackState, SendFeedbackState } from './useSendFeedback'
@@ -315,6 +316,33 @@ export function ConversationContextProvider(props: React.PropsWithChildren) {
     updateSelectedConversationId(context.conversationUuid)
   }, [isVisible, updateSelectedConversationId])
 
+  // Update page title when conversation changes
+  React.useEffect(() => {
+    const originalTitle = document.title
+    const conversationTitle = aiChatContext.visibleConversations.find(c =>
+      c.uuid === context.conversationUuid
+    )?.title || getLocale('conversationListUntitled')
+
+    function setTitle(isPWA: boolean) {
+      if (isPWA) {
+        document.title = conversationTitle
+      } else {
+        document.title = `${getLocale('siteTitle')} - ${conversationTitle}`
+      }
+    }
+
+    const isPWAQuery = window.matchMedia('(display-mode: standalone)')
+    const handleChange = (e: MediaQueryListEvent) => setTitle(e.matches)
+    isPWAQuery.addEventListener('change', handleChange)
+
+    setTitle(isPWAQuery.matches)
+
+    return () => {
+      document.title = originalTitle
+      isPWAQuery.removeEventListener('change', handleChange)
+    }
+  }, [aiChatContext.visibleConversations, context.conversationUuid])
+
   const actionList = useActionMenu(context.inputText, aiChatContext.allActions)
 
   const shouldShowLongConversationInfo = React.useMemo(() => {

components/constants/webui_url_constants.h

@@ -6,6 +6,9 @@
 #ifndef BRAVE_COMPONENTS_CONSTANTS_WEBUI_URL_CONSTANTS_H_
 #define BRAVE_COMPONENTS_CONSTANTS_WEBUI_URL_CONSTANTS_H_
 
+#include <string_view>
+
+#include "base/containers/fixed_flat_set.h"
 #include "build/build_config.h"
 
 inline constexpr char kAdblockHost[] = "adblock";
@@ -92,4 +95,12 @@ inline constexpr char kRewriterUIHost[] = "rewriter";
 inline constexpr char16_t kTransactionSimulationLearnMoreURL[] =
     u"https://github.com/brave/brave-browser/wiki/Transaction-Simulation";
 
+// Hosts that are allowed to be installed as PWAs, which is usually
+// a blocked action for WebUIs. In Chromium, the "password-manager" host
+// is already allowed.
+inline constexpr auto kInstallablePWAWebUIHosts =
+    base::MakeFixedFlatSet<std::string_view>({
+        kAIChatUIHost,
+    });
+
 #endif  // BRAVE_COMPONENTS_CONSTANTS_WEBUI_URL_CONSTANTS_H_

components/resources/ai_chat_ui_strings.grdp

@@ -1,7 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <grit-part>
   <message name="IDS_CHAT_UI_TITLE" translateable="false" desc="Title for the Brave AI product">
-    Leo
+    Leo AI
+  </message>
+  <message name="IDS_CHAT_UI_PWA_TITLE" translateable="false" desc="Title for the Brave AI product when installed">
+    Brave Leo AI
   </message>
   <message name="IDS_CHAT_UI_SUMMARIZE_FAILED_LABEL" desc="Label for when summarization is not possible">
     The summarizer feature is currently available only for select articles and other long-form web pages.

components/webapps/browser/sources.gni

@@ -0,0 +1,6 @@
+# Copyright (c) 2024 The Brave Authors. All rights reserved.
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this file,
+# You can obtain one at https://mozilla.org/MPL/2.0/.
+
+brave_components_webapps_browser_deps = [ "//brave/components/constants" ]

patches/components-webapps-browser-BUILD.gn.patch

@@ -0,0 +1,12 @@
+diff --git a/components/webapps/browser/BUILD.gn b/components/webapps/browser/BUILD.gn
+index 01e91deb89f88c9672374a1143a44d36d4fae465..f03c84afd64841599268a91ebd9d7d8c9e7900db 100644
+--- a/components/webapps/browser/BUILD.gn
++++ b/components/webapps/browser/BUILD.gn
+@@ -179,6 +179,7 @@ source_set("browser") {
+       "//ui/gfx",
+     ]
+   }
++  import("//brave/components/webapps/browser/sources.gni") deps += brave_components_webapps_browser_deps
+ }
+
+ source_set("test_support") {

test/BUILD.gn

@@ -1134,6 +1134,7 @@ test("brave_browser_tests") {
       "//brave/app/theme:brave_theme_resources_grit",
       "//brave/app/theme:brave_unscaled_resources_grit",
       "//brave/browser/ai_chat:browser_tests",
+      "//brave/browser/banners:browser_tests",
       "//brave/browser/brave_ads/creatives/search_result_ad:browser_tests",
       "//brave/browser/sharing_hub:browser_tests",
       "//brave/browser/ui/ai_rewriter:browsertest",