@nyaruka/temba-components 0.129.10 → 0.129.11

package/test-assets/style.css

@@ -1,236 +1,3 @@
-#mocha {
-  display: none;
-}
-
-temba-dialog,
-temba-modax,
-temba-contact-history,
-temba-menu,
-temba-select {
-  --transition-speed: 0ms !important;
-}
-
-body {
-  padding: 20px;
-}
-
-html input {
-
-  caret-color: transparent;
-}
-
-temba-input,
-temba-modax,
-temba-dialog {
-  caret-color: transparent;
-}
-
-/* Disable CSS animations for deterministic screenshots */
-*,
-*::before,
-*::after {
-  animation-duration: 0s !important;
-  animation-delay: 0s !important;
-  transition-duration: 0s !important;
-  transition-delay: 0s !important;
-  animation-iteration-count: 1 !important;
-}
-
-/* Override CSS custom properties for animation control in tests */
-:root {
-  --test-animation-duration: 0s !important;
-  --test-animation-play-state: paused !important;
-}
-
-/* Force disable spin animations by overriding keyframes - this pierces shadow DOM */
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(0deg); }
-}
-
-html {
-  --transition-speed: 0ms !important;
-  --input-caret: transparent !important;
-  --font-family: 'Roboto';
-  --primary-rgb: 35, 135, 202;
-  --secondary-rgb: 140, 51, 140;
-  --tertiary-rgb: 135, 202, 35;
-
-  --focus-rgb: 82, 168, 236;
-  --error-rgb: 255, 99, 71;
-  --success-rgb: 102, 186, 104;
-
-  --color-label: #333;
-
-  --selection-light-rgb: 240, 240, 240;
-  --selection-dark-rgb: 180, 180, 180;
-
-  --select-input-height: inherit;
-
-  --curvature: 6px;
-  --curvature-widget: 6px;
-  --color-focus: #a4cafe;
-  --color-widget-bg: #fff;
-  --color-widget-bg-focused: #fff;
-  --color-widget-border: rgb(225, 225, 225);
-
-  /* primary colors, should be dark */
-  --color-selection: #f0f6ff;
-
-  --widget-box-shadow-focused: 0 0 0 3px rgba(164, 202, 254, .45);
-  --widget-box-shadow-focused-error: 0 0 0 3px rgba(var(--error-rgb), 0.3);
-
-  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-
-  /* page text, borders, widgets */
-  --color-text: #555;
-  --color-widget-text: #555;
-  --color-borders: rgba(0, 0, 0, 0.07);
-  --color-placeholder: #ccc;
-
-  /* light colors, panel backgrounds, selection, etc */
-  --color-primary-light: #eee;
-  --color-secondary-light: #ccc;
-
-  /* dark colors, nav bar, buttons, etc */
-  --color-primary-dark: rgb(var(--primary-rgb));
-  --color-secondary-dark: rgb(var(--secondary-rgb));
-
-  /* light text goes over dark, dark over lights */
-  --color-text-light: rgba(255, 255, 255, 1);
-  --color-text-dark: rgba(0, 0, 0, 0.5);
-  --color-text-dark-secondary: rgba(0, 0, 0, 0.25);
-  --color-text-help: rgba(0, 0, 0, 0.35);
-
-  --color-tertiary: rgb(var(--tertiary-rgb));
-
-  /* solid overlays with text */
-  --color-overlay-dark: rgba(0, 0, 0, 0.2);
-  --color-overlay-dark-text: rgba(255, 255, 255, 0.9);
-  --color-overlay-light: rgba(0, 0, 0, 0.05);
-  --color-overlay-light-text: rgba(0, 0, 0, 0.6);
-
-  /* links, buttons, and label badges */
-  --color-link-primary: rgba(var(--primary-rgb), 0.8);
-  --color-link-primary-hover: rgba(var(--primary-rgb), 0.9);
-  --color-link-secondary: rgba(var(--secondary-rgb), 0.8);
-  --color-link-secondary-hover: rgba(var(--secondary-rgb), 0.9);
-  --color-button-primary: var(--color-primary-dark);
-  --color-button-primary-text: var(--color-text-light);
-  --color-button-light: rgb(246, 248, 250);
-  --color-button-light-text: rgb(36, 41, 47);
-  --color-button-secondary: var(--color-secondary-light);
-  --color-button-secondary-text: var(--color-text-dark);
-
-  --color-button-destructive: rgb(var(--error-rgb));
-  --color-button-destructive-text: var(--color-text-light);
-
-  --color-button-attention: #2ecc71;
-
-  --color-label-primary: var(--color-primary-dark);
-  --color-label-primary-text: var(--color-text-light);
-  --color-label-secondary: rgba(0, 0, 0, 0.2);
-  --color-label-secondary-text: rgba(255, 255, 255, 0.9);
-
-  --color-nav-unselected: #fff;
-  --color-nav-selected-bg: #fff;
-  --color-nav-selected-text: var(--color-primary-dark);
-  --color-info: rgb(238, 246, 255);
-  --color-info-border: rgb(74, 163, 223);
-
-  --color-warning: rgb(255, 253, 218);
-  --color-warning-border: rgb(251, 246, 176);
-  --color-error: rgb(var(--error-rgb));
-  --font-size: 14px;
-  --button-font-size: 1.125rem;
-
-  --header-bg: var(--color-primary-dark);
-  --header-text: var(--color-text-light);
-
-  --temba-textinput-padding: 9px;
-  --temba-textinput-font-size: 13px;
-
-  --options-block-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
-  --options-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-
-  font-size: var(--font-size);
-  font-weight: 400;
-  font-family: var(--font-family);
-  --dropdown-shadow: rgb(0 0 0 / 30%) 0px 0px 60px, rgb(0 0 0 / 12%) 0px 6px 12px;
-
-  --icon-color: var(--text-color);
-  --icon-color-hover: var(--icon-color);
-  --event-padding: 0.5em 1em;
-  --temba-select-selected-padding: 9px;
-  --temba-select-selected-line-height: 16px;
-  --temba-select-selected-font-size: 13px;
-
-  --help-text-margin-top: 0px;
-  --help-text-margin-left: 0.3em;
-  --help-text-size: 0.85em;
-  --color-text-help: rgb(120, 120, 120);
-  --label-size: 14px;
-
-  --button-y: 6px;
-  --button-x: 14px;
-
-  --menu-padding: 1em;
-  --color-automated: rgb(78, 205, 106);
-}
-
-temba-button {
-  --button-bg: var(--color-primary-dark);
-  --button-text: var(--color-text-light);
-  --button-border: none;
-  --button-shadow: var(--widget-box-shadow);
-}
-
-temba-button:hover {
-  --button-bg-img: linear-gradient(to bottom, rgba(var(--primary-rgb), .1), transparent, transparent);
-}
-
-temba-button.active {
-  --button-bg-img: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .05));
-}
-
-temba-button.light {
-  --button-bg: #fff;
-  --button-text: #999;
-  --button-border: none;
-  --button-shadow: var(--widget-box-shadow);
-
-}
-
-temba-button.light:hover {
-  --button-bg-img: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .001));
-}
-
-temba-button.light.active {
-  --button-bg-img: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .02));
-}
-
-temba-contact-history {
-  min-height: 0;
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-}
-
-temba-select:focus {
-  outline: none;
-  box-shadow: none;
-}
-
-temba-datepicker {
-  margin: 1em;
-}
-
-.flatpickr-calendar {
-  margin-top: 28px;
-  margin-bottom: 28px;
-  margin-left: -13px;
-}
-
 @font-face {
   font-family: 'Roboto Mono';
   font-style: normal;
@@ -288,4 +55,39 @@ temba-datepicker {
     /* Chrome 26+, Opera 23+, Firefox 39+ */
     url('./fonts/roboto-v20-latin-500.woff') format('woff');
   /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
+}
+
+/* Force disable spin animations by overriding keyframes - this pierces shadow DOM */
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(0deg); }
+}
+
+#mocha {
+  display: none;
+}
+
+/* Disable transitions and carets for deterministic screenshots */
+*,
+*::before,
+*::after {
+  animation-duration: 0s !important;
+  animation-delay: 0s !important;
+  transition-duration: 0s !important;
+  transition-delay: 0s !important;
+  animation-iteration-count: 1 !important;
+  --transition-speed: 0ms !important;
+  --test-animation-duration: 0s !important;
+  --test-animation-play-state: paused !important;
+  caret-color: transparent;
+}
+
+/** 
+  Without this body styling our screenshots don't have the proper dpi, 
+  perhaps triggers a different rendering path for puppeteer? The styling
+  appears like it could be anything.
+  Unsure. 
+**/
+body {
+  padding: 20px;
+}

