@nyaruka/temba-components 0.124.2 → 0.125.0

package/src/flow/config.ts

@@ -13,58 +13,89 @@ export interface UIConfig {
   render?: (node: any, action: any) => TemplateResult;
 }
 
+const COLORS = {
+  send: '#3498db',
+  update: '#01c1af',
+  broadcast: '#8e5ea7',
+  call: '#e68628',
+  create: '#df419f',
+  save: '#1a777c',
+  split: '#aaaaaa',
+  execute: '#666666',
+  wait: '#4d7dad',
+  add: '#309c42',
+  remove: '#e74c3c'
+};
+
 export const EDITOR_CONFIG: {
   [key: string]: UIConfig;
 } = {
   add_input_labels: {
     name: 'Add Labels',
-    color: '#01c1af'
+    color: COLORS.update
   },
   add_contact_urn: {
     name: 'Add Contact URN',
-    color: '#01c1af'
+    color: COLORS.update
   },
   set_contact_field: {
     name: 'Update Contact Field',
-    color: '#01c1af'
+    color: COLORS.update
+  },
+  set_contact_channel: {
+    name: 'Update Contact Channel',
+    color: COLORS.update
+  },
+  set_contact_language: {
+    name: 'Update Contact Language',
+    color: COLORS.update
   },
   send_broadcast: {
     name: 'Send Broadcast',
-    color: '#8e5ea7;'
+    color: COLORS.broadcast
   },
   set_run_result: {
     name: 'Save Flow Result',
-    color: '#1a777c',
+    color: COLORS.save,
     render: renderSetRunResult
   },
   send_msg: {
     name: 'Send Message',
-    color: '#3498db',
+    color: COLORS.send,
     render: renderSendMsg
   },
   send_email: {
     name: 'Send Email',
-    color: '#8e5ea7'
+    color: COLORS.broadcast
+  },
+  start_session: {
+    name: 'Start Somebody Else',
+    color: COLORS.broadcast
+  },
+  open_ticket: {
+    name: 'Open Ticket',
+    color: COLORS.execute
   },
-  start_session: { name: 'Start Somebody Else', color: '#df419f' },
   call_webhook: {
     name: 'Call Webhook',
-    color: '#e68628',
+    color: COLORS.call,
     render: renderCallWebhook
   },
+  enter_flow: {
+    name: 'Enter Subflow',
+    color: COLORS.execute
+  },
   call_llm: {
     name: 'Call AI',
-    color: '#e68628'
+    color: COLORS.call
   },
   transfer_airtime: {
     name: 'Send Airtime',
-    color: '#e68628'
+    color: COLORS.call
   },
-  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'
+  wait_for_response: {
+    name: 'Wait for Response',
+    color: COLORS.wait
   },
   set_contact_name: {
     name: 'Update Contact',
@@ -73,19 +104,39 @@ export const EDITOR_CONFIG: {
   },
   add_contact_groups: {
     name: 'Add to Group',
-    color: '#309c42',
+    color: COLORS.add,
     render: renderAddToGroups
   },
   remove_contact_groups: {
     name: 'Remove from Group',
-    color: '#666'
+    color: COLORS.remove
   },
   request_optin: {
     name: 'Request Opt-in',
-    color: '#3498db'
+    color: COLORS.send
   },
   split_by_run_result: {
     name: 'Split by Flow Result',
-    color: '#aaaaaa'
+    color: COLORS.split
+  },
+  split_by_expression: {
+    name: 'Split by Expression',
+    color: COLORS.split
+  },
+  split_by_contact_field: {
+    name: 'Split by <Contact Field Name>',
+    color: COLORS.split
+  },
+  split_by_groups: {
+    name: 'Split by Group',
+    color: COLORS.split
+  },
+  split_by_scheme: {
+    name: 'Split by URN Type',
+    color: COLORS.split
+  },
+  split_by_random: {
+    name: 'Split by Random',
+    color: COLORS.split
   }
 };

package/src/formfield/FormField.ts

@@ -1,5 +1,6 @@
 import { TemplateResult, html, css, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
+import { renderMarkdown } from '../markdown';
 
 /**
  * A small wrapper to display labels and help text in a smartmin style.
@@ -94,7 +95,9 @@ export class FormField extends LitElement {
   public render(): TemplateResult {
     const errors = !this.hideErrors
       ? (this.errors || []).map((error: string) => {
-          return html` <div class="alert-error">${error}</div> `;
+          return html`
+            <div class="alert-error">${renderMarkdown(error)}</div>
+          `;
         })
       : [];
 

package/src/store/Store.ts

@@ -561,6 +561,7 @@ export class Store extends RapidElement {
                     const orginalUser = last[parts[parts.length - 1]];
                     orginalUser.avatar = user.avatar;
                     orginalUser.name = getFullName(user);
+                    orginalUser.uuid = user.uuid;
                     last[parts[parts.length - 1]].avatar = user.avatar;
                   }
                 });

package/src/utils/index.ts

@@ -44,14 +44,17 @@ export enum Color {
 
 export const log = (message: string | object, styling = '', details = []) => {
   if (styling === '') {
+    // eslint-disable-next-line no-console
     console.log(message);
     return;
   }
 
   if (typeof message === 'object') {
+    // eslint-disable-next-line no-console
     console.log('%c' + JSON.stringify(message, null, 2), styling);
     return;
   }
+  // eslint-disable-next-line no-console
   console.log('%c' + message, styling, ...details);
 };
 
@@ -802,6 +805,46 @@ export const hslToHex = (h, s, l) => {
   return `#${f(0)}${f(8)}${f(4)}`;
 };
 
+export const darkenColor = (color: string, factor: number): string => {
+  // If rgba or rgb
+  const rgbaMatch = color.match(
+    /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([0-9.]+))?\)/
+  );
+  if (rgbaMatch) {
+    // eslint-disable-next-line prefer-const
+    let [r, g, b, a] = rgbaMatch
+      .slice(1)
+      .map((v, i) => (i < 3 ? parseInt(v) : parseFloat(v)));
+    r = Math.max(0, Math.floor(r * (1 - factor)));
+    g = Math.max(0, Math.floor(g * (1 - factor)));
+    b = Math.max(0, Math.floor(b * (1 - factor)));
+    if (rgbaMatch[4] !== undefined) {
+      return `rgba(${r},${g},${b},${a})`;
+    }
+    return `rgb(${r},${g},${b})`;
+  }
+  // If hex
+  if (color.startsWith('#')) {
+    let hex = color.replace('#', '');
+    if (hex.length === 3) {
+      hex = hex
+        .split('')
+        .map((c) => c + c)
+        .join('');
+    }
+    const num = parseInt(hex, 16);
+    let r = (num >> 16) & 255;
+    let g = (num >> 8) & 255;
+    let b = num & 255;
+    r = Math.max(0, Math.floor(r * (1 - factor)));
+    g = Math.max(0, Math.floor(g * (1 - factor)));
+    b = Math.max(0, Math.floor(b * (1 - factor)));
+    return `rgb(${r},${g},${b})`;
+  }
+  // fallback
+  return color;
+};
+
 export const renderAvatar = (input: {
   name?: string;
   user?: User;

package/src/webchat/WebChat.ts

@@ -412,6 +412,7 @@ export class WebChat extends LitElement {
   private sendSockMessage(
     cmd: GetHistoryCmd | StartChatCmd | SendMsgCmd | Ack
   ) {
+    // eslint-disable-next-line no-console
     console.log('out', cmd);
     this.sock.send(JSON.stringify(cmd));
   }
@@ -447,6 +448,7 @@ export class WebChat extends LitElement {
     this.sock.onmessage = function (event: MessageEvent) {
       webChat.status = ChatStatus.CONNECTED;
       const msg = JSON.parse(event.data) as SockMsg;
+      // eslint-disable-next-line no-console
       console.log('in', msg);
       if (msg.type === 'chat_started') {
         const response = msg as StartChatResponse;

package/test/temba-chart.test.ts

@@ -61,11 +61,11 @@ describe('temba-chart', () => {
     const chart: TembaChart = await getChart();
 
     // Test that formatDuration property exists and defaults to false
-    expect(chart.formatDuration).to.equal(false);
+    expect(chart.yType).to.equal('count');
 
     // Test that we can set formatDuration to true
-    chart.formatDuration = true;
-    expect(chart.formatDuration).to.equal(true);
+    chart.yType = 'duration';
+    expect(chart.yType).to.equal('duration');
   });
 
   it('formats duration values correctly', async () => {
@@ -83,7 +83,7 @@ describe('temba-chart', () => {
       ]
     };
 
-    chart.formatDuration = true;
+    chart.yType = 'duration';
     chart.data = durationData;
     await chart.updateComplete;
 
@@ -91,7 +91,7 @@ describe('temba-chart', () => {
     await new Promise((resolve) => setTimeout(resolve, 100));
 
     // Test that the chart was created and has the duration formatting enabled
-    expect(chart.formatDuration).to.equal(true);
+    expect(chart.yType).to.equal('duration');
     expect(chart.chart).to.exist;
 
     // Test that the chart configuration includes the duration formatting
@@ -115,6 +115,7 @@ describe('temba-chart', () => {
       dataset: { label: 'Process Time' },
       parsed: { y: 68787 }
     };
+
     expect(tooltipCallback.call({}, mockContext)).to.equal(
       'Process Time: 19h 6m'
     );
@@ -122,7 +123,7 @@ describe('temba-chart', () => {
 
   it('formats various duration edge cases correctly', async () => {
     const chart: TembaChart = await getChart();
-    chart.formatDuration = true;
+    chart.yType = 'duration';
     chart.data = sampleData;
     await chart.updateComplete;
 
@@ -145,23 +146,6 @@ describe('temba-chart', () => {
     expect(tickCallback.call({}, 604800, 9, [])).to.equal('7d'); // 1 week in seconds
     expect(tickCallback.call({}, 1209600, 10, [])).to.equal('14d'); // 2 weeks in seconds
   });
-
-  it('respects formatDuration property state', async () => {
-    const chart: TembaChart = await getChart();
-
-    // Test default state
-    expect(chart.formatDuration).to.equal(false);
-
-    chart.data = sampleData;
-    await chart.updateComplete;
-
-    // Test that formatDuration property can be toggled
-    chart.formatDuration = true;
-    expect(chart.formatDuration).to.equal(true);
-
-    chart.formatDuration = false;
-    expect(chart.formatDuration).to.equal(false);
-  });
 });
 
 describe('formatDurationFromSeconds', () => {

package/test/temba-formfield.test.ts

@@ -0,0 +1,121 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { FormField } from '../src/formfield/FormField';
+import { assertScreenshot, getClip } from './utils.test';
+
+describe('temba-field', () => {
+  it('renders field with plain text errors', async () => {
+    const formField: FormField = await fixture(html`
+      <temba-field
+        label="Test Field"
+        name="test"
+        .errors=${['This is a plain text error', 'Another error message']}
+      >
+        <input type="text" />
+      </temba-field>
+    `);
+
+    await formField.updateComplete;
+
+    // Check that errors are rendered
+    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
+    expect(errorElements.length).to.equal(2);
+    expect(errorElements[0].textContent.trim()).to.equal(
+      'This is a plain text error'
+    );
+    expect(errorElements[1].textContent.trim()).to.equal(
+      'Another error message'
+    );
+
+    await assertScreenshot('formfield/plain-text-errors', getClip(formField));
+  });
+
+  it('renders field with markdown errors', async () => {
+    const formField: FormField = await fixture(html`
+      <temba-field
+        label="Test Field"
+        name="test"
+        .errors=${[
+          'This is **bold** text',
+          'This has a [link](https://example.com)',
+          'This is *italic* and **bold** with a [link](https://example.com)'
+        ]}
+      >
+        <input type="text" />
+      </temba-field>
+    `);
+
+    await formField.updateComplete;
+
+    // Check that errors are rendered
+    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
+    expect(errorElements.length).to.equal(3);
+
+    // First error should have bold text
+    const firstError = errorElements[0];
+    const boldElement = firstError.querySelector('strong');
+    expect(boldElement).to.not.be.null;
+    expect(boldElement.textContent).to.equal('bold');
+
+    // Second error should have a link
+    const secondError = errorElements[1];
+    const linkElement = secondError.querySelector('a');
+    expect(linkElement).to.not.be.null;
+    expect(linkElement.getAttribute('href')).to.equal('https://example.com');
+    expect(linkElement.textContent).to.equal('link');
+
+    // Third error should have both bold, italic, and link
+    const thirdError = errorElements[2];
+    const thirdBoldElement = thirdError.querySelector('strong');
+    const thirdItalicElement = thirdError.querySelector('em');
+    const thirdLinkElement = thirdError.querySelector('a');
+    expect(thirdBoldElement).to.not.be.null;
+    expect(thirdItalicElement).to.not.be.null;
+    expect(thirdLinkElement).to.not.be.null;
+
+    await assertScreenshot('formfield/markdown-errors', getClip(formField));
+  });
+
+  it('renders field without errors', async () => {
+    const formField: FormField = await fixture(html`
+      <temba-field label="Test Field" name="test">
+        <input type="text" />
+      </temba-field>
+    `);
+
+    await formField.updateComplete;
+
+    // Check that no errors are rendered
+    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
+    expect(errorElements.length).to.equal(0);
+
+    await assertScreenshot('formfield/no-errors', getClip(formField));
+  });
+
+  it('renders in widget-only mode with errors', async () => {
+    const formField: FormField = await fixture(html`
+      <temba-field
+        widget_only
+        .errors=${['Widget only **error** with [link](https://example.com)']}
+      >
+        <input type="text" />
+      </temba-field>
+    `);
+
+    await formField.updateComplete;
+
+    // Check that error is rendered in widget-only mode
+    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
+    expect(errorElements.length).to.equal(1);
+
+    const errorElement = errorElements[0];
+    const boldElement = errorElement.querySelector('strong');
+    const linkElement = errorElement.querySelector('a');
+    expect(boldElement).to.not.be.null;
+    expect(linkElement).to.not.be.null;
+
+    await assertScreenshot(
+      'formfield/widget-only-markdown-errors',
+      getClip(formField)
+    );
+  });
+});

package/test/temba-integration-markdown.test.ts

@@ -0,0 +1,45 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { Checkbox } from '../src/checkbox/Checkbox';
+import { assertScreenshot, getClip } from './utils.test';
+
+describe('FormElement markdown integration', () => {
+  it('renders checkbox with markdown errors', async () => {
+    const checkbox: Checkbox = await fixture(html`
+      <temba-checkbox
+        label="Accept Terms"
+        .errors=${[
+          'Please read the **terms and conditions** at [this link](https://example.com)',
+          'This field *requires* acceptance'
+        ]}
+      ></temba-checkbox>
+    `);
+
+    await checkbox.updateComplete;
+
+    // Check that errors are rendered with markdown
+    const errorElements = checkbox.shadowRoot
+      .querySelectorAll('temba-field')[0]
+      .shadowRoot.querySelectorAll('.alert-error');
+    expect(errorElements.length).to.equal(2);
+
+    // First error should have bold text and link
+    const firstError = errorElements[0];
+    const boldElement = firstError.querySelector('strong');
+    const linkElement = firstError.querySelector('a');
+    expect(boldElement).to.not.be.null;
+    expect(boldElement.textContent).to.equal('terms and conditions');
+    expect(linkElement).to.not.be.null;
+    expect(linkElement.getAttribute('href')).to.equal('https://example.com');
+
+    // Second error should have italic text
+    const secondError = errorElements[1];
+    const italicElement = secondError.querySelector('em');
+    expect(italicElement).to.not.be.null;
+    expect(italicElement.textContent).to.equal('requires');
+
+    await assertScreenshot(
+      'integration/checkbox-markdown-errors',
+      getClip(checkbox)
+    );
+  });
+});

package/test/temba-select.test.ts

@@ -5,6 +5,7 @@ import { Options } from '../src/options/Options';
 import { Select, SelectOption } from '../src/select/Select';
 import {
   assertScreenshot,
+  delay,
   getClip,
   getOptions,
   loadStore,
@@ -660,6 +661,22 @@ describe('temba-select', () => {
 
       await openSelect(clock, select);
 
+      // Wait for pagination to complete - keep checking until fetching is false
+      // and we have the expected number of results (15 = 3 pages * 5 items)
+      let attempts = 0;
+      const maxAttempts = 10;
+      while (select.fetching || select.visibleOptions.length < 15) {
+        if (attempts >= maxAttempts) {
+          throw new Error(
+            `Pagination did not complete after ${maxAttempts} attempts. fetching: ${select.fetching}, visibleOptions: ${select.visibleOptions.length}`
+          );
+        }
+        await select.updateComplete;
+        clock.runAll();
+        attempts++;
+        await delay(100);
+      }
+
       // should have all three pages visible right away
       assert.equal(select.visibleOptions.length, 15);
     });

package/web-dev-server.config.mjs

@@ -1,5 +1,7 @@
 import replace from '@rollup/plugin-replace';
 import { fromRollup } from '@web/dev-server-rollup';
+import fs from 'fs';
+import path from 'path';
 
 const replacePlugin = fromRollup(replace);
 
@@ -11,4 +13,20 @@ export default {
       'process.env.NODE_ENV': JSON.stringify('development'),
     }),
   ],
+
+  middlewares: [
+    async (ctx, next) => {
+      if (ctx.path.startsWith('/flow/revisions/')) {
+        const parts = ctx.path.split('/');
+        const uuid = parts[3];
+        ctx.set('Content-Type', 'application/json');
+        ctx.body = fs.readFileSync(
+          path.resolve(`./demo/data/flows/${uuid}.json`),
+          'utf-8',
+        );
+      } else {
+        await next();
+      }
+    },
+  ],
 };