@nyaruka/temba-components 0.131.1 → 0.131.3

package/src/flow/NodeTypeSelector.ts

@@ -0,0 +1,636 @@
+import { css, html, TemplateResult } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
+import { CustomEventType } from '../interfaces';
+import { NODE_CONFIG, ACTION_CONFIG } from './config';
+import {
+  NodeConfig,
+  ActionConfig,
+  ACTION_GROUPS,
+  SPLIT_GROUPS,
+  ACTION_GROUP_METADATA,
+  SPLIT_GROUP_METADATA
+} from './types';
+
+/**
+ * Event detail for node type selection
+ */
+export interface NodeTypeSelection {
+  nodeType: string;
+  position: { x: number; y: number };
+}
+
+/**
+ * Categorizes node types for display
+ */
+interface NodeCategory {
+  name: string;
+  description: string;
+  color: string;
+  items: Array<{ type: string; config: NodeConfig | ActionConfig }>;
+  isBranching?: boolean; // true if this category contains actions that branch/split
+}
+
+/**
+ * NodeTypeSelector - A dialog for selecting which type of node to create
+ * Shows categorized lists of available actions and splits
+ */
+export class NodeTypeSelector extends RapidElement {
+  static get styles() {
+    return css`
+      :host {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 10001;
+        display: none;
+      }
+
+      :host([open]) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+      }
+
+      .dialog {
+        position: relative;
+        background: white;
+        border-radius: var(--curvature);
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+        max-width: 700px;
+        max-height: 80vh;
+        width: 90%;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .header {
+        padding: 1.5em;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      }
+
+      .header h2 {
+        margin: 0;
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: var(--color-text-dark);
+      }
+
+      .content {
+        overflow-y: auto;
+        overflow-x: hidden;
+        flex: 1;
+        padding: 0;
+      }
+
+      .section-regular {
+        padding: 1.5em;
+      }
+
+      .section-branching {
+        background: linear-gradient(
+          135deg,
+          rgba(170, 170, 170, 0.12),
+          rgba(170, 170, 170, 0.08)
+        );
+        padding: 1.5em;
+        margin: 0 -1.5em;
+        padding-left: 3em;
+        padding-right: 3em;
+      }
+
+      .section-header {
+        margin-bottom: 1.5em;
+        padding-top: 1em;
+      }
+
+      .section-title {
+        font-weight: 700;
+        font-size: 1.1rem;
+        color: var(--color-text-dark);
+        margin-bottom: 0.35em;
+        display: flex;
+        align-items: center;
+      }
+
+      .section-title::before {
+        content: '';
+        display: inline-block;
+        height: 1.2em;
+        background: linear-gradient(
+          135deg,
+          var(--color-primary-dark),
+          var(--color-primary)
+        );
+        border-radius: 2px;
+      }
+
+      .section-description {
+        font-size: 0.9rem;
+        color: var(--color-text);
+        opacity: 0.7;
+        margin-left: 0em;
+        padding-bottom: 1em;
+      }
+
+      .category {
+        margin-bottom: 2em;
+      }
+
+      .category:last-child {
+        margin-bottom: 0;
+      }
+
+      .category-title {
+        font-weight: 600;
+        color: var(--color-text-dark);
+        margin-bottom: 0.5em;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        font-size: 0.9rem;
+        opacity: 0.7;
+      }
+
+      .category-description {
+        font-size: 0.85rem;
+        color: var(--color-text);
+        opacity: 0.6;
+        margin-bottom: 0.75em;
+        line-height: 1.4;
+      }
+
+      .items-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 0.75em;
+      }
+
+      .node-item {
+        padding: 1em;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: calc(var(--curvature) * 0.75);
+        cursor: pointer;
+        transition: all 0.15s ease;
+        background: white;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .node-item::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 4px;
+        height: 100%;
+        background: var(--item-color, rgba(0, 0, 0, 0.1));
+      }
+
+      .node-item:hover {
+        border-color: var(--item-color, var(--color-primary));
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        transform: translateY(-1px);
+      }
+
+      .node-item:hover::before {
+        width: 6px;
+      }
+
+      .node-item-title {
+        font-weight: 500;
+        font-size: 1rem;
+        color: var(--color-text-dark);
+        margin-bottom: 0.25em;
+      }
+
+      .node-item-type {
+        font-size: 0.75rem;
+        color: var(--color-text);
+        opacity: 0.6;
+        font-family: monospace;
+      }
+
+      .footer {
+        padding: 1em 1.5em;
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      temba-button {
+        --button-y: 0.5em;
+        --button-x: 1.25em;
+      }
+    `;
+  }
+
+  @property({ type: Boolean, reflect: true })
+  public open = false;
+
+  @property({ type: String })
+  public mode: 'action' | 'split' | 'action-no-branching' = 'action';
+
+  @property({ type: String })
+  public flowType: string = 'message';
+
+  @property({ type: Array })
+  public features: string[] = [];
+
+  @state()
+  private clickPosition = { x: 0, y: 0 };
+
+  public show(
+    mode: 'action' | 'split' | 'action-no-branching',
+    position: { x: number; y: number }
+  ) {
+    this.mode = mode;
+    this.clickPosition = position;
+    this.open = true;
+  }
+
+  public close() {
+    this.open = false;
+  }
+
+  /**
+   * Check if a config is available for the current flow type and features
+   */
+  private isConfigAvailable(config: NodeConfig | ActionConfig): boolean {
+    // Check flow type filter
+    if (config.flowTypes !== undefined) {
+      // Empty array means not available for any flow type in selector
+      if (config.flowTypes.length === 0) {
+        return false;
+      }
+      // Non-empty array means check if current flow type is included
+      if (!config.flowTypes.includes(this.flowType as any)) {
+        return false;
+      }
+    }
+    // undefined/null flowTypes means available for all flow types
+
+    // Check features filter - all required features must be present
+    if (config.features && config.features.length > 0) {
+      for (const requiredFeature of config.features) {
+        if (!this.features.includes(requiredFeature)) {
+          return false;
+        }
+      }
+    }
+
+    return true;
+  }
+
+  private handleNodeTypeClick(nodeType: string) {
+    this.fireCustomEvent(CustomEventType.Selection, {
+      nodeType,
+      position: this.clickPosition
+    } as NodeTypeSelection);
+    this.close();
+  }
+
+  private handleOverlayClick() {
+    this.close();
+  }
+
+  private getCategories(): NodeCategory[] {
+    if (this.mode === 'action' || this.mode === 'action-no-branching') {
+      // Group actions by group
+      const actionsByGroup = new Map<
+        string,
+        Array<{ type: string; config: ActionConfig }>
+      >();
+      const splitsByGroup = new Map<
+        string,
+        Array<{ type: string; config: NodeConfig }>
+      >();
+
+      // Collect regular actions (from ACTION_CONFIG, unless hideFromActions is true)
+      Object.entries(ACTION_CONFIG)
+        .filter(([_, config]) => {
+          return (
+            config.name &&
+            !config.hideFromActions &&
+            config.group &&
+            this.isConfigAvailable(config)
+          );
+        })
+        .forEach(([type, config]) => {
+          const group = config.group;
+          if (!actionsByGroup.has(group)) {
+            actionsByGroup.set(group, []);
+          }
+          actionsByGroup.get(group)!.push({ type, config });
+        });
+
+      // Collect nodes that have showAsAction=true (these appear as "with split" actions)
+      // Only if we're not in 'action-no-branching' mode
+      if (this.mode === 'action') {
+        Object.entries(NODE_CONFIG)
+          .filter(([type, config]) => {
+            return (
+              type !== 'execute_actions' &&
+              config.name &&
+              config.showAsAction &&
+              config.group &&
+              this.isConfigAvailable(config)
+            );
+          })
+          .forEach(([type, config]) => {
+            const group = config.group!;
+            if (!splitsByGroup.has(group)) {
+              splitsByGroup.set(group, []);
+            }
+            splitsByGroup.get(group)!.push({ type, config });
+          });
+      }
+
+      // Build categories - first regular actions, then splitting actions
+      const categories: NodeCategory[] = [];
+
+      // Get the implicit order from ACTION_GROUPS object
+      const actionGroupOrder = Object.keys(ACTION_GROUPS);
+      // Get the implicit order of actions from ACTION_CONFIG
+      const actionConfigOrder = Object.keys(ACTION_CONFIG);
+
+      // Add regular action categories sorted by implicit order
+      const sortedActionCategories = Array.from(actionsByGroup.entries()).sort(
+        ([groupA], [groupB]) => {
+          const orderA = actionGroupOrder.indexOf(groupA);
+          const orderB = actionGroupOrder.indexOf(groupB);
+          return (
+            (orderA === -1 ? 999 : orderA) - (orderB === -1 ? 999 : orderB)
+          );
+        }
+      );
+
+      sortedActionCategories.forEach(([group, items]) => {
+        const metadata = ACTION_GROUP_METADATA[group];
+        // Sort items within the category by their order in ACTION_CONFIG
+        const sortedItems = items.sort((a, b) => {
+          const orderA = actionConfigOrder.indexOf(a.type);
+          const orderB = actionConfigOrder.indexOf(b.type);
+          return (
+            (orderA === -1 ? 999 : orderA) - (orderB === -1 ? 999 : orderB)
+          );
+        });
+        categories.push({
+          name: metadata.title,
+          description: metadata.description,
+          color: metadata.color,
+          items: sortedItems,
+          isBranching: false
+        });
+      });
+
+      // Add splitting action categories (with modified description to indicate they split)
+      // Also sorted by implicit order
+      // Get the implicit order of nodes from NODE_CONFIG
+      const nodeConfigOrder = Object.keys(NODE_CONFIG);
+
+      const sortedSplitCategories = Array.from(splitsByGroup.entries()).sort(
+        ([groupA], [groupB]) => {
+          const orderA = actionGroupOrder.indexOf(groupA);
+          const orderB = actionGroupOrder.indexOf(groupB);
+          return (
+            (orderA === -1 ? 999 : orderA) - (orderB === -1 ? 999 : orderB)
+          );
+        }
+      );
+
+      sortedSplitCategories.forEach(([group, items]) => {
+        const metadata = ACTION_GROUP_METADATA[group];
+        // Sort items within the category by their order in NODE_CONFIG
+        const sortedItems = items.sort((a, b) => {
+          const orderA = nodeConfigOrder.indexOf(a.type);
+          const orderB = nodeConfigOrder.indexOf(b.type);
+          return (
+            (orderA === -1 ? 999 : orderA) - (orderB === -1 ? 999 : orderB)
+          );
+        });
+        categories.push({
+          name: metadata.title,
+          description: metadata.description,
+          color: metadata.color,
+          items: sortedItems,
+          isBranching: true
+        });
+      });
+
+      return categories;
+    } else {
+      // Group splits by group
+      const itemsByGroup = new Map<
+        string,
+        Array<{ type: string; config: NodeConfig }>
+      >();
+
+      Object.entries(NODE_CONFIG)
+        .filter(([type, config]) => {
+          // exclude execute_actions (it's the default action-only node)
+          // exclude nodes that have showAsAction=true (they appear in action mode)
+          return (
+            type !== 'execute_actions' &&
+            config.name &&
+            !config.showAsAction &&
+            this.isConfigAvailable(config)
+          );
+        })
+        .forEach(([type, config]) => {
+          const group = config.group || SPLIT_GROUPS.split;
+          if (!itemsByGroup.has(group)) {
+            itemsByGroup.set(group, []);
+          }
+          itemsByGroup.get(group)!.push({ type, config });
+        });
+
+      // Convert to categories using group metadata, sorted by implicit order from SPLIT_GROUPS
+      const splitGroupOrder = Object.keys(SPLIT_GROUPS);
+      // Get the implicit order of nodes from NODE_CONFIG
+      const nodeConfigOrder = Object.keys(NODE_CONFIG);
+
+      return Array.from(itemsByGroup.entries())
+        .map(([group, items]) => {
+          const metadata =
+            SPLIT_GROUP_METADATA[group] || ACTION_GROUP_METADATA[group];
+          // Sort items within the category by their order in NODE_CONFIG
+          const sortedItems = items.sort((a, b) => {
+            const orderA = nodeConfigOrder.indexOf(a.type);
+            const orderB = nodeConfigOrder.indexOf(b.type);
+            return (
+              (orderA === -1 ? 999 : orderA) - (orderB === -1 ? 999 : orderB)
+            );
+          });
+          return {
+            name: metadata.title,
+            description: metadata.description,
+            color: metadata.color,
+            items: sortedItems
+          };
+        })
+        .sort((a, b) => {
+          // Find the group key by looking up metadata by title
+          const groupA = Object.keys(SPLIT_GROUP_METADATA).find(
+            (key) => SPLIT_GROUP_METADATA[key].title === a.name
+          )!;
+          const groupB = Object.keys(SPLIT_GROUP_METADATA).find(
+            (key) => SPLIT_GROUP_METADATA[key].title === b.name
+          )!;
+          const orderA = splitGroupOrder.indexOf(groupA);
+          const orderB = splitGroupOrder.indexOf(groupB);
+          return (
+            (orderA === -1 ? 999 : orderA) - (orderB === -1 ? 999 : orderB)
+          );
+        });
+    }
+  }
+
+  public render(): TemplateResult {
+    if (!this.open) {
+      return html``;
+    }
+
+    const categories = this.getCategories();
+    const title =
+      this.mode === 'split'
+        ? 'Select a Split'
+        : this.mode === 'action-no-branching'
+        ? 'Add Action'
+        : 'Select an Action';
+
+    // Separate regular and branching categories for action mode
+    const regularCategories = categories.filter((c) => !c.isBranching);
+    const branchingCategories = categories.filter((c) => c.isBranching);
+    const hasBranchingSection = branchingCategories.length > 0;
+
+    return html`
+      <div class="overlay" @click=${this.handleOverlayClick}></div>
+      <div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
+        <div class="header">
+          <h2>${title}</h2>
+        </div>
+        <div class="content">
+          ${this.mode === 'action' || this.mode === 'action-no-branching'
+            ? html`
+                <div class="section-regular">
+                  ${regularCategories.map(
+                    (category) => html`
+                      <div class="category">
+                        <div class="category-title">${category.name}</div>
+                        <div class="category-description">
+                          ${category.description}
+                        </div>
+                        <div class="items-grid">
+                          ${category.items.map(
+                            (item) => html`
+                              <div
+                                class="node-item"
+                                style="--item-color: ${category.color}"
+                                @click=${() =>
+                                  this.handleNodeTypeClick(item.type)}
+                              >
+                                <div class="node-item-title">
+                                  ${item.config.name}
+                                </div>
+                                <div class="node-item-type">${item.type}</div>
+                              </div>
+                            `
+                          )}
+                        </div>
+                      </div>
+                    `
+                  )}
+                </div>
+                ${hasBranchingSection
+                  ? html`
+                      <div class="section-branching">
+                        <div class="section-header">
+                          <div class="section-title">Actions that Branch</div>
+                          <div class="section-description">
+                            These actions also split the flow based on their
+                            outcome
+                          </div>
+                        </div>
+                        ${branchingCategories.map(
+                          (category) => html`
+                            <div class="category">
+                              <div class="category-title">${category.name}</div>
+                              <div class="category-description">
+                                ${category.description}
+                              </div>
+                              <div class="items-grid">
+                                ${category.items.map(
+                                  (item) => html`
+                                    <div
+                                      class="node-item"
+                                      style="--item-color: ${category.color}"
+                                      @click=${() =>
+                                        this.handleNodeTypeClick(item.type)}
+                                    >
+                                      <div class="node-item-title">
+                                        ${item.config.name}
+                                      </div>
+                                      <div class="node-item-type">
+                                        ${item.type}
+                                      </div>
+                                    </div>
+                                  `
+                                )}
+                              </div>
+                            </div>
+                          `
+                        )}
+                      </div>
+                    `
+                  : ''}
+              `
+            : html`
+                <div class="section-regular">
+                  ${categories.map(
+                    (category) => html`
+                      <div class="category">
+                        <div class="category-title">${category.name}</div>
+                        <div class="category-description">
+                          ${category.description}
+                        </div>
+                        <div class="items-grid">
+                          ${category.items.map(
+                            (item) => html`
+                              <div
+                                class="node-item"
+                                style="--item-color: ${category.color}"
+                                @click=${() =>
+                                  this.handleNodeTypeClick(item.type)}
+                              >
+                                <div class="node-item-title">
+                                  ${item.config.name}
+                                </div>
+                                <div class="node-item-type">${item.type}</div>
+                              </div>
+                            `
+                          )}
+                        </div>
+                      </div>
+                    `
+                  )}
+                </div>
+              `}
+        </div>
+        <div class="footer">
+          <temba-button @click=${this.close} secondary>Cancel</temba-button>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/flow/StickyNote.ts

@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { StickyNote as StickyNoteData } from '../store/flow-definition';
 import { getStore } from '../store/Store';
+import { AppState, fromStore, zustand } from '../store/AppState';
 
 export class StickyNote extends RapidElement {
   @property({ type: String })
@@ -20,6 +21,9 @@ export class StickyNote extends RapidElement {
   @property({ type: Boolean })
   private colorPickerExpanded = false;
 
+  @fromStore(zustand, (state: AppState) => state.isTranslating)
+  private isTranslating!: boolean;
+
   static get styles() {
     return css`
       :host {
@@ -119,6 +123,8 @@ export class StickyNote extends RapidElement {
         border-top-left-radius: var(--curvature);
         border-top-right-radius: var(--curvature);
         flex-grow: 1;
+        padding: 4px 8px !important;
+        margin: 2px;
         padding-left: 8px;
       }
       .sticky-title:empty::before {
@@ -139,6 +145,7 @@ export class StickyNote extends RapidElement {
         min-height: 48px;
         word-wrap: break-word;
         white-space: pre-wrap;
+        margin: 2px;
       }
       .sticky-body:empty::before {
         content: 'Click to add note';
@@ -377,7 +384,7 @@ export class StickyNote extends RapidElement {
           <temba-icon name="drag" class="drag-handle"></temba-icon>
           <div
             class="sticky-title"
-            contenteditable="true"
+            contenteditable="${!this.isTranslating}"
             @blur="${this.handleTitleBlur}"
             @keydown="${this.handleKeyDown}"
             @mousedown="${this.handleContentMouseDown}"
@@ -387,13 +394,15 @@ export class StickyNote extends RapidElement {
         <div class="sticky-body-container">
           <div
             class="sticky-body"
-            contenteditable="true"
+            contenteditable="${!this.isTranslating}"
             @blur="${this.handleBodyBlur}"
             @keydown="${this.handleKeyDown}"
             @mousedown="${this.handleContentMouseDown}"
             .textContent="${this.data.body}"
           ></div>
-          <div class="edit-icon" title="Edit note"></div>
+          ${!this.isTranslating
+            ? html`<div class="edit-icon" title="Edit note"></div>`
+            : ''}
 
           <!-- Color picker -->
           <div