package/web-dev-server.config.mjs

@@ -56,6 +56,32 @@ export default {
             context.body = fs.readFileSync(path.resolve(staticFile), 'utf-8');
             return;
           }
+
+          // Handle dynamic flows endpoint
+          if (basePath === '/api/v2/flows.json') {
+            const flowsDir = path.resolve('./demo/data/flows');
+            
+            if (fs.existsSync(flowsDir)) {
+              const files = fs.readdirSync(flowsDir).filter(file => file.endsWith('.json'));
+              const flows = files.map(file => {
+                try {
+                  const filePath = path.join(flowsDir, file);
+                  const flowData = JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+                  return {
+                    uuid: flowData.definition.uuid,
+                    name: flowData.definition.name
+                  };
+                } catch (e) {
+                  console.warn(`Error reading flow file ${file}:`, e.message);
+                  return null;
+                }
+              }).filter(Boolean);
+
+              context.contentType = 'application/json';
+              context.body = JSON.stringify({ results: flows });
+              return;
+            }
+          }
         }
 
         // Handle minio file uploads for media

package/web-test-runner.config.mjs

@@ -329,7 +329,7 @@ export default {
           return {
             body: context.body.replace(
               /<head>/,
-              `<head><link rel="stylesheet" href="/test-assets/style.css">`
+              `<head><link rel="stylesheet" href="/test-assets/temba-components.css"/><link rel="stylesheet" href="/test-assets/style.css"/>`
             ),
           };
         }

