@pbinitiative/zenbpm-js-properties-panel 0.2.0 → 0.3.1

package/README.md

@@ -22,6 +22,7 @@ It reads and writes ZenBPM extension elements (defined by [`@pbinitiative/zenbpm
 | Multi-instance elements | **Multi-instance** | Input collection, Element variable, Output collection, Output element, Completion condition |
 | Sequence flows / boundary events | **Condition** | Condition expression (FEEL) |
 | Process | **Version tag** | Tag value |
+| Message catch events (Intermediate Catch Event, Boundary Event), Start Event in event sub-process | **Message** | Subscription correlation key (FEEL) |
 
 > \* The **Version tag** text field only appears when you select *Version tag* from the **Binding** dropdown. The Binding dropdown has three options: *Latest* (always use the newest deployed version), *Deployment* (use the version deployed together with this process), and *Version tag* (use a specific version identified by a tag string).
 

package/dist/index.cjs

@@ -5,15 +5,14 @@ var preact = require('@bpmn-io/properties-panel/preact');
 var bpmnJsPropertiesPanel = require('bpmn-js-properties-panel');
 
 function ZenFormProps(element) {
-    if (element.type !== 'bpmn:UserTask') {
+    if (element.type !== 'bpmn:UserTask')
         return [];
-    }
     return [
         {
             id: 'zenFormDesignButton',
             component: ZenFormDesignButtonEntry,
             isEdited: () => false,
-        }
+        },
     ];
 }
 function getZenFormValue(element) {
@@ -27,7 +26,6 @@ function getZenFormValue(element) {
     const input = (ioMapping.inputParameters || []).find((p) => p.target === 'ZEN_FORM');
     if (!input?.source)
         return '';
-    // Parse FEEL string literal: ="..." → raw JSON
     const src = input.source;
     if (src.startsWith('="') && src.endsWith('"')) {
         return src.slice(2, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
@@ -51,6 +49,137 @@ function ZenFormDesignButtonEntry(props) {
             'font-size: 13px; font-weight: 500;',
     }, translate('Design Form')));
 }
+// ─── Form variable scanning ──────────────────────────────────────────────────
+function extractFormKeys(components) {
+    const keys = [];
+    for (const comp of components || []) {
+        if (comp.key)
+            keys.push(comp.key);
+        if (comp.components)
+            keys.push(...extractFormKeys(comp.components));
+        if (comp.rows) {
+            for (const row of comp.rows) {
+                if (Array.isArray(row))
+                    keys.push(...extractFormKeys(row));
+            }
+        }
+        if (comp.columns) {
+            for (const col of comp.columns) {
+                if (col.components)
+                    keys.push(...extractFormKeys(col.components));
+            }
+        }
+    }
+    return keys;
+}
+function scanFormVariables(formJson) {
+    try {
+        const schema = JSON.parse(formJson);
+        return extractFormKeys(schema.components || []);
+    }
+    catch {
+        console.warn('[ZenBPM] Failed to parse form JSON for variable scanning');
+        return [];
+    }
+}
+/**
+ * Sync output mappings with current form fields.
+ * - Form fields without an existing output get a default one.
+ * - Existing outputs with the same source are kept, preserving user's target.
+ * - Outputs for removed form fields are dropped.
+ */
+function syncOutputMappings(element, injector, variableKeys) {
+    const commandStack = injector.get('commandStack');
+    const bpmnFactory = injector.get('bpmnFactory');
+    const bo = element.businessObject;
+    let extensionElements = bo.extensionElements;
+    const commands = [];
+    if (!extensionElements) {
+        extensionElements = bpmnFactory.create('bpmn:ExtensionElements', {
+            values: [],
+        });
+        extensionElements.$parent = bo;
+        commands.push({
+            cmd: 'element.updateModdleProperties',
+            context: {
+                element,
+                moddleElement: bo,
+                properties: { extensionElements },
+            },
+        });
+    }
+    let ioMapping = (extensionElements.values || []).find((e) => e.$instanceOf('zenbpm:IoMapping'));
+    if (!ioMapping) {
+        ioMapping = bpmnFactory.create('zenbpm:IoMapping', {
+            inputParameters: [],
+            outputParameters: [],
+        });
+        ioMapping.$parent = extensionElements;
+        commands.push({
+            cmd: 'element.updateModdleProperties',
+            context: {
+                element,
+                moddleElement: extensionElements,
+                properties: {
+                    values: [...(extensionElements.values || []), ioMapping],
+                },
+            },
+        });
+    }
+    // Index existing outputs by source
+    const existingBySource = new Map((ioMapping.outputParameters || []).map((o) => [o.source, o]));
+    // For each form field, produce an output — reusing existing one if available
+    const outputs = variableKeys.map((key) => {
+        const source = `=${key}`;
+        const existing = existingBySource.get(source);
+        if (existing)
+            return existing;
+        const output = bpmnFactory.create('zenbpm:Output', {
+            source,
+            target: key,
+        });
+        output.$parent = ioMapping;
+        return output;
+    });
+    commands.push({
+        cmd: 'element.updateModdleProperties',
+        context: {
+            element,
+            moddleElement: ioMapping,
+            properties: { outputParameters: outputs },
+        },
+    });
+    commandStack.execute('properties-panel.multi-command-executor', commands);
+}
+// ─── Form save handler ───────────────────────────────────────────────────────
+const lastFormValueByElement = new Map();
+function setupFormSaveHandler(injector) {
+    const eventBus = injector.get('eventBus');
+    eventBus.on('commandStack.element.updateModdleProperties.executed', (event) => {
+        const { context } = event;
+        if (!context)
+            return;
+        const { moddleElement, properties, element } = context;
+        if (moddleElement?.$type !== 'zenbpm:Input' ||
+            moddleElement.target !== 'ZEN_FORM' ||
+            properties?.source === undefined) {
+            return;
+        }
+        if (!element || element.type !== 'bpmn:UserTask')
+            return;
+        // Defer to avoid nested commandStack.execute() while stack is mid-execution
+        setTimeout(() => {
+            const formJson = getZenFormValue(element);
+            if (!formJson)
+                return;
+            if (lastFormValueByElement.get(element.id) === formJson)
+                return;
+            lastFormValueByElement.set(element.id, formJson);
+            const variableKeys = scanFormVariables(formJson);
+            syncOutputMappings(element, injector, variableKeys);
+        }, 0);
+    });
+}
 
 /**
  * Return the first extension element of `type` from the given business object,
@@ -333,11 +462,11 @@ function bindingEntries(idPrefix, bindingTypeComponent, versionTagComponent, ele
     return entries;
 }
 
-const TYPE$2 = 'zenbpm:CalledElement';
-const ID$1 = 'zenbpm-calledEl';
+const TYPE$3 = 'zenbpm:CalledElement';
+const ID$2 = 'zenbpm-calledEl';
 // Module-level component instances — stable references, never recreated on render.
-const BindingTypeEntry$1 = makeBindingTypeEntry(ID$1, TYPE$2);
-const BindingVersionTagEntry$1 = makeVersionTagEntry(ID$1, TYPE$2);
+const BindingTypeEntry$1 = makeBindingTypeEntry(ID$2, TYPE$3);
+const BindingVersionTagEntry$1 = makeVersionTagEntry(ID$2, TYPE$3);
 // ─── entry components ────────────────────────────────────────────────────────
 function ProcessIdEntry(props) {
     const { element } = props;
@@ -346,9 +475,9 @@ function ProcessIdEntry(props) {
     const translate = bpmnJsPropertiesPanel.useService('translate');
     const debounce = bpmnJsPropertiesPanel.useService('debounceInput');
     const bo = element.businessObject;
-    const getValue = () => getExtensionElement(bo, TYPE$2)?.processId ?? '';
-    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$2, { processId: value }, bpmnFactory, commandStack);
-    return propertiesPanel.TextFieldEntry({ element, id: `${ID$1}-processId`, label: translate('Process ID'), getValue, setValue, debounce });
+    const getValue = () => getExtensionElement(bo, TYPE$3)?.processId ?? '';
+    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$3, { processId: value }, bpmnFactory, commandStack);
+    return propertiesPanel.TextFieldEntry({ element, id: `${ID$2}-processId`, label: translate('Process ID'), getValue, setValue, debounce });
 }
 function PropagateAllChildVarsEntry(props) {
     const { element } = props;
@@ -356,9 +485,9 @@ function PropagateAllChildVarsEntry(props) {
     const bpmnFactory = bpmnJsPropertiesPanel.useService('bpmnFactory');
     const translate = bpmnJsPropertiesPanel.useService('translate');
     const bo = element.businessObject;
-    const getValue = () => getExtensionElement(bo, TYPE$2)?.propagateAllChildVariables ?? false;
-    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$2, { propagateAllChildVariables: value }, bpmnFactory, commandStack);
-    return propertiesPanel.ToggleSwitchEntry({ element, id: `${ID$1}-propagateAllChildVariables`, label: translate('Propagate all child variables'), getValue, setValue });
+    const getValue = () => getExtensionElement(bo, TYPE$3)?.propagateAllChildVariables ?? false;
+    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$3, { propagateAllChildVariables: value }, bpmnFactory, commandStack);
+    return propertiesPanel.ToggleSwitchEntry({ element, id: `${ID$2}-propagateAllChildVariables`, label: translate('Propagate all child variables'), getValue, setValue });
 }
 function PropagateAllParentVarsEntry(props) {
     const { element } = props;
@@ -366,27 +495,27 @@ function PropagateAllParentVarsEntry(props) {
     const bpmnFactory = bpmnJsPropertiesPanel.useService('bpmnFactory');
     const translate = bpmnJsPropertiesPanel.useService('translate');
     const bo = element.businessObject;
-    const getValue = () => getExtensionElement(bo, TYPE$2)?.propagateAllParentVariables ?? true;
-    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$2, { propagateAllParentVariables: value }, bpmnFactory, commandStack);
-    return propertiesPanel.ToggleSwitchEntry({ element, id: `${ID$1}-propagateAllParentVariables`, label: translate('Propagate all parent variables'), getValue, setValue });
+    const getValue = () => getExtensionElement(bo, TYPE$3)?.propagateAllParentVariables ?? true;
+    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$3, { propagateAllParentVariables: value }, bpmnFactory, commandStack);
+    return propertiesPanel.ToggleSwitchEntry({ element, id: `${ID$2}-propagateAllParentVariables`, label: translate('Propagate all parent variables'), getValue, setValue });
 }
 // ─── exported entry list ─────────────────────────────────────────────────────
 function CalledElementProps(element) {
     if (element.type !== 'bpmn:CallActivity')
         return [];
     return [
-        { id: `${ID$1}-processId`, component: ProcessIdEntry, isEdited: propertiesPanel.isTextFieldEntryEdited },
-        ...bindingEntries(ID$1, BindingTypeEntry$1, BindingVersionTagEntry$1, element, TYPE$2),
-        { id: `${ID$1}-propagateAllChildVariables`, component: PropagateAllChildVarsEntry, isEdited: propertiesPanel.isToggleSwitchEntryEdited },
-        { id: `${ID$1}-propagateAllParentVariables`, component: PropagateAllParentVarsEntry, isEdited: propertiesPanel.isToggleSwitchEntryEdited },
+        { id: `${ID$2}-processId`, component: ProcessIdEntry, isEdited: propertiesPanel.isTextFieldEntryEdited },
+        ...bindingEntries(ID$2, BindingTypeEntry$1, BindingVersionTagEntry$1, element, TYPE$3),
+        { id: `${ID$2}-propagateAllChildVariables`, component: PropagateAllChildVarsEntry, isEdited: propertiesPanel.isToggleSwitchEntryEdited },
+        { id: `${ID$2}-propagateAllParentVariables`, component: PropagateAllParentVarsEntry, isEdited: propertiesPanel.isToggleSwitchEntryEdited },
     ];
 }
 
-const TYPE$1 = 'zenbpm:CalledDecision';
-const ID = 'zenbpm-calledDecision';
+const TYPE$2 = 'zenbpm:CalledDecision';
+const ID$1 = 'zenbpm-calledDecision';
 // Module-level component instances — stable references, never recreated on render.
-const BindingTypeEntry = makeBindingTypeEntry(ID, TYPE$1);
-const BindingVersionTagEntry = makeVersionTagEntry(ID, TYPE$1);
+const BindingTypeEntry = makeBindingTypeEntry(ID$1, TYPE$2);
+const BindingVersionTagEntry = makeVersionTagEntry(ID$1, TYPE$2);
 // ─── entry components ────────────────────────────────────────────────────────
 function DecisionIdEntry(props) {
     const { element } = props;
@@ -395,9 +524,9 @@ function DecisionIdEntry(props) {
     const translate = bpmnJsPropertiesPanel.useService('translate');
     const debounce = bpmnJsPropertiesPanel.useService('debounceInput');
     const bo = element.businessObject;
-    const getValue = () => getExtensionElement(bo, TYPE$1)?.decisionId ?? '';
-    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$1, { decisionId: value }, bpmnFactory, commandStack);
-    return propertiesPanel.TextFieldEntry({ element, id: `${ID}-decisionId`, label: translate('Decision ID'), getValue, setValue, debounce });
+    const getValue = () => getExtensionElement(bo, TYPE$2)?.decisionId ?? '';
+    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$2, { decisionId: value }, bpmnFactory, commandStack);
+    return propertiesPanel.TextFieldEntry({ element, id: `${ID$1}-decisionId`, label: translate('Decision ID'), getValue, setValue, debounce });
 }
 function ResultVariableEntry(props) {
     const { element } = props;
@@ -406,18 +535,18 @@ function ResultVariableEntry(props) {
     const translate = bpmnJsPropertiesPanel.useService('translate');
     const debounce = bpmnJsPropertiesPanel.useService('debounceInput');
     const bo = element.businessObject;
-    const getValue = () => getExtensionElement(bo, TYPE$1)?.resultVariable ?? '';
-    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$1, { resultVariable: value }, bpmnFactory, commandStack);
-    return propertiesPanel.TextFieldEntry({ element, id: `${ID}-resultVariable`, label: translate('Result variable'), getValue, setValue, debounce });
+    const getValue = () => getExtensionElement(bo, TYPE$2)?.resultVariable ?? '';
+    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$2, { resultVariable: value }, bpmnFactory, commandStack);
+    return propertiesPanel.TextFieldEntry({ element, id: `${ID$1}-resultVariable`, label: translate('Result variable'), getValue, setValue, debounce });
 }
 // ─── exported entry list ─────────────────────────────────────────────────────
 function CalledDecisionProps(element) {
     if (element.type !== 'bpmn:BusinessRuleTask')
         return [];
     return [
-        { id: `${ID}-decisionId`, component: DecisionIdEntry, isEdited: propertiesPanel.isTextFieldEntryEdited },
-        ...bindingEntries(ID, BindingTypeEntry, BindingVersionTagEntry, element, TYPE$1),
-        { id: `${ID}-resultVariable`, component: ResultVariableEntry, isEdited: propertiesPanel.isTextFieldEntryEdited },
+        { id: `${ID$1}-decisionId`, component: DecisionIdEntry, isEdited: propertiesPanel.isTextFieldEntryEdited },
+        ...bindingEntries(ID$1, BindingTypeEntry, BindingVersionTagEntry, element, TYPE$2),
+        { id: `${ID$1}-resultVariable`, component: ResultVariableEntry, isEdited: propertiesPanel.isTextFieldEntryEdited },
     ];
 }
 
@@ -501,7 +630,7 @@ function VersionTagProps(element) {
     ];
 }
 
-const TYPE = 'zenbpm:LoopCharacteristics';
+const TYPE$1 = 'zenbpm:LoopCharacteristics';
 // ─── helpers ─────────────────────────────────────────────────────────────────
 /**
  * Return the bpmn:MultiInstanceLoopCharacteristics of an element, or null.
@@ -514,7 +643,7 @@ function getMultiInstanceLoopCharacteristics(element) {
 }
 function getZenbpmLoopCharacteristics(element) {
     const lc = getMultiInstanceLoopCharacteristics(element);
-    return lc ? getExtensionElement(lc, TYPE) : undefined;
+    return lc ? getExtensionElement(lc, TYPE$1) : undefined;
 }
 // ─── entry components ────────────────────────────────────────────────────────
 /**
@@ -528,7 +657,7 @@ function InputCollectionEntry(props) {
     const debounce = bpmnJsPropertiesPanel.useService('debounceInput');
     const lc = getMultiInstanceLoopCharacteristics(element);
     const getValue = () => getZenbpmLoopCharacteristics(element)?.inputCollection ?? '';
-    const setValue = (value) => updateExtensionElementProps(element, lc, TYPE, { inputCollection: value }, bpmnFactory, commandStack);
+    const setValue = (value) => updateExtensionElementProps(element, lc, TYPE$1, { inputCollection: value }, bpmnFactory, commandStack);
     return propertiesPanel.FeelEntry({
         element,
         id: 'zenbpm-multiInstance-inputCollection',
@@ -550,7 +679,7 @@ function InputElementEntry(props) {
     const debounce = bpmnJsPropertiesPanel.useService('debounceInput');
     const lc = getMultiInstanceLoopCharacteristics(element);
     const getValue = () => getZenbpmLoopCharacteristics(element)?.inputElement ?? '';
-    const setValue = (value) => updateExtensionElementProps(element, lc, TYPE, { inputElement: value }, bpmnFactory, commandStack);
+    const setValue = (value) => updateExtensionElementProps(element, lc, TYPE$1, { inputElement: value }, bpmnFactory, commandStack);
     return propertiesPanel.TextFieldEntry({
         element,
         id: 'zenbpm-multiInstance-inputElement',
@@ -571,7 +700,7 @@ function OutputCollectionEntry(props) {
     const debounce = bpmnJsPropertiesPanel.useService('debounceInput');
     const lc = getMultiInstanceLoopCharacteristics(element);
     const getValue = () => getZenbpmLoopCharacteristics(element)?.outputCollection ?? '';
-    const setValue = (value) => updateExtensionElementProps(element, lc, TYPE, { outputCollection: value }, bpmnFactory, commandStack);
+    const setValue = (value) => updateExtensionElementProps(element, lc, TYPE$1, { outputCollection: value }, bpmnFactory, commandStack);
     return propertiesPanel.TextFieldEntry({
         element,
         id: 'zenbpm-multiInstance-outputCollection',
@@ -592,7 +721,7 @@ function OutputElementEntry(props) {
     const debounce = bpmnJsPropertiesPanel.useService('debounceInput');
     const lc = getMultiInstanceLoopCharacteristics(element);
     const getValue = () => getZenbpmLoopCharacteristics(element)?.outputElement ?? '';
-    const setValue = (value) => updateExtensionElementProps(element, lc, TYPE, { outputElement: value }, bpmnFactory, commandStack);
+    const setValue = (value) => updateExtensionElementProps(element, lc, TYPE$1, { outputElement: value }, bpmnFactory, commandStack);
     return propertiesPanel.FeelEntry({
         element,
         id: 'zenbpm-multiInstance-outputElement',
@@ -790,6 +919,107 @@ function ConditionExpressionProps(element) {
     ];
 }
 
+const TYPE = 'zenbpm:Subscription';
+const ID = 'zenbpm-messageSubscriptionCorrelationKey';
+// ─── helpers ─────────────────────────────────────────────────────────────────
+/**
+ * Return the bpmn:Message associated with the given diagram element, or
+ * undefined if the element has no message (and therefore no subscription).
+ *
+ * ZenBPM only considers the following elements to be message subscribers:
+ *   - bpmn:IntermediateCatchEvent (with bpmn:MessageEventDefinition)
+ *   - bpmn:BoundaryEvent          (with bpmn:MessageEventDefinition)
+ *   - bpmn:StartEvent             (only inside an event sub-process)
+ * ReceiveTask / EndEvent / IntermediateThrowEvent are not subscription points.
+ */
+function getMessage(element) {
+    const bo = element.businessObject;
+    if (!bo) {
+        return undefined;
+    }
+    const eventDefinitions = bo.eventDefinitions || [];
+    for (const def of eventDefinitions) {
+        if (def.$type === 'bpmn:MessageEventDefinition') {
+            return def.get('messageRef');
+        }
+    }
+    return undefined;
+}
+/**
+ * Eligibility for the subscription correlation key field, derived from how the
+ * ZenBPM engine actually consumes the value at runtime:
+ *
+ *   - bpmn:IntermediateCatchEvent / bpmn:BoundaryEvent   → yes
+ *     Engine creates a TokenMessageSubscription that uses the key for matching.
+ *
+ *   - bpmn:StartEvent inside an event sub-process only   → yes
+ *     Engine creates an InstanceMessageSubscription that uses the key.
+ *
+ *   - bpmn:StartEvent at the process root                → no
+ *     Engine creates a DefinitionMessageSubscription that ignores the key.
+ *
+ *   - bpmn:ReceiveTask                                   → no
+ *     Not supported by the ZenBPM engine (deployment error).
+ *
+ *   - bpmn:EndEvent / bpmn:IntermediateThrowEvent        → no
+ *     Throw events are job-based, not subscription-based.
+ */
+function canHaveSubscriptionCorrelationKey(element) {
+    const bo = element.businessObject;
+    if (!bo) {
+        return false;
+    }
+    if (bo.$type === 'bpmn:IntermediateCatchEvent' || bo.$type === 'bpmn:BoundaryEvent') {
+        return !!getMessage(element);
+    }
+    if (bo.$type === 'bpmn:StartEvent') {
+        const parentBo = element.parent?.businessObject;
+        return !!parentBo && parentBo.$type === 'bpmn:SubProcess' && !!parentBo.triggeredByEvent;
+    }
+    return false;
+}
+// ─── entry component ────────────────────────────────────────────────────────
+function MessageSubscriptionCorrelationKeyEntry(props) {
+    const { element } = props;
+    const commandStack = bpmnJsPropertiesPanel.useService('commandStack');
+    const bpmnFactory = bpmnJsPropertiesPanel.useService('bpmnFactory');
+    const translate = bpmnJsPropertiesPanel.useService('translate');
+    const debounce = bpmnJsPropertiesPanel.useService('debounceInput');
+    // The subscription lives on the referenced bpmn:Message, not on the
+    // diagram element itself — this matches the zeebe:Subscription behaviour.
+    // `message` can become undefined at render time if the user unlinks the
+    // message after the entry is already mounted, so guard every access.
+    const message = getMessage(element);
+    const getValue = () => message
+        ? getFeelValue(getExtensionElement(message, TYPE)?.correlationKey)
+        : '';
+    const setValue = (value) => {
+        if (!message) {
+            return;
+        }
+        updateExtensionElementProps(element, message, TYPE, { correlationKey: value }, bpmnFactory, commandStack);
+    };
+    return propertiesPanel.FeelEntry({
+        element,
+        id: ID,
+        label: translate('Subscription correlation key'),
+        feel: 'required',
+        getValue,
+        setValue,
+        debounce,
+    });
+}
+// ─── exported entry list ─────────────────────────────────────────────────────
+function CorrelationKeyProps(element) {
+    if (!canHaveSubscriptionCorrelationKey(element))
+        return [];
+    if (!getMessage(element))
+        return [];
+    return [
+        { id: ID, component: MessageSubscriptionCorrelationKeyEntry, isEdited: propertiesPanel.isFeelEntryEdited },
+    ];
+}
+
 const PROVIDER_PRIORITY = 500;
 class ZenBpmPropertiesProvider {
     static $inject = ['propertiesPanel', 'injector'];
@@ -797,6 +1027,9 @@ class ZenBpmPropertiesProvider {
     constructor(propertiesPanel, injector) {
         this._injector = injector;
         propertiesPanel.registerProvider(PROVIDER_PRIORITY, this);
+        // When the Zen Form editor is submitted, scan form field variables
+        // and automatically add them to the output mapping.
+        setupFormSaveHandler(injector);
     }
     getGroups(element) {
         return (groups) => {
@@ -877,6 +1110,24 @@ class ZenBpmPropertiesProvider {
                     });
                 }
             }
+            // ── Message subscription correlation key ────────────────────────────
+            // Appended to the standard 'message' group (created by bpmn-js-properties-panel)
+            // so it sits right under the message name, mirroring the zeebe:Subscription UX.
+            const correlationKeyEntries = CorrelationKeyProps(element);
+            if (correlationKeyEntries.length) {
+                const messageGroup = groups.find((g) => g.id === 'message');
+                if (messageGroup) {
+                    messageGroup.entries = [...messageGroup.entries, ...correlationKeyEntries];
+                }
+                else {
+                    groups.push({
+                        id: 'message',
+                        label: translate('Message'),
+                        entries: correlationKeyEntries,
+                        component: propertiesPanel.Group,
+                    });
+                }
+            }
             // ── Condition expression ─────────────────────────────────────────────
             // The standard bpmn-js-properties-panel already adds a 'conditionExpression'
             // entry to the 'condition' group. We replace the entire group so that only