AI Chat: search queries learn more link (uplift to 1.67.x) (#23973)

Uplift of #23923 (squashed) to beta
brave · Jun 4, 2024 · 18f8cbd · 18f8cbd
1 parent ff15eaa
commit 18f8cbd
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 1 deletion.
diff --git a/browser/ui/webui/ai_chat/ai_chat_ui_page_handler.cc b/browser/ui/webui/ai_chat/ai_chat_ui_page_handler.cc
@@ -41,6 +41,8 @@ namespace {
 constexpr uint32_t kDesiredFaviconSizePixels = 32;
 constexpr char kURLRefreshPremiumSession[] =
     "https://account.brave.com/?intent=recover&product=leo";
+constexpr char kURLLearnMoreBraveSearchLeo[] =
+    "https://support.brave.com/hc/en-us/categories/20990938292237-Brave-Leo";
 #if !BUILDFLAG(IS_ANDROID)
 constexpr char kURLGoPremium[] =
     "https://account.brave.com/account/?intent=checkout&product=leo";
@@ -270,6 +272,10 @@ void AIChatUIPageHandler::ManagePremium() {
 #endif
 }
 
+void AIChatUIPageHandler::OpenLearnMoreAboutBraveSearchWithLeo() {
+  OpenURL(GURL(kURLLearnMoreBraveSearchLeo));
+}
+
 void AIChatUIPageHandler::SetShouldSendPageContents(bool should_send) {
   if (active_chat_tab_helper_) {
     active_chat_tab_helper_->SetShouldSendPageContents(should_send);

diff --git a/browser/ui/webui/ai_chat/ai_chat_ui_page_handler.h b/browser/ui/webui/ai_chat/ai_chat_ui_page_handler.h
@@ -71,6 +71,7 @@ class AIChatUIPageHandler : public ai_chat::mojom::PageHandler,
   void GetSiteInfo(GetSiteInfoCallback callback) override;
   void OpenBraveLeoSettings() override;
   void OpenURL(const GURL& url) override;
+  void OpenLearnMoreAboutBraveSearchWithLeo() override;
   void SetShouldSendPageContents(bool should_send) override;
   void GetShouldSendPageContents(
       GetShouldSendPageContentsCallback callback) override;

diff --git a/components/ai_chat/core/browser/constants.cc b/components/ai_chat/core/browser/constants.cc
@@ -105,6 +105,7 @@ base::span<const webui::LocalizedString> GetLocalizedStrings() {
       {"errorConversationEnd", IDS_CHAT_UI_CONVERSATION_END_ERROR},
       {"searchInProgress", IDS_CHAT_UI_SEARCH_IN_PROGRESS},
       {"searchQueries", IDS_CHAT_UI_SEARCH_QUERIES},
+      {"learnMore", IDS_CHAT_UI_LEARN_MORE},
       {"leoSettingsTooltipLabel", IDS_CHAT_UI_LEO_SETTINGS_TOOLTIP_LABEL},
       {"summarizePageButtonLabel", IDS_CHAT_UI_SUMMARIZE_PAGE},
       {"welcomeGuideTitle", IDS_CHAT_UI_WELCOME_GUIDE_TITLE},

diff --git a/components/ai_chat/core/common/mojom/ai_chat.mojom b/components/ai_chat/core/common/mojom/ai_chat.mojom
@@ -224,6 +224,7 @@ interface PageHandler {
   GetFaviconImageData() => (array<uint8>? favicon_image_data);
   OpenBraveLeoSettings();
   OpenURL(url.mojom.Url url);
+  OpenLearnMoreAboutBraveSearchWithLeo();
   SetShouldSendPageContents(bool should_send);
   GetShouldSendPageContents() => (bool should_send);
   GoPremium();

diff --git a/components/ai_chat/resources/page/api/mock_page_handler.ts b/components/ai_chat/resources/page/api/mock_page_handler.ts
@@ -115,6 +115,7 @@ export class MockPageHandlerRemote implements Public<mojom.PageHandlerRemote> {
     window.open(url.url, '_blank')
   }
 
+  openLearnMoreAboutBraveSearchWithLeo() {}
   onConnectionError() {}
   setClientPage() {}
   changeModel() {}

diff --git a/components/ai_chat/resources/page/components/assistant_response/index.tsx b/components/ai_chat/resources/page/components/assistant_response/index.tsx
@@ -21,6 +21,10 @@ function SearchSummary (props: { searchQueries: string[] }) {
     getPageHandlerInstance().pageHandler.openURL(queryUrl)
   }, [])
 
+  const handleLearnMore = () => {
+    getPageHandlerInstance().pageHandler.openLearnMoreAboutBraveSearchWithLeo()
+  }
+
   const message = formatMessage(getLocale('searchQueries'), {
     placeholders: {
       $1: props.searchQueries.map((query, i, a) => (
@@ -37,7 +41,7 @@ function SearchSummary (props: { searchQueries: string[] }) {
     <div className={styles.searchSummary}>
       <Icon name="brave-icon-search-color" />
       <span>
-        {message}
+        {message} <a className={styles.searchLearnMoreLink} href='#' onClick={handleLearnMore}>{getLocale('learnMore')}</a>
       </span>
     </div>
   )

diff --git a/components/ai_chat/resources/page/components/assistant_response/style.module.scss b/components/ai_chat/resources/page/components/assistant_response/style.module.scss
@@ -34,3 +34,12 @@
     color: var(--leo-color-text-interactive);
   }
 }
+
+.searchLearnMoreLink {
+  font: var(--leo-font-small-regular);
+  text-decoration: underline;
+  color: var(--leo-color-text-secondary);
+  &:hover {
+    color: var(--leo-color-text-interactive);
+  }
+}
diff --git a/components/ai_chat/resources/page/stories/locale.ts b/components/ai_chat/resources/page/stories/locale.ts
@@ -17,6 +17,7 @@ provideStrings({
   errorNetworkLabel: 'There was a network issue connecting to Leo, check your connection and try again.',
   errorRateLimit: 'Leo is too busy right now. Please try again in a few minutes.',
   retryButtonLabel: 'Retry',
+  learnMore: 'Learn more',
   dismissButtonLabel: 'Dismiss',
   'introMessage-0': `I'm here to help. What can I assist you with today? $1Learn more$2`,
   'introMessage-1': 'I have a vast base of knowledge and a large memory able to help with more complex challenges. $1Learn more$2',

diff --git a/components/resources/ai_chat_ui_strings.grdp b/components/resources/ai_chat_ui_strings.grdp
@@ -235,6 +235,9 @@
   <message name="IDS_CHAT_UI_SEARCH_QUERIES" desc="AI Response status to indicate that search queries were used to enhance the response">
     Improved answer searching for <ph name="SEARCH_TERMS">$1<ex>"my first search engine query", "my second search engine query"</ex></ph>.
   </message>
+  <message name="IDS_CHAT_UI_LEARN_MORE" desc="Link text to learn more about a feature">
+    Learn more
+  </message>
   <message name="IDS_CHAT_UI_CHAT_BASIC_SUBTITLE" desc="A description for default chat model">
     General purpose chat
   </message>