Implement inclusion of prompts into other prompts by typing "@" (#1434)

Author: andresgutgon

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/BlocksEditor/index.tsx

@@ -1,7 +1,20 @@
-import { memo, Suspense } from 'react'
+import { memo, Suspense, useCallback } from 'react'
+import Link from 'next/link'
 import { AstError, AnyBlock } from '@latitude-data/constants/simpleBlocks'
 import { TextEditorPlaceholder } from '@latitude-data/web-ui/molecules/TextEditorPlaceholder'
-import { BlocksEditor } from '@latitude-data/web-ui/molecules/BlocksEditor'
+import {
+  BlocksEditor,
+  IncludedPrompt,
+} from '@latitude-data/web-ui/molecules/BlocksEditor'
+import {
+  ICommitContextType,
+  IProjectContextType,
+} from '@latitude-data/web-ui/providers'
+import { type DocumentVersion } from '@latitude-data/core/browser'
+import { useIncludabledPrompts } from './useIncludabledPrompts'
+import { scan } from 'promptl-ai'
+import useDocumentVersions from '$/stores/documentVersions'
+import { ReactStateDispatch } from '@latitude-data/web-ui/commonTypes'
 
 // Example blocks to demonstrate the editor
 const exampleBlocks: AnyBlock[] = [
@@ -62,46 +75,64 @@ const exampleBlocks: AnyBlock[] = [
 
 export const PlaygroundBlocksEditor = memo(
   ({
+    project,
+    commit,
+    document,
+    onToggleBlocksEditor,
     value: _prompt,
   }: {
+    project: IProjectContextType['project']
+    commit: ICommitContextType['commit']
+    document: DocumentVersion
     compileErrors: AstError[] | undefined
     blocks: AnyBlock[] | undefined
     value: string
     defaultValue?: string
     isSaved: boolean
     readOnlyMessage?: string
+    onToggleBlocksEditor: ReactStateDispatch<boolean>
     onChange: (value: string) => void
   }) => {
+    const { data: documents } = useDocumentVersions({
+      commitUuid: commit?.uuid,
+      projectId: project?.id,
+    })
+    const prompts = useIncludabledPrompts({
+      project,
+      commit,
+      document,
+      documents,
+    })
     // const blocksToRender = blocks.length > 0 ? blocks : exampleBlocks
 
     const handleBlocksChange = (_updatedBlocks: AnyBlock[]) => {
       // Convert blocks back to string format if needed
       // For now, we'll just stringify the blocks
       // onChange(JSON.stringify(updatedBlocks, null, 2))
     }
-
+    const onRequestPromptMetadata = useCallback(
+      async ({ id }: IncludedPrompt) => {
+        const prompt = documents.find((doc) => doc.id === id)
+        return await scan({ prompt: prompt!.content })
+      },
+      [documents],
+    )
+    const onToogleDevEditor = useCallback(() => {
+      onToggleBlocksEditor(false)
+    }, [onToggleBlocksEditor])
     return (
       <Suspense fallback={<TextEditorPlaceholder />}>
-        <div className='space-y-4'>
-          <div className='text-sm text-gray-600'>
-            Blocks Editor Demo - {exampleBlocks.length} blocks loaded
-          </div>
-          <BlocksEditor
-            autoFocus
-            readOnly={false}
-            initialValue={exampleBlocks}
-            onBlocksChange={handleBlocksChange}
-            placeholder='Write your prompt, type "/" to insert messages or steps, "@" for include other prompts, "{{" for variables, Try typing "{{my_variable}}"'
-          />
-          <details className='text-xs'>
-            <summary className='cursor-pointer text-gray-500'>
-              Show raw blocks data
-            </summary>
-            <pre className='bg-gray-100 p-2 rounded mt-2 overflow-auto max-h-40'>
-              {JSON.stringify(exampleBlocks, null, 2)}
-            </pre>
-          </details>
-        </div>
+        <BlocksEditor
+          autoFocus
+          readOnly={false}
+          prompts={prompts}
+          initialValue={exampleBlocks}
+          Link={Link}
+          onRequestPromptMetadata={onRequestPromptMetadata}
+          onToggleDevEditor={onToogleDevEditor}
+          onBlocksChange={handleBlocksChange}
+          placeholder='Write your prompt, type "/" to insert messages or steps, "@" for include other prompts, "{{" for variables, Try typing "{{my_variable}}"'
+        />
       </Suspense>
     )
   },

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/BlocksEditor/useIncludabledPrompts.ts

@@ -0,0 +1,56 @@
+import {
+  ICommitContextType,
+  IProjectContextType,
+} from '@latitude-data/web-ui/providers'
+import { type DocumentVersion, DocumentType } from '@latitude-data/core/browser'
+import { useMemo } from 'react'
+import { ROUTES } from '$/services/routes'
+import { IncludedPrompt } from '@latitude-data/web-ui/molecules/BlocksEditor'
+
+const docUrl = (projectId: number, commitUuid: string, uuid: string) =>
+  ROUTES.projects
+    .detail({ id: projectId })
+    .commits.detail({ uuid: commitUuid })
+    .documents.detail({ uuid }).root
+
+/**
+ * This hook generates the prompts in the sidebar that:
+ * 1. Are not the current document
+ * 2. Are of type `DocumentType.Prompt`
+ *
+ * This is used for the blocks editor and does not makes sense to include
+ * documents of type `DocumentType.Agent`
+ */
+export function useIncludabledPrompts({
+  project,
+  commit,
+  document,
+  documents,
+}: {
+  project: IProjectContextType['project']
+  commit: ICommitContextType['commit']
+  document: DocumentVersion
+  documents: DocumentVersion[]
+}) {
+  return useMemo(() => {
+    return documents
+      .filter(
+        (doc) =>
+          doc.id !== document.id && doc.documentType === DocumentType.Prompt,
+      )
+      .reduce(
+        (acc, doc) => {
+          acc[doc.path] = {
+            url: docUrl(project.id, commit.uuid, doc.documentUuid),
+            id: doc.id,
+            path: doc.path,
+            projectId: project.id,
+            commitUuid: commit.uuid,
+            documentUuid: doc.documentUuid,
+          }
+          return acc
+        },
+        {} as Record<string, IncludedPrompt>,
+      )
+  }, [document, documents, project.id, commit.uuid])
+}

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx

@@ -320,8 +320,12 @@ export default function DocumentEditor({
               ) : null}
               {showBlocksEditor ? (
                 <PlaygroundBlocksEditor
+                  project={project}
+                  document={document}
+                  commit={commit}
                   readOnlyMessage={readOnlyMessage}
                   isSaved={!isUpdatingContent}
+                  onToggleBlocksEditor={setBlockEditorVisible}
                   defaultValue={document.content}
                   value={value}
                   blocks={metadata?.blocks}

packages/constants/src/simpleBlocks/index.ts

@@ -1,3 +1,3 @@
-export type { AnyBlock, AstError } from './types'
+export type { AnyBlock, AstError, PromptBlock } from './types'
 export * from './astToSimpleBlocks'
 export * from './simpleBlocksToText'

packages/web-ui/src/ds/molecules/BlocksEditor/Editor/Provider/index.tsx

@@ -0,0 +1,39 @@
+import { createContext, ReactNode, useContext, useRef } from 'react'
+import { BlocksEditorProps } from '../../types'
+
+type IBlocksProvider = {
+  prompts: BlocksEditorProps['prompts']
+  Link: BlocksEditorProps['Link']
+}
+
+const BlocksEditorContext = createContext<IBlocksProvider | undefined>(
+  undefined,
+)
+
+export function BlocksEditorProvider({
+  children,
+  Link,
+  prompts,
+}: {
+  children: ReactNode
+  prompts: BlocksEditorProps['prompts']
+  Link: BlocksEditorProps['Link']
+}) {
+  const value = useRef<IBlocksProvider>({ prompts, Link })
+  return (
+    <BlocksEditorContext.Provider value={value.current}>
+      {children}
+    </BlocksEditorContext.Provider>
+  )
+}
+
+export function useBlocksEditorContext() {
+  const context = useContext(BlocksEditorContext)
+
+  if (!context) {
+    throw new Error(
+      'useBlocksEditorContext must be used within an BlocksEditorProvider',
+    )
+  }
+  return context
+}

packages/web-ui/src/ds/molecules/BlocksEditor/Editor/index.tsx

@@ -34,11 +34,15 @@ import { InsertEmptyLinePlugin } from './plugins/InsertEmptyLinePlugin'
 import { VariableTransformPlugin } from './plugins/VariableTransformPlugin'
 import { VariableNode } from './nodes/VariableNode'
 import { VariableMenuPlugin } from './plugins/VariablesMenuPlugin'
+import { ReferencesPlugin } from './plugins/ReferencesPlugin'
+import { ReferenceNode } from './nodes/ReferenceNode'
+import { font } from '../../../tokens'
+import { BlocksEditorProvider } from './Provider'
 
 const theme = {
   ltr: 'ltr',
   rtl: 'rtl',
-  paragraph: 'block-paragraph text-sm leading-relaxed',
+  paragraph: cn('block-paragraph align-middle', font.size.h5),
   text: {
     bold: 'font-bold',
     italic: 'italic',
@@ -68,7 +72,8 @@ function OnChangeHandler({
           onChange(textContent)
         }
 
-        // FIXME: Move to a separate function to handle blocks conversion
+        // Move to a separate function to handle blocks conversion
+        // This can be tested
         if (onBlocksChange) {
           const root = $getRoot()
           const blocks: AnyBlock[] = []
@@ -177,6 +182,10 @@ export function BlocksEditor({
   onChange,
   onBlocksChange,
   className,
+  prompts,
+  onRequestPromptMetadata,
+  onToggleDevEditor,
+  Link,
   readOnly = false,
   autoFocus = false,
 }: BlocksEditorProps) {
@@ -196,68 +205,75 @@ export function BlocksEditor({
       console.error('Editor error:', error)
     },
     editable: !readOnly,
-    nodes: [MessageBlockNode, StepBlockNode, VariableNode],
+    nodes: [MessageBlockNode, StepBlockNode, VariableNode, ReferenceNode],
   }
 
   return (
-    <div
-      className={cn(
-        'relative border border-gray-200 rounded-lg bg-white',
-        'focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500',
-        className,
-      )}
-    >
-      <LexicalComposer initialConfig={initialConfig}>
-        <div className='relative' ref={onRef}>
-          <RichTextPlugin
-            contentEditable={
-              <ContentEditable
-                className={cn(
-                  'min-h-[300px] py-4 [&_>*]:px-4 outline-none resize-none text-sm leading-relaxed',
-                  'focus:outline-none',
-                  VERTICAL_SPACE_CLASS,
-                  {
-                    'cursor-default': readOnly,
-                  },
-                )}
-                aria-placeholder={placeholder}
-                placeholder={
-                  <div className='absolute top-4 left-4 text-gray-400 pointer-events-none select-none'>
-                    {placeholder}
-                  </div>
-                }
-              />
-            }
-            ErrorBoundary={LexicalErrorBoundary}
-          />
+    <BlocksEditorProvider Link={Link} prompts={prompts}>
+      <div
+        className={cn(
+          'relative border border-gray-200 rounded-lg bg-white',
+          'focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500',
+          className,
+        )}
+      >
+        <LexicalComposer initialConfig={initialConfig}>
+          <div className='relative' ref={onRef}>
+            <RichTextPlugin
+              contentEditable={
+                <ContentEditable
+                  className={cn(
+                    'min-h-[300px] py-4 [&_>*]:px-4 outline-none resize-none text-sm leading-relaxed',
+                    'focus:outline-none',
+                    VERTICAL_SPACE_CLASS,
+                    {
+                      'cursor-default': readOnly,
+                    },
+                  )}
+                  aria-placeholder={placeholder}
+                  placeholder={
+                    <div className='absolute top-4 left-4 text-gray-400 pointer-events-none select-none'>
+                      {placeholder}
+                    </div>
+                  }
+                />
+              }
+              ErrorBoundary={LexicalErrorBoundary}
+            />
 
-          {/* Core Plugins */}
-          <HistoryPlugin />
-          <BlocksPlugin />
-          <EnterKeyPlugin />
-          <InsertEmptyLinePlugin />
-          <StepNameEditPlugin />
-          <TypeaheadMenuPlugin />
-          <VariableMenuPlugin />
-          <InitializeBlocksPlugin initialBlocks={initialValue} />
-          <HierarchyValidationPlugin />
-          <VariableTransformPlugin />
+            {/* Core Plugins */}
+            <HistoryPlugin />
+            <BlocksPlugin />
+            <EnterKeyPlugin />
+            <InsertEmptyLinePlugin />
+            <StepNameEditPlugin />
+            <TypeaheadMenuPlugin />
+            <VariableMenuPlugin />
+            <ReferencesPlugin
+              prompts={prompts}
+              onRequestPromptMetadata={onRequestPromptMetadata}
+              onToggleDevEditor={onToggleDevEditor}
+            />
+            <InitializeBlocksPlugin initialBlocks={initialValue} />
+            <HierarchyValidationPlugin />
+            <VariableTransformPlugin />
 
-          {/* Drag and Drop Plugin */}
-          {!readOnly && floatingAnchorElem && (
-            <DraggableBlockPlugin anchorElem={floatingAnchorElem} />
-          )}
+            {/* Drag and Drop Plugin */}
+            {!readOnly && floatingAnchorElem && (
+              <DraggableBlockPlugin anchorElem={floatingAnchorElem} />
+            )}
 
-          {/* Auto focus */}
-          {autoFocus && <AutoFocusPlugin />}
+            {/* Auto focus */}
+            {autoFocus && <AutoFocusPlugin />}
 
-          {/* Change handler */}
-          <OnChangeHandler
-            onChange={onChange}
-            onBlocksChange={onBlocksChange}
-          />
-        </div>
-      </LexicalComposer>
-    </div>
+            {/* Change handler */}
+            <OnChangeHandler
+              onChange={onChange}
+              onBlocksChange={onBlocksChange}
+            />
+          </div>
+        </LexicalComposer>
+      </div>
+    </BlocksEditorProvider>
   )
 }