Blocks editor component

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

@@ -1,13 +1,15 @@
-import { memo, Suspense } from 'react'
+import { memo, Suspense, useState } from 'react'
 import { AstError } from '@latitude-data/constants/simpleBlocks'
 import { TextEditorPlaceholder } from '@latitude-data/web-ui/molecules/TextEditorPlaceholder'
 import { AnyBlock } from '@latitude-data/constants/simpleBlocks'
-import { CodeBlock } from '@latitude-data/web-ui/atoms/CodeBlock'
+import {
+  type JSONContent,
+  BlocksEditor,
+} from '@latitude-data/web-ui/molecules/BlocksEditor'
 
 export const PlaygroundBlocksEditor = memo(
   ({
     value: _prompt,
-    blocks = [],
   }: {
     compileErrors: AstError[] | undefined
     blocks: AnyBlock[] | undefined
@@ -17,12 +19,153 @@ export const PlaygroundBlocksEditor = memo(
     readOnlyMessage?: string
     onChange: (value: string) => void
   }) => {
-    if (!blocks.length) return null
+    const [localBlocks, setLocalBlocks] = useState<JSONContent[]>([
+      {
+        type: 'message',
+        attrs: {
+          role: 'system',
+        },
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'This is my initial system message',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        type: 'paragraph',
+        content: [
+          {
+            type: 'text',
+            text: 'Hi, I am {{ name }}, and I am also a system message',
+          },
+        ],
+      },
+      {
+        type: 'paragraph',
+        content: [
+          {
+            type: 'prompt',
+            attrs: {
+              id: 'prompt-block-1',
+              path: 'latitude-extract',
+              attributes: {
+                location: '{{thing}}',
+              },
+              // errors: [{ message: 'Path is required' }],
+            },
+          },
+        ],
+      },
+      {
+        type: 'step',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: "I'm inside a step",
+              },
+            ],
+          },
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'prompt',
+                attrs: {
+                  id: 'prompt-block-2',
+                  path: 'weather-prompt',
+                },
+              },
+            ],
+          },
+          {
+            type: 'message',
+            attrs: {
+              role: 'user',
+            },
+            content: [
+              {
+                type: 'paragraph',
+                content: [
+                  {
+                    type: 'text',
+                    text: 'What is the weather like in {{ location }}?',
+                  },
+                ],
+              },
+              {
+                type: 'codeBlock',
+                attrs: {
+                  language: 'promptl',
+                },
+                content: [
+                  {
+                    type: 'text',
+                    text: `{{for cities in ['Barcelona', 'Madrid']}}
+  {{city}} is a city in Spain.
+{{ endof }}`,
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        type: 'message',
+        attrs: {
+          role: 'assistant',
+        },
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Hello! How can I assist you today?',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        type: 'codeBlock',
+        attrs: {
+          language: 'promptl',
+        },
+        content: [
+          {
+            type: 'text',
+            text: `{{if location == 'Barcelona'}}
+  <step>
+    <assistant>
+      /* This is a comment */
+      Is a sunny place with nice weather and good food. {{location}}
+    </assistant>
+  </step>
+{{ endif }}`,
+          },
+        ],
+      },
+    ])
+
+    console.log('LOCAL_BLOCKS', localBlocks)
 
     return (
       <Suspense fallback={<TextEditorPlaceholder />}>
-        Blocks Editor
-        <CodeBlock language='json'>{JSON.stringify(blocks, null, 2)}</CodeBlock>
+        <BlocksEditor
+          content={localBlocks}
+          onUpdate={setLocalBlocks}
+          placeholder='Write your prompt, type "/" to add blocks.'
+        />
       </Suspense>
     )
   },

packages/constants/src/simpleBlocks/index.ts

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

packages/web-ui/package.json

@@ -73,6 +73,7 @@
     "./molecules/CollapsibleBox": "./src/ds/molecules/CollapsibleBox/index.tsx",
     "./molecules/DocumentChange": "./src/ds/molecules/DocumentChange/index.tsx",
     "./molecules/DocumentTextEditor": "./src/ds/molecules/DocumentTextEditor/index.tsx",
+    "./molecules/BlocksEditor": "./src/ds/molecules/BlocksEditor/index.tsx",
     "./molecules/EditableText": "./src/ds/molecules/EditableText/index.tsx",
     "./molecules/ErrorComponent": "./src/ds/molecules/ErrorComponent/index.tsx",
     "./molecules/FakeProgress": "./src/ds/molecules/FakeProgress/index.tsx",
@@ -141,12 +142,24 @@
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-toast": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.1.8",
+    "@tiptap/core": "3.0.0-beta.8",
+    "@tiptap/extension-code-block-lowlight": "3.0.0-beta.10",
+    "@tiptap/extension-document": "3.0.0-beta.10",
+    "@tiptap/extension-drag-handle-react": "3.0.0-beta.10",
+    "@tiptap/extension-dropcursor": "3.0.0-beta.10",
+    "@tiptap/extension-paragraph": "3.0.0-beta.10",
+    "@tiptap/extension-placeholder": "3.0.0-beta.10",
+    "@tiptap/extension-text": "3.0.0-beta.8",
+    "@tiptap/pm": "3.0.0-beta.8",
+    "@tiptap/react": "3.0.0-beta.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^3.6.0",
+    "highlight.js": "^11.11.1",
     "hsl-to-hex": "^1.0.0",
     "lodash-es": "^4.17.21",
+    "lowlight": "^3.3.0",
     "lucide-react": "^0.468.0",
     "monaco-editor": "^0.50.0",
     "next-themes": "^0.3.0",
@@ -162,6 +175,8 @@
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
+    "tiptap-extension-auto-joiner": "^0.1.3",
+    "tiptap-extension-global-drag-handle": "^0.1.18",
     "use-debounce": "^10.0.4",
     "zod": "catalog:",
     "zustand": "^4.5.6"

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

@@ -0,0 +1,65 @@
+import { ReactNode, JSX } from 'react'
+import { NodeViewProps } from '@tiptap/react'
+import { AnyBlock } from '@latitude-data/constants/simpleBlocks'
+import { NodeViewWrapper } from '@tiptap/react'
+import { cn } from '../../../../../lib/utils'
+
+type Error<T extends AnyBlock['errors'] = AnyBlock['errors']> =
+  T extends Array<infer U> ? U : never
+
+type BaseAttrs = {
+  id: string
+  errors?: Error[]
+}
+
+export type TypedNodeViewProps<Attr> = Omit<NodeViewProps, 'node'> & {
+  node: Omit<NodeViewProps['node'], 'attrs'> & {
+    attrs: BaseAttrs & Attr
+  }
+}
+
+export function BaseNodeView({
+  children,
+  errors = [],
+  as,
+  className,
+  draggable = true,
+}: {
+  children: ReactNode
+  errors?: Error[]
+  className?: string
+  as?: string
+  draggable?: boolean
+}) {
+  // {draggable ? (
+  //   <div className='absolute -left-6 top-0.5 bottom-0 w-6 flex transition opacity-0 group-hover/row:opacity-100'>
+  //     <Icon name='gridVertical' color='foregroundMuted' />
+  //   </div>
+  // ) : null}
+
+  return (
+    <NodeViewWrapper
+      as={as}
+      className={cn('relative group/row', className)}
+    >
+      {children}
+
+      {/* FIXME: Style errors in a nice way */}
+      {errors?.length > 0 ? (
+        <div className='text-red-500 text-sm'>
+          {errors.map((err: Error, i: number) => (
+            <div key={i}>{err.message}</div>
+          ))}
+        </div>
+      ) : null}
+    </NodeViewWrapper>
+  )
+}
+
+export function withNodeViewProps<A>(
+  Component: (props: TypedNodeViewProps<A>) => JSX.Element,
+) {
+  return function Wrapped(props: NodeViewProps) {
+    return <Component {...(props as any)} />
+  }
+}

packages/web-ui/src/ds/molecules/BlocksEditor/Editor/extensions/MessageReference/View.tsx

@@ -0,0 +1,33 @@
+import { NodeViewContent } from '@tiptap/react'
+import { MessageBlockType } from '@latitude-data/constants/simpleBlocks'
+import {
+  BaseNodeView,
+  TypedNodeViewProps,
+  withNodeViewProps,
+} from '../../BaseNodeView'
+import { Badge } from '../../../../../atoms/Badge'
+import { roleToString, roleVariant } from '../../../../ChatWrapper'
+
+type Props = TypedNodeViewProps<{ role: MessageBlockType }>
+export type Attr = Props['node']['attrs']
+
+function View({ node }: Props) {
+  const role = node.attrs.role
+  const label = roleToString(role)
+  const variant = roleVariant(role)
+  return (
+    <BaseNodeView className='flex flex-col gap-1 w-full items-start editor-block'>
+      <div>
+        <Badge variant={variant}>{label}</Badge>
+      </div>
+      <div className='flex w-full flex-row items-stretch gap-4 pl-4'>
+        <div className='flex-shrink-0 bg-muted w-1 rounded-lg cursor-pointer transition-colors' />
+        <div className='flex flex-grow flex-col gap-1 overflow-x-auto'>
+          <NodeViewContent className='base-node-view' />
+        </div>
+      </div>
+    </BaseNodeView>
+  )
+}
+
+export default withNodeViewProps(View)

packages/web-ui/src/ds/molecules/BlocksEditor/Editor/extensions/MessageReference/index.ts

@@ -0,0 +1,36 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { ReactNodeViewRenderer } from '@tiptap/react'
+import View, { type Attr } from './View'
+
+export const MessageReference = Node.create<Attr>({
+  name: 'message',
+  group: 'block',
+  content: 'block+',
+  inline: false,
+  atom: false,
+  isolating: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      id: { default: () => crypto.randomUUID() },
+      role: { default: 'system' },
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: 'div[data-type="message"]' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'div',
+      mergeAttributes(HTMLAttributes, { 'data-type': 'message' }),
+      0,
+    ]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(View)
+  },
+})

