replace monaco-editor with TipTap editor for Prompt and Agent prompt inputs fields

.changeset/spicy-aliens-fry.md

@@ -0,0 +1,5 @@
+---
+"@inkeep/agents-manage-ui": minor
+---
+
+replace `monaco-editor` with TipTap editor for `Prompt` and `Agent prompt` inputs fields

.cursor/rules/react.mdc

@@ -0,0 +1,29 @@
+---
+alwaysApply: true
+---
+
+### Always use the `FC` type from React when declaring components
+
+### Do *not* use `React.forwardRef`
+
+React 19 no longer requires `forwardRef` for normal ref propagation.
+
+✅ Do
+
+```tsx
+import { FC, RefObject } from 'react'
+
+const MyComponent: FC<{ ref: RefObject<HTMLDivElement> }> = ({ ref, ...props }) => <>...</>
+```
+
+❌Don't
+
+```tsx
+import { forwardRef } from 'react'
+
+const MyComponent = forwardRef<HTMLDivElement, MyProps>((props, ref) => <>...</>)
+```
+
+### Always the shorthand syntax for defining object literal methods `{ foo(...) {} }` instead of the long form `{ foo: function(...) {} }` or `{ foo: (...) => {} }`.
+
+Use the long form only when the function body needs `this` — otherwise default to the concise shorthand version.

agents-cookbook/template-projects/facts-project/context-configs/inkeep-qa-context.ts

@@ -1,4 +1,4 @@
-import { contextConfig, fetchDefinition, headers } from '@inkeep/agents-core';
+import { contextConfig, fetchDefinition } from '@inkeep/agents-core';
 import { z } from 'zod';
 import { inkeepApiKey } from '../credentials/inkeep-api-key';
 