package/out-tsc/src/flow/actions/call_llm.js

@@ -1,64 +0,0 @@
-import { html } from 'lit-html';
-import { COLORS } from '../types';
-export const call_llm = {
-    name: 'Call AI',
-    color: COLORS.call,
-    render: (_node, action) => {
-        return html `<div
-      style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; max-width: 180px; max-height: 100px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;"
-    >
-      ${action.instructions}
-    </div>`;
-    },
-    form: {
-        llm: {
-            type: 'select',
-            required: true,
-            options: [],
-            endpoint: '/test-assets/select/llms.json',
-            searchable: true,
-            valueKey: 'uuid',
-            nameKey: 'name'
-        },
-        input: {
-            type: 'text',
-            required: true,
-            label: 'The input the AI will process',
-            evaluated: true,
-            placeholder: '@input'
-        },
-        instructions: {
-            type: 'textarea',
-            required: true,
-            label: 'Tell the AI what to do with the input',
-            evaluated: true,
-            placeholder: 'Enter instructions for the AI model...',
-            minHeight: 130,
-            helpText: 'The result can be referenced as **`@locals._llm_output`**'
-        }
-    },
-    layout: ['llm', 'input', 'instructions'],
-    toFormData: (action) => {
-        return {
-            uuid: action.uuid,
-            llm: action.llm
-                ? [{ value: action.llm.uuid, name: action.llm.name }]
-                : [],
-            input: action.input || '@input',
-            instructions: action.instructions || ''
-        };
-    },
-    fromFormData: (data) => {
-        const llmSelection = Array.isArray(data.llm) && data.llm.length > 0 ? data.llm[0] : null;
-        return {
-            uuid: data.uuid,
-            type: 'call_llm',
-            input: data.input || '@input',
-            llm: llmSelection
-                ? { uuid: llmSelection.value, name: llmSelection.name }
-                : { uuid: '', name: '' },
-            instructions: data.instructions || ''
-        };
-    }
-};
-//# sourceMappingURL=call_llm.js.map

