@nyaruka/temba-components 0.121.1 → 0.121.4

package/out-tsc/src/flow/Editor.js

@@ -0,0 +1,180 @@
+import { __decorate } from "tslib";
+import { html } from 'lit-html';
+import { css, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import { getStore } from '../store/Store';
+import { fromStore, zustand } from '../store/AppState';
+import { RapidElement } from '../RapidElement';
+import { Plumber } from './Plumber';
+import { EditorNode } from './EditorNode';
+export class Editor extends RapidElement {
+    // Unfortunately, jsplumb requires that we be in light DOM
+    createRenderRoot() {
+        return this;
+    }
+    static get styles() {
+        return css `
+      #editor {
+        overflow: scroll;
+        flex: 1;
+      }
+
+      #grid {
+        position: relative;
+        background-color: #f9f9f9;
+        background-position: 13px 13px;
+        background-image: linear-gradient(
+            0deg,
+            transparent 24%,
+            rgba(61, 177, 255, 0.15) 25%,
+            rgba(61, 177, 255, 0.15) 26%,
+            transparent 27%,
+            transparent 74%,
+            rgba(61, 177, 255, 0.15) 75%,
+            rgba(61, 177, 255, 0.15) 76%,
+            transparent 77%,
+            transparent
+          ),
+          linear-gradient(
+            90deg,
+            transparent 24%,
+            rgba(61, 177, 255, 0.15) 25%,
+            rgba(61, 177, 255, 0.15) 26%,
+            transparent 27%,
+            transparent 74%,
+            rgba(61, 177, 255, 0.15) 75%,
+            rgba(61, 177, 255, 0.15) 76%,
+            transparent 77%,
+            transparent
+          );
+        background-size: 40px 40px;
+        box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.05);
+        border-top: 1px solid #e0e0e0;
+        display: inline-block;
+      }
+
+      #canvas {
+        position: relative;
+        padding: 20px;
+        margin: 20px;
+      }
+
+      body .jtk-endpoint {
+        width: initial;
+        height: initial;
+      }
+
+      .jtk-endpoint {
+        z-index: 1;
+      }
+
+      .plumb-source {
+        z-index: 300;
+        border: 0px solid var(--color-connectors);
+      }
+
+      .plumb-source.connected {
+        box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.1);
+        border-radius: 50%;
+      }
+
+      .plumb-source circle {
+        fill: tomato;
+      }
+
+      .plumb-source.connected circle {
+        fill: #fff;
+      }
+
+      .plumb-source svg {
+        fill: var(--color-connectors) !important;
+        stroke: var(--color-connectors);
+      }
+
+      .plumb-target {
+        margin-top: -6px;
+        z-index: 200;
+        opacity: 0;
+        cursor: pointer;
+      }
+
+      body .plumb-connector path {
+        stroke: var(--color-connectors) !important;
+        stroke-width: 3px;
+      }
+
+      body .plumb-connector .plumb-arrow {
+        fill: var(--color-connectors);
+        stroke: var(--color-connectors);
+        stroke-width: 0px;
+        margin-top: 6px;
+      }
+
+      body svg.jtk-connector.jtk-hover path {
+        stroke: var(--color-success) !important;
+        stroke-width: 3px;
+      }
+
+      body .plumb-connector.jtk-hover .plumb-arrow {
+        fill: var(--color-success) !important;
+        stroke-width: 0px;
+      }
+    `;
+    }
+    constructor() {
+        super();
+    }
+    firstUpdated(changes) {
+        super.firstUpdated(changes);
+        this.plumber = new Plumber(this.querySelector('#canvas'));
+        if (changes.has('flow')) {
+            getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
+        }
+    }
+    updated(changes) {
+        super.updated(changes);
+        if (changes.has('canvasSize')) {
+            console.log('Setting canvas size', this.canvasSize);
+        }
+    }
+    render() {
+        // we have to embed our own style since we are in light DOM
+        const style = html `<style>
+      ${unsafeCSS(Editor.styles.cssText)}
+      ${unsafeCSS(EditorNode.styles.cssText)}
+    </style>`;
+        return html `${style}
+      <div id="editor">
+        <div
+          id="grid"
+          style="width:${this.canvasSize.width}px; height:${this.canvasSize
+            .height}px"
+        >
+          <div id="canvas">
+            ${this.definition
+            ? this.definition.nodes.map((node) => {
+                return html `<temba-flow-node
+                    .plumber=${this.plumber}
+                    .node=${node}
+                    .ui=${this.definition._ui.nodes[node.uuid]}
+                  ></temba-flow-node>`;
+            })
+            : html `<temba-loading></temba-loading>`}
+          </div>
+        </div>
+      </div>`;
+    }
+}
+__decorate([
+    property({ type: String })
+], Editor.prototype, "flow", void 0);
+__decorate([
+    property({ type: String })
+], Editor.prototype, "version", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.flowDefinition)
+], Editor.prototype, "definition", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.canvasSize)
+], Editor.prototype, "canvasSize", void 0);
+//# sourceMappingURL=Editor.js.map

