@nyaruka/temba-components 0.131.1 → 0.131.3

package/src/layout/FloatingWindow.ts

@@ -0,0 +1,386 @@
+import { css, html, PropertyValueMap, TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
+import { CustomEventType } from '../interfaces';
+import { getClasses } from '../utils';
+import { FloatingTab } from '../display/FloatingTab';
+
+export class FloatingWindow extends RapidElement {
+  static get styles() {
+    return css`
+      .window.hidden {
+        transform: translateX(100%);
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .window {
+        transition: transform var(--transition-duration, 300ms) ease-in-out,
+          opacity var(--transition-duration, 300ms) ease-in-out;
+        position: fixed;
+        z-index: 9999;
+        top: 100px;
+        background: white;
+        border-radius: 8px;
+        box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.3);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      .window.chromeless {
+        background: transparent;
+        border-radius: 0;
+        box-shadow: none;
+      }
+
+      .window.dragging {
+        user-select: none;
+        cursor: move;
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 6px 6px;
+        background: var(--header-color, var(--color-primary-light, #f3f4f6));
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        cursor: move;
+        user-select: none;
+      }
+
+      .title {
+        font-weight: 600;
+        font-size: 16px;
+        color: white;
+        padding-left: 8px;
+      }
+
+      .close-button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        transition: background-color calc(var(--transition-duration, 150ms) / 2)
+          ease-in-out;
+      }
+
+      .close-button:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+
+      .close-button temba-icon {
+        --icon-color: white;
+      }
+
+      .body {
+        flex: 1;
+        overflow-y: auto;
+        padding: 16px;
+      }
+
+      .window.chromeless .body {
+        padding: 0;
+      }
+
+      ::slotted(.drag-handle) {
+        cursor: move;
+        user-select: none;
+        border: 1px solid red;
+      }
+    `;
+  }
+
+  @property({ type: String })
+  header = '';
+
+  @property({ type: Number })
+  width = 500;
+
+  @property({ type: Number })
+  minHeight = 200;
+
+  @property({ type: Number })
+  maxHeight = 800;
+
+  @property({ type: Number })
+  top = 100;
+
+  @property({ type: Number })
+  left = -1; // -1 means calculate from right side
+
+  @property({ type: Boolean })
+  hidden = true;
+
+  @property({ type: Boolean })
+  dragging = false;
+
+  @property({ type: Boolean })
+  chromeless = false;
+
+  @property({ type: String })
+  color = '#6B7280';
+
+  private dragStartX = 0;
+  private dragStartY = 0;
+  private dragOffsetX = 0;
+  private dragOffsetY = 0;
+  private positionFromRight = false;
+  private defaultTop = 100;
+  private defaultLeft = -1;
+
+  public firstUpdated(
+    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.firstUpdated(changes);
+
+    // store the default position from properties
+    this.defaultTop = this.top;
+    this.defaultLeft = this.left;
+
+    // determine if we should position from right side
+    if (this.left === -1) {
+      this.positionFromRight = true;
+    }
+
+    // set up drag handle listeners for chromeless windows
+    if (this.chromeless) {
+      this.setupDragHandles();
+    }
+
+    // listen for window resize to keep window in bounds
+    window.addEventListener('resize', this.handleResize);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    window.removeEventListener('resize', this.handleResize);
+  }
+
+  private setupDragHandles() {
+    // listen for mousedown on slotted content
+    this.addEventListener('mousedown', this.handleSlotMouseDown);
+  }
+
+  private handleSlotMouseDown = (event: MouseEvent) => {
+    // check if the target or any parent has the drag-handle class
+    const target = event.target as HTMLElement;
+    const dragHandle = target.closest('.drag-handle');
+
+    if (!dragHandle) {
+      return;
+    }
+
+    this.dragging = true;
+    this.dragStartX = event.clientX;
+    this.dragStartY = event.clientY;
+    this.dragOffsetX = this.left;
+    this.dragOffsetY = this.top;
+
+    document.addEventListener('mousemove', this.handleMouseMove);
+    document.addEventListener('mouseup', this.handleMouseUp);
+
+    event.preventDefault();
+  };
+
+  public updated(
+    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.updated(changes);
+    if (changes.has('hidden')) {
+      this.classList.toggle('hidden', this.hidden);
+
+      // when hiding, reset positioning behavior to original
+      if (this.hidden && !changes.get('hidden')) {
+        if (this.defaultLeft === -1) {
+          this.positionFromRight = true;
+        }
+      }
+
+      // reset to default position when showing
+      if (!this.hidden && changes.get('hidden')) {
+        // reset top to default
+        this.top = this.defaultTop;
+
+        // if positioned from right, recalculate based on current viewport
+        if (this.positionFromRight) {
+          this.left = window.innerWidth - this.width - 20;
+        } else {
+          // reset left to default
+          this.left = this.defaultLeft;
+        }
+      }
+    }
+
+    // setup drag handles if chromeless changed to true
+    if (changes.has('chromeless') && this.chromeless) {
+      this.setupDragHandles();
+    }
+  }
+
+  private handleClose() {
+    this.hidden = true;
+    // show all tabs when window is closed
+    FloatingTab.showAllTabs();
+    this.fireCustomEvent(CustomEventType.DialogHidden);
+  }
+
+  private handleHeaderMouseDown(event: MouseEvent) {
+    // don't start drag if clicking on close button
+    if ((event.target as HTMLElement).closest('.close-button')) {
+      return;
+    }
+
+    this.dragging = true;
+    this.dragStartX = event.clientX;
+    this.dragStartY = event.clientY;
+    this.dragOffsetX = this.left;
+    this.dragOffsetY = this.top;
+
+    document.addEventListener('mousemove', this.handleMouseMove);
+    document.addEventListener('mouseup', this.handleMouseUp);
+
+    event.preventDefault();
+  }
+
+  private handleMouseMove = (event: MouseEvent) => {
+    if (!this.dragging) return;
+
+    const deltaX = event.clientX - this.dragStartX;
+    const deltaY = event.clientY - this.dragStartY;
+
+    this.left = this.dragOffsetX + deltaX;
+    this.top = this.dragOffsetY + deltaY;
+
+    // keep window within viewport bounds with 20px padding
+    const padding = 20;
+    this.left = Math.max(
+      padding,
+      Math.min(this.left, window.innerWidth - this.width - padding)
+    );
+
+    // get the actual rendered height of the window element
+    const windowElement = this.shadowRoot?.querySelector(
+      '.window'
+    ) as HTMLElement;
+    const currentHeight =
+      windowElement?.offsetHeight || this.maxHeight || window.innerHeight;
+    const maxTop = Math.max(
+      padding,
+      window.innerHeight - currentHeight - padding
+    );
+    this.top = Math.max(padding, Math.min(this.top, maxTop));
+  };
+
+  private handleMouseUp = () => {
+    this.dragging = false;
+    document.removeEventListener('mousemove', this.handleMouseMove);
+    document.removeEventListener('mouseup', this.handleMouseUp);
+
+    // once user drags the window, stop auto-positioning from right
+    this.positionFromRight = false;
+  };
+
+  private handleResize = () => {
+    // only constrain position if window is visible
+    if (this.hidden) return;
+
+    const padding = 20;
+    const windowElement = this.shadowRoot?.querySelector(
+      '.window'
+    ) as HTMLElement;
+    const currentHeight =
+      windowElement?.offsetHeight || this.maxHeight || window.innerHeight;
+
+    // if positioned from right, always recalculate from right edge
+    if (this.positionFromRight) {
+      this.left = window.innerWidth - this.width - padding;
+    } else {
+      // only adjust left if out of bounds
+      const minLeft = padding;
+      const maxLeft = window.innerWidth - this.width - padding;
+
+      if (this.left < minLeft) {
+        this.left = minLeft;
+      } else if (this.left > maxLeft) {
+        this.left = maxLeft;
+      }
+    }
+
+    // only adjust top if out of bounds
+    const minTop = padding;
+    const maxTop = Math.max(
+      padding,
+      window.innerHeight - currentHeight - padding
+    );
+
+    if (this.top < minTop) {
+      this.top = minTop;
+    } else if (this.top > maxTop) {
+      this.top = maxTop;
+    }
+  };
+
+  public show() {
+    this.hidden = false;
+  }
+
+  public hide() {
+    this.hidden = true;
+  }
+
+  public close() {
+    this.hidden = true;
+    // show all tabs when window is closed
+    FloatingTab.showAllTabs();
+    this.fireCustomEvent(CustomEventType.DialogHidden);
+  }
+
+  public render(): TemplateResult {
+    const minHeightStyle = this.minHeight
+      ? `min-height: ${this.minHeight}px;`
+      : '';
+    const maxHeightStyle = this.maxHeight
+      ? `max-height: ${this.maxHeight}px;`
+      : '';
+
+    const windowStyle = `
+      width: ${this.width}px;
+      ${minHeightStyle}
+      ${maxHeightStyle}
+      top: ${this.top}px;
+      left: ${this.left}px;
+      --header-color: ${this.color};
+    `;
+
+    const windowClasses = getClasses({
+      window: true,
+      dragging: this.dragging,
+      hidden: this.hidden,
+      chromeless: this.chromeless
+    });
+
+    return html`
+      <div class="${windowClasses}" style="${windowStyle}">
+        ${!this.chromeless
+          ? html`
+              <div class="header" @mousedown=${this.handleHeaderMouseDown}>
+                <div class="title">${this.header}</div>
+                <button class="close-button" @click=${this.handleClose}>
+                  <temba-icon name="close" size="1.5"></temba-icon>
+                </button>
+              </div>
+            `
+          : ''}
+        <div class="body">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/list/SortableList.ts

@@ -9,6 +9,10 @@ import { RapidElement } from '../RapidElement';
 
 // how far we have to drag before it starts
 const DRAG_THRESHOLD = 2;
+
+// padding around container for external drag detection
+const EXTERNAL_DRAG_PADDING = 50;
+
 export class SortableList extends RapidElement {
   originalDownDisplay: string;
   static get styles() {
@@ -65,6 +69,9 @@ export class SortableList extends RapidElement {
   @property({ type: String })
   gap: string = '0em';
 
+  @property({ type: Boolean })
+  externalDrag: boolean = false;
+
   /**
    * Optional callback to allow parent components to customize the ghost node.
    * Called after the ghost node is cloned but before it is appended to the DOM.
@@ -86,6 +93,7 @@ export class SortableList extends RapidElement {
   dropPlaceholder: HTMLDivElement = null;
   pendingDropIndex = -1;
   pendingTargetElement: HTMLElement = null;
+  isExternalDrag = false;
 
   private clickBlocker: ((e: MouseEvent) => void) | null = null;
 
@@ -108,6 +116,20 @@ export class SortableList extends RapidElement {
     return eles;
   }
 
+  private isMouseOverContainer(mouseX: number, mouseY: number): boolean {
+    const container = this.shadowRoot.querySelector('.container');
+    if (!container) return false;
+
+    const rect = container.getBoundingClientRect();
+    // add some padding to make it easier to stay within the container
+    return (
+      mouseX >= rect.left - EXTERNAL_DRAG_PADDING &&
+      mouseX <= rect.right + EXTERNAL_DRAG_PADDING &&
+      mouseY >= rect.top - EXTERNAL_DRAG_PADDING &&
+      mouseY <= rect.bottom + EXTERNAL_DRAG_PADDING
+    );
+  }
+
   private cloneElementWithState(element: HTMLElement): HTMLElement {
     // First create a basic clone
     const clone = element.cloneNode(true) as HTMLElement;
@@ -305,6 +327,8 @@ export class SortableList extends RapidElement {
       this.dropPlaceholder.style.minHeight = rect.height + 'px';
       this.dropPlaceholder.style.borderRadius = 'var(--curvature)';
       this.dropPlaceholder.style.flexShrink = '0';
+      this.dropPlaceholder.style.background = '#f3f4f6';
+      this.dropPlaceholder.style.border = '2px dashed #d1d5db';
     }
 
     // Insert the placeholder in the correct position in the DOM
@@ -335,10 +359,8 @@ export class SortableList extends RapidElement {
     this.dropPlaceholder.style.minHeight = rect.height + 'px';
     this.dropPlaceholder.style.borderRadius = 'var(--curvature)';
     this.dropPlaceholder.style.flexShrink = '0';
-    this.dropPlaceholder.style.background =
-      'rgba(var(--color-primary-rgb), 0.1)';
-    this.dropPlaceholder.style.border =
-      '2px dashed rgba(var(--color-primary-rgb), 0.3)';
+    this.dropPlaceholder.style.background = '#f3f4f6';
+    this.dropPlaceholder.style.border = '2px dashed #d1d5db';
 
     // Insert the placeholder right after the hidden original element
     this.downEle.insertAdjacentElement('afterend', this.dropPlaceholder);
@@ -440,41 +462,86 @@ export class SortableList extends RapidElement {
       this.ghostElement.style.left = event.clientX - this.xOffset + 'px';
       this.ghostElement.style.top = event.clientY - this.yOffset + 'px';
 
-      const targetInfo = this.getDropTargetInfo(event.clientX, event.clientY);
-      if (targetInfo) {
-        const { element: targetElement, insertAfter } = targetInfo;
-        const targetIdx = this.getRowIndex(targetElement.id);
+      // check if the drag is over the container (only if external dragging is allowed)
+      const isOverContainer = this.externalDrag
+        ? this.isMouseOverContainer(event.clientX, event.clientY)
+        : true; // always consider "over container" if external drag is disabled
 
-        // Use the original drag index we captured before moving the element
-        const originalDragIdx = this.originalDragIndex;
+      // detect transition between internal and external drag (only if allowed)
+      if (this.externalDrag && !isOverContainer && !this.isExternalDrag) {
+        // transitioning to external drag
+        this.isExternalDrag = true;
+        this.hideDropPlaceholder();
 
-        // Calculate where the dragged element will end up in the final array
-        // targetIdx is the position of target element in current DOM (missing dragged element)
+        // hide the ghost element when dragging externally
+        if (this.ghostElement) {
+          this.ghostElement.style.display = 'none';
+        }
 
-        let dropIdx;
-        if (targetIdx < originalDragIdx) {
-          // Target is before the original drag position - moving backward
-          dropIdx = insertAfter ? targetIdx + 1 : targetIdx;
-        } else {
-          // Target was originally after the drag position - moving forward
-          // When moving the dragged element forward (i.e., to a higher index), the targetIdx is based on the current DOM,
-          // which no longer includes the dragged element. This means all elements after the original position have shifted left by one,
-          // so we need to subtract 1 from targetIdx to get the correct insertion index. If inserting after the target, we use targetIdx as is.
-          dropIdx = insertAfter ? targetIdx : targetIdx - 1;
+        this.fireCustomEvent(CustomEventType.DragExternal, {
+          id: this.downEle.id,
+          mouseX: event.clientX,
+          mouseY: event.clientY
+        });
+      } else if (this.externalDrag && isOverContainer && this.isExternalDrag) {
+        // transitioning back to internal drag
+        this.isExternalDrag = false;
+
+        // show the ghost element again when dragging internally
+        if (this.ghostElement) {
+          this.ghostElement.style.display = 'block';
         }
 
-        // Store pending drop info but don't fire event yet
-        this.dropTargetId = targetElement.id;
-        this.pendingDropIndex = dropIdx;
-        this.pendingTargetElement = targetElement;
+        this.fireCustomEvent(CustomEventType.DragInternal, {
+          id: this.downEle.id
+        });
+      }
+
+      // only show drop placeholder and calculate drop position if internal drag
+      if (!this.isExternalDrag) {
+        const targetInfo = this.getDropTargetInfo(event.clientX, event.clientY);
+        if (targetInfo) {
+          const { element: targetElement, insertAfter } = targetInfo;
+          const targetIdx = this.getRowIndex(targetElement.id);
+
+          // Use the original drag index we captured before moving the element
+          const originalDragIdx = this.originalDragIndex;
+
+          // Calculate where the dragged element will end up in the final array
+          // targetIdx is the position of target element in current DOM (missing dragged element)
+
+          let dropIdx;
+          if (targetIdx < originalDragIdx) {
+            // Target is before the original drag position - moving backward
+            dropIdx = insertAfter ? targetIdx + 1 : targetIdx;
+          } else {
+            // Target was originally after the drag position - moving forward
+            // When moving the dragged element forward (i.e., to a higher index), the targetIdx is based on the current DOM,
+            // which no longer includes the dragged element. This means all elements after the original position have shifted left by one,
+            // so we need to subtract 1 from targetIdx to get the correct insertion index. If inserting after the target, we use targetIdx as is.
+            dropIdx = insertAfter ? targetIdx : targetIdx - 1;
+          }
 
-        // Show drop placeholder
-        this.showDropPlaceholder(targetElement, insertAfter);
+          // Store pending drop info but don't fire event yet
+          this.dropTargetId = targetElement.id;
+          this.pendingDropIndex = dropIdx;
+          this.pendingTargetElement = targetElement;
+
+          // Show drop placeholder
+          this.showDropPlaceholder(targetElement, insertAfter);
+        } else {
+          this.hideDropPlaceholder();
+          this.dropTargetId = null;
+          this.pendingDropIndex = -1;
+          this.pendingTargetElement = null;
+        }
       } else {
-        this.hideDropPlaceholder();
-        this.dropTargetId = null;
-        this.pendingDropIndex = -1;
-        this.pendingTargetElement = null;
+        // external drag - continue firing external drag events with updated position
+        this.fireCustomEvent(CustomEventType.DragExternal, {
+          id: this.downEle.id,
+          mouseX: event.clientX,
+          mouseY: event.clientY
+        });
       }
     }
   }
@@ -498,7 +565,11 @@ export class SortableList extends RapidElement {
       this.hideDropPlaceholder();
 
       // fire the order changed event only when dropped if we have a valid drop position
-      if (this.pendingDropIndex >= 0 && this.pendingTargetElement) {
+      if (
+        !this.isExternalDrag &&
+        this.pendingDropIndex >= 0 &&
+        this.pendingTargetElement
+      ) {
         // Use the original drag index we captured before hiding the element
         const originalDragIdx = this.originalDragIndex;
 
@@ -515,7 +586,10 @@ export class SortableList extends RapidElement {
       }
 
       this.fireCustomEvent(CustomEventType.DragStop, {
-        id: this.draggingId
+        id: this.draggingId,
+        isExternal: this.isExternalDrag,
+        mouseX: evt.clientX,
+        mouseY: evt.clientY
       });
 
       this.draggingId = null;
@@ -525,6 +599,7 @@ export class SortableList extends RapidElement {
       this.originalDragIndex = -1;
       this.pendingDropIndex = -1;
       this.pendingTargetElement = null;
+      this.isExternalDrag = false;
 
       // Clear the ghost reference since we removed it
       this.ghostElement = null;

package/src/live/ContactChat.ts

@@ -808,12 +808,6 @@ export class ContactChat extends ContactStoreElement {
       };
     } else if (event._user) {
       return event._user;
-    } else if (event.created_by) {
-      return {
-        email: event.created_by.email,
-        name: `${event.created_by.first_name} ${event.created_by.last_name}`.trim(),
-        avatar: event.created_by.avatar
-      };
     }
     return null;
   }
@@ -852,13 +846,9 @@ export class ContactChat extends ContactStoreElement {
         } else if (
           event.type === 'msg_created' ||
           event.type === 'msg_received' ||
-          event.type === 'ivr_created' ||
-          event.type === 'broadcast_created'
+          event.type === 'ivr_created'
         ) {
           const msgEvent = event as MsgEvent;
-          const status = msgEvent.status || msgEvent._status;
-          const failedReason =
-            msgEvent.failed_reason_display || msgEvent._failed_reason;
 
           messages.push({
             id: event.uuid,
@@ -867,7 +857,10 @@ export class ContactChat extends ContactStoreElement {
             date: new Date(msgEvent.created_on),
             attachments: msgEvent.msg.attachments,
             text: msgEvent.msg.text,
-            sendError: status === 'E' || status === 'F',
+            sendError:
+              msgEvent._status &&
+              (msgEvent._status.status === 'errored' ||
+                msgEvent._status.status === 'failed'),
             popup: html`<div
               style="display: flex; flex-direction: row; align-items:center; justify-content: space-between;font-size:0.9em;line-height:1em;min-width:10em"
             >
@@ -882,20 +875,9 @@ export class ContactChat extends ContactStoreElement {
                       ${msgEvent.optin.name}
                     </div>`
                   : null}
-                ${failedReason
-                  ? html`
-                      <div
-                        style="margin-top:0.2em;margin-right: 0.5em;min-width:10em;max-width:15em;color:var(--color-error);font-size:0.9em"
-                      >
-                        ${failedReason}
-                      </div>
-                    `
-                  : null}
               </div>
-              ${msgEvent.logs_url || msgEvent._logs_url
-                ? html`<a
-                    style="margin-left:0.5em"
-                    href="${msgEvent.logs_url || msgEvent._logs_url}"
+              ${msgEvent._logs_url
+                ? html`<a style="margin-left:0.5em" href="${msgEvent._logs_url}"
                     ><temba-icon name="log"></temba-icon
                   ></a>`
                 : null}

package/src/locales/es.ts

@@ -1,13 +1,18 @@
-// Do not modify this file by hand!
-// Re-generate this file by running lit-localize
-
-/* eslint-disable no-irregular-whitespace */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-export const templates = {
-  scf1453991c986b25: `Tab para completar, enter para seleccionar`,
-  s73b4d70c02f4b4e0: `No options`,
-  s8f02e3a18ffc083a: `Are not currently in a flow`,
-  s638236250662c6b3: `Have sent a message in the last`,
-  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
-};
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      'scf1453991c986b25': `Tab para completar, enter para seleccionar`,
+'s73b4d70c02f4b4e0': `No options`,
+'s8f02e3a18ffc083a': `Are not currently in a flow`,
+'s638236250662c6b3': `Have sent a message in the last`,
+'s4788ee206c4570c7': `Have not started this flow in the last 90 days`,
+    };
+