Add prototype compile assistant (#17402)

GitOrigin-RevId: 07547f2a83aec8cfda75c589ed24cdc85fe15b59

services/web/.storybook/main.ts

@@ -1,5 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-webpack5'
 import path from 'node:path'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 
 const rootDir = path.resolve(__dirname, '..')
 
@@ -25,6 +26,29 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-interactions'),
     getAbsolutePath('@storybook/addon-a11y'),
     getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
+    {
+      name: getAbsolutePath('@storybook/addon-styling-webpack'),
+      options: {
+        rules: [
+          {
+            test: /\.css$/,
+            use: [
+              { loader: MiniCssExtractPlugin.loader },
+              { loader: 'css-loader' },
+            ],
+          },
+          {
+            test: /\.less$/,
+            use: [
+              { loader: MiniCssExtractPlugin.loader },
+              { loader: 'css-loader' },
+              { loader: 'less-loader' },
+            ],
+          },
+        ],
+        plugins: [new MiniCssExtractPlugin()],
+      },
+    },
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-webpack5'),

services/web/config/settings.defaults.js

@@ -862,6 +862,7 @@ module.exports = {
     editorToolbarButtons: [],
     sourceEditorExtensions: [],
     sourceEditorComponents: [],
+    pdfLogsComponents: [],
     sourceEditorCompletionSources: [],
     sourceEditorSymbolPalette: [],
     sourceEditorToolbarComponents: [],

services/web/frontend/js/features/pdf-preview/components/pdf-logs-entries.jsx

@@ -4,9 +4,12 @@ import { useTranslation } from 'react-i18next'
 import PreviewLogsPaneMaxEntries from '../../preview/components/preview-logs-pane-max-entries'
 import PdfLogEntry from './pdf-log-entry'
 import { useDetachCompileContext } from '../../../shared/context/detach-compile-context'
+import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
 
 const LOG_PREVIEW_LIMIT = 100
 
+const pdfLogsComponents = importOverleafModules('pdfLogsComponents')
+
 function PdfLogsEntries({ entries, hasErrors }) {
   const { t } = useTranslation()
   const { syncToEntry } = useDetachCompileContext()
@@ -21,6 +24,11 @@ function PdfLogsEntries({ entries, hasErrors }) {
           hasErrors={hasErrors}
         />
       )}
+
+      {pdfLogsComponents.map(({ import: { default: Component }, path }) => (
+        <Component key={path} entries={entries} />
+      ))}
+
       {logEntries.map(logEntry => (
         <PdfLogEntry
           key={logEntry.key}

services/web/package.json

@@ -137,6 +137,7 @@
     "node-fetch": "^2.6.7",
     "nodemailer": "^6.7.0",
     "nodemailer-ses-transport": "^1.5.1",
+    "openai": "^4.28.4",
     "otplib": "^12.0.1",
     "p-limit": "^2.3.0",
     "parse-data-url": "^2.0.0",
@@ -216,6 +217,7 @@
     "@storybook/addon-essentials": "^8.0.4",
     "@storybook/addon-interactions": "^8.0.4",
     "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-styling-webpack": "^0.0.6",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@storybook/react": "^8.0.4",
     "@storybook/react-webpack5": "^8.0.4",
@@ -227,6 +229,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/bootstrap": "^5.2.10",
     "@types/chai": "^4.3.0",
+    "@types/diff": "^5.0.9",
     "@types/events": "^3.0.0",
     "@types/express": "^4.17.13",
     "@types/mocha": "^9.1.0",
@@ -279,6 +282,7 @@
     "cypress-plugin-tab": "^1.0.5",
     "d3": "^3.5.16",
     "daterangepicker": "overleaf/daterangepicker#e496d2d44ca53e208c930e4cb4bcf29bcefa4550",
+    "diff": "^5.1.0",
     "downshift": "^6.1.0",
     "es6-promise": "^4.2.8",
     "escodegen": "^2.0.0",
@@ -303,6 +307,8 @@
     "match-sorter": "^6.2.0",
     "mathjax": "^3.2.2",
     "mensch": "^0.3.4",
+    "micromark": "^4.0.0",
+    "micromark-extension-gfm-table": "^2.0.0",
     "mini-css-extract-plugin": "^2.7.6",
     "mocha": "^10.2.0",
     "mocha-each": "^2.0.1",