package/out-tsc/src/flow/Editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.js","sourceRoot":"","sources":["../../../src/flow/Editor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,GAAG,EAAoB,SAAS,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAY,SAAS,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,OAAO,MAAO,SAAQ,YAAY;IACtC,0DAA0D;IAC1D,gBAAgB;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAiBD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0GT,CAAC;IACJ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;IACV,CAAC;IAES,YAAY,CACpB,OAA0D;QAE1D,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;QAC1D,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC,mBAAmB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACtE,CAAC;IACH,CAAC;IAES,OAAO,CACf,OAA0D;QAE1D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAEM,MAAM;QACX,2DAA2D;QAC3D,MAAM,KAAK,GAAG,IAAI,CAAA;QACd,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;QAChC,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC;aAC/B,CAAC;QAEV,OAAO,IAAI,CAAA,GAAG,KAAK;;;;yBAIE,IAAI,CAAC,UAAU,CAAC,KAAK,cAAc,IAAI,CAAC,UAAU;aAC9D,MAAM;;;cAGL,IAAI,CAAC,UAAU;YACf,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBACjC,OAAO,IAAI,CAAA;+BACE,IAAI,CAAC,OAAO;4BACf,IAAI;0BACN,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;sCACxB,CAAC;YACvB,CAAC,CAAC;YACJ,CAAC,CAAC,IAAI,CAAA,iCAAiC;;;aAGxC,CAAC;IACZ,CAAC;CACF;AA5KQ;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACP;AAGb;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACJ;AAGf;IADP,SAAS,CAAC,OAAO,EAAE,CAAC,KAAe,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC;0CAC1B;AAG5B;IADP,SAAS,CAAC,OAAO,EAAE,CAAC,KAAe,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC;0CACH","sourcesContent":["import { html, TemplateResult } from 'lit-html';\nimport { css, PropertyValueMap, unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { FlowDefinition } from '../store/flow-definition';\nimport { getStore } from '../store/Store';\nimport { AppState, fromStore, zustand } from '../store/AppState';\nimport { RapidElement } from '../RapidElement';\n\nimport { Plumber } from './Plumber';\nimport { EditorNode } from './EditorNode';\n\nexport class Editor extends RapidElement {\n  // Unfortunately, jsplumb requires that we be in light DOM\n  createRenderRoot() {\n    return this;\n  }\n\n  // This is the master plumber\n  private plumber: Plumber;\n\n  @property({ type: String })\n  public flow: string;\n\n  @property({ type: String })\n  public version: string;\n\n  @fromStore(zustand, (state: AppState) => state.flowDefinition)\n  private definition!: FlowDefinition;\n\n  @fromStore(zustand, (state: AppState) => state.canvasSize)\n  private canvasSize!: { width: number; height: number };\n\n  static get styles() {\n    return css`\n      #editor {\n        overflow: scroll;\n        flex: 1;\n      }\n\n      #grid {\n        position: relative;\n        background-color: #f9f9f9;\n        background-position: 13px 13px;\n        background-image: linear-gradient(\n            0deg,\n            transparent 24%,\n            rgba(61, 177, 255, 0.15) 25%,\n            rgba(61, 177, 255, 0.15) 26%,\n            transparent 27%,\n            transparent 74%,\n            rgba(61, 177, 255, 0.15) 75%,\n            rgba(61, 177, 255, 0.15) 76%,\n            transparent 77%,\n            transparent\n          ),\n          linear-gradient(\n            90deg,\n            transparent 24%,\n            rgba(61, 177, 255, 0.15) 25%,\n            rgba(61, 177, 255, 0.15) 26%,\n            transparent 27%,\n            transparent 74%,\n            rgba(61, 177, 255, 0.15) 75%,\n            rgba(61, 177, 255, 0.15) 76%,\n            transparent 77%,\n            transparent\n          );\n        background-size: 40px 40px;\n        box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.05);\n        border-top: 1px solid #e0e0e0;\n        display: inline-block;\n      }\n\n      #canvas {\n        position: relative;\n        padding: 20px;\n        margin: 20px;\n      }\n\n      body .jtk-endpoint {\n        width: initial;\n        height: initial;\n      }\n\n      .jtk-endpoint {\n        z-index: 1;\n      }\n\n      .plumb-source {\n        z-index: 300;\n        border: 0px solid var(--color-connectors);\n      }\n\n      .plumb-source.connected {\n        box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.1);\n        border-radius: 50%;\n      }\n\n      .plumb-source circle {\n        fill: tomato;\n      }\n\n      .plumb-source.connected circle {\n        fill: #fff;\n      }\n\n      .plumb-source svg {\n        fill: var(--color-connectors) !important;\n        stroke: var(--color-connectors);\n      }\n\n      .plumb-target {\n        margin-top: -6px;\n        z-index: 200;\n        opacity: 0;\n        cursor: pointer;\n      }\n\n      body .plumb-connector path {\n        stroke: var(--color-connectors) !important;\n        stroke-width: 3px;\n      }\n\n      body .plumb-connector .plumb-arrow {\n        fill: var(--color-connectors);\n        stroke: var(--color-connectors);\n        stroke-width: 0px;\n        margin-top: 6px;\n      }\n\n      body svg.jtk-connector.jtk-hover path {\n        stroke: var(--color-success) !important;\n        stroke-width: 3px;\n      }\n\n      body .plumb-connector.jtk-hover .plumb-arrow {\n        fill: var(--color-success) !important;\n        stroke-width: 0px;\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n    this.plumber = new Plumber(this.querySelector('#canvas'));\n    if (changes.has('flow')) {\n      getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);\n    }\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('canvasSize')) {\n      console.log('Setting canvas size', this.canvasSize);\n    }\n  }\n\n  public render(): TemplateResult {\n    // we have to embed our own style since we are in light DOM\n    const style = html`<style>\n      ${unsafeCSS(Editor.styles.cssText)}\n      ${unsafeCSS(EditorNode.styles.cssText)}\n    </style>`;\n\n    return html`${style}\n      <div id=\"editor\">\n        <div\n          id=\"grid\"\n          style=\"width:${this.canvasSize.width}px; height:${this.canvasSize\n            .height}px\"\n        >\n          <div id=\"canvas\">\n            ${this.definition\n              ? this.definition.nodes.map((node) => {\n                  return html`<temba-flow-node\n                    .plumber=${this.plumber}\n                    .node=${node}\n                    .ui=${this.definition._ui.nodes[node.uuid]}\n                  ></temba-flow-node>`;\n                })\n              : html`<temba-loading></temba-loading>`}\n          </div>\n        </div>\n      </div>`;\n  }\n}\n"]}

package/out-tsc/src/flow/EditorNode.js

@@ -0,0 +1,199 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { EDITOR_CONFIG } from './config';
+import { state } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
+import { getClasses } from '../utils';
+import { getStore } from '../store/Store';
+export class EditorNode extends RapidElement {
+    createRenderRoot() {
+        return this;
+    }
+    static get styles() {
+        return css `
+      .node {
+        position: absolute;
+        background-color: #fff;
+        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+        min-width: 200px;
+        border-radius: calc(var(--curvature) * 1.5);
+        overflow: hidden;
+      }
+
+      .action {
+        max-width: 200px;
+      }
+
+      .action .body {
+        padding: 1em;
+      }
+
+      .action .title,
+      .router .title {
+        color: #fff;
+        padding: 5px 1px;
+        text-align: center;
+        font-size: 1em;
+        font-weight: normal;
+      }
+
+      .quick-replies {
+        margin-top: 0.5em;
+      }
+
+      .quick-reply {
+        background-color: #f0f0f0;
+        border: 1px solid #e0e0e0;
+        border-radius: calc(var(--curvature) * 1.5);
+        padding: 0.2em 1em;
+        display: inline-block;
+        font-size: 0.8em;
+        margin: 0.2em;
+      }
+
+      .categories {
+        display: flex;
+        flex-direction: row;
+
+      }
+
+      .category {
+        margin:-1px -0.5px;
+        border: 1px solid #f3f3f3;
+        padding: 0.75em;
+        flex-grow:1;
+        text-align: center;
+      }
+
+      .action-exits {
+        padding-bottom: 0.75em;
+        margin-top: -0.75em;
+      }
+
+      .category .title {
+        font-weight: normal;
+        font-size: 1em;
+      }
+
+      .router .body {
+        padding: 0.75em;
+      }
+
+      .result-name {
+        font-weight: bold;
+        display: inline-block;
+      }
+      
+      .exit {
+        padding-top: 10px;
+        margin-bottom: -10px;
+      }
+  }`;
+    }
+    updated(changes) {
+        super.updated(changes);
+        if (changes.has('node')) {
+            this.plumber.makeTarget(this.node.uuid);
+            // our node was changed, see if we have new destinations
+            for (const exit of this.node.exits) {
+                if (!exit.destination_uuid) {
+                    this.plumber.makeSource(exit.uuid);
+                }
+                else {
+                    this.plumber.connectIds(exit.uuid, exit.destination_uuid);
+                }
+            }
+            const ele = this.querySelector('.node');
+            const rect = ele.getBoundingClientRect();
+            getStore()
+                .getState()
+                .expandCanvas(this.ui.position.left + rect.width, this.ui.position.top + rect.height);
+        }
+    }
+    renderTitle(config) {
+        return html `<div class="title" style="background:${config.color}">
+      ${config.name}
+    </div>`;
+    }
+    renderAction(node, action) {
+        const config = EDITOR_CONFIG[action.type];
+        if (config) {
+            return html `<div class="action ${action.type}">
+        ${this.renderTitle(config)}
+        <div class="body">
+          ${config.render
+                ? config.render(node, action)
+                : html `<pre>${action.type}</pre>`}
+        </div>
+      </div>`;
+        }
+        return html `<div>${action.type}</div>`;
+    }
+    renderRouter(router, ui) {
+        const config = EDITOR_CONFIG[ui.type];
+        if (config) {
+            return html `<div class="router">
+        ${this.renderTitle(config)}
+        ${router.result_name
+                ? html `<div class="body">
+              Save as
+              <div class="result-name">${router.result_name}</div>
+            </div>`
+                : null}
+      </div>`;
+        }
+    }
+    renderCategories(node) {
+        if (!node.router || !node.router.categories) {
+            return null;
+        }
+        const categories = node.router.categories.map((category) => {
+            const exit = node.exits.find((exit) => exit.uuid == category.exit_uuid);
+            return html `<div class="category">
+        <div class="title">${category.name}</div>
+        ${this.renderExit(exit)}
+      </div>`;
+        });
+        return html `<div class="categories">${categories}</div>`;
+    }
+    renderExit(exit) {
+        return html `<div
+      id="${exit.uuid}"
+      class=${getClasses({
+            exit: true,
+            connected: !!exit.destination_uuid
+        })}
+    ></div>`;
+    }
+    render() {
+        return html `
+      <div
+        id="${this.node.uuid}"
+        class="node"
+        style="left:${this.ui.position.left}px;top:${this.ui.position.top}px"
+      >
+        ${this.node.actions.map((actionSpec) => {
+            return this.renderAction(this.node, actionSpec);
+        })}
+        ${this.node.router
+            ? html ` ${this.renderRouter(this.node.router, this.ui)}
+            ${this.renderCategories(this.node)}`
+            : html `<div class="action-exits">
+              ${this.node.exits.map((exit) => {
+                return this.renderExit(exit);
+            })}
+            </div>`}
+      </div>
+    `;
+    }
+}
+__decorate([
+    state()
+], EditorNode.prototype, "plumber", void 0);
+__decorate([
+    state()
+], EditorNode.prototype, "node", void 0);
+__decorate([
+    state()
+], EditorNode.prototype, "ui", void 0);
+//# sourceMappingURL=EditorNode.js.map

package/out-tsc/src/flow/EditorNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorNode.js","sourceRoot":"","sources":["../../../src/flow/EditorNode.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { EDITOR_CONFIG, UIConfig } from './config';\nimport { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';\nimport { state } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Plumber } from './Plumber';\nimport { getStore } from '../store/Store';\n\nexport class EditorNode extends RapidElement {\n  createRenderRoot() {\n    return this;\n  }\n\n  @state()\n  private plumber: Plumber;\n\n  @state()\n  private node: Node;\n\n  @state()\n  private ui: NodeUI;\n\n  static get styles() {\n    return css`\n      .node {\n        position: absolute;\n        background-color: #fff;\n        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n        min-width: 200px;\n        border-radius: calc(var(--curvature) * 1.5);\n        overflow: hidden;\n      }\n\n      .action {\n        max-width: 200px;\n      }\n\n      .action .body {\n        padding: 1em;\n      }\n\n      .action .title,\n      .router .title {\n        color: #fff;\n        padding: 5px 1px;\n        text-align: center;\n        font-size: 1em;\n        font-weight: normal;\n      }\n\n      .quick-replies {\n        margin-top: 0.5em;\n      }\n\n      .quick-reply {\n        background-color: #f0f0f0;\n        border: 1px solid #e0e0e0;\n        border-radius: calc(var(--curvature) * 1.5);\n        padding: 0.2em 1em;\n        display: inline-block;\n        font-size: 0.8em;\n        margin: 0.2em;\n      }\n\n      .categories {\n        display: flex;\n        flex-direction: row;\n\n      }\n\n      .category {\n        margin:-1px -0.5px;\n        border: 1px solid #f3f3f3;\n        padding: 0.75em;\n        flex-grow:1;\n        text-align: center;\n      }\n\n      .action-exits {\n        padding-bottom: 0.75em;\n        margin-top: -0.75em;\n      }\n\n      .category .title {\n        font-weight: normal;\n        font-size: 1em;\n      }\n\n      .router .body {\n        padding: 0.75em;\n      }\n\n      .result-name {\n        font-weight: bold;\n        display: inline-block;\n      }\n      \n      .exit {\n        padding-top: 10px;\n        margin-bottom: -10px;\n      }\n  }`;\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('node')) {\n      this.plumber.makeTarget(this.node.uuid);\n\n      // our node was changed, see if we have new destinations\n      for (const exit of this.node.exits) {\n        if (!exit.destination_uuid) {\n          this.plumber.makeSource(exit.uuid);\n        } else {\n          this.plumber.connectIds(exit.uuid, exit.destination_uuid);\n        }\n      }\n\n      const ele = this.querySelector('.node');\n      const rect = ele.getBoundingClientRect();\n\n      getStore()\n        .getState()\n        .expandCanvas(\n          this.ui.position.left + rect.width,\n          this.ui.position.top + rect.height\n        );\n    }\n  }\n\n  private renderTitle(config: UIConfig) {\n    return html`<div class=\"title\" style=\"background:${config.color}\">\n      ${config.name}\n    </div>`;\n  }\n\n  private renderAction(node: Node, action: Action) {\n    const config = EDITOR_CONFIG[action.type];\n\n    if (config) {\n      return html`<div class=\"action ${action.type}\">\n        ${this.renderTitle(config)}\n        <div class=\"body\">\n          ${config.render\n            ? config.render(node, action)\n            : html`<pre>${action.type}</pre>`}\n        </div>\n      </div>`;\n    }\n    return html`<div>${action.type}</div>`;\n  }\n\n  private renderRouter(router: Router, ui: NodeUI) {\n    const config = EDITOR_CONFIG[ui.type];\n    if (config) {\n      return html`<div class=\"router\">\n        ${this.renderTitle(config)}\n        ${router.result_name\n          ? html`<div class=\"body\">\n              Save as\n              <div class=\"result-name\">${router.result_name}</div>\n            </div>`\n          : null}\n      </div>`;\n    }\n  }\n\n  private renderCategories(node: Node) {\n    if (!node.router || !node.router.categories) {\n      return null;\n    }\n    const categories = node.router.categories.map((category) => {\n      const exit = node.exits.find(\n        (exit: Exit) => exit.uuid == category.exit_uuid\n      );\n\n      return html`<div class=\"category\">\n        <div class=\"title\">${category.name}</div>\n        ${this.renderExit(exit)}\n      </div>`;\n    });\n\n    return html`<div class=\"categories\">${categories}</div>`;\n  }\n\n  private renderExit(exit: Exit): TemplateResult {\n    return html`<div\n      id=\"${exit.uuid}\"\n      class=${getClasses({\n        exit: true,\n        connected: !!exit.destination_uuid\n      })}\n    ></div>`;\n  }\n\n  public render() {\n    return html`\n      <div\n        id=\"${this.node.uuid}\"\n        class=\"node\"\n        style=\"left:${this.ui.position.left}px;top:${this.ui.position.top}px\"\n      >\n        ${this.node.actions.map((actionSpec) => {\n          return this.renderAction(this.node, actionSpec);\n        })}\n        ${this.node.router\n          ? html` ${this.renderRouter(this.node.router, this.ui)}\n            ${this.renderCategories(this.node)}`\n          : html`<div class=\"action-exits\">\n              ${this.node.exits.map((exit) => {\n                return this.renderExit(exit);\n              })}\n            </div>`}\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/flow/Plumber.js

@@ -0,0 +1,119 @@
+import { DotEndpoint, FlowchartConnector, newInstance, ready, RectangleEndpoint } from '@jsplumb/browser-ui';
+export const SOURCE_DEFAULTS = {
+    endpoint: {
+        type: DotEndpoint.type,
+        options: {
+            radius: 6,
+            connectedClass: 'plumb-connected',
+            cssClass: 'plumb-source',
+            hoverClass: 'plumb-source-hover'
+        }
+    },
+    anchors: ['Bottom', 'Continuous'],
+    maxConnections: 1,
+    dragAllowedWhenFull: false,
+    deleteEndpointsOnEmpty: true,
+    isSource: true
+};
+export const TARGET_DEFAULTS = {
+    endpoint: {
+        type: RectangleEndpoint.type,
+        options: {
+            width: 23,
+            height: 23,
+            cssClass: 'plumb-target',
+            hoverClass: 'plumb-target-hover'
+        }
+    },
+    anchor: {
+        type: 'Continuous',
+        options: {
+            faces: ['top', 'left', 'right'],
+            cssClass: 'continuos plumb-target-anchor'
+        }
+    },
+    dragAllowedWhenFull: false,
+    deleteEndpointsOnEmpty: true,
+    isTarget: true
+};
+export class Plumber {
+    constructor(canvas) {
+        this.jsPlumb = null;
+        this.pendingConnections = [];
+        this.connectionWait = null;
+        ready(() => {
+            this.jsPlumb = newInstance({
+                container: canvas
+            });
+        });
+    }
+    makeTarget(uuid) {
+        const element = document.getElementById(uuid);
+        this.jsPlumb.addEndpoint(element, TARGET_DEFAULTS);
+    }
+    makeSource(uuid) {
+        const element = document.getElementById(uuid);
+        this.jsPlumb.addEndpoint(element, SOURCE_DEFAULTS);
+    }
+    // we'll process our pending connections, but we want to debounce this
+    processPendingConnections() {
+        // if we have a pending connection wait, clear it
+        if (this.connectionWait) {
+            clearTimeout(this.connectionWait);
+            this.connectionWait = null;
+        }
+        // debounce the connection processing
+        this.connectionWait = setTimeout(() => {
+            this.jsPlumb.batch(() => {
+                this.pendingConnections.forEach((connection) => {
+                    const { fromId, toId } = connection;
+                    const fromElement = document.getElementById(fromId);
+                    const toElement = document.getElementById(toId);
+                    const source = this.jsPlumb.addEndpoint(fromElement, {
+                        ...SOURCE_DEFAULTS,
+                        endpoint: {
+                            ...SOURCE_DEFAULTS.endpoint,
+                            options: {
+                                ...SOURCE_DEFAULTS.endpoint.options,
+                                cssClass: 'plumb-source connected'
+                            }
+                        }
+                    });
+                    const target = this.jsPlumb.addEndpoint(toElement, TARGET_DEFAULTS);
+                    this.jsPlumb.connect({
+                        source,
+                        target,
+                        connector: {
+                            type: FlowchartConnector.type,
+                            options: {
+                                stub: 12,
+                                midpoint: 0.75,
+                                alwaysRespectStubs: false,
+                                gap: [0, 5],
+                                cornerRadius: 3,
+                                cssClass: 'plumb-connector'
+                            }
+                        },
+                        overlays: [
+                            {
+                                type: 'PlainArrow',
+                                options: {
+                                    width: 13,
+                                    length: 13,
+                                    location: 0.999,
+                                    cssClass: 'plumb-arrow'
+                                }
+                            }
+                        ]
+                    });
+                });
+                this.pendingConnections = [];
+            });
+        }, 50);
+    }
+    connectIds(fromId, toId) {
+        this.pendingConnections.push({ fromId, toId });
+        this.processPendingConnections();
+    }
+}
+//# sourceMappingURL=Plumber.js.map

package/out-tsc/src/flow/Plumber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Plumber.js","sourceRoot":"","sources":["../../../src/flow/Plumber.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  DotEndpoint,\n  FlowchartConnector,\n  newInstance,\n  ready,\n  RectangleEndpoint\n} from '@jsplumb/browser-ui';\n\nexport const SOURCE_DEFAULTS = {\n  endpoint: {\n    type: DotEndpoint.type,\n    options: {\n      radius: 6,\n      connectedClass: 'plumb-connected',\n      cssClass: 'plumb-source',\n      hoverClass: 'plumb-source-hover'\n    }\n  },\n  anchors: ['Bottom', 'Continuous'],\n  maxConnections: 1,\n  dragAllowedWhenFull: false,\n  deleteEndpointsOnEmpty: true,\n  isSource: true\n};\n\nexport const TARGET_DEFAULTS = {\n  endpoint: {\n    type: RectangleEndpoint.type,\n    options: {\n      width: 23,\n      height: 23,\n      cssClass: 'plumb-target',\n      hoverClass: 'plumb-target-hover'\n    }\n  },\n  anchor: {\n    type: 'Continuous',\n    options: {\n      faces: ['top', 'left', 'right'],\n      cssClass: 'continuos plumb-target-anchor'\n    }\n  },\n  dragAllowedWhenFull: false,\n  deleteEndpointsOnEmpty: true,\n  isTarget: true\n};\n\nexport class Plumber {\n  private jsPlumb = null;\n  private pendingConnections = [];\n\n  constructor(canvas: HTMLElement) {\n    ready(() => {\n      this.jsPlumb = newInstance({\n        container: canvas\n      });\n    });\n  }\n\n  public makeTarget(uuid: string) {\n    const element = document.getElementById(uuid);\n    this.jsPlumb.addEndpoint(element, TARGET_DEFAULTS);\n  }\n\n  public makeSource(uuid: string) {\n    const element = document.getElementById(uuid);\n    this.jsPlumb.addEndpoint(element, SOURCE_DEFAULTS);\n  }\n\n  private connectionWait = null;\n\n  // we'll process our pending connections, but we want to debounce this\n  public processPendingConnections() {\n    // if we have a pending connection wait, clear it\n    if (this.connectionWait) {\n      clearTimeout(this.connectionWait);\n      this.connectionWait = null;\n    }\n\n    // debounce the connection processing\n    this.connectionWait = setTimeout(() => {\n      this.jsPlumb.batch(() => {\n        this.pendingConnections.forEach((connection) => {\n          const { fromId, toId } = connection;\n          const fromElement = document.getElementById(fromId);\n          const toElement = document.getElementById(toId);\n\n          const source = this.jsPlumb.addEndpoint(fromElement, {\n            ...SOURCE_DEFAULTS,\n            endpoint: {\n              ...SOURCE_DEFAULTS.endpoint,\n              options: {\n                ...SOURCE_DEFAULTS.endpoint.options,\n                cssClass: 'plumb-source connected'\n              }\n            }\n          });\n          const target = this.jsPlumb.addEndpoint(toElement, TARGET_DEFAULTS);\n          this.jsPlumb.connect({\n            source,\n            target,\n            connector: {\n              type: FlowchartConnector.type,\n              options: {\n                stub: 12,\n                midpoint: 0.75,\n                alwaysRespectStubs: false,\n                gap: [0, 5],\n                cornerRadius: 3,\n                cssClass: 'plumb-connector'\n              }\n            },\n            overlays: [\n              {\n                type: 'PlainArrow',\n                options: {\n                  width: 13,\n                  length: 13,\n                  location: 0.999,\n                  cssClass: 'plumb-arrow'\n                }\n              }\n            ]\n          });\n        });\n        this.pendingConnections = [];\n      });\n    }, 50);\n  }\n\n  public connectIds(fromId: string, toId: string) {\n    this.pendingConnections.push({ fromId, toId });\n    this.processPendingConnections();\n  }\n}\n"]}

package/out-tsc/src/flow/config.js

@@ -0,0 +1,76 @@
+import { renderAddToGroups, renderCallWebhook, renderSendMsg, renderSetContactName, renderSetRunResult } from './render';
+export const EDITOR_CONFIG = {
+    add_input_labels: {
+        name: 'Add Labels',
+        color: '#01c1af'
+    },
+    add_contact_urn: {
+        name: 'Add Contact URN',
+        color: '#01c1af'
+    },
+    set_contact_field: {
+        name: 'Update Contact Field',
+        color: '#01c1af'
+    },
+    send_broadcast: {
+        name: 'Send Broadcast',
+        color: '#8e5ea7;'
+    },
+    set_run_result: {
+        name: 'Save Flow Result',
+        color: '#1a777c',
+        render: renderSetRunResult
+    },
+    send_msg: {
+        name: 'Send Message',
+        color: '#3498db',
+        render: renderSendMsg
+    },
+    send_email: {
+        name: 'Send Email',
+        color: '#8e5ea7'
+    },
+    start_session: { name: 'Start Somebody Else', color: '#df419f' },
+    call_webhook: {
+        name: 'Call Webhook',
+        color: '#e68628',
+        render: renderCallWebhook
+    },
+    call_llm: {
+        name: 'Call AI',
+        color: '#e68628'
+    },
+    transfer_airtime: {
+        name: 'Send Airtime',
+        color: '#e68628'
+    },
+    wait_for_response: { name: 'Wait for Response', color: '#4d7dad' },
+    split_by_expression: { name: 'Split by Expression', color: '#aaaaaa' },
+    split_by_contact_field: {
+        name: 'Split by <Contact Field Name>',
+        color: '#aaaaaa'
+    },
+    set_contact_name: {
+        name: 'Update Contact',
+        color: '#01c1af',
+        render: renderSetContactName
+    },
+    add_contact_groups: {
+        name: 'Add to Group',
+        color: '#309c42',
+        render: renderAddToGroups
+    },
+    remove_contact_groups: {
+        name: 'Remove from Group',
+        color: '#666'
+    },
+    request_optin: {
+        name: 'Request Opt-in',
+        color: '#3498db'
+    },
+    split_by_run_result: {
+        name: 'Split by Flow Result',
+        color: '#aaaaaa'
+    }
+};
+//# sourceMappingURL=config.js.map

package/out-tsc/src/flow/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../src/flow/config.ts"],"names":[],"mappings":"AACA,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,UAAU,CAAC;AAQlB,MAAM,CAAC,MAAM,aAAa,GAEtB;IACF,gBAAgB,EAAE;QAChB,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,SAAS;KACjB;IACD,eAAe,EAAE;QACf,IAAI,EAAE,iBAAiB;QACvB,KAAK,EAAE,SAAS;KACjB;IACD,iBAAiB,EAAE;QACjB,IAAI,EAAE,sBAAsB;QAC5B,KAAK,EAAE,SAAS;KACjB;IACD,cAAc,EAAE;QACd,IAAI,EAAE,gBAAgB;QACtB,KAAK,EAAE,UAAU;KAClB;IACD,cAAc,EAAE;QACd,IAAI,EAAE,kBAAkB;QACxB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,kBAAkB;KAC3B;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,aAAa;KACtB;IACD,UAAU,EAAE;QACV,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,SAAS;KACjB;IACD,aAAa,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE,KAAK,EAAE,SAAS,EAAE;IAChE,YAAY,EAAE;QACZ,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,iBAAiB;KAC1B;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;KACjB;IACD,gBAAgB,EAAE;QAChB,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,SAAS;KACjB;IACD,iBAAiB,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,SAAS,EAAE;IAClE,mBAAmB,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE,KAAK,EAAE,SAAS,EAAE;IACtE,sBAAsB,EAAE;QACtB,IAAI,EAAE,+BAA+B;QACrC,KAAK,EAAE,SAAS;KACjB;IACD,gBAAgB,EAAE;QAChB,IAAI,EAAE,gBAAgB;QACtB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,oBAAoB;KAC7B;IACD,kBAAkB,EAAE;QAClB,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,iBAAiB;KAC1B;IACD,qBAAqB,EAAE;QACrB,IAAI,EAAE,mBAAmB;QACzB,KAAK,EAAE,MAAM;KACd;IACD,aAAa,EAAE;QACb,IAAI,EAAE,gBAAgB;QACtB,KAAK,EAAE,SAAS;KACjB;IACD,mBAAmB,EAAE;QACnB,IAAI,EAAE,sBAAsB;QAC5B,KAAK,EAAE,SAAS;KACjB;CACF,CAAC","sourcesContent":["import { TemplateResult } from 'lit-html';\nimport {\n  renderAddToGroups,\n  renderCallWebhook,\n  renderSendMsg,\n  renderSetContactName,\n  renderSetRunResult\n} from './render';\n\nexport interface UIConfig {\n  name: string;\n  color: string;\n  render?: (node: any, action: any) => TemplateResult;\n}\n\nexport const EDITOR_CONFIG: {\n  [key: string]: UIConfig;\n} = {\n  add_input_labels: {\n    name: 'Add Labels',\n    color: '#01c1af'\n  },\n  add_contact_urn: {\n    name: 'Add Contact URN',\n    color: '#01c1af'\n  },\n  set_contact_field: {\n    name: 'Update Contact Field',\n    color: '#01c1af'\n  },\n  send_broadcast: {\n    name: 'Send Broadcast',\n    color: '#8e5ea7;'\n  },\n  set_run_result: {\n    name: 'Save Flow Result',\n    color: '#1a777c',\n    render: renderSetRunResult\n  },\n  send_msg: {\n    name: 'Send Message',\n    color: '#3498db',\n    render: renderSendMsg\n  },\n  send_email: {\n    name: 'Send Email',\n    color: '#8e5ea7'\n  },\n  start_session: { name: 'Start Somebody Else', color: '#df419f' },\n  call_webhook: {\n    name: 'Call Webhook',\n    color: '#e68628',\n    render: renderCallWebhook\n  },\n  call_llm: {\n    name: 'Call AI',\n    color: '#e68628'\n  },\n  transfer_airtime: {\n    name: 'Send Airtime',\n    color: '#e68628'\n  },\n  wait_for_response: { name: 'Wait for Response', color: '#4d7dad' },\n  split_by_expression: { name: 'Split by Expression', color: '#aaaaaa' },\n  split_by_contact_field: {\n    name: 'Split by <Contact Field Name>',\n    color: '#aaaaaa'\n  },\n  set_contact_name: {\n    name: 'Update Contact',\n    color: '#01c1af',\n    render: renderSetContactName\n  },\n  add_contact_groups: {\n    name: 'Add to Group',\n    color: '#309c42',\n    render: renderAddToGroups\n  },\n  remove_contact_groups: {\n    name: 'Remove from Group',\n    color: '#666'\n  },\n  request_optin: {\n    name: 'Request Opt-in',\n    color: '#3498db'\n  },\n  split_by_run_result: {\n    name: 'Split by Flow Result',\n    color: '#aaaaaa'\n  }\n};\n"]}

package/out-tsc/src/flow/render.js

@@ -0,0 +1,41 @@
+import { html } from 'lit-html';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+const renderNamedObjects = (assets, icon) => {
+    return assets.map((asset) => {
+        return html `<div style="display:flex;items-align:center">
+      ${icon
+            ? html `<temba-icon
+            name=${icon}
+            style="margin-right:0.5em"
+          ></temba-icon>`
+            : null}
+      <div>${asset.name}</div>
+    </div>`;
+    });
+};
+export const renderSendMsg = (node, action) => {
+    const text = action.text.replace(/\n/g, '<br>');
+    return html `
+    ${unsafeHTML(text)}
+    ${action.quick_replies.length > 0
+        ? html `<div class="quick-replies">
+          ${action.quick_replies.map((reply) => {
+            return html `<div class="quick-reply">${reply}</div>`;
+        })}
+        </div>`
+        : null}
+  `;
+};
+export const renderSetContactName = (node, action) => {
+    return html `<div>Set contact name to <b>${action.name}</b></div>`;
+};
+export const renderSetRunResult = (node, action) => {
+    return html `<div>Save ${action.value} as <b>${action.name}</b></div>`;
+};
+export const renderCallWebhook = (node, action) => {
+    return html `<div style="word-break: break-all">${action.url}</div>`;
+};
+export const renderAddToGroups = (node, action) => {
+    return html `<div>${renderNamedObjects(action.groups, 'group')}</div>`;
+};
+//# sourceMappingURL=render.js.map