package/out-tsc/src/flow/actions/call_llm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"call_llm.js","sourceRoot":"","sources":["../../../../src/flow/actions/call_llm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAgB,MAAM,EAAE,MAAM,UAAU,CAAC;AAGhD,MAAM,CAAC,MAAM,QAAQ,GAAiB;IACpC,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,MAAM,CAAC,IAAI;IAClB,MAAM,EAAE,CAAC,KAAW,EAAE,MAAe,EAAE,EAAE;QACvC,OAAO,IAAI,CAAA;;;QAGP,MAAM,CAAC,YAAY;WAChB,CAAC;IACV,CAAC;IACD,IAAI,EAAE;QACJ,GAAG,EAAE;YACH,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,EAAE;YACX,QAAQ,EAAE,+BAA+B;YACzC,UAAU,EAAE,IAAI;YAChB,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,MAAM;SAChB;QACD,KAAK,EAAE;YACL,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,+BAA+B;YACtC,SAAS,EAAE,IAAI;YACf,WAAW,EAAE,QAAQ;SACtB;QACD,YAAY,EAAE;YACZ,IAAI,EAAE,UAAU;YAChB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,uCAAuC;YAC9C,SAAS,EAAE,IAAI;YACf,WAAW,EAAE,wCAAwC;YACrD,SAAS,EAAE,GAAG;YACd,QAAQ,EAAE,2DAA2D;SACtE;KACF;IACD,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,cAAc,CAAC;IACxC,UAAU,EAAE,CAAC,MAAe,EAAE,EAAE;QAC9B,OAAO;YACL,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,GAAG,EAAE,MAAM,CAAC,GAAG;gBACb,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;gBACrD,CAAC,CAAC,EAAE;YACN,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,QAAQ;YAC/B,YAAY,EAAE,MAAM,CAAC,YAAY,IAAI,EAAE;SACxC,CAAC;IACJ,CAAC;IACD,YAAY,EAAE,CAAC,IAAyB,EAAE,EAAE;QAC1C,MAAM,YAAY,GAChB,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACtE,OAAO;YACL,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,QAAQ;YAC7B,GAAG,EAAE,YAAY;gBACf,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,CAAC,KAAK,EAAE,IAAI,EAAE,YAAY,CAAC,IAAI,EAAE;gBACvD,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YAC1B,YAAY,EAAE,IAAI,CAAC,YAAY,IAAI,EAAE;SAC3B,CAAC;IACf,CAAC;CACF,CAAC","sourcesContent":["import { html } from 'lit-html';\nimport { ActionConfig, COLORS } from '../types';\nimport { Node, CallLLM } from '../../store/flow-definition';\n\nexport const call_llm: ActionConfig = {\n  name: 'Call AI',\n  color: COLORS.call,\n  render: (_node: Node, action: CallLLM) => {\n    return html`<div\n      style=\"word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; max-width: 180px; max-height: 100px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;\"\n    >\n      ${action.instructions}\n    </div>`;\n  },\n  form: {\n    llm: {\n      type: 'select',\n      required: true,\n      options: [],\n      endpoint: '/test-assets/select/llms.json',\n      searchable: true,\n      valueKey: 'uuid',\n      nameKey: 'name'\n    },\n    input: {\n      type: 'text',\n      required: true,\n      label: 'The input the AI will process',\n      evaluated: true,\n      placeholder: '@input'\n    },\n    instructions: {\n      type: 'textarea',\n      required: true,\n      label: 'Tell the AI what to do with the input',\n      evaluated: true,\n      placeholder: 'Enter instructions for the AI model...',\n      minHeight: 130,\n      helpText: 'The result can be referenced as **`@locals._llm_output`**'\n    }\n  },\n  layout: ['llm', 'input', 'instructions'],\n  toFormData: (action: CallLLM) => {\n    return {\n      uuid: action.uuid,\n      llm: action.llm\n        ? [{ value: action.llm.uuid, name: action.llm.name }]\n        : [],\n      input: action.input || '@input',\n      instructions: action.instructions || ''\n    };\n  },\n  fromFormData: (data: Record<string, any>) => {\n    const llmSelection =\n      Array.isArray(data.llm) && data.llm.length > 0 ? data.llm[0] : null;\n    return {\n      uuid: data.uuid,\n      type: 'call_llm',\n      input: data.input || '@input',\n      llm: llmSelection\n        ? { uuid: llmSelection.value, name: llmSelection.name }\n        : { uuid: '', name: '' },\n      instructions: data.instructions || ''\n    } as CallLLM;\n  }\n};\n"]}

