Merge pull request #9678 from overleaf/ta-td-galileo-week6

Galileo Integration Banch Week 6

GitOrigin-RevId: 78fffeefdf350042a4c2400823fb2a668ee0f592

services/web/app/src/Features/Project/ProjectController.js

@@ -1152,7 +1152,7 @@ const ProjectController = {
 
             // It would be nice if this could go in the Galileo module but
             // nothing else does that
-            const galileoEnabled = shouldDisplayFeature('galileo')
+            const galileoEnabled = req.query?.galileo || ''
             const galileoFeatures =
               req.query && 'galileoFeatures' in req.query
                 ? req.query.galileoFeatures.split(',').map(f => f.trim())

services/web/app/views/project/editor/meta.pug

@@ -22,7 +22,7 @@ meta(name="ol-pdfjsVariant" content=pdfjsVariant)
 meta(name="ol-debugPdfDetach" data-type="boolean" content=debugPdfDetach)
 meta(name="ol-showNewSourceEditorOption" data-type="boolean" content=showNewSourceEditorOption)
 meta(name="ol-showSymbolPalette" data-type="boolean" content=showSymbolPalette)
-meta(name="ol-galileoEnabled" data-type="boolean" content=galileoEnabled)
+meta(name="ol-galileoEnabled" data-type="string" content=galileoEnabled)
 meta(name="ol-galileoFeatures" data-type="json" content=galileoFeatures)
 meta(name="ol-detachRole" data-type="string" content=detachRole)
 meta(name="ol-showUpgradePrompt" data-type="boolean" content=showUpgradePrompt)

services/web/frontend/extracted-translations.json

@@ -100,8 +100,6 @@
   "contact_us": "",
   "continue_github_merge": "",
   "copy": "",
-  "copy_bibtex": "",
-  "copy_bibtex_to_paste_in_file": "",
   "copy_project": "",
   "copying": "",
   "country": "",
@@ -207,7 +205,20 @@
   "galileo_feedback_source": "",
   "galileo_feedback_source_other": "",
   "galileo_feedback_title": "",
-  "galileo_toogle_description": "",
+  "galileo_insert_citation_button": "",
+  "galileo_insert_instruction_button": "",
+  "galileo_insert_math_button": "",
+  "galileo_is": "",
+  "galileo_promo_autocomplete_content": "",
+  "galileo_promo_autocomplete_title": "",
+  "galileo_promo_shadow_text_content": "",
+  "galileo_promo_shadow_text_title": "",
+  "galileo_promo_subtitle_1": "",
+  "galileo_promo_subtitle_2": "",
+  "galileo_suggestion_feedback_button": "",
+  "galileo_suggestions_loading_error": "",
+  "galileo_toggle_description": "",
+  "galileo_only_available_in_cm6": "",
   "generic_linked_file_compile_error": "",
   "generic_something_went_wrong": "",
   "get_collaborative_benefits": "",
@@ -432,6 +443,7 @@
   "premium_makes_collab_easier_with_features": "",
   "premium_plan_label": "",
   "press_shortcut_to_open_advanced_reference_search": "",
+  "privacy_policy": "",
   "private": "",
   "processing": "",
   "professional": "",
@@ -497,6 +509,8 @@
   "save_or_cancel-cancel": "",
   "save_or_cancel-or": "",
   "save_or_cancel-save": "",
+  "saved_bibtex_appended_to_galileo_bib": "",
+  "saved_bibtex_to_new_galileo_bib": "",
   "saving": "",
   "search": "",
   "search_bib_files": "",

services/web/frontend/js/ide/editor/EditorManager.js

@@ -51,7 +51,7 @@ export default EditorManager = (function () {
           const newValue = !this.$scope.editor.showSymbolPalette
           this.$scope.editor.showSymbolPalette = newValue
           if (newValue && this.$scope.editor.showGalileo) {
-            this.$scope.editor.toggleGalileo()
+            this.$scope.editor.toggleGalileoPanel()
           }
           ide.$scope.$emit('south-pane-toggled', newValue)
           eventTracking.sendMB(
@@ -63,7 +63,7 @@ export default EditorManager = (function () {
           eventTracking.sendMB('symbol-palette-insert')
         },
         showGalileo: false,
-        toggleGalileo: () => {
+        toggleGalileoPanel: () => {
           const newValue = !this.$scope.editor.showGalileo
           this.$scope.editor.showGalileo = newValue
           if (newValue && this.$scope.editor.showSymbolPalette) {
@@ -72,6 +72,14 @@ export default EditorManager = (function () {
           ide.$scope.$emit('south-pane-toggled', newValue)
           eventTracking.sendMB(newValue ? 'galileo-show' : 'galileo-hide')
         },
+        galileoActivated: false,
+        toggleGalileo: () => {
+          const newValue = !this.$scope.editor.galileoActivated
+          this.$scope.editor.galileoActivated = newValue
+          eventTracking.sendMB(
+            newValue ? 'galileo-activated' : 'galileo-disabled'
+          )
+        },
         multiSelectedCount: 0,
       }
 

services/web/frontend/js/shared/context/editor-context.js

@@ -34,8 +34,11 @@ EditorContext.Provider.propTypes = {
     toggleSymbolPalette: PropTypes.func,
     insertSymbol: PropTypes.func,
     showGalileo: PropTypes.bool,
+    galileoActivated: PropTypes.bool,
+    toggleGalileoPanel: PropTypes.func,
     toggleGalileo: PropTypes.func,
     insertGalileoAutocomplete: PropTypes.func,
+    addGalileoReferenceToProject: PropTypes.func,
     isProjectOwner: PropTypes.bool,
     isRestrictedTokenMember: PropTypes.bool,
     permissionsLevel: PropTypes.oneOf(['readOnly', 'readAndWrite', 'owner']),
@@ -80,6 +83,8 @@ export function EditorProvider({ children, settings }) {
   const [showSymbolPalette] = useScopeValue('editor.showSymbolPalette')
   const [toggleSymbolPalette] = useScopeValue('editor.toggleSymbolPalette')
   const [showGalileo] = useScopeValue('editor.showGalileo')
+  const [galileoActivated] = useScopeValue('editor.galileoActivated')
+  const [toggleGalileoPanel] = useScopeValue('editor.toggleGalileoPanel')
   const [toggleGalileo] = useScopeValue('editor.toggleGalileo')
 
   useEffect(() => {
@@ -150,6 +155,14 @@ export function EditorProvider({ children, settings }) {
     )
   }, [])
 
+  const addGalileoReferenceToProject = useCallback((citationKey, bibtex) => {
+    window.dispatchEvent(
+      new CustomEvent('editor:galileo-request-save-reference-in-project', {
+        detail: { citationKey, bibtex },
+      })
+    )
+  }, [])
+
   const value = useMemo(
     () => ({
       cobranding,
@@ -163,8 +176,11 @@ export function EditorProvider({ children, settings }) {
       toggleSymbolPalette,
       insertSymbol,
       showGalileo,
+      galileoActivated,
+      toggleGalileoPanel,
       toggleGalileo,
       insertGalileoAutocomplete,
+      addGalileoReferenceToProject,
     }),
     [
       cobranding,
@@ -177,8 +193,11 @@ export function EditorProvider({ children, settings }) {
       toggleSymbolPalette,
       insertSymbol,
       showGalileo,
+      galileoActivated,
+      toggleGalileoPanel,
       toggleGalileo,
       insertGalileoAutocomplete,
+      addGalileoReferenceToProject,
     ]
   )
 

services/web/frontend/stylesheets/core/ol-light-variables.less

@@ -142,3 +142,4 @@
 @galileo-bg: #fff;
 @galileo-color: @ol-blue-gray-3;
 @galileo-header-background: @ol-blue-gray-1;
+@galileo-suggestion-background: @ol-blue-gray-1;

services/web/frontend/stylesheets/core/variables.less

@@ -1131,6 +1131,7 @@
 @galileo-bg: @ol-blue-gray-4;
 @galileo-color: #fff;
 @galileo-header-background: @ol-blue-gray-5;
+@galileo-suggestion-background: @ol-blue-gray-3;
 
 // Editor fonts
 @editor-font-lucida: 'Lucida Console', 'Source Code Pro', monospace;

services/web/frontend/stylesheets/modules/galileo.less

@@ -9,18 +9,24 @@
 
   .galileo-header {
     display: flex;
+    align-items: center;
+    padding-left: @padding-sm;
     background-color: @galileo-header-background;
 
     :first-child {
       flex: 1;
     }
 
+    .toggle-switch {
+      overflow: clip;
+      margin-left: @margin-sm;
+    }
+
     .galileo-close-button {
       background: transparent;
       color: @galileo-color;
       padding-left: @padding-sm;
       padding-right: @padding-sm;
-      margin-left: @margin-xs;
       font-size: 24px;
       font-weight: bold;
       line-height: 1;
@@ -36,35 +42,111 @@
   }
 
   .galileo-body {
-    padding: 5px;
+    padding: 0 @padding-sm @padding-xs @padding-sm;
     overflow-y: auto;
+    flex: 1;
 
     .galileo-suggestions {
-      h2 {
-        font-size: 120%;
-        font-weight: normal;
-        padding: 0;
-        margin: 5px 0;
-        color: inherit;
+      .loading {
+        text-align: center;
+        margin: @margin-sm;
       }
+    }
 
-      .galileo-suggestion-body {
-        background-color: @content-alt-bg-color;
-        color: black;
-        display: flex;
-        align-items: flex-start;
-        gap: 5px;
-        padding: 5px;
-        margin-bottom: 5px;
+    .galileo-suggestion {
+      background: @galileo-suggestion-background;
+      color: @galileo-color;
+      margin-top: @margin-xs;
 
-        :first-child {
-          flex: 1;
-        }
+      .galileo-suggestion-body {
+        padding: @padding-xs;
+        max-height: @line-height-computed * 4; // 4 lines
+        overflow: hidden;
 
         .galileo-suggestion-text {
           white-space: break-spaces;
         }
       }
+
+      .galileo-suggestion-footer {
+        display: flex;
+        justify-content: space-between;
+        padding: @padding-xs;
+      }
+
+      .galileo-suggestion-footer-links {
+        display: flex;
+        align-items: flex-end;
+        gap: @padding-xs;
+      }
+    }
+
+    .galileo-promo {
+      margin-top: @margin-md;
+      text-align: center;
+
+      p {
+        margin: @margin-md 0;
+      }
+    }
+
+    .galileo-promo-boxes {
+      display: flex;
+      justify-content: center;
+      gap: @margin-md;
+      text-align: left;
+    }
+
+    .galileo-promo-box {
+      width: 40%;
+      background: @galileo-suggestion-background;
+      padding-top: @padding-xs;
+      border-radius: @border-radius-base;
+
+      img {
+        width: 100%;
+      }
+
+      h3,
+      p {
+        color: @galileo-color;
+        padding: 0 @padding-sm;
+        margin: 0;
+      }
+
+      h3 {
+        padding-top: @padding-xs;
+      }
+
+      h3,
+      p {
+        padding-top: @padding-xs;
+        padding-bottom: @padding-xs;
+      }
+    }
+
+    .galileo-promo-image {
+      width: 100%;
+      height: 100px;
+      background-size: cover;
+    }
+  }
+
+  .galileo-footer {
+    background-color: @galileo-bg;
+    display: flex;
+    justify-content: center;
+    gap: @padding-xs;
+    padding: @padding-xs 0;
+  }
+
+  a,
+  button.btn-inline-link {
+    color: @galileo-color;
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
     }
   }
 }

services/web/locales/en.json

@@ -840,8 +840,8 @@
   "ask_proj_owner_to_upgrade_for_references_search": "Please ask the project owner to upgrade to use the References Search feature.",
   "ask_proj_owner_to_upgrade_for_faster_compiles": "Please ask the project owner to upgrade for faster compiles and to increase the timeout limit.",
   "search_bib_files": "Search by author, title, year",
-  "copy_bibtex_to_paste_in_file": "The <strong>__citeKey__</strong> cite key has been inserted. Click <strong>Copy BibTeX</strong> to copy the matching citation information and paste it into your <strong>.bib</strong> file.",
-  "copy_bibtex": "Copy BibTeX",
+  "saved_bibtex_to_new_galileo_bib": "The <strong>__citeKey__</strong> cite key has been copied into a new <strong>__galileoBib__</strong> file in your project. Include this file in your project using the appropriate method for your citation package.",
+  "saved_bibtex_appended_to_galileo_bib": "The <strong>__citeKey__</strong> cite key has been added to the <strong>__galileoBib__</strong> file in your project.",
   "leave_group": "Leave group",
   "leave_now": "Leave now",
   "sure_you_want_to_leave_group": "Are you sure you want to leave this group?",
@@ -1742,8 +1742,14 @@
   "you_get_access_to_info": "These features are available only to you (the subscriber).",
   "symbol_palette": "Symbol palette",
   "symbol_palette_info": "A quick and convenient way to insert math symbols into your document.",
-  "galileo_toogle_description": "Toggle Galileo",
+  "galileo_is": "Galileo is",
+  "galileo_toggle_description": "Toggle Galileo",
   "galileo_feedback_button": "Give feedback",
+  "galileo_suggestions_loading_error": "Error loading Galileo suggestions",
+  "galileo_suggestion_feedback_button": "Was this suggestion useful?",
+  "galileo_insert_citation_button": "Insert citation",
+  "galileo_insert_math_button": "Insert math",
+  "galileo_insert_instruction_button": "Insert instruction",
   "galileo_feedback_title": "Galileo Feedback",
   "galileo_feedback_intro": "We are working on improving Galileo, your feedback is very welcome. ",
   "galileo_feedback_source": "Select a recent suggestion",
@@ -1756,6 +1762,13 @@
   "galileo_feedback_detail": "Tell us more",
   "galileo_feedback_send_debug": "Share additional data",
   "galileo_feedback_send_debug_more": "Share the part of your document that was used to generate the suggestion",
+  "galileo_promo_shadow_text_title": "Math Suggestions",
+  "galileo_promo_shadow_text_content": "Galileo will provide contextualized relevant formulae, definitions, etc.",
+  "galileo_promo_autocomplete_title": "Citations",
+  "galileo_promo_autocomplete_content": "Galileo will suggest relevant references for your work.",
+  "galileo_promo_subtitle_1": "Galileo is a tool for scientific writing developed by a team of people.",
+  "galileo_promo_subtitle_2": "Galileo can be triggered in math environments, in citation commands and after comments.",
+  "galileo_only_available_in_cm6": "Galileo is only available in the source editor.",
   "github_only_integration_lowercase": "GitHub integration",
   "github_only_integration_lowercase_info": "Link your Overleaf projects directly to a GitHub repository that acts as a remote repository for your overleaf project. This allows you to share with collaborators outside of Overleaf, and integrate Overleaf into more complex workflows.",
   "git_integration_lowercase": "Git integration",