feat(sdk) Variable enhancement

apps/ai-studio/src/nodes/ai-agent/index.ts

@@ -16,8 +16,10 @@ export const aiAgentPaletteItem: PaletteItem<AiAgentSchema> = {
   // Lets `{{ nodes.<id>.response }}` references resolve to a real mention instead of a "missing mention" pill.
   outputSchema: {
     type: 'default',
-    properties: {
-      response: { type: 'string', label: 'Response', description: 'The text generated by the AI model' },
+    bySourceHandle: {
+      success: {
+        response: { type: 'string', label: 'Response', description: 'The text generated by the AI model' },
+      },
     },
   },
 };

apps/demo/src/app/app.tsx

@@ -5,9 +5,11 @@ import type {
   WorkflowBuilderNodeTemplates,
   WorkflowBuilderReactFlowProps,
 } from '@workflowbuilder/sdk';
+import { SnackbarType } from '@workflowbuilder/ui';
 
 import '@workflowbuilder/sdk/style.css';
 
+import { showSnackbar } from '../../../../packages/sdk/src/utils/show-snackbar';
 import { DashedEdge } from './components/dashed-edge/dashed-edge';
 import { MultiPortNodeTemplate } from './components/multi-port-node/multi-port-node-template';
 import { demoPaletteItems } from './data/palette';
@@ -35,8 +37,19 @@ const edgeTemplates = {
   dashed: DashedEdge,
 } satisfies WorkflowBuilderEdgeTemplates;
 
-// A trigger is a workflow entry point, so it can never be a connection target.
-const isValidConnection: WorkflowBuilderIsValidConnection = ({ targetNode }) => targetNode.data.type !== 'trigger';
+const isValidConnection: WorkflowBuilderIsValidConnection = ({ targetNode }) => {
+  // A trigger is a workflow entry point, so it can never be a connection target.
+  if (targetNode.data.type === 'trigger') {
+    showSnackbar({
+      title: 'notValidConnection',
+      variant: SnackbarType.WARNING,
+    });
+
+    return false;
+  }
+
+  return true;
+};
 
 // Advanced escape hatch: forward extra ReactFlow props (SDK-owned props can't be set here).
 const reactFlowProps = {

apps/demo/src/app/data/nodes/action/action.ts

@@ -14,10 +14,15 @@ export const action: PaletteItem<ActionNodeSchema> = {
   uischema,
   outputSchema: {
     type: 'default',
-    properties: {
-      status: { type: 'string', label: 'Status', description: 'Execution status: success, failure, or skipped' },
-      result: { type: 'object', label: 'Result', description: 'The data returned by the action' },
-      errorMessage: { type: 'string', label: 'Error Message', description: 'Error details if the action failed' },
+    bySourceHandle: {
+      success: {
+        status: { type: 'string', label: 'Status', description: 'Execution status: success, failure, or skipped' },
+        // TODO: outputSchema and schema properties should support the full JsonSchema7 type imported from @jsonforms/core to build suggestions not only for objects but also for their variables.
+        result: { type: 'object', label: 'Result', description: 'The data returned by the action' },
+      },
+      error: {
+        errorMessage: { type: 'string', label: 'Error Message', description: 'Error details if the action failed' },
+      },
     },
   },
 };

apps/demo/src/app/data/nodes/action/uischema.ts

@@ -45,16 +45,16 @@ const sendEmailProperties: ActionNodeUISchema = {
       placeholder: 'manager@example.com',
     },
     {
-      type: 'Text',
+      type: 'VariableText',
       scope: scope('properties.sendEmail.properties.subject'),
       label: 'Subject',
-      placeholder: 'Type your subject here...',
+      placeholder: 'Type your subject here... Use {{ to insert variables',
     },
     {
-      type: 'TextArea',
+      type: 'VariableTextArea',
       scope: scope('properties.sendEmail.properties.body'),
       label: 'Email Body',
-      placeholder: 'Type your message here...',
+      placeholder: 'Type your message here... Use {{ to insert variables',
       minRows: 5,
     },
     {

apps/demo/src/app/data/nodes/ai-agent/ai-agent.ts

@@ -16,10 +16,12 @@ export const aiAgent: PaletteItem = {
   uischema,
   outputSchema: {
     type: 'default',
-    properties: {
-      response: { type: 'string', label: 'Response', description: 'The text generated by the AI model' },
-      tokensUsed: { type: 'number', label: 'Tokens Used', description: 'Total number of tokens consumed' },
-      model: { type: 'string', label: 'Model', description: 'The AI model that was used' },
+    bySourceHandle: {
+      success: {
+        response: { type: 'string', label: 'Response', description: 'The text generated by the AI model' },
+        tokensUsed: { type: 'number', label: 'Tokens Used', description: 'Total number of tokens consumed' },
+        model: { type: 'string', label: 'Model', description: 'The AI model that was used' },
+      },
     },
   },
 };

apps/demo/src/app/data/nodes/conditional/conditional.ts

@@ -14,12 +14,14 @@ export const conditional: PaletteItem<ConditionalNodeSchema> = {
   uischema,
   outputSchema: {
     type: 'default',
-    properties: {
-      result: { type: 'boolean', label: 'Result', description: 'Whether the condition evaluated to true or false' },
-      matchedCondition: {
-        type: 'string',
-        label: 'Matched Condition',
-        description: 'The condition expression that matched',
+    bySourceHandle: {
+      success: {
+        result: { type: 'boolean', label: 'Result', description: 'Whether the condition evaluated to true or false' },
+        matchedCondition: {
+          type: 'string',
+          label: 'Matched Condition',
+          description: 'The condition expression that matched',
+        },
       },
     },
   },

apps/demo/src/app/data/nodes/decision/decision.ts

@@ -16,9 +16,11 @@ export const decision: PaletteItem<DecisionNodeSchema> = {
   uischema,
   outputSchema: {
     type: 'default',
-    properties: {
-      selectedBranch: { type: 'string', label: 'Selected Branch', description: 'Label of the branch that was taken' },
-      branchIndex: { type: 'number', label: 'Branch Index', description: 'Zero-based index of the selected branch' },
+    bySourceHandle: {
+      every: {
+        selectedBranch: { type: 'string', label: 'Selected Branch', description: 'Label of the branch that was taken' },
+        branchIndex: { type: 'number', label: 'Branch Index', description: 'Zero-based index of the selected branch' },
+      },
     },
   },
 };

apps/demo/src/app/data/nodes/delay/delay.ts

@@ -14,9 +14,11 @@ export const delay: PaletteItem<DelayNodeSchema> = {
   uischema,
   outputSchema: {
     type: 'default',
-    properties: {
-      resumedAt: { type: 'string', label: 'Resumed At', description: 'ISO 8601 date-time when the delay ended' },
-      delayDuration: { type: 'number', label: 'Delay Duration', description: 'Actual wait time in milliseconds' },
+    bySourceHandle: {
+      success: {
+        resumedAt: { type: 'string', label: 'Resumed At', description: 'ISO 8601 date-time when the delay ended' },
+        delayDuration: { type: 'number', label: 'Delay Duration', description: 'Actual wait time in milliseconds' },
+      },
     },
   },
 };

apps/demo/src/app/data/nodes/notification/notification.ts

@@ -14,10 +14,16 @@ export const notification: PaletteItem<NotificationNodeSchema> = {
   uischema,
   outputSchema: {
     type: 'default',
-    properties: {
-      sent: { type: 'boolean', label: 'Sent', description: 'Whether the notification was sent successfully' },
-      sentAt: { type: 'string', label: 'Sent At', description: 'ISO 8601 date-time when the notification was sent' },
-      recipient: { type: 'string', label: 'Recipient', description: 'The email address the notification was sent to' },
+    bySourceHandle: {
+      success: {
+        sent: { type: 'boolean', label: 'Sent', description: 'Whether the notification was sent successfully' },
+        sentAt: { type: 'string', label: 'Sent At', description: 'ISO 8601 date-time when the notification was sent' },
+        recipient: {
+          type: 'string',
+          label: 'Recipient',
+          description: 'The email address the notification was sent to',
+        },
+      },
     },
   },
 };

apps/demo/src/app/data/nodes/trigger/trigger.ts

@@ -13,11 +13,63 @@ export const triggerNode: PaletteItem<TriggerNodeSchema> = {
   schema,
   uischema,
   outputSchema: {
-    type: 'default',
-    properties: {
-      eventType: { type: 'string', label: 'Event Type', description: 'The type of event that started the workflow' },
-      timestamp: { type: 'string', label: 'Timestamp', description: 'ISO 8601 date-time when the trigger fired' },
-      payload: { type: 'object', label: 'Payload', description: 'The raw event data received by the trigger' },
-    },
+    type: 'variant',
+    variants: [
+      {
+        variantRule: undefined,
+        bySourceHandle: {
+          every: {
+            eventType: {
+              type: 'string',
+              label: 'Event Type',
+              description: 'The type of event that started the workflow',
+            },
+            timestamp: { type: 'string', label: 'Timestamp', description: 'ISO 8601 date-time when the trigger fired' },
+          },
+        },
+      },
+      {
+        variantRule: {
+          dataPropertyName: 'type',
+          dataPropertyValue: 'timeBasedTrigger',
+        },
+        bySourceHandle: {
+          success: {
+            allDay: {
+              type: 'boolean',
+              label: 'All day event',
+              description: 'The type of event that started the workflow',
+            },
+            startDate: {
+              type: 'date',
+              label: 'Start date',
+              description: 'The date when the event was scheduled to start',
+            },
+            endDate: {
+              type: 'date',
+              label: 'End date',
+              description: 'The date when the event was scheduled to end',
+            },
+          },
+        },
+      },
+      {
+        variantRule: {
+          dataPropertyName: 'type',
+          dataPropertyValue: 'eventBasedTrigger',
+        },
+        bySourceHandle: {
+          success: {
+            typeOfEventType: {
+              type: 'string',
+              label: 'Type of event type',
+              description: 'For example: form submission, user action etc.',
+            },
+          },
+        },
+      },
+    ],
   },
 };
+
+// payload: { type: 'object', label: 'Payload', description: 'The raw event data received by the trigger' },

packages/sdk/src/features/app-bar/components/project-selection/project-selection.tsx

@@ -7,9 +7,9 @@ import { Icon } from '@workflow-builder/icons';
 
 import styles from '../../app-bar.module.css';
 
-import { openModalWorkflowSettings } from '../../../../features/variables/modals/modal-settings';
 import { useStore } from '../../../../store/store';
 import { withOptionalComponentPlugins } from '../../../plugins-core/adapters/adapter-components';
+import { openModalWorkflowSettings } from '../../../variables/modals/global/modal-settings';
 
 /**
  * Props accepted by {@link ProjectSelection}. Use this when typing a

packages/sdk/src/features/diagram/diagram.tsx

@@ -24,6 +24,7 @@ import type { WorkflowBuilderReactFlowProps } from '../../workflow-builder-root/
 import { trackFutureChange } from '../changes-tracker/stores/use-changes-tracker-store';
 import { useDeleteConfirmation } from '../modals/delete-confirmation/use-delete-confirmation';
 import { withOptionalComponentPlugins } from '../plugins-core/adapters/adapter-components';
+import useRefreshVariables from '../variables/hooks/use-refresh-variables';
 import { deleteKeyCode } from './const';
 import { SNAP_GRID, SNAP_IS_ACTIVE } from './diagram.const';
 import { TemporaryEdge } from './edges/temporary-edge/temporary-edge';
@@ -126,6 +127,8 @@ function DiagramContainerComponent({ edgeTypes = {} }: DiagramContainerProps) {
     [onDropFromPalette],
   );
 
+  useRefreshVariables();
+
   const { onConnect, onConnectStart, onConnectEnd } = useConnect();
 
   const onNodeDragStop = useCallback(() => {

packages/sdk/src/features/i18n/locales/en.ts

@@ -138,6 +138,9 @@ export const en = {
     variableNotFound: 'Variable not found.',
     removeVariableWarning: 'Deleting this variable will permanently remove its configuration.',
     removeVariableIsBlocked: 'The variable is used in the following nodes and cannot be deleted.',
+    addVariableToContinue: 'Add a variable to continue',
+    missingMentionNodePrefix: 'Missing node',
+    missingMentionNodeVariablePrefix: 'Missing variable',
   },
   loader: {
     text: 'Loading...',
@@ -181,7 +184,10 @@ export const en = {
     wrongDiagramFormat: 'Wrong diagram format',
     contentCopied: 'Content copied to clipboard',
     variablesListIsEmpty: 'The list of available variables is empty.',
+    variableNameAlreadyExists: 'A variable with this name already exists.',
+    variableWasNotFound: 'This variable was not found.',
     cantEditReadOnlyMode: 'Editing is blocked in read-only mode.',
+    notValidConnection: 'That connection is blocked.',
   },
   workflowsSettings: {
     modalTitle: 'Settings',

packages/sdk/src/features/i18n/locales/pl.ts

@@ -102,6 +102,9 @@ export const pl = {
     variableNotFound: 'Nie znaleziono zmiennej.',
     removeVariableWarning: 'Usunięcie tej zmiennej trwale usunie jej konfigurację.',
     removeVariableIsBlocked: 'Ta zmienna jest używana w następujących węzłach i nie może zostać usunięta.',
+    addVariableToContinue: 'Dodaj zmienną aby kontynuować',
+    missingMentionNodePrefix: 'Brak węzła',
+    missingMentionNodeVariablePrefix: 'Brak zmiennej',
   },
   loader: {
     text: 'Ładowanie...',
@@ -145,7 +148,10 @@ export const pl = {
     wrongDiagramFormat: 'Nieprawidłowy format diagramu',
     contentCopied: 'Treść skopiowana do schowka',
     variablesListIsEmpty: 'Lista dostępnych zmiennych jest pusta.',
+    variableNameAlreadyExists: 'Zmienna o tej nazwie już istnieje.',
+    variableWasNotFound: 'Nie znaleziono tej zmiennej.',
     cantEditReadOnlyMode: 'Edycja jest zablokowana w trybie tylko do odczytu.',
+    notValidConnection: 'To połączenie jest zablokowane.',
   },
   aiTools: {
     title: 'Narzędzia agenta AI',

packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dependencies/dependencies.tsx

@@ -4,11 +4,11 @@ import styles from './dependencies.module.css';
 
 import { FormControlWithLabel } from '../../../../../components/form/form-control-with-label/form-control-with-label';
 import { useSingleSelectedElement } from '../../../../../features/properties-bar/use-single-selected-element';
-import { conditionsToDependencies } from '../../../../../features/variables/actions/conditions';
 import { VariableText } from '../../../../../features/variables/components/variable-text/variable-text';
 import { useAvailableVariables } from '../../../../../features/variables/hooks/use-available-variables';
 import type { DynamicCondition } from '../../../../../types/controls';
 import { noop } from '../../../../../utils/noop';
+import { conditionsToDependencies } from '../../../utils/conditional-transform';
 
 type Props = {
   conditions: DynamicCondition[];
@@ -23,12 +23,13 @@ export function Dependencies({ conditions, onClick, disabled = false, hasError }
   }, [conditions]);
 
   const selection = useSingleSelectedElement();
-  const suggestionGroups = useAvailableVariables(selection?.node?.id);
+  const { suggestionGroups, totalVariables } = useAvailableVariables(selection?.node?.id);
 
   return (
     <FormControlWithLabel label="conditions.dependencies">
       <span className={styles['button']} onClick={disabled ? noop : onClick}>
         <VariableText
+          key={totalVariables}
           className={styles['list']}
           value={dependencies.join(' ')}
           onChange={noop}

packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-form-field/conditions-form-field.tsx

@@ -7,17 +7,18 @@ import { Icon } from '@workflow-builder/icons';
 
 import styles from './conditions-form-field.module.css';
 
-import { type ConditionErrors, getConditionErrors } from '../../../../../features/variables/actions/conditions';
-import { getStringType } from '../../../../../features/variables/actions/get-string-type';
 import { DynamicTypedVariableOrInput } from '../../../../../features/variables/components/dynamic-typed-variable-or-input/dynamic-typed-variable-or-input';
 import { VariableText } from '../../../../../features/variables/components/variable-text/variable-text';
 import type { VariableSuggestionGroup } from '../../../../../features/variables/components/variable-text/variable-text.types';
 import {
   type ComparisonOperator,
+  LOGICAL_OPERATOR,
   comparisonOperatorsByPrimitiveType,
 } from '../../../../../features/variables/constants';
 import type { VariableTypePrimitive } from '../../../../../node/node-output-schema';
 import type { DynamicCondition } from '../../../../../types/controls';
+import { getStringVariableTypeIfPossible } from '../../../../variables/actions/get-string-variable-type-if-possible';
+import { type ConditionErrors, getConditionErrors } from '../../../../variables/utils/form-validation/conditions';
 
 type ConditionsFormFieldProps = {
   condition: Partial<DynamicCondition>;
@@ -34,7 +35,7 @@ const getTypeOptions = (
   xType: VariableTypePrimitive;
   comparisonsOperators: ComparisonOperator[];
 } => {
-  const xType = getStringType(value);
+  const xType = getStringVariableTypeIfPossible(value);
   const comparisonsOperators: ComparisonOperator[] = comparisonOperatorsByPrimitiveType[xType] || [];
 
   return {
@@ -78,11 +79,11 @@ export function ConditionsFormField(props: ConditionsFormFieldProps) {
           <SegmentPicker
             className={styles['segment-picker']}
             size="xx-small"
-            value={condition.logicalOperator || 'AND'}
+            value={condition.logicalOperator || LOGICAL_OPERATOR.AND}
             onChange={(_, value) => handleChange('logicalOperator', value)}
           >
-            <SegmentPicker.Item value="AND">{t('conditions.compare.all')}</SegmentPicker.Item>
-            <SegmentPicker.Item value="OR">{t('conditions.compare.one')}</SegmentPicker.Item>
+            <SegmentPicker.Item value={LOGICAL_OPERATOR.AND}>{t('conditions.compare.all')}</SegmentPicker.Item>
+            <SegmentPicker.Item value={LOGICAL_OPERATOR.OR}>{t('conditions.compare.one')}</SegmentPicker.Item>
           </SegmentPicker>
         </div>
       )}