package/out-tsc/src/flow/actions/call_webhook.js

@@ -1,131 +0,0 @@
-import { html } from 'lit-html';
-import { COLORS } from '../types';
-const defaultPost = `@(json(object(
-  "contact", object(
-    "uuid", contact.uuid, 
-    "name", contact.name, 
-    "urn", contact.urn
-  ),
-  "flow", object(
-    "uuid", run.flow.uuid, 
-    "name", run.flow.name
-  ),
-  "results", foreach_value(results, extract_object, "value", "category")
-)))`;
-export const call_webhook = {
-    name: 'Call Webhook',
-    color: COLORS.call,
-    render: (_node, action) => {
-        return html `<div
-      style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
-    >
-      ${action.url}
-    </div>`;
-    },
-    evaluated: ['url', 'headers', 'body'], // keep for backward compatibility
-    form: {
-        method: {
-            type: 'select',
-            required: true,
-            options: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'PATCH'],
-            maxWidth: '120px',
-            searchable: false
-        },
-        url: {
-            type: 'text',
-            required: true,
-            evaluated: true,
-            placeholder: 'https://example.com/webhook'
-        },
-        headers: {
-            type: 'key-value',
-            sortable: true,
-            keyPlaceholder: 'Header name',
-            valuePlaceholder: 'Header value',
-            minRows: 0
-        },
-        body: {
-            type: 'textarea',
-            evaluated: true,
-            placeholder: 'Request body content (JSON, XML, etc.)',
-            minHeight: 200,
-            dependsOn: ['method'],
-            computeValue: (values, currentValue, originalValues) => {
-                // Check if method is POST (handle both string and select object formats)
-                const method = Array.isArray(values.method) && values.method.length > 0
-                    ? values.method[0].value || values.method[0].name
-                    : values.method;
-                if (method === 'POST') {
-                    // For POST, provide the template if body is empty or was never set by user
-                    if (!currentValue || currentValue.trim() === '') {
-                        return defaultPost;
-                    }
-                }
-                else {
-                    // For non-POST methods, clear the body if it was auto-generated or empty
-                    // Check if the original body was empty (user never specified a body)
-                    const originalBody = (originalValues === null || originalValues === void 0 ? void 0 : originalValues.body) || '';
-                    const isOriginallyEmpty = !originalBody || originalBody.trim() === '';
-                    // Clear if: originally empty, contains default template, or is currently empty
-                    if (isOriginallyEmpty ||
-                        !currentValue ||
-                        currentValue.trim() === '' ||
-                        currentValue.trim() === defaultPost.trim()) {
-                        return '';
-                    }
-                }
-                return currentValue; // Keep existing value if user has customized it
-            }
-        }
-    },
-    layout: [
-        // Row with method and URL side by side
-        { type: 'row', items: ['method', 'url'] },
-        // Advanced group with nested layouts
-        {
-            type: 'group',
-            label: 'Headers',
-            items: ['headers'],
-            collapsible: true,
-            collapsed: true,
-            helpText: 'Configure authentication or custom headers',
-            getGroupValueCount: (formData) => {
-                var _a;
-                return ((_a = formData.headers) === null || _a === void 0 ? void 0 : _a.length) || 0;
-            }
-        },
-        {
-            type: 'group',
-            label: 'Body',
-            items: ['body'],
-            collapsible: true,
-            collapsed: true,
-            helpText: 'Configure the request payload',
-            getGroupValueCount: (formData) => {
-                return !!(formData.body &&
-                    formData.body.trim() !== '' &&
-                    formData.body !== defaultPost);
-            }
-        }
-    ],
-    toFormData: (action) => {
-        return {
-            uuid: action.uuid,
-            url: action.url || '',
-            method: [{ value: action.method, name: action.method }],
-            headers: action.headers || [],
-            body: action.body || ''
-        };
-    },
-    fromFormData: (data) => {
-        return {
-            uuid: data.uuid,
-            type: 'call_webhook',
-            url: data.url,
-            method: data.method[0].value,
-            headers: data.headers || [],
-            body: data.body || ''
-        };
-    }
-};
-//# sourceMappingURL=call_webhook.js.map

