Add output action

src/actions.ts

@@ -23,6 +23,7 @@ import AskForInput from "~/actions/ask-for-input";
 import SplitText from "~/actions/split-text";
 import GetFromList from "~/actions/get-from-list";
 import SetName from "~/actions/set-name";
+import Output from "~/actions/output";
 
 interface ActionDefinitions {
     [key: string]: ActionDefinition
@@ -67,6 +68,7 @@ export let actions: ActionDefinitions = {
     'delay': Wait,
     'exit': Stop,
     'setitemname': SetName,
+    'output': Output,
 };
 
 export function actionText(value: string): HTMLElement {

src/actions/output.ts

@@ -0,0 +1,39 @@
+import {renderActionHeader} from "~/render";
+import {actions} from "~/actions";
+import {renderValue} from "~/value";
+
+interface ShowAlertParameters {
+    WFOutput: string | object
+    WFNoOutputSurfaceBehavior: string
+    WFResponse: string | object
+}
+
+export default {
+    title: "Stop and output",
+    icon: "square_arrow_left",
+    background: "#007aff",
+    render: (container: HTMLElement, params: ShowAlertParameters) => {
+        container.classList.add('sp-output-action');
+        const action = renderActionHeader(actions['output'], renderValue(params['WFOutput'], 'Output'));
+
+        const outputSurfaceBehavior = document.createElement('div');
+        outputSurfaceBehavior.innerText = 'If there\'s nowhere to output:';
+        outputSurfaceBehavior.className = 'sp-output-surface-behavior';
+        action.appendChild(outputSurfaceBehavior);
+
+        const flexbox = document.createElement('div');
+        flexbox.style.display = 'flex';
+        flexbox.style.gap = '10px';
+        flexbox.style.alignItems = 'center';
+        flexbox.style.margin = '0 16px';
+        flexbox.style.height = '3rem';
+
+        flexbox.appendChild(renderValue(params['WFNoOutputSurfaceBehavior'] ?? 'Do Nothing', 'Behavior'));
+        if (params['WFResponse']) {
+            flexbox.appendChild(renderValue(params['WFResponse'] ?? null, 'Result'));
+        }
+        action.appendChild(flexbox);
+
+        return action;
+    }
+}

src/style.css

@@ -185,6 +185,14 @@
     color: #ffbf00;
 }
 
+.sp-container .sp-output-action .sp-output-surface-behavior {
+    text-align: left;
+    font-weight: bold;
+    color: #808080;
+    margin: 4px 16px;
+    font-size: 0.9rem;
+}
+
 .sp-container .card.sp-linked-action:before {
     content: " ";
     background: #9a9ca4;
@@ -222,6 +230,10 @@
     background: #eaf1ff !important;
 }
 
+.sp-container .sp-output-action .sp-action-icon i {
+    transform: rotate(180deg);
+}
+
 .sp-container .item-title {
     font-size: 0.9rem;
 }