From 0fb7b1aa6ef60fc42ee184046717db496131e143 Mon Sep 17 00:00:00 2001
From: Daniel Naab <dan@crushingpennies.com>
Date: Wed, 28 Feb 2024 15:59:01 -0600
Subject: [PATCH] - PDF field mappings - working on drag/drop for preview page

---
 apps/spotlight/src/layouts/Layout.astro       |   7 +-
 packages/design/sass/styles.scss              |  22 +--
 packages/design/src/Form/index.tsx            |  28 ++--
 .../FormManager/FormEdit/DraggableList.tsx    | 128 ++++++++++++++++++
 .../FormManager/FormEdit/FormElementEdit.tsx  |  85 ++++++------
 .../src/FormManager/FormEdit/Preview.tsx      |  63 ++++++---
 .../src/FormManager/FormEdit/context.tsx      |  52 +++++++
 .../design/src/FormManager/FormEdit/index.tsx |  83 ++++--------
 .../src/config/edit/InputElementEdit.tsx      |  14 ++
 .../src/config/view/TextInput/index.tsx       |   3 +
 packages/documents/src/pdf/mock-api.ts        |   4 +-
 .../forms/src/config/elements/paragraph.ts    |   9 +-
 .../forms/src/config/elements/sequence.ts     |  11 +-
 packages/forms/src/element.ts                 |  16 +++
 packages/forms/src/pattern.ts                 |   1 +
 15 files changed, 374 insertions(+), 152 deletions(-)
 create mode 100644 packages/design/src/FormManager/FormEdit/DraggableList.tsx
 create mode 100644 packages/design/src/FormManager/FormEdit/context.tsx

diff --git a/apps/spotlight/src/layouts/Layout.astro b/apps/spotlight/src/layouts/Layout.astro
index bf87c867..4b87ba98 100644
--- a/apps/spotlight/src/layouts/Layout.astro
+++ b/apps/spotlight/src/layouts/Layout.astro
@@ -45,7 +45,10 @@ const context = getAppContext();
     />
     <link href="/favicon/favicon.ico" rel="shortcut icon" />
     <meta name="generator" content={Astro.generator} />
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
     <script src="../lib/initialize.ts"></script>
     <title>{title}</title>
   </head>
@@ -54,7 +57,7 @@ const context = getAppContext();
       <UsaBanner />
       <Header />
       <slot />
-      <Footer github={context.github} />  
+      <Footer github={context.github} />
     </div>
   </body>
 </html>
