@nyaruka/temba-components 0.130.1 → 0.130.3

package/src/display/Chat.ts

@@ -4,7 +4,6 @@ import { RapidElement } from '../RapidElement';
 import { CustomEventType } from '../interfaces';
 import { DEFAULT_AVATAR } from '../webchat/assets';
 import { hashCode } from '../utils';
-import { renderMarkdown } from '../markdown';
 
 const BATCH_TIME_WINDOW = 60 * 60 * 1000;
 const SCROLL_FETCH_BUFFER = 0.05;
@@ -28,7 +27,7 @@ interface User {
 export interface ChatEvent {
   id?: string;
   type: MessageType;
-  text: string;
+  text: TemplateResult;
   date: Date;
   user?: User;
   popup?: TemplateResult;
@@ -534,7 +533,10 @@ export class Chat extends RapidElement {
     // make sure our messages have ids
     messages.forEach((m) => {
       if (!m.id) {
-        m.id = hashCode(m.text) + '_' + m.date.toISOString();
+        m.id =
+          hashCode((m.text.strings || []).join('')) +
+          '_' +
+          m.date.toISOString();
       }
     });
 
@@ -764,7 +766,7 @@ export class Chat extends RapidElement {
       event.type === MessageType.Collapse ||
       event.type === MessageType.Inline
     ) {
-      return html`<div class="event">${renderMarkdown(event.text)}</div>`;
+      return html`<div class="event">${event.text}</div>`;
     }
 
     const message = event as Message;

package/src/events.ts

@@ -10,7 +10,8 @@ export interface ContactEvent {
   uuid?: string;
   type: string;
   created_on: string;
-  created_by?: User;
+  created_by?: User; // deprecated
+  _user?: ObjectReference;
 }
 
 export interface ChannelEvent extends ContactEvent {
@@ -75,16 +76,15 @@ export interface URNsChangedEvent extends ContactEvent {
 }
 
 export interface TicketEvent extends ContactEvent {
-  note?: string;
-  assignee?: User;
   ticket: {
+    // ticket_opened
     uuid: string;
     topic?: ObjectReference;
-    closed_on?: string;
-    opened_on?: string;
   };
+  ticket_uuid?: string; // all other event types
+  assignee?: User;
+  note?: string;
   topic?: ObjectReference;
-  created_by?: User;
 }
 
 export interface NameChangedEvent extends ContactEvent {

package/src/flow/CanvasNode.ts

@@ -78,60 +78,43 @@ export class CanvasNode extends RapidElement {
 
       .action {
         position: relative;
-        font-size: 13px;
       }
 
-      .action .remove-button {
-        position: absolute;
-        top: 5px;
-        right: 5px;
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        background: var(--color-error, #dc3545);
-        color: white;
-        border: none;
-        cursor: pointer;
-        display: none;
-        align-items: center;
-        justify-content: center;
-        font-size: 10px;
-        line-height: 1;
-        z-index: 10;
-      }
 
-      .action:hover .remove-button,
+      .action .cn-title:hover .remove-button,
       .router:hover .remove-button {
-        display: flex;
+        opacity: 0.7;
       }
 
-      .action.removing .title,
-      .router .title.removing {
+      .action.removing .cn-title,
+      .router .cn-title.removing {
         background-color: var(--color-error, #dc3545) !important;
       }
 
-      .action.removing .title .name,
-      .router .title.removing .name {
+      .action.removing .cn-title .name,
+      .router .cn-title.removing .name {
         color: white;
       }
 
-      .router .remove-button {
-        position: absolute;
-        top: 5px;
-        right: 5px;
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        background: var(--color-error, #dc3545);
+      .remove-button {
+        background: transparent;
         color: white;
-        border: none;
+        opacity: 0;
         cursor: pointer;
-        display: none;
-        align-items: center;
-        justify-content: center;
-        font-size: 10px;
+        font-size: 1em;
+        font-weight: 600;
         line-height: 1;
         z-index: 10;
+        transition: all 100ms ease-in-out;
+        align-self: center;
+        padding:0.25em;
+        border: 0px solid red;
+        width: 1em;
+        pointer-events: auto; /* Ensure remove button can receive events */
+      }
+
+      .remove-button:hover {
+        opacity: 1;
       }
 
       .action.sortable {
@@ -165,14 +148,24 @@ export class CanvasNode extends RapidElement {
         transition: all 200ms ease-in-out;
         cursor: move;
         background: rgba(0, 0, 0, 0.02);
-        max-width:0px;
-        position: absolute;
+        width: 1em;
+        padding: 0.25em;
+        border: 0px solid red;
+        pointer-events: auto; /* Ensure drag handle can receive events */
+      }
+      .title-spacer {
+        width: 2em;
+        
       }
 
       .action:hover .drag-handle {
-        opacity: 0.5;
-        padding: 0.25em;
-        max-width: 20px;
+        opacity: 0.7;
+        
+        
+      }
+
+      strong {
+        font-weight: 500;
       }
 
       .action .drag-handle:hover {
@@ -180,20 +173,27 @@ export class CanvasNode extends RapidElement {
         
       }
 
-      .action .title,
-      .router .title {
+      .action .cn-title,
+      .router .cn-title {
         display: flex;
         color: #fff;
-        padding: 5px 1px;
         text-align: center;
         font-size: 1em;
-        font-weight: normal;
+        font-weight: 500;
+      }
+
+      .cn-title .name {
+      padding: 0.3em 0;
 
       }
 
-      .title .name {
+      .router .cn-title {
+
+      }
+
+      .cn-title .name {
         flex-grow: 1;
-        }
+      }
 
       .quick-replies {
         margin-top: 0.5em;
@@ -230,7 +230,7 @@ export class CanvasNode extends RapidElement {
         margin-top: -0.8em;
       }
 
-      .category .title {
+      .category .cn-title {
         font-weight: normal;
         font-size: 1em;
         max-width: 150px;
@@ -244,7 +244,7 @@ export class CanvasNode extends RapidElement {
       }
 
       .result-name {
-        font-weight: bold;
+        font-weight: 500;
         display: inline-block;
       }
       
@@ -320,7 +320,7 @@ export class CanvasNode extends RapidElement {
         border-bottom-right-radius: var(--curvature);
       }
 
-      .router .title {
+      .router .cn-title {
         border-top-left-radius: var(--curvature);
         border-top-right-radius: var(--curvature);
       }
@@ -329,7 +329,7 @@ export class CanvasNode extends RapidElement {
         overflow: hidden;
       }
 
-      .action:first-child .title {
+      .action:first-child .cn-title {
         border-top-left-radius: var(--curvature);
         border-top-right-radius: var(--curvature);
       }
@@ -610,10 +610,11 @@ export class CanvasNode extends RapidElement {
   }
 
   private handleActionMouseDown(event: MouseEvent, action: Action): void {
-    // Don't handle clicks on the remove button or when action is in removing state
+    // Don't handle clicks on the remove button, drag handle, or when action is in removing state
     const target = event.target as HTMLElement;
     if (
       target.closest('.remove-button') ||
+      target.closest('.drag-handle') ||
       this.actionRemovingState.has(action.uuid)
     ) {
       return;
@@ -636,10 +637,11 @@ export class CanvasNode extends RapidElement {
       return;
     }
 
-    // Don't handle clicks on the remove button or when action is in removing state
+    // Don't handle clicks on the remove button, drag handle, or when action is in removing state
     const target = event.target as HTMLElement;
     if (
       target.closest('.remove-button') ||
+      target.closest('.drag-handle') ||
       this.actionRemovingState.has(action.uuid)
     ) {
       this.actionClickStartPos = null;
@@ -727,12 +729,13 @@ export class CanvasNode extends RapidElement {
   }
 
   private handleNodeMouseDown(event: MouseEvent): void {
-    // Don't handle clicks on the remove button, exits, or when node is in removing state
+    // Don't handle clicks on the remove button, exits, drag handle, or when node is in removing state
     const target = event.target as HTMLElement;
     if (
       target.closest('.remove-button') ||
       target.closest('.exit') ||
       target.closest('.exit-wrapper') ||
+      target.closest('.drag-handle') ||
       this.actionRemovingState.has(this.node.uuid)
     ) {
       return;
@@ -752,12 +755,13 @@ export class CanvasNode extends RapidElement {
       return;
     }
 
-    // Don't handle clicks on the remove button, exits, or when node is in removing state
+    // Don't handle clicks on the remove button, exits, drag handle, or when node is in removing state
     const target = event.target as HTMLElement;
     if (
       target.closest('.remove-button') ||
       target.closest('.exit') ||
       target.closest('.exit-wrapper') ||
+      target.closest('.drag-handle') ||
       this.actionRemovingState.has(this.node.uuid)
     ) {
       this.nodeClickStartPos = null;
@@ -803,22 +807,43 @@ export class CanvasNode extends RapidElement {
     this.pendingNodeClick = null;
   }
 
-  private renderTitle(config: ActionConfig, isRemoving: boolean = false) {
-    return html`<div class="title" style="background:${config.color}">
+  private renderTitle(
+    config: ActionConfig,
+    action: Action,
+    index: number,
+    isRemoving: boolean = false
+  ) {
+    return html`<div class="cn-title" style="background:${config.color}">
       ${this.node?.actions?.length > 1
         ? html`<temba-icon class="drag-handle" name="sort"></temba-icon>`
         : null}
 
       <div class="name">${isRemoving ? 'Remove?' : config.name}</div>
+      <div
+        class="remove-button"
+        @click=${(e: MouseEvent) =>
+          this.handleActionRemoveClick(e, action, index)}
+        title="Remove action"
+      >
+        ✕
+      </div>
     </div>`;
   }
 
   private renderNodeTitle(config: NodeConfig, isRemoving: boolean = false) {
     return html`<div
-      class="title ${isRemoving ? 'removing' : ''}"
+      class="cn-title ${isRemoving ? 'removing' : ''}"
       style="background:${config.color}"
     >
+      <div class="title-spacer"></div>
       <div class="name">${isRemoving ? 'Remove?' : config.name}</div>
+      <div
+        class="remove-button"
+        @click=${(e: MouseEvent) => this.handleNodeRemoveClick(e)}
+        title="Remove node"
+      >
+        ✕
+      </div>
     </div>`;
   }
 
@@ -831,21 +856,13 @@ export class CanvasNode extends RapidElement {
         class="action sortable ${action.type} ${isRemoving ? 'removing' : ''}"
         id="action-${index}"
       >
-        <button
-          class="remove-button"
-          @click=${(e: MouseEvent) =>
-            this.handleActionRemoveClick(e, action, index)}
-          title="Remove action"
-        >
-          ✕
-        </button>
         <div
           class="action-content"
           @mousedown=${(e: MouseEvent) => this.handleActionMouseDown(e, action)}
           @mouseup=${(e: MouseEvent) => this.handleActionMouseUp(e, action)}
           style="cursor: pointer;"
         >
-          ${this.renderTitle(config, isRemoving)}
+          ${this.renderTitle(config, action, index, isRemoving)}
           <div class="body">
             ${config.render
               ? config.render(node, action)
@@ -858,14 +875,14 @@ export class CanvasNode extends RapidElement {
       class="action sortable ${isRemoving ? 'removing' : ''}"
       id="action-${index}"
     >
-      <button
+      <div
         class="remove-button"
         @click=${(e: MouseEvent) =>
           this.handleActionRemoveClick(e, action, index)}
         title="Remove action"
       >
         ✕
-      </button>
+      </div>
       ${action.type}
     </div>`;
   }
@@ -909,7 +926,7 @@ export class CanvasNode extends RapidElement {
             @mouseup=${(e: MouseEvent) => this.handleNodeMouseUp(e)}
             style="cursor: pointer;"
           >
-            <div class="title">${category.name}</div>
+            <div class="cn-title">${category.name}</div>
             ${this.renderExit(exit)}
           </div>`;
         }
@@ -948,13 +965,6 @@ export class CanvasNode extends RapidElement {
       >
         ${nodeConfig && nodeConfig.type !== 'execute_actions'
           ? html`<div class="router" style="position: relative;">
-              <button
-                class="remove-button"
-                @click=${(e: MouseEvent) => this.handleNodeRemoveClick(e)}
-                title="Remove node"
-              >
-                ✕
-              </button>
               <div
                 @mousedown=${(e: MouseEvent) => this.handleNodeMouseDown(e)}
                 @mouseup=${(e: MouseEvent) => this.handleNodeMouseUp(e)}

package/src/flow/Editor.ts

@@ -143,6 +143,7 @@ export class Editor extends RapidElement {
       #editor {
         overflow: scroll;
         flex: 1;
+        -webkit-font-smoothing: antialiased;
       }
 
       #grid {

package/src/flow/NodeEditor.ts

@@ -85,7 +85,7 @@ export class NodeEditor extends RapidElement {
       .form-row {
         display: grid;
         gap: 1rem;
-        align-items: end;
+        align-items: center;
       }
 
       .form-group {
@@ -257,6 +257,25 @@ export class NodeEditor extends RapidElement {
         display: flex;
         align-items: center;
       }
+
+      .gutter-fields {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        align-items: flex-start;
+      }
+
+      .gutter-fields .form-row {
+        margin: 0;
+      }
+
+      .gutter-fields temba-checkbox {
+        align-self: flex-start;
+      }
+
+      .gutter-fields temba-select {
+        min-width: 120px;
+      }
     `;
   }
 
@@ -1059,6 +1078,7 @@ export class NodeEditor extends RapidElement {
         }
       },
       showLabel: true,
+      formData: this.formData,
       additionalData: {
         attachments: this.formData.attachments || []
       }
@@ -1420,14 +1440,24 @@ export class NodeEditor extends RapidElement {
       if (config.layout) {
         const renderedFields = new Set<string>();
 
+        // Also collect fields from gutter to avoid rendering them in main form
+        const gutterFields = new Set<string>();
+        if (config.gutter) {
+          const gutterFieldNames = this.collectFieldsFromItems(config.gutter);
+          gutterFieldNames.forEach((field) => gutterFields.add(field));
+        }
+
         return html`
           ${config.layout.map((item) =>
             this.renderLayoutItem(item, config, renderedFields)
           )}
           ${
-            /* Render any fields not explicitly placed in layout */
+            /* Render any fields not explicitly placed in layout or gutter */
             Object.entries(config.form).map(([fieldName, fieldConfig]) => {
-              if (!renderedFields.has(fieldName)) {
+              if (
+                !renderedFields.has(fieldName) &&
+                !gutterFields.has(fieldName)
+              ) {
                 return this.renderNewField(
                   fieldName,
                   fieldConfig as FieldConfig,
@@ -1460,6 +1490,24 @@ export class NodeEditor extends RapidElement {
     }
   }
 
+  private renderGutter(): TemplateResult {
+    const config = this.getConfig();
+    if (!config?.gutter || config.gutter.length === 0) {
+      return html``;
+    }
+
+    // Use the same layout rendering system for gutter fields
+    const renderedFields = new Set<string>();
+
+    return html`
+      <div class="gutter-fields">
+        ${config.gutter.map((item) =>
+          this.renderLayoutItem(item, config, renderedFields)
+        )}
+      </div>
+    `;
+  }
+
   private renderActionSection(): TemplateResult {
     if (!this.node || this.node.actions.length === 0) {
       return html``;
@@ -1531,6 +1579,7 @@ export class NodeEditor extends RapidElement {
 
     const headerColor = this.getHeaderColor();
     const config = this.getConfig();
+    const dialogSize = config?.dialogSize || 'medium'; // Default to 'large' if not specified
 
     return html`
       <temba-dialog
@@ -1540,6 +1589,7 @@ export class NodeEditor extends RapidElement {
         primaryButtonName="Save"
         cancelButtonName="Cancel"
         style="--header-bg: ${headerColor}"
+        size="${dialogSize}"
       >
         <div class="node-editor-form">
           ${this.renderFields()}
@@ -1547,6 +1597,8 @@ export class NodeEditor extends RapidElement {
             ? this.renderRouterSection()
             : null}
         </div>
+
+        <div slot="gutter">${this.renderGutter()}</div>
       </temba-dialog>
     `;
   }

package/src/flow/actions/add_contact_urn.ts

@@ -11,7 +11,7 @@ export const add_contact_urn: ActionConfig = {
     return html`<div
       style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
     >
-      Add ${friendlyScheme} <b>${action.path}</b>
+      Add ${friendlyScheme} <strong>${action.path}</strong>
     </div>`;
   }
 };

package/src/flow/actions/set_contact_channel.ts

@@ -6,7 +6,7 @@ export const set_contact_channel: ActionConfig = {
   name: 'Update Channel',
   color: COLORS.update,
   render: (_node: Node, action: SetContactChannel) => {
-    return html`<div>Set to <b>${action.channel.name}</b></div>`;
+    return html`<div>Set to <strong>${action.channel.name}</strong></div>`;
   },
   form: {
     channel: {

package/src/flow/actions/set_contact_field.ts

@@ -7,7 +7,8 @@ export const set_contact_field: ActionConfig = {
   color: COLORS.update,
   render: (_node: Node, action: SetContactField) => {
     return html`<div>
-      Set <b>${action.field.name}</b> to <b>${action.value}</b>
+      Set <strong>${action.field.name}</strong> to
+      <strong>${action.value}</strong>
     </div>`;
   },
   form: {

package/src/flow/actions/set_contact_language.ts

@@ -10,7 +10,9 @@ export const set_contact_language: ActionConfig = {
     const languageNames = new Intl.DisplayNames(['en'], {
       type: 'language'
     });
-    return html`<div>Set to <b>${languageNames.of(action.language)}</b></div>`;
+    return html`<div>
+      Set to <strong>${languageNames.of(action.language)}</strong>
+    </div>`;
   },
   form: {
     language: {

package/src/flow/actions/set_contact_name.ts

@@ -6,7 +6,7 @@ export const set_contact_name: ActionConfig = {
   name: 'Update Name',
   color: COLORS.update,
   render: (_node: Node, action: SetContactName) => {
-    return html`<div>Set to <b>${action.name}</b></div>`;
+    return html`<div>Set to <strong>${action.name}</strong></div>`;
   },
   form: {
     name: {

package/src/flow/actions/set_contact_status.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS, ValidationResult } from '../types';
+import { ActionConfig, COLORS } from '../types';
 import { Node, SetContactStatus } from '../../store/flow-definition';
 import { titleCase } from '../../utils';
 
@@ -7,7 +7,23 @@ export const set_contact_status: ActionConfig = {
   name: 'Update Status',
   color: COLORS.update,
   render: (_node: Node, action: SetContactStatus) => {
-    return html`<div>Set to <b>${titleCase(action.status)}</b></div>`;
+    return html`<div>Set to <strong>${titleCase(action.status)}</strong></div>`;
+  },
+  toFormData: (action: SetContactStatus) => {
+    return {
+      ...action,
+      status: {
+        name: titleCase(action.status || 'active'),
+        value: action.status || 'active'
+      }
+    };
+  },
+  fromFormData: (formData: any): SetContactStatus => {
+    return {
+      status: formData.status[0].value,
+      type: 'set_contact_status',
+      uuid: formData.uuid
+    };
   },
   form: {
     status: {
@@ -24,21 +40,5 @@ export const set_contact_status: ActionConfig = {
       ],
       helpText: 'Select the status to set for the contact'
     }
-  },
-  validate: (formData: SetContactStatus): ValidationResult => {
-    const errors: { [key: string]: string } = {};
-
-    if (!formData.status) {
-      errors.status = 'Status is required';
-    } else if (
-      !['active', 'archived', 'stopped', 'blocked'].includes(formData.status)
-    ) {
-      errors.status = 'Invalid status selected';
-    }
-
-    return {
-      valid: Object.keys(errors).length === 0,
-      errors
-    };
   }
 };

package/src/flow/actions/set_run_result.ts

@@ -8,7 +8,7 @@ export const set_run_result: ActionConfig = {
   color: COLORS.save,
   render: (_node: Node, action: SetRunResult) => {
     return html`<div>
-      Save <b>${action.value}</b> as <b>${action.name}</b>
+      Save <strong>${action.value}</strong> as <strong>${action.name}</strong>
     </div>`;
   },
   form: {