Merge pull request #27630 from overleaf/mj-ai-settings-widget

[web] Update AI section of account settings page

GitOrigin-RevId: 217494ec10e686391ef46199e8cdaf900d762950

services/web/frontend/extracted-translations.json

@@ -21,7 +21,6 @@
   "a_new_reference_was_added_from_provider": "",
   "a_new_reference_was_added_to_file": "",
   "a_new_reference_was_added_to_file_from_provider": "",
-  "about_error_assist": "",
   "about_to_archive_projects": "",
   "about_to_delete_cert": "",
   "about_to_delete_projects": "",
@@ -113,8 +112,6 @@
   "ai_assist_in_overleaf_is_included_via_writefull_groups": "",
   "ai_assist_in_overleaf_is_included_via_writefull_individual": "",
   "ai_assist_unavailable_due_to_subscription_type": "",
-  "ai_assistance_to_help_you": "",
-  "ai_based_language_tools": "",
   "ai_can_make_mistakes": "",
   "ai_features": "",
   "ai_feedback_please_provide_more_detail": "",
@@ -699,7 +696,6 @@
   "github_workflow_files_delete_github_repo": "",
   "github_workflow_files_error": "",
   "give_feedback": "",
-  "give_feedback_about": "",
   "give_your_feedback": "",
   "go_next_page": "",
   "go_page": "",
@@ -977,7 +973,6 @@
   "link_to_papers": "",
   "link_to_zotero": "",
   "linked_accounts": "",
-  "linked_accounts_explained": "",
   "linked_collabratec_description": "",
   "linked_file": "",
   "loading": "",
@@ -1186,6 +1181,7 @@
   "other": "",
   "other_logs_and_files": "",
   "other_output_files": "",
+  "our_ai_features_combine_tools_from_overleaf_and_writefull_to_help_you_write_faster_smarter_and_with_confidence_learn_more_about_ai": "",
   "our_team_will_get_back_to_you_shortly": "",
   "out_of_sync": "",
   "out_of_sync_detail": "",
@@ -2135,7 +2131,6 @@
   "work_with_non_overleaf_users": "",
   "work_with_other_github_users": "",
   "write_faster_smarter_with_overleaf_and_writefull_ai_tools": "",
-  "writefull": "",
   "writefull_loading_error_body": "",
   "writefull_loading_error_title": "",
   "x_changes_in": "",

services/web/frontend/js/features/settings/components/linking-section.tsx