diff --git a/packages/design/sass/styles.scss b/packages/design/sass/styles.scss
index 9661c79f..b89232c1 100644
--- a/packages/design/sass/styles.scss
+++ b/packages/design/sass/styles.scss
@@ -3,7 +3,7 @@
 
 h1 {
   font-size: 2.5em;
-  
+
   span {
     display: inline-block;
     vertical-align: top;
@@ -51,11 +51,11 @@ main {
   max-width: 75rem;
 }
 
-.usa-combo-box__input, 
-.usa-input, 
-.usa-input-group, 
-.usa-range, 
-.usa-select, 
+.usa-combo-box__input,
+.usa-input,
+.usa-input-group,
+.usa-range,
+.usa-select,
 .usa-textarea {
   max-width: 40rem;
   height: 3rem;
@@ -166,7 +166,7 @@ main {
           padding: 15px;
           font-size: 20px;
           text-align: center;
-           
+
           &:hover {
             background: #f5f2ff;
             border: 1px solid #e4deff;
@@ -187,9 +187,9 @@ main {
   }
 }
 
-[contentEditable=true]:focus, 
-[href]:focus, 
-[tabindex]:focus, 
+[contentEditable=true]:focus,
+[href]:focus,
+[tabindex]:focus,
 iframe:focus {
   outline: 0.25rem solid #783cb9;
 }
@@ -218,7 +218,7 @@ iframe:focus {
       .edit-button-icon {
         padding: 0 10px;
         flex: none;
-      }     
+      }
     }
 
     &.field-selected {
diff --git a/packages/design/src/Form/index.tsx b/packages/design/src/Form/index.tsx
index a975c22e..ff6a550a 100644
--- a/packages/design/src/Form/index.tsx
+++ b/packages/design/src/Form/index.tsx
@@ -104,17 +104,15 @@ export default function Form({
         })}
       >
         <fieldset className="usa-fieldset">
-          {prompt.parts
-            .map((part, index) => {
-              return (
-                <PromptComponent
-                  key={index}
-                  context={context}
-                  promptPart={part}
-                />
-              );
-            })
-            .filter(a => a)}
+          {prompt.parts.map((part, index) => {
+            return (
+              <PromptComponent
+                key={index}
+                context={context}
+                promptPart={part}
+              />
+            );
+          })}
           {/* Add submit button or other controls as needed */}
         </fieldset>
         <ActionBar actions={prompt.actions} />
@@ -133,9 +131,11 @@ const PromptComponent = ({
   const Component = context.components[promptPart.pattern.type];
   return (
     <Component pattern={promptPart.pattern}>
-      {promptPart.children?.map((child, index) => (
-        <PromptComponent key={index} context={context} promptPart={child} />
-      ))}
+      {promptPart.children?.map((child, index) => {
+        return (
+          <PromptComponent key={index} context={context} promptPart={child} />
+        );
+      })}
     </Component>
   );
 };
diff --git a/packages/design/src/FormManager/FormEdit/DraggableList.tsx b/packages/design/src/FormManager/FormEdit/DraggableList.tsx
new file mode 100644
index 00000000..0cadabd5
--- /dev/null
+++ b/packages/design/src/FormManager/FormEdit/DraggableList.tsx
@@ -0,0 +1,128 @@
+import React, { Children, useState } from 'react';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+import {
+  getFormElement,
+  type FormDefinition,
+  type FormElement,
+  FormElementId,
+} from '@atj/forms';
+
+import { SequenceElement } from '@atj/forms/src/config/elements/sequence';
+
+const SortableItem = ({
+  id,
+  children,
+}: {
+  id: string;
+  children: React.ReactNode;
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <li ref={setNodeRef} style={style}>
+      <div className="editFieldsRowWrapper grid-row grid-gap">
+        <div
+          className="editPageGrabButtonWrapper grid-col-1 grid-col"
+          {...listeners}
+          {...attributes}
+          style={{ cursor: 'grab' }}
+        >
+          <span className="grabber1">:::</span>
+          <span className="grabber2">:::</span>
+        </div>
+        <div className="editFieldsWrapper grid-col-11 grid-col">{children}</div>
+      </div>
+    </li>
+  );
+};
+
+type DraggableListProps = React.PropsWithChildren<{
+  element: FormElement<SequenceElement>;
+  form: FormDefinition;
+  setSelectedElement: (element: FormElement) => void;
+}>;
+export const DraggableList: React.FC<DraggableListProps> = ({
+  element,
+  form,
+  setSelectedElement,
+  children,
+}) => {
+  const [elements, setElements] = useState<FormElement[]>(
+    element.data.elements.map((elementId: FormElementId) => {
+      return getFormElement(form, elementId);
+    })
+  );
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  const arrayChildren = Children.toArray(children);
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={event => {
+        const { active, over } = event;
+        if (over === null) {
+          return;
+        }
+        if (active.id !== over.id) {
+          const oldIndex = elements.findIndex(element => {
+            return element.id === active.id;
+          });
+          const newIndex = elements.findIndex(element => {
+            return element.id === over.id;
+          });
+          const newOrder = arrayMove(elements, oldIndex, newIndex);
+          setElements(newOrder);
+          setSelectedElement({
+            id: element.id,
+            type: element.type,
+            data: {
+              elements: newOrder.map(element => element.id),
+            },
+            default: {
+              elements: [],
+            },
+            required: element.required,
+          } satisfies SequenceElement);
+        }
+      }}
+    >
+      <SortableContext items={elements} strategy={verticalListSortingStrategy}>
+        <ul className="editFormWrapper">
+          {arrayChildren.map((child, index) => (
+            <SortableItem key={index} id={elements[index].id}>
+              {child}
+            </SortableItem>
+          ))}
+        </ul>
+      </SortableContext>
+    </DndContext>
+  );
+};
+
+export default DraggableList;
diff --git a/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx b/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx
index 602b6000..6e809d81 100644
--- a/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx
@@ -1,62 +1,67 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import {
-  FormDefinition,
-  FormElement,
-  FormElementMap,
   getFormElementConfig,
   updateElement,
+  type FormElementMap,
 } from '@atj/forms';
 import { FormEditUIContext } from '../../config';
+import { usePreviewContext } from './context';
 
 export const FormElementEdit = ({
   context,
-  initialForm,
-  formElement,
-  onChange,
 }: {
   context: FormEditUIContext;
-  initialForm: FormDefinition;
-  formElement: FormElement;
-  onChange: (form: FormDefinition) => void;
 }) => {
+  const { form, selectedElement, setCurrentForm } = usePreviewContext();
+  if (!selectedElement) {
+    return;
+  }
+
   const methods = useForm<FormElementMap>({
     defaultValues: {
-      [formElement.id]: formElement,
+      [selectedElement.id]: selectedElement,
     },
   });
-  const SelectedEditComponent = context.editComponents[formElement.type];
+  useEffect(() => {
+    methods.setValue(selectedElement.id, selectedElement);
+  }, [selectedElement]);
+
+  const SelectedEditComponent = context.editComponents[selectedElement.type];
   return (
     <FormProvider {...methods}>
-      <form
-        className="editForm"
-        onSubmit={methods.handleSubmit(formData => {
-          const elementConfig = getFormElementConfig(
-            context.config,
-            formElement.type
-          );
-          const data = formData[formElement.id].data;
-          const result = elementConfig.parseConfigData(data);
-          if (!result.success) {
-            return;
-          }
-          const updatedForm = updateElement(initialForm, {
-            ...formElement,
-            data: result.data,
-          });
-          onChange(updatedForm);
-        })}
-      >
-        <SelectedEditComponent
-          context={context}
-          form={initialForm}
-          element={formElement}
-        />
-        <p>
-          <input className="usa-button" type="submit" value="Save" />
-        </p>
-      </form>
+      <div className="settingsContainer">
+        <h2>Editing {selectedElement.id}...</h2>
+        <form
+          className="editForm"
+          onSubmit={methods.handleSubmit(formData => {
+            const elementConfig = getFormElementConfig(
+              context.config,
+              selectedElement.type
+            );
+            const data = formData[selectedElement.id].data;
+            const result = elementConfig.parseConfigData(data);
+            if (!result.success) {
+              return;
+            }
+            const updatedForm = updateElement(form, {
+              ...selectedElement,
+              data: result.data,
+            });
+            setCurrentForm(updatedForm);
+          })}
+        >
+          <SelectedEditComponent
+            context={context}
+            form={form}
+            element={selectedElement}
+          />
+          <p>
+            <input className="usa-button" type="submit" value="Save" />
+          </p>
+        </form>
+      </div>
     </FormProvider>
   );
 };
diff --git a/packages/design/src/FormManager/FormEdit/Preview.tsx b/packages/design/src/FormManager/FormEdit/Preview.tsx
index 56d04689..736d1a08 100644
--- a/packages/design/src/FormManager/FormEdit/Preview.tsx
+++ b/packages/design/src/FormManager/FormEdit/Preview.tsx
@@ -1,17 +1,19 @@
-import React, { createContext, useContext } from 'react';
+import React from 'react';
 
 import {
   type FormDefinition,
-  type FormElementId,
   type Pattern,
   createFormSession,
+  getFormElement,
 } from '@atj/forms';
 
+import { usePreviewContext } from './context';
 import Form, {
   type ComponentForPattern,
   type FormElementComponent,
   type FormUIContext,
 } from '../../Form';
+import DraggableList from './DraggableList';
 
 type PreviewFormProps = {
   uiContext: FormUIContext;
@@ -21,7 +23,7 @@ type PreviewFormProps = {
 export const PreviewForm = ({ uiContext, form }: PreviewFormProps) => {
   const previewUiContext: FormUIContext = {
     config: uiContext.config,
-    // I think we want to hoist this definition up to a higher level, so we
+    // TODO: We'll want to hoist this definition up to a higher level, so we
     // don't have to regenerate it every time we render the form.
     components: createPreviewComponents(
       uiContext.components,
@@ -38,11 +40,21 @@ const createPreviewComponents = (
   uswdsRoot: string
 ): ComponentForPattern => {
   const previewComponents: ComponentForPattern = {};
-  // TODO: Create a configurable way to to defined preview components.
+  // TODO: Create a configurable way to to define preview components.
   for (const [patternType, Component] of Object.entries(components)) {
     if (patternType === 'sequence') {
       previewComponents[patternType] = Component;
+      /*
+      previewComponents[patternType] = createSequencePatternPreviewComponent(
+        Component,
+        previewComponents
+      );
+      */
+    } else if (patternType === 'form-summary') {
+      console.log('skipping form-summary...');
+      previewComponents[patternType] = Component;
     } else {
+      previewComponents[patternType] = Component;
       previewComponents[patternType] = createPatternPreviewComponent(
         Component,
         uswdsRoot
@@ -52,15 +64,33 @@ const createPreviewComponents = (
   return previewComponents;
 };
 
-type PreviewContextValue = {
-  selectedId?: FormElementId | null;
-  setSelectedId: (id: FormElementId | null) => void;
+const createSequencePatternPreviewComponent = (
+  Component: FormElementComponent,
+  previewComponents: ComponentForPattern
+) => {
+  const PatternPreviewSequenceComponent: FormElementComponent = ({
+    pattern,
+  }) => {
+    const { form, setSelectedElement } = usePreviewContext();
+    const element = getFormElement(form, pattern._elementId);
+    const Component = previewComponents[pattern.type];
+    return (
+      <DraggableList
+        form={form}
+        element={element}
+        setSelectedElement={setSelectedElement}
+      >
+        <Component pattern={pattern} />
+        {/*pattern._children.map((promptPart, index) => {
+          const ChildComponent = previewComponents[promptPart.pattern.type];
+          return <ChildComponent key={index} pattern={promptPart.pattern} />;
+        })*/}
+      </DraggableList>
+    );
+  };
+  return PatternPreviewSequenceComponent;
 };
 
-export const PreviewContext = createContext<PreviewContextValue>(
-  null as unknown as PreviewContextValue
-);
-
 const createPatternPreviewComponent = (
   Component: FormElementComponent,
   uswdsRoot: string
@@ -70,17 +100,18 @@ const createPatternPreviewComponent = (
   }: {
     pattern: Pattern;
   }) => {
-    const { selectedId, setSelectedId } = useContext(PreviewContext);
+    const { form, selectedElement, setSelectedElement } = usePreviewContext();
 
     const handleEditClick = () => {
-      if (selectedId === pattern._elementId) {
-        setSelectedId(null);
+      if (selectedElement.id === pattern._elementId) {
+        //setSelectedElement(null);
       } else {
-        setSelectedId(pattern._elementId);
+        const element = getFormElement(form, pattern._elementId);
+        setSelectedElement(element);
       }
     };
 
-    const isSelected = selectedId === pattern._elementId;
+    const isSelected = selectedElement.id === pattern._elementId;
     const divClassNames = isSelected
       ? 'form-group-row field-selected'
       : 'form-group-row';
diff --git a/packages/design/src/FormManager/FormEdit/context.tsx b/packages/design/src/FormManager/FormEdit/context.tsx
new file mode 100644
index 00000000..66a64f30
--- /dev/null
+++ b/packages/design/src/FormManager/FormEdit/context.tsx
@@ -0,0 +1,52 @@
+import React, { createContext, useContext, useState } from 'react';
+
+import {
+  type FormConfig,
+  type FormDefinition,
+  type FormElement,
+  getFirstFormElement,
+} from '@atj/forms';
+
+type PreviewContextValue = {
+  form: FormDefinition;
+  setCurrentForm: (form: FormDefinition) => void;
+  selectedElement: FormElement;
+  setSelectedElement: (element: FormElement) => void;
+};
+
+export const PreviewContext = createContext<PreviewContextValue>(
+  null as unknown as PreviewContextValue
+);
+
+export const PreviewContextProvider = ({
+  config,
+  initialForm,
+  children,
+}: {
+  config: FormConfig;
+  initialForm: FormDefinition;
+  children: React.ReactNode;
+}) => {
+  const [form, setCurrentForm] = useState(initialForm);
+  const element = getFirstFormElement(config, form);
+  if (!element) {
+    throw new Error('Form has no elements');
+  }
+  const [selectedElement, setSelectedElement] = useState<FormElement>(element);
+  return (
+    <PreviewContext.Provider
+      value={{
+        form,
+        setCurrentForm,
+        selectedElement,
+        setSelectedElement,
+      }}
+    >
+      {children}
+    </PreviewContext.Provider>
+  );
+};
+
+export const usePreviewContext = () => {
+  return useContext(PreviewContext);
+};
diff --git a/packages/design/src/FormManager/FormEdit/index.tsx b/packages/design/src/FormManager/FormEdit/index.tsx
index 51b9b6dd..c3894ace 100644
--- a/packages/design/src/FormManager/FormEdit/index.tsx
+++ b/packages/design/src/FormManager/FormEdit/index.tsx
@@ -1,16 +1,12 @@
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
 
 import { type FormService } from '@atj/form-service';
-import {
-  type FormDefinition,
-  getRootFormElement,
-  FormElementId,
-  getFormElement,
-} from '@atj/forms';
 
 import { type FormEditUIContext } from '../../config';
-import { PreviewContext, PreviewForm } from './Preview';
+import { PreviewContextProvider, usePreviewContext } from './context';
 import { FormElementEdit } from './FormElementEdit';
+import { PreviewForm } from './Preview';
+import { FormDefinition } from '@atj/forms';
 
 export default function FormEdit({
   context,
@@ -34,68 +30,37 @@ export default function FormEdit({
         personalize your form by modifying labels, attributes, and other
         settings to better suit your needs.
       </p>
-      <EditForm context={context} initialForm={form} />
+      <PreviewContextProvider config={context.config} initialForm={form}>
+        <EditForm
+          context={context}
+          saveForm={form => formService.saveForm(formId, form)}
+        />
+      </PreviewContextProvider>
     </div>
   );
 }
 
 const EditForm = ({
   context,
-  initialForm,
-  //onSave,
+  saveForm,
 }: {
   context: FormEditUIContext;
-  initialForm: FormDefinition;
-  //onSave: (form: FormDefinition) => void;
+  saveForm: (form: FormDefinition) => void;
 }) => {
-  const [currentForm, setCurrentForm] = useState(initialForm);
-  const [selectedId, setSelectedId] = useState<FormElementId | null>(null);
-  const [isSettingsVisible, setIsSettingsVisible] = useState(false);
-
-  const rootField = getRootFormElement(currentForm);
-  const formElement = getFormElement(currentForm, selectedId || rootField.id);
-
-  const handleSelect = (id: FormElementId | null) => {
-    setSelectedId(id); // Always update the selectedId
-    setIsSettingsVisible(selectedId !== id || !isSettingsVisible);
-  };
-
+  const { form, selectedElement } = usePreviewContext();
+  useEffect(() => {
+    saveForm(form);
+  }, [form]);
   return (
-    <>
-      <div className="editFormContentWrapper">
-        <div className="grid-row">
-          <div className="grid-col-8">
-            <PreviewContext.Provider
-              value={{
-                selectedId,
-                setSelectedId: handleSelect,
-              }}
-            >
-              <PreviewForm uiContext={context} form={currentForm} />
-            </PreviewContext.Provider>
-          </div>
-          {isSettingsVisible && (
-            <div
-              className={`grid-col-4 ${selectedId !== null ? 'show' : 'hide'}`}
-            >
-              <div className="settingsContainer">
-                <h2>Editing {selectedId}...</h2>
-                {formElement && (
-                  <FormElementEdit
-                    key={selectedId}
-                    context={context}
-                    initialForm={currentForm}
-                    formElement={formElement}
-                    onChange={function (form: FormDefinition): void {
-                      setCurrentForm(form);
-                    }}
-                  />
-                )}
-              </div>
-            </div>
-          )}
+    <div className="editFormContentWrapper">
+      <div className="grid-row">
+        <div className="grid-col-8">
+          <PreviewForm uiContext={context} form={form} />
+        </div>
+        <div className={`grid-col-4 ${selectedElement ? 'show' : 'hide'}`}>
+          <FormElementEdit context={context} />
         </div>
       </div>
-    </>
+    </div>
   );
 };
diff --git a/packages/design/src/config/edit/InputElementEdit.tsx b/packages/design/src/config/edit/InputElementEdit.tsx
index ea140a8e..34e9fa63 100644
--- a/packages/design/src/config/edit/InputElementEdit.tsx
+++ b/packages/design/src/config/edit/InputElementEdit.tsx
@@ -23,6 +23,20 @@ const InputElementEdit: FormElementEditComponent<InputElement> = ({
           type="text"
         ></input>
       </div>
+      <div className="grid-col grid-col-2">
+        <label
+          className="usa-label"
+          htmlFor={`${element.id}.data.instructions`}
+        >
+          Instructions
+        </label>
+        <input
+          className="usa-input"
+          id={`${element.id}.data.instructions`}
+          type="text"
+          {...register(`${element.id}.data.instructions`)}
+        ></input>
+      </div>
       <div className="grid-col grid-col-2">
         <label className="usa-label" htmlFor={`${element.id}.data.initial`}>
           Default field value
diff --git a/packages/design/src/config/view/TextInput/index.tsx b/packages/design/src/config/view/TextInput/index.tsx
index 997cd4f5..57f17afb 100644
--- a/packages/design/src/config/view/TextInput/index.tsx
+++ b/packages/design/src/config/view/TextInput/index.tsx
@@ -24,6 +24,9 @@ const TextInput: FormElementComponent<Pattern<TextInputPattern>> = ({
         >
           {pattern.label}
         </label>
+        {pattern.instructions && (
+          <span className="usa-hint">{pattern.instructions}</span>
+        )}
         {pattern.error && (
           <span
             className="usa-error-message"
diff --git a/packages/documents/src/pdf/mock-api.ts b/packages/documents/src/pdf/mock-api.ts
index 5a2c013b..6c11fe4f 100644
--- a/packages/documents/src/pdf/mock-api.ts
+++ b/packages/documents/src/pdf/mock-api.ts
@@ -103,7 +103,7 @@ export const parseAlabamaNameChangeForm = (): ParsedPdf => {
           id,
           default: {} as unknown as any,
           data: {
-            text: input.input_params.instructions,
+            text: element.element_params.text,
             instructions: input.input_params.instructions,
           },
           required: true,
@@ -129,7 +129,7 @@ const getElementInputs = (element: ExtractedElement): FormElement[] => {
         return {
           type: 'input',
           id: input.input_params.output_id,
-          default: {},
+          default: {} as unknown as any,
           data: {
             text: input.input_params.text,
             instructions: input.input_params.instructions,
diff --git a/packages/forms/src/config/elements/paragraph.ts b/packages/forms/src/config/elements/paragraph.ts
index 04eba245..8a9a8ad6 100644
--- a/packages/forms/src/config/elements/paragraph.ts
+++ b/packages/forms/src/config/elements/paragraph.ts
@@ -23,13 +23,14 @@ export const paragraphConfig: FormElementConfig<ParagraphElement> = {
   getChildren() {
     return [];
   },
-  createPrompt(_, session, element, options): Pattern[] {
-    return [
-      {
+  createPrompt(_, session, element, options) {
+    return {
+      pattern: {
         _elementId: element.id,
         type: 'paragraph' as const,
         text: element.data.text,
       } as Pattern<ParagraphPattern>,
-    ];
+      children: [],
+    };
   },
 };
diff --git a/packages/forms/src/config/elements/sequence.ts b/packages/forms/src/config/elements/sequence.ts
index 22f63e9a..b41a8962 100644
--- a/packages/forms/src/config/elements/sequence.ts
+++ b/packages/forms/src/config/elements/sequence.ts
@@ -4,6 +4,7 @@ import { type FormElementConfig } from '..';
 import { type FormElement, type FormElementId } from '../../element';
 import { type Pattern, createPromptForElement } from '../../pattern';
 import { safeZodParse } from '../../util/zod';
+import { getFormElement } from '../..';
 
 export type SequenceElement = FormElement<{
   elements: FormElementId[];
@@ -30,15 +31,17 @@ export const sequenceConfig: FormElementConfig<SequenceElement> = {
     );
   },
   createPrompt(config, session, element, options) {
+    const children = element.data.elements.map((elementId: string) => {
+      const element = getFormElement(session.form, elementId);
+      return createPromptForElement(config, session, element, options);
+    });
     return {
       pattern: {
+        _children: children,
         _elementId: element.id,
         type: 'sequence',
       },
-      children: element.data.elements.flatMap((elementId: string) => {
-        const element = session.form.elements[elementId];
-        return createPromptForElement(config, session, element, options);
-      }),
+      children,
     };
   },
 };
diff --git a/packages/forms/src/element.ts b/packages/forms/src/element.ts
index 40bf0753..a0ea57e7 100644
--- a/packages/forms/src/element.ts
+++ b/packages/forms/src/element.ts
@@ -86,3 +86,19 @@ export const validateElement = (
     data: parseResult.data,
   };
 };
+
+export const getFirstFormElement = (
+  config: FormConfig,
+  form: FormDefinition,
+  element?: FormElement
+): FormElement => {
+  if (!element) {
+    element = form.elements[form.root];
+  }
+  const elemConfig = getFormElementConfig(config, element.type);
+  const children = elemConfig.getChildren(element, form.elements);
+  if (children?.length === 0) {
+    return element;
+  }
+  return getFirstFormElement(config, form, children[0]);
+};
diff --git a/packages/forms/src/pattern.ts b/packages/forms/src/pattern.ts
index c1122979..21e8a564 100644
--- a/packages/forms/src/pattern.ts
+++ b/packages/forms/src/pattern.ts
@@ -42,6 +42,7 @@ export type ParagraphPattern = {
 
 export type Pattern<T = {}> = {
   _elementId: FormElementId;
+  _children: PromptPart[];
   type: string;
 } & T;