@@ -9,7 +9,7 @@ const projectDescription = fetchDefinition({
   fetchConfig: {
     url: 'https://api.management.inkeep.com/graphql',
     body: {
-      query: `
+      query: /* GraphQL */ `
       query GetProjectAutogenInfo {
         projectByIntegrationAuth {
           chatSubjectName

agents-manage-ui/cypress/e2e/agent.cy.ts

@@ -54,16 +54,18 @@ describe('Agent', () => {
       cy.typeInMonaco('headersSchema.json', JSON.stringify(headersJsonSchema));
       cy.contains('Save changes').click();
 
-      cy.typeInMonaco('agent-prompt.template', '{');
+      cy.get('.tiptap').type('{');
       cy.get('[aria-label=Suggest]').contains('contextVariablesValue');
       cy.get('[aria-label=Suggest]').contains('headers.testHeadersJsonSchemaValue');
       cy.get('[aria-label=Suggest]').contains('$env.');
     });
 
     it('should highlight as error unknown variables', () => {
       cy.visit('/default/projects/my-weather-project/agents/weather-agent?pane=agent');
-      cy.typeInMonaco('agent-prompt.template', 'Hello {{unknown}} {{$env.MY_ENV}}');
-      cy.get('.squiggly-error').should('have.length', 1);
+      cy.get('.tiptap').type('Hello {{unknown}} {{$env.MY_ENV}}', {
+        parseSpecialCharSequences: false,
+      });
+      cy.contains('Unknown variables: unknown').should('exist');
     });
   });
 });

agents-manage-ui/package.json

@@ -84,6 +84,16 @@
     "@radix-ui/react-tooltip": "^1.2.7",
     "@shikijs/monaco": "^3.13.0",
     "@sinclair/typebox": "^0.34.40",
+    "@tiptap/core": "^3.13.0",
+    "@tiptap/extension-placeholder": "^3.13.0",
+    "@tiptap/react": "^3.13.0",
+    "@tiptap/starter-kit": "^3.13.0",
+    "@tiptap/suggestion": "^3.13.0",
+    "@tiptap/extension-list": "^3.13.0",
+    "@tiptap/extension-table": "^3.13.0",
+    "@tiptap/extension-mention": "^3.13.0",
+    "@floating-ui/dom": "^1.7.4",
+    "@tiptap/markdown": "^3.13.0",
     "@xyflow/react": "^12.8.2",
     "ai": "6.0.0-beta.124",
     "axios": "^1.11.0",
@@ -122,6 +132,7 @@
     "zustand": "^5.0.7"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.19",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/postcss": "^4",
     "@testing-library/jest-dom": "^6.8.0",

agents-manage-ui/src/app/[tenantId]/layout.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import type { IDisposable } from 'monaco-editor';
 import { useTheme } from 'next-themes';
 import { useEffect } from 'react';
 import { AppSidebarProvider } from '@/components/sidebar-nav/app-sidebar-provider';
@@ -39,16 +38,7 @@ export default function Layout({ children }: LayoutProps<'/[tenantId]'>) {
   }, [contextConfig, setVariableSuggestions]);
 
   useEffect(() => {
-    let disposables: IDisposable[] = [];
-    setMonaco().then(($disposables) => {
-      disposables = $disposables;
-    });
-
-    return () => {
-      for (const disposable of disposables) {
-        disposable.dispose();
-      }
-    };
+    setMonaco();
   }, [setMonaco]);
 
   useEffect(() => {

agents-manage-ui/src/app/globals.css

@@ -2,6 +2,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @plugin 'tailwind-scrollbar';
+@plugin "@tailwindcss/typography";
 @source "../../node_modules/streamdown/dist/index.js";
 
 @custom-variant dark (&:is(.dark *));

agents-manage-ui/src/components/editors/__tests__/prompt-editor-utils.test.ts

@@ -0,0 +1,20 @@
+import { extractInvalidVariables } from '../prompt-editor-utils';
+
+describe('extractInvalidVariables', () => {
+  const suggestions = ['user.name', 'headers.x-api-key', 'items[*].id'];
+
+  it('detects variables not in the suggestion list', () => {
+    const invalid = extractInvalidVariables('Hello {{unknown}} and {{another}}', suggestions);
+
+    expect(invalid).toEqual(['unknown', 'another']);
+  });
+
+  it('ignores allowed variable patterns', () => {
+    const invalid = extractInvalidVariables(
+      '{{$env.API_KEY}} {{items[*].id}} {{length(items)}}',
+      suggestions
+    );
+
+    expect(invalid).toEqual([]);
+  });
+});

agents-manage-ui/src/components/editors/expandable-prompt-editor.tsx

@@ -1,16 +1,22 @@
 import { Braces } from 'lucide-react';
-import type { ComponentProps } from 'react';
-import { useCallback, useState } from 'react';
-import { PromptEditor } from '@/components/editors/prompt-editor';
+import type { ComponentPropsWithoutRef } from 'react';
+import { useCallback, useRef, useState } from 'react';
+import { PromptEditor, type PromptEditorHandle } from '@/components/editors/prompt-editor';
+import { extractInvalidVariables } from '@/components/editors/prompt-editor-utils';
 import { ExpandableField } from '@/components/form/expandable-field';
 import { Button } from '@/components/ui/button';
 import { useMonacoStore } from '@/features/agent/state/use-monaco-store';
 import { cn } from '@/lib/utils';
 
-type PromptEditorProps = ComponentProps<typeof PromptEditor> & {
+type PromptEditorProps = ComponentPropsWithoutRef<typeof PromptEditor> & {
   name: string;
 };
 
+const engFormatter = new Intl.ListFormat('en', {
+  style: 'long',
+  type: 'conjunction',
+});
+
 export function ExpandablePromptEditor({
   label,
   isRequired = false,
@@ -24,41 +30,32 @@ export function ExpandablePromptEditor({
   error?: string;
 } & PromptEditorProps) {
   const [open, onOpenChange] = useState(false);
-  const monaco = useMonacoStore((state) => state.monaco);
-  const uri = `${open ? 'expanded-' : ''}${name}.template` as const;
+  const editorRef = useRef<PromptEditorHandle>(null);
 
   const handleAddVariable = useCallback(() => {
-    if (!monaco) {
-      return;
-    }
-    const model = monaco.editor.getModel(monaco.Uri.parse(uri));
-    const [editor] = monaco.editor.getEditors().filter((editor) => editor.getModel() === model);
-    if (!editor) {
-      return;
-    }
-
-    const selection = editor.getSelection();
-    const pos = selection ? selection.getStartPosition() : editor.getPosition();
-    if (!pos) return;
-
-    const range = new monaco.Range(pos.lineNumber, pos.column, pos.lineNumber, pos.column);
-    editor.executeEdits('insert-template-variable', [{ range, text: '{' }]);
-    editor.setPosition({ lineNumber: pos.lineNumber, column: pos.column + 1 });
-    editor.focus();
-    editor.trigger('insert-template-variable', 'editor.action.triggerSuggest', {});
-  }, [monaco, uri]);
+    editorRef.current?.insertVariableTrigger();
+  }, []);
 
   const id = `${name}-label`;
+  const variableSuggestions = useMonacoStore((state) => state.variableSuggestions);
+
+  const allErrors =
+    error ||
+    ((invalidVariables: string[]) => {
+      if (invalidVariables.length) {
+        return `Unknown variables: ${engFormatter.format(invalidVariables)}`;
+      }
+    })(extractInvalidVariables(props.value ?? '', variableSuggestions));
 
   return (
     <ExpandableField
       id={id}
       open={open}
       onOpenChange={onOpenChange}
-      uri={uri}
       label={label}
       isRequired={isRequired}
       hasError={!!error}
+      onLabelClick={() => editorRef.current?.focus()}
       actions={
         <Button
           size="sm"
@@ -73,15 +70,15 @@ export function ExpandablePromptEditor({
       }
     >
       <PromptEditor
-        uri={uri}
+        ref={editorRef}
         autoFocus={open}
-        aria-invalid={error ? 'true' : undefined}
+        aria-invalid={allErrors ? 'true' : undefined}
         className={cn(!open && 'max-h-96', 'min-h-16', className)}
         hasDynamicHeight={!open}
         aria-labelledby={id}
         {...props}
       />
-      {error && <p className="text-sm text-red-600">{error}</p>}
+      {allErrors && <p className="text-sm text-red-600">{allErrors}</p>}
     </ExpandableField>
   );
 }

agents-manage-ui/src/components/editors/prompt-editor-utils.ts

@@ -0,0 +1,20 @@
+export function extractInvalidVariables(text: string, suggestions: string[]): string[] {
+  const validVariables = new Set(suggestions);
+  const matches = text.matchAll(/\{\{([^}]+)}}/g);
+  const invalid: string[] = [];
+
+  for (const [, variableName] of matches) {
+    const name = variableName.trim();
+    const isValid =
+      validVariables.has(name) ||
+      name.startsWith('$env.') ||
+      name.includes('[') ||
+      name.startsWith('length(');
+
+    if (!isValid) {
+      invalid.push(name);
+    }
+  }
+
+  return [...new Set(invalid)];
+}

agents-manage-ui/src/components/editors/prompt-editor.css

@@ -0,0 +1,21 @@
+.tiptap {
+  [data-type="taskList"] {
+    li {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.25rem;
+    }
+    & > li > div > p:first-child {
+      margin: 0;
+      line-height: 1.2;
+    }
+  }
+  /* https://tiptap.dev/docs/editor/extensions/functionality/placeholder#additional-setup */
+  p.is-editor-empty:first-child::before {
+    color: var(--muted-foreground);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+}