packages/web-ui/src/ds/molecules/BlocksEditor/Editor/extensions/PromptReference/View.tsx

@@ -0,0 +1,35 @@
+import {
+  BaseNodeView,
+  TypedNodeViewProps,
+  withNodeViewProps,
+} from '../../BaseNodeView'
+import { Icon } from '../../../../../atoms/Icons'
+import { Text } from '../../../../../atoms/Text'
+
+export type Attr = { path: string; attributes?: Record<string, string> }
+type Props = TypedNodeViewProps<Attr>
+
+function View({ node, updateAttributes: _ua }: Props) {
+  // TODO: Implement the logic to handle changes in attributes
+  // const _onChangeAttribute = useCallback(
+  //   ({ name, value }: { name: string; value: string }) => {
+  //     updateAttributes({
+  //       attributes: { ...node.attrs.attributes, [name]: value },
+  //     })
+  //   },
+  //   [updateAttributes, node.attrs.attributes],
+  // )
+
+  return (
+    <BaseNodeView
+      as='span'
+      errors={node.attrs.errors}
+      className='align-middle inline-flex flex-row items-center gap-1 rounded p-1 cursor-pointer bg-muted/50 hover:bg-muted'
+    >
+      <Icon name='file' />
+      <Text.H5>{node.attrs.path}</Text.H5>
+    </BaseNodeView>
+  )
+}
+
+export default withNodeViewProps(View)