@nyaruka/temba-components 0.131.2 → 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/live/ContactChat.ts

@@ -812,15 +812,6 @@ export class ContactChat extends ContactStoreElement {
     return null;
   }
 
-  private isMessageError(status: string | { status: string }): boolean {
-    if (typeof status === 'string') {
-      return status === 'E' || status === 'F';
-    } else if (status && typeof status === 'object' && 'status' in status) {
-      return status.status === 'errored' || status.status === 'failed';
-    }
-    return false;
-  }
-
   private createMessages(page: ContactHistoryPage): ChatEvent[] {
     if (page.events) {
       let messages = [];
@@ -866,7 +857,10 @@ export class ContactChat extends ContactStoreElement {
             date: new Date(msgEvent.created_on),
             attachments: msgEvent.msg.attachments,
             text: msgEvent.msg.text,
-            sendError: this.isMessageError(msgEvent._status),
+            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"
             >
@@ -881,15 +875,6 @@ export class ContactChat extends ContactStoreElement {
                       ${msgEvent.optin.name}
                     </div>`
                   : null}
-                ${msgEvent._failed_reason
-                  ? 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"
-                      >
-                        ${msgEvent._failed_reason}
-                      </div>
-                    `
-                  : null}
               </div>
               ${msgEvent._logs_url
                 ? html`<a style="margin-left:0.5em" href="${msgEvent._logs_url}"

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`,
+    };
+  

package/src/locales/fr.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 = {
-  s73b4d70c02f4b4e0: `No options`,
-  scf1453991c986b25: `Tab to complete, enter to select`,
-  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 = {
+      's73b4d70c02f4b4e0': `No options`,
+'scf1453991c986b25': `Tab to complete, enter to select`,
+'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`,
+    };
+  

package/src/locales/locale-codes.ts

@@ -10,9 +10,18 @@ export const sourceLocale = `en`;
  * The other locale codes that this application is localized into. Sorted
  * lexicographically.
  */
-export const targetLocales = [`es`, `fr`, `pt`] as const;
+export const targetLocales = [
+  `es`,
+  `fr`,
+  `pt`,
+] as const;
 
 /**
  * All valid project locale codes. Sorted lexicographically.
  */
-export const allLocales = [`en`, `es`, `fr`, `pt`] as const;
+export const allLocales = [
+  `en`,
+  `es`,
+  `fr`,
+  `pt`,
+] as const;

package/src/locales/pt.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 = {
-  s73b4d70c02f4b4e0: `No options`,
-  scf1453991c986b25: `Tab to complete, enter to select`,
-  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 = {
+      's73b4d70c02f4b4e0': `No options`,
+'scf1453991c986b25': `Tab to complete, enter to select`,
+'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`,
+    };
+  

package/src/store/AppState.ts

@@ -109,6 +109,17 @@ export interface AppState {
   createStickyNote(position: FlowPosition): string;
   createNode(nodeType: string, position: FlowPosition): string;
   addNode(node: Node, nodeUI: NodeUI): void;
+  updateLocalization(
+    languageCode: string,
+    actionUuid: string,
+    localizationData: Record<string, any>
+  ): void;
+  setTranslationFilters: (filters: { categories: boolean }) => void;
+  markAutoTranslated: (
+    languageCode: string,
+    uuid: string,
+    attributes: string[]
+  ) => void;
 }
 
 export const zustand = createStore<AppState>()(
@@ -407,6 +418,99 @@ export const zustand = createStore<AppState>()(
 
           state.dirtyDate = new Date();
         });
+      },
+
+      updateLocalization: (
+        languageCode: string,
+        actionUuid: string,
+        localizationData: Record<string, any>
+      ) => {
+        set((state: AppState) => {
+          // Initialize localization structure if it doesn't exist
+          if (!state.flowDefinition.localization) {
+            state.flowDefinition.localization = {};
+          }
+
+          if (!state.flowDefinition.localization[languageCode]) {
+            state.flowDefinition.localization[languageCode] = {};
+          }
+
+          // Update or remove the localization for this action
+          if (Object.keys(localizationData).length > 0) {
+            state.flowDefinition.localization[languageCode][actionUuid] =
+              localizationData;
+          } else {
+            // If no localized values, remove the entry
+            delete state.flowDefinition.localization[languageCode][actionUuid];
+          }
+
+          // Clean up empty language sections
+          if (
+            Object.keys(state.flowDefinition.localization[languageCode])
+              .length === 0
+          ) {
+            delete state.flowDefinition.localization[languageCode];
+          }
+
+          // Clean up empty localization object
+          if (Object.keys(state.flowDefinition.localization).length === 0) {
+            delete state.flowDefinition.localization;
+          }
+
+          state.dirtyDate = new Date();
+        });
+      },
+
+      setTranslationFilters: (filters: { categories: boolean }) => {
+        set((state: AppState) => {
+          if (!state.flowDefinition?._ui) {
+            return;
+          }
+
+          const currentFilters = state.flowDefinition._ui
+            .translation_filters || {
+            categories: false
+          };
+
+          state.flowDefinition._ui.translation_filters = {
+            ...currentFilters,
+            categories: !!filters.categories
+          };
+
+          state.dirtyDate = new Date();
+        });
+      },
+
+      markAutoTranslated: (
+        languageCode: string,
+        uuid: string,
+        attributes: string[]
+      ) => {
+        set((state: AppState) => {
+          if (!state.flowDefinition?._ui) {
+            return;
+          }
+
+          if (!state.flowDefinition._ui.auto_translations) {
+            state.flowDefinition._ui.auto_translations = {};
+          }
+
+          if (!state.flowDefinition._ui.auto_translations[languageCode]) {
+            state.flowDefinition._ui.auto_translations[languageCode] = {};
+          }
+
+          const existing =
+            state.flowDefinition._ui.auto_translations[languageCode][uuid] ||
+            [];
+
+          const merged = Array.from(
+            new Set([...existing, ...(attributes || [])])
+          );
+
+          state.flowDefinition._ui.auto_translations[languageCode][uuid] =
+            merged;
+          state.dirtyDate = new Date();
+        });
       }
     }))
   )

package/static/api/llms.json

@@ -0,0 +1,18 @@
+{
+  "next": null,
+  "previous": null,
+  "results": [
+    {
+      "uuid": "2399e7d6-fcdf-4e47-a835-f3bdb7f80938",
+      "name": "GPT 4.1",
+      "type": "openai",
+      "description": "General-purpose reasoning model"
+    },
+    {
+      "uuid": "4399e7d6-fcdf-4e47-a835-f3bdb7f80938",
+      "name": "GPT 5",
+      "type": "openai",
+      "description": "Latest experimental model"
+    }
+  ]
+}

package/temba-modules.ts

@@ -74,6 +74,8 @@ import { KeyValueEditor } from './src/form/KeyValueEditor';
 import { TembaArrayEditor } from './src/form/ArrayEditor';
 import { MessageEditor } from './src/form/MessageEditor';
 import './src/form/BaseListEditor'; // Import base class
+import { FloatingTab } from './src/display/FloatingTab';
+import { FloatingWindow } from './src/layout/FloatingWindow';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -158,3 +160,5 @@ addCustomElement('temba-chart', TembaChart);
 addCustomElement('temba-key-value-editor', KeyValueEditor);
 addCustomElement('temba-array-editor', TembaArrayEditor);
 addCustomElement('temba-message-editor', MessageEditor);
+addCustomElement('temba-floating-tab', FloatingTab);
+addCustomElement('temba-floating-window', FloatingWindow);