diff --git a/services/web/app/src/Features/Project/ProjectController.js b/services/web/app/src/Features/Project/ProjectController.js index 435e6b1bd5..70625fa739 100644 --- a/services/web/app/src/Features/Project/ProjectController.js +++ b/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()) diff --git a/services/web/app/views/project/editor/meta.pug b/services/web/app/views/project/editor/meta.pug index e91e219df4..47a90c981d 100644 --- a/services/web/app/views/project/editor/meta.pug +++ b/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) diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index d00dd309d0..2acd136e31 100644 --- a/services/web/frontend/extracted-translations.json +++ b/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": "", diff --git a/services/web/frontend/js/ide/editor/EditorManager.js b/services/web/frontend/js/ide/editor/EditorManager.js index a788344784..830a8ffa1d 100644 --- a/services/web/frontend/js/ide/editor/EditorManager.js +++ b/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, } diff --git a/services/web/frontend/js/shared/context/editor-context.js b/services/web/frontend/js/shared/context/editor-context.js index 25fd71643e..6ed16eecc9 100644 --- a/services/web/frontend/js/shared/context/editor-context.js +++ b/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, ] ) diff --git a/services/web/frontend/stylesheets/core/ol-light-variables.less b/services/web/frontend/stylesheets/core/ol-light-variables.less index d95333b2fe..c3b039b514 100644 --- a/services/web/frontend/stylesheets/core/ol-light-variables.less +++ b/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; diff --git a/services/web/frontend/stylesheets/core/variables.less b/services/web/frontend/stylesheets/core/variables.less index de714225dc..af14efe644 100644 --- a/services/web/frontend/stylesheets/core/variables.less +++ b/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; diff --git a/services/web/frontend/stylesheets/modules/galileo.less b/services/web/frontend/stylesheets/modules/galileo.less index b7014b25c7..84172f3337 100644 --- a/services/web/frontend/stylesheets/modules/galileo.less +++ b/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 { + background: @galileo-suggestion-background; + color: @galileo-color; + margin-top: @margin-xs; .galileo-suggestion-body { - background-color: @content-alt-bg-color; - color: black; - display: flex; - align-items: flex-start; - gap: 5px; - padding: 5px; - margin-bottom: 5px; - - :first-child { - flex: 1; - } + 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; } } } diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 3ae615cc11..8fef1d053b 100644 --- a/services/web/locales/en.json +++ b/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 __citeKey__ cite key has been inserted. Click Copy BibTeX to copy the matching citation information and paste it into your .bib file.", - "copy_bibtex": "Copy BibTeX", + "saved_bibtex_to_new_galileo_bib": "The __citeKey__ cite key has been copied into a new __galileoBib__ 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 __citeKey__ cite key has been added to the __galileoBib__ 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", diff --git a/services/web/public/img/galileo/autocomplete-hero.png b/services/web/public/img/galileo/autocomplete-hero.png new file mode 100644 index 0000000000..38a76587fd Binary files /dev/null and b/services/web/public/img/galileo/autocomplete-hero.png differ diff --git a/services/web/public/img/galileo/shadow-text-hero.png b/services/web/public/img/galileo/shadow-text-hero.png new file mode 100644 index 0000000000..0db61f3253 Binary files /dev/null and b/services/web/public/img/galileo/shadow-text-hero.png differ