@@ -86,22 +86,18 @@ function LinkingSection() {
 
   return (
     <>
-      <h3 id="integrations">{t('integrations')}</h3>
-      <p className="small">{t('linked_accounts_explained')}</p>
       {haslangFeedbackLinkingWidgets ? (
         <>
           <h3 id="language-feedback">{t('ai_features')}</h3>
-          <div className="settings-widgets-container">
-            {langFeedbackLinkingWidgets.map(
-              ({ import: { default: widget }, path }, widgetIndex) => (
-                <ModuleLinkingWidget
-                  key={path}
-                  ModuleComponent={widget}
-                  isLast={widgetIndex === langFeedbackLinkingWidgets.length - 1}
-                />
-              )
-            )}
-          </div>
+          {langFeedbackLinkingWidgets.map(
+            ({ import: { default: widget }, path }, widgetIndex) => (
+              <ModuleLinkingWidget
+                key={path}
+                ModuleComponent={widget}
+                isLast={widgetIndex === langFeedbackLinkingWidgets.length - 1}
+              />
+            )
+          )}
         </>
       ) : null}
       {hasIntegrationLinkingSection ? (

services/web/frontend/stylesheets/pages/account-settings.scss

@@ -62,6 +62,16 @@
   }
 }
 
+.unboxed-setting-row {
+  display: flex;
+  justify-content: space-between;
+  padding-right: var(--spacing-05);
+}
+
+.unboxed-setting-description {
+  flex: 0 1 60%;
+}
+
 .settings-widgets-container {
   border: 1px solid var(--border-divider);
 

services/web/locales/en.json

@@ -23,7 +23,6 @@
   "a_new_reference_was_added_to_file": "A new reference was added to <0>__filePath__</0>",
   "a_new_reference_was_added_to_file_from_provider": "A new reference was added to <0>__filePath__</0> from __provider__",
   "about": "About",
-  "about_error_assist": "About Error Assist",
   "about_to_archive_projects": "You are about to archive the following projects:",
   "about_to_delete_cert": "You are about to delete the following certificate:",
   "about_to_delete_projects": "You are about to delete the following projects:",
@@ -138,8 +137,6 @@
   "ai_assist_in_overleaf_is_included_via_writefull_groups": "AI Assist in Overleaf is included as part of your group or organization’s Writefull subscription. To make changes you’ll need to speak to your subscription admin",
   "ai_assist_in_overleaf_is_included_via_writefull_individual": "AI Assist in Overleaf is included as part of your Writefull subscription. You can cancel or manage your access to AI Assist in your Writefull subscription settings.",
   "ai_assist_unavailable_due_to_subscription_type": "We’re sorry—it looks like AI Assist isn’t available to you just yet due to your current subscription type.",
-  "ai_assistance_to_help_you": "AI assistance to help you fix LaTeX errors",
-  "ai_based_language_tools": "AI-based language tools tailored to research writing",
   "ai_can_make_mistakes": "AI can make mistakes. Review fixes before you apply them.",
   "ai_features": "AI features",
   "ai_feedback_please_provide_more_detail": "Please provide more detail about what was wrong (optional)",
@@ -903,7 +900,6 @@
   "github_workflow_files_delete_github_repo": "The repository has been created on GitHub but linking was unsuccessful. You will have to delete GitHub repository or choose a new name.",
   "github_workflow_files_error": "The __appName__ GitHub sync service couldn’t sync GitHub Workflow files (in .github/workflows/). Please authorize __appName__ to edit your GitHub workflow files and try again.",
   "give_feedback": "Give feedback",
-  "give_feedback_about": "Give feedback about __appName__",
   "give_your_feedback": "give your feedback",
   "global": "global",
   "go_back_and_link_accts": "<a href=\"__link__\">Go back</a> and link your accounts",
@@ -1256,7 +1252,6 @@
   "link_to_zotero": "Link to Zotero",
   "link_your_accounts": "Link your accounts",
   "linked_accounts": "Linked accounts",
-  "linked_accounts_explained": "You can link your __appName__ account with other services to enable the features described below.",
   "linked_collabratec_description": "Use Collabratec to manage your __appName__ projects.",
   "linked_file": "Imported file",
   "links": "Links",
@@ -1549,6 +1544,7 @@
   "other_output_files": "Download other output files",
   "other_sessions": "Other Sessions",
   "other_ways_to_log_in": "Other ways to log in",
+  "our_ai_features_combine_tools_from_overleaf_and_writefull_to_help_you_write_faster_smarter_and_with_confidence_learn_more_about_ai": "Our AI features combine tools from <b>Overleaf and Writefull</b> to help you write faster, smarter, and with confidence. <a>Learn more about AI</a>",
   "our_team_will_get_back_to_you_shortly": "Our team will get back to you shortly.",
   "out_of_sync": "Out of sync",
   "out_of_sync_detail": "Sorry, this file has gone out of sync and we need to do a full refresh.<0 /><1>Please see this help guide for more information</1>",

services/web/test/frontend/features/settings/components/linking-section.test.tsx

@@ -55,15 +55,6 @@ describe('<LinkingSection />', function () {
     fetchMock.removeRoutes().clearHistory()
   })
 
-  it('shows header', async function () {
-    renderSectionWithProviders()
-
-    screen.getByText('Integrations')
-    screen.getByText(
-      'You can link your Overleaf account with other services to enable the features described below.'
-    )
-  })
-
   it('lists SSO providers', async function () {
     renderSectionWithProviders()
     screen.getByText('Linked accounts')

services/web/test/frontend/features/settings/components/root.test.tsx

@@ -41,7 +41,6 @@ describe('<SettingsPageRoot />', function () {
     screen.getByText('Emails and affiliations')
     screen.getByText('Update account info')
     screen.getByText('Change password')
-    screen.getByText('Integrations')
     screen.getByText('Overleaf beta program')
     screen.getByText('Sessions')
     screen.getByText('Newsletter')
@@ -63,7 +62,6 @@ describe('<SettingsPageRoot />', function () {
     expect(screen.queryByText('Emails and affiliations')).to.not.exist
     screen.getByText('Update account info')
     screen.getByText('Change password')
-    screen.getByText('Integrations')
     expect(screen.queryByText('Overleaf beta program')).to.not.exist
     screen.getByText('Sessions')
     expect(screen.queryByText('Newsletter')).to.not.exist