package/out-tsc/src/flow/actions/call_webhook.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"call_webhook.js","sourceRoot":"","sources":["../../../../src/flow/actions/call_webhook.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit-html';\nimport { ActionConfig, COLORS } from '../types';\nimport { Node, CallWebhook } from '../../store/flow-definition';\n\nconst defaultPost = `@(json(object(\n  \"contact\", object(\n    \"uuid\", contact.uuid, \n    \"name\", contact.name, \n    \"urn\", contact.urn\n  ),\n  \"flow\", object(\n    \"uuid\", run.flow.uuid, \n    \"name\", run.flow.name\n  ),\n  \"results\", foreach_value(results, extract_object, \"value\", \"category\")\n)))`;\n\nexport const call_webhook: ActionConfig = {\n  name: 'Call Webhook',\n  color: COLORS.call,\n  render: (_node: Node, action: CallWebhook) => {\n    return html`<div\n      style=\"word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;\"\n    >\n      ${action.url}\n    </div>`;\n  },\n  evaluated: ['url', 'headers', 'body'], // keep for backward compatibility\n  form: {\n    method: {\n      type: 'select',\n      required: true,\n      options: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'PATCH'],\n      maxWidth: '120px',\n      searchable: false\n    },\n    url: {\n      type: 'text',\n      required: true,\n      evaluated: true,\n      placeholder: 'https://example.com/webhook'\n    },\n    headers: {\n      type: 'key-value',\n      sortable: true,\n      keyPlaceholder: 'Header name',\n      valuePlaceholder: 'Header value',\n      minRows: 0\n    },\n    body: {\n      type: 'textarea',\n      evaluated: true,\n      placeholder: 'Request body content (JSON, XML, etc.)',\n      minHeight: 200,\n      dependsOn: ['method'],\n      computeValue: (\n        values: Record<string, any>,\n        currentValue: any,\n        originalValues?: Record<string, any>\n      ) => {\n        // Check if method is POST (handle both string and select object formats)\n        const method =\n          Array.isArray(values.method) && values.method.length > 0\n            ? values.method[0].value || values.method[0].name\n            : values.method;\n\n        if (method === 'POST') {\n          // For POST, provide the template if body is empty or was never set by user\n          if (!currentValue || currentValue.trim() === '') {\n            return defaultPost;\n          }\n        } else {\n          // For non-POST methods, clear the body if it was auto-generated or empty\n          // Check if the original body was empty (user never specified a body)\n          const originalBody = originalValues?.body || '';\n          const isOriginallyEmpty = !originalBody || originalBody.trim() === '';\n\n          // Clear if: originally empty, contains default template, or is currently empty\n          if (\n            isOriginallyEmpty ||\n            !currentValue ||\n            currentValue.trim() === '' ||\n            currentValue.trim() === defaultPost.trim()\n          ) {\n            return '';\n          }\n        }\n\n        return currentValue; // Keep existing value if user has customized it\n      }\n    }\n  },\n  layout: [\n    // Row with method and URL side by side\n    { type: 'row', items: ['method', 'url'] },\n    // Advanced group with nested layouts\n    {\n      type: 'group',\n      label: 'Headers',\n      items: ['headers'],\n      collapsible: true,\n      collapsed: true,\n      helpText: 'Configure authentication or custom headers',\n      getGroupValueCount: (formData: any) => {\n        return formData.headers?.length || 0;\n      }\n    },\n    {\n      type: 'group',\n      label: 'Body',\n      items: ['body'],\n      collapsible: true,\n      collapsed: true,\n      helpText: 'Configure the request payload',\n      getGroupValueCount: (formData: any) => {\n        return !!(\n          formData.body &&\n          formData.body.trim() !== '' &&\n          formData.body !== defaultPost\n        );\n      }\n    }\n  ],\n  toFormData: (action: CallWebhook) => {\n    return {\n      uuid: action.uuid,\n      url: action.url || '',\n      method: [{ value: action.method, name: action.method }],\n      headers: action.headers || [],\n      body: action.body || ''\n    };\n  },\n  fromFormData: (data: Record<string, any>) => {\n    return {\n      uuid: data.uuid,\n      type: 'call_webhook',\n      url: data.url,\n      method: data.method[0].value,\n      headers: data.headers || [],\n      body: data.body || ''\n    } as CallWebhook;\n  }\n};\n"]}

