Add `figure generator from text` functionality (#29742)

GitOrigin-RevId: 94c65c567d59e3228dba63395bd46fe0c57fab02

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

@@ -455,6 +455,7 @@ const _ProjectController = {
       'compile-timeout-remove-info',
       'ai-workbench',
       'compile-timeout-target-plans',
+      'writefull-figure-generator',
     ].filter(Boolean)
 
     const getUserValues = async userId =>

services/web/frontend/extracted-translations.json

@@ -665,6 +665,7 @@
   "full_doc_history": "",
   "full_width": "",
   "future_payments": "",
+  "generate_from_text": "",
   "generate_from_text_or_image": "",
   "generate_tables_and_equations": "",
   "generate_token": "",

services/web/frontend/js/features/source-editor/components/toolbar/insert-figure-dropdown.tsx

@@ -7,14 +7,20 @@ import { useTranslation } from 'react-i18next'
 import { emitToolbarEvent } from '../../extensions/toolbar/utils/analytics'
 import { useCodeMirrorViewContext } from '../codemirror-context'
 import { insertFigure } from '../../extensions/toolbar/commands'
+import sparkleWhite from '@/shared/svgs/sparkle-small-white.svg'
+import sparkle from '@/shared/svgs/ai-sparkle-text.svg'
 import getMeta from '@/utils/meta'
 import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
 import { ToolbarButton } from './toolbar-button'
+import { useEditorContext } from '@/shared/context/editor-context'
+import { isSplitTestEnabled } from '@/utils/splitTestUtils'
 
 export const InsertFigureDropdown = memo(function InsertFigureDropdown() {
   const { t } = useTranslation()
   const view = useCodeMirrorViewContext()
+  const { writefullInstance } = useEditorContext()
   const { write } = usePermissionsContext()
+
   const openFigureModal = useCallback(
     (source: FigureModalSource, sourceName: string) => {
       emitToolbarEvent(view, `toolbar-figure-modal-${sourceName}`)
@@ -32,6 +38,10 @@ export const InsertFigureDropdown = memo(function InsertFigureDropdown() {
     hasLinkUrlFeature,
   } = getMeta('ol-ExposedSettings')
 
+  const hasGenerateFromTextFeature =
+    writefullInstance !== null &&
+    isSplitTestEnabled('writefull-figure-generator')
+
   if (!write) {
     return (
       <ToolbarButton
@@ -88,6 +98,27 @@ export const InsertFigureDropdown = memo(function InsertFigureDropdown() {
           {t('from_url')}
         </OLListGroupItem>
       )}
+      {hasGenerateFromTextFeature && (
+        <OLListGroupItem
+          onClick={() => {
+            writefullInstance!.openFigureGenerator()
+          }}
+        >
+          <img
+            alt="sparkle"
+            className="ol-cm-toolbar-ai-sparkle-gradient"
+            src={sparkle}
+            aria-hidden="true"
+          />
+          <img
+            alt="sparkle"
+            className="ol-cm-toolbar-ai-sparkle-white"
+            src={sparkleWhite}
+            aria-hidden="true"
+          />
+          <span>{t('generate_from_text')}</span>
+        </OLListGroupItem>
+      )}
     </ToolbarButtonMenu>
   )
 })

services/web/frontend/js/i18n-resources/writefull.ts

@@ -16,6 +16,7 @@ const en = {
     'do-not-know': 'Don’t know',
     equation: 'equation',
     table: 'table',
+    figure: 'figure',
     or: 'or',
     close: 'Close',
     submit: 'Submit',
@@ -228,7 +229,7 @@ const en = {
     'create-modal.accept-tos_equation': 'Before you generate an equation',
     'create-modal.image-picker-placeholder':
       'Drop an image of the __name__ here',
-    'create-modal.enter-prompt': 'Enter your own prompt/Paste an image here:',
+    'create-modal.enter-prompt': 'Enter your prompt to generate the __name__:',
     'create-modal.enter-prompt-or-paste-image':
       'Enter your prompt or paste an image with the __name__:',
     'create-modal.drop-image': 'Or, drop an image of the __name__ here:',
@@ -390,6 +391,7 @@ const es = {
     'do-not-know': 'No lo sé',
     equation: 'equación',
     table: 'tabla',
+    figure: 'figura',
     or: 'o',
     close: 'Cerrar',
     submit: 'Enviar',
@@ -616,7 +618,7 @@ const es = {
     'create-modal.accept-tos_equation': 'Antes de generar una ecuación',
     'create-modal.image-picker-placeholder': 'Arrastra una imagen aquí',
     'create-modal.enter-prompt':
-      'Introduce tu propio prompt/pega una imagen aquí:',
+      'Introduce tu propio prompt para generar la __name__:',
     'create-modal.enter-prompt-or-paste-image':
       'Introduce tu propio prompt o pega una imagen de la __name__:',
     'create-modal.drop-image': 'O, arrastre una imagen de __name__ aquí:',

services/web/frontend/js/shared/context/types/writefull-instance.ts

@@ -17,4 +17,5 @@ export interface WritefullAPI {
   ): void
   openTableGenerator(): void
   openEquationGenerator(): void
+  openFigureGenerator(): void
 }

services/web/locales/en.json

@@ -861,6 +861,7 @@
   "gallery_page_title": "Gallery - Templates, Examples and Articles written in LaTeX",
   "gallery_show_more_tags": "Show more",
   "general": "General",
+  "generate_from_text": "From text",
   "generate_from_text_or_image": "From text or image",
   "generate_tables_and_equations": "Generate tables and equations from text and images. Try it for free in the Overleaf toolbar!",
   "generate_token": "Generate token",