AI Chat gets conversation title as Tab title and better PWA name

brave · Dec 17, 2024 · 7b673e7 · 7b673e7
1 parent 6357259
commit 7b673e7
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 1 deletion.
diff --git a/components/ai_chat/core/browser/constants.cc b/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},

diff --git a/components/ai_chat/resources/page/manifest.webmanifest b/components/ai_chat/resources/page/manifest.webmanifest
@@ -1,6 +1,6 @@
 {
   "short_name": "$i18n{siteTitle}",
-  "name": "$i18n{siteTitle}",
+  "name": "$i18n{pwaTitle}",
   "icons": [
     {
       "src": "/pwa_icon.svg",

diff --git a/components/ai_chat/resources/page/state/conversation_context.tsx b/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(() => {

diff --git a/components/resources/ai_chat_ui_strings.grdp b/components/resources/ai_chat_ui_strings.grdp
@@ -3,6 +3,9 @@
   <message name="IDS_CHAT_UI_TITLE" translateable="false" desc="Title for the Brave AI product">
     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.
   </message>