package/out-tsc/src/flow/actions/enter_flow.js

@@ -1,14 +0,0 @@
-import { html } from 'lit-html';
-import { COLORS } from '../types';
-export const enter_flow = {
-    name: 'Enter a Flow',
-    color: COLORS.execute,
-    render: (_node, action) => {
-        return html `<div
-      style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
-    >
-      Enter <b>${action.flow.name}</b>
-    </div>`;
-    }
-};
-//# sourceMappingURL=enter_flow.js.map

package/out-tsc/src/flow/actions/enter_flow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"enter_flow.js","sourceRoot":"","sources":["../../../../src/flow/actions/enter_flow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAgB,MAAM,EAAE,MAAM,UAAU,CAAC;AAGhD,MAAM,CAAC,MAAM,UAAU,GAAiB;IACtC,IAAI,EAAE,cAAc;IACpB,KAAK,EAAE,MAAM,CAAC,OAAO;IACrB,MAAM,EAAE,CAAC,KAAW,EAAE,MAAiB,EAAE,EAAE;QACzC,OAAO,IAAI,CAAA;;;iBAGE,MAAM,CAAC,IAAI,CAAC,IAAI;WACtB,CAAC;IACV,CAAC;CACF,CAAC","sourcesContent":["import { html } from 'lit-html';\nimport { ActionConfig, COLORS } from '../types';\nimport { Node, EnterFlow } from '../../store/flow-definition';\n\nexport const enter_flow: ActionConfig = {\n  name: 'Enter a Flow',\n  color: COLORS.execute,\n  render: (_node: Node, action: EnterFlow) => {\n    return html`<div\n      style=\"word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;\"\n    >\n      Enter <b>${action.flow.name}</b>\n    </div>`;\n  }\n};\n"]}

package/out-tsc/src/flow/actions/open_ticket.js

