Merge pull request #9381 from overleaf/td-galileo-panel-cite

Display citations and regular prediction in panel when cursor is in a /cite command

GitOrigin-RevId: 42598c2f5231dd5cee8639b13cb6433c83c6e0b3

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

@@ -36,6 +36,7 @@ EditorContext.Provider.propTypes = {
     showGalileo: PropTypes.bool,
     toggleGalileo: PropTypes.func,
     insertGalileoAutocomplete: PropTypes.func,
+    insertGalileoCiteAutocomplete: PropTypes.func,
     isProjectOwner: PropTypes.bool,
     isRestrictedTokenMember: PropTypes.bool,
     permissionsLevel: PropTypes.oneOf(['readOnly', 'readAndWrite', 'owner']),
@@ -145,7 +146,15 @@ export function EditorProvider({ children, settings }) {
   const insertGalileoAutocomplete = useCallback(text => {
     window.dispatchEvent(
       new CustomEvent('editor:insert-galileo-completion', {
-        detail: text,
+        detail: { text, cite: false },
+      })
+    )
+  }, [])
+
+  const insertGalileoCiteAutocomplete = useCallback(text => {
+    window.dispatchEvent(
+      new CustomEvent('editor:insert-galileo-completion', {
+        detail: { text, cite: true },
       })
     )
   }, [])
@@ -165,6 +174,7 @@ export function EditorProvider({ children, settings }) {
       showGalileo,
       toggleGalileo,
       insertGalileoAutocomplete,
+      insertGalileoCiteAutocomplete,
     }),
     [
       cobranding,
@@ -179,6 +189,7 @@ export function EditorProvider({ children, settings }) {
       showGalileo,
       toggleGalileo,
       insertGalileoAutocomplete,
+      insertGalileoCiteAutocomplete,
     ]
   )
 

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

@@ -39,7 +39,7 @@
     padding: 5px;
     overflow-y: auto;
 
-    .galileo-items {
+    .galileo-suggestions {
       h2 {
         font-size: 120%;
         font-weight: normal;
@@ -48,16 +48,20 @@
         color: inherit;
       }
 
-      .galileo-item {
+      .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-item-text {
+        :first-child {
           flex: 1;
-          background-color: white;
-          color: black;
+        }
+
+        .galileo-suggestion-text {
           white-space: break-spaces;
         }
       }