@@ -1,73 +0,0 @@
-import { html } from 'lit-html';
-import { COLORS } from '../types';
-export const open_ticket = {
-    name: 'Open Ticket',
-    color: COLORS.create,
-    render: (_node, action) => {
-        return html `<div>${action.topic.name}</div>`;
-    },
-    form: {
-        topic: {
-            type: 'select',
-            required: true,
-            placeholder: 'Select a topic',
-            options: [],
-            endpoint: '/api/v2/topics.json',
-            valueKey: 'uuid',
-            nameKey: 'name',
-            maxWidth: '200px'
-        },
-        assignee: {
-            type: 'select',
-            required: false,
-            placeholder: 'Select an agent (optional)',
-            options: [],
-            endpoint: '/api/v2/users.json',
-            valueKey: 'uuid',
-            getName: (item) => {
-                return item.name || [item.first_name, item.last_name].join(' ');
-            },
-            clearable: true
-        },
-        note: {
-            type: 'textarea',
-            required: false,
-            placeholder: 'Enter a note for the ticket (optional)',
-            minHeight: 100
-        }
-    },
-    layout: [{ type: 'row', items: ['topic', 'assignee'] }, 'note'],
-    toFormData: (action) => {
-        return {
-            uuid: action.uuid,
-            topic: action.topic
-                ? [{ uuid: action.topic.uuid, name: action.topic.name }]
-                : [],
-            assignee: action.assignee
-                ? [{ uuid: action.assignee.uuid, name: action.assignee.name }]
-                : [],
-            note: action.note || ''
-        };
-    },
-    fromFormData: (data) => {
-        return {
-            uuid: data.uuid,
-            type: 'open_ticket',
-            topic: data.topic && data.topic.length > 0
-                ? {
-                    uuid: data.topic[0].uuid,
-                    name: data.topic[0].name
-                }
-                : undefined,
-            assignee: data.assignee && data.assignee.length > 0
-                ? {
-                    uuid: data.assignee[0].uuid,
-                    name: data.assignee[0].name ||
-                        [data.assignee[0].first_name, data.assignee[0].last_name].join(' ')
-                }
-                : undefined,
-            note: data.note || ''
-        };
-    }
-};
-//# sourceMappingURL=open_ticket.js.map

package/out-tsc/src/flow/actions/open_ticket.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"open_ticket.js","sourceRoot":"","sources":["../../../../src/flow/actions/open_ticket.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit-html';\nimport { ActionConfig, COLORS } from '../types';\nimport { Node, OpenTicket } from '../../store/flow-definition';\n\nexport const open_ticket: ActionConfig = {\n  name: 'Open Ticket',\n  color: COLORS.create,\n  render: (_node: Node, action: OpenTicket) => {\n    return html`<div>${action.topic.name}</div>`;\n  },\n  form: {\n    topic: {\n      type: 'select',\n      required: true,\n      placeholder: 'Select a topic',\n      options: [],\n      endpoint: '/api/v2/topics.json',\n      valueKey: 'uuid',\n      nameKey: 'name',\n      maxWidth: '200px'\n    },\n    assignee: {\n      type: 'select',\n      required: false,\n      placeholder: 'Select an agent (optional)',\n      options: [],\n      endpoint: '/api/v2/users.json',\n      valueKey: 'uuid',\n      getName: (item: {\n        first_name?: string;\n        last_name?: string;\n        name?: string;\n      }) => {\n        return item.name || [item.first_name, item.last_name].join(' ');\n      },\n      clearable: true\n    },\n    note: {\n      type: 'textarea',\n      required: false,\n      placeholder: 'Enter a note for the ticket (optional)',\n      minHeight: 100\n    }\n  },\n  layout: [{ type: 'row', items: ['topic', 'assignee'] }, 'note'],\n  toFormData: (action: OpenTicket) => {\n    return {\n      uuid: action.uuid,\n      topic: action.topic\n        ? [{ uuid: action.topic.uuid, name: action.topic.name }]\n        : [],\n      assignee: action.assignee\n        ? [{ uuid: action.assignee.uuid, name: action.assignee.name }]\n        : [],\n      note: action.note || ''\n    };\n  },\n  fromFormData: (data: Record<string, any>) => {\n    return {\n      uuid: data.uuid,\n      type: 'open_ticket',\n      topic:\n        data.topic && data.topic.length > 0\n          ? {\n              uuid: data.topic[0].uuid,\n              name: data.topic[0].name\n            }\n          : undefined,\n      assignee:\n        data.assignee && data.assignee.length > 0\n          ? {\n              uuid: data.assignee[0].uuid,\n              name:\n                data.assignee[0].name ||\n                [data.assignee[0].first_name, data.assignee[0].last_name].join(\n                  ' '\n                )\n            }\n          : undefined,\n      note: data.note || ''\n    } as OpenTicket;\n  }\n};\n"]}