@nyaruka/temba-components 0.156.8 → 0.156.10

package/src/form/Compose.ts

@@ -41,7 +41,10 @@ export class Compose extends FieldElement {
 
       .container:focus-within {
         border-color: var(--color-focus);
-        box-shadow: var(--widget-box-shadow-focused, 0 0 0 3px rgba(0, 123, 255, 0.25));
+        box-shadow: var(
+          --widget-box-shadow-focused,
+          0 0 0 3px rgba(0, 123, 255, 0.25)
+        );
       }
 
       .editor-wrapper {
@@ -115,14 +118,15 @@ export class Compose extends FieldElement {
         color: #888;
         background: rgba(0, 0, 0, 0.04);
         border-radius: 8px;
-        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+        transition:
+          background-color 0.2s ease-in-out,
+          color 0.2s ease-in-out;
       }
 
       .shortcut-icon:hover {
         color: var(--color-text-dark);
         background: rgba(0, 0, 0, 0.08);
       }
-
     `;
   }
 
@@ -347,7 +351,10 @@ export class Compose extends FieldElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener('keydown', this.handleHostKeyDown as EventListener);
+    this.removeEventListener(
+      'keydown',
+      this.handleHostKeyDown as EventListener
+    );
   }
 
   private handleShortcutIconClick() {

package/src/form/MessageEditor.ts

@@ -59,7 +59,7 @@ export class MessageEditor extends FieldElement {
         position: relative;
       }
 
-      ::slotted([slot="icons"]) {
+      ::slotted([slot='icons']) {
         position: absolute;
         bottom: 4px;
         left: 36px;
@@ -69,7 +69,7 @@ export class MessageEditor extends FieldElement {
         z-index: 1;
       }
 
-      .has-attachments ::slotted([slot="icons"]) {
+      .has-attachments ::slotted([slot='icons']) {
         left: 4px;
       }
 
@@ -155,7 +155,9 @@ export class MessageEditor extends FieldElement {
         padding: 6px;
         border-radius: 8px;
         background: rgba(0, 0, 0, 0.04);
-        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+        transition:
+          background-color 0.2s ease-in-out,
+          color 0.2s ease-in-out;
       }
 
       .attachment-icon:hover {

package/src/form/RichEditor.ts

@@ -678,7 +678,9 @@ export class RichEditor extends FieldElement {
       <div class="comp-container">
         <div id="anchor" style=${styleMap(anchorStyles)}></div>
         <div
-          class="input-container ${this.flavor !== 'default' ? this.flavor : ''}"
+          class="input-container ${this.flavor !== 'default'
+            ? this.flavor
+            : ''}"
           style=${this.minHeight
             ? `--textarea-min-height: ${this.minHeight}px`
             : ''}

package/src/form/TemplateEditor.ts

@@ -491,7 +491,11 @@ export class TemplateEditor extends FieldElement {
         >
         </temba-select>
         ${this.templateWarning && this.selectedTemplate
-          ? html`<temba-alert level="warning" style="margin-bottom: 0.5em; display: block;">${this.templateWarning}</temba-alert>`
+          ? html`<temba-alert
+              level="warning"
+              style="margin-bottom: 0.5em; display: block;"
+              >${this.templateWarning}</temba-alert
+            >`
           : null}
         ${content ? html` <div class="template">${content}</div>` : null}
       </div>

package/src/form/select/Select.ts

@@ -866,9 +866,7 @@ export class Select<T extends SelectOption> extends FieldElement {
   }
 
   private updateEnterHintPosition() {
-    const hint = this.shadowRoot.querySelector(
-      '.enter-hint'
-    ) as HTMLElement;
+    const hint = this.shadowRoot.querySelector('.enter-hint') as HTMLElement;
     if (!hint) {
       this.removeHintRepositionListeners();
       return;
@@ -2346,7 +2344,9 @@ export class Select<T extends SelectOption> extends FieldElement {
               : null
           }</slot>
           ${
-            !this.tags && !this.emails && !(this.clearable && this.values.length > 0 && !this.isMultiMode)
+            !this.tags &&
+            !this.emails &&
+            !(this.clearable && this.values.length > 0 && !this.isMultiMode)
               ? html`<div
                   class="right-side arrow"
                   style="display:block;margin-right:5px"
@@ -2412,11 +2412,13 @@ export class Select<T extends SelectOption> extends FieldElement {
           : null
       }
     </temba-options>
-    ${showEnterHint
-      ? html`<div class="enter-hint">
-          <span style="position:relative;top:3px">↵</span> ${msg('to add')}
-        </div>`
-      : null}
+    ${
+      showEnterHint
+        ? html`<div class="enter-hint">
+            <span style="position:relative;top:3px">↵</span> ${msg('to add')}
+          </div>`
+        : null
+    }
     `;
   }
 

package/src/layout/AccordionSection.ts

@@ -194,9 +194,15 @@ export class AccordionSection extends LitElement {
         @mouseenter=${this.handleMouseEnter}
         @mouseleave=${this.handleMouseLeave}
       >
-        <div class="accordion-title">${this.icon
-            ? html`<temba-icon name=${this.icon} size="1" style="margin-right:6px;color:#999;"></temba-icon>`
-            : ''}${this.label}</div>
+        <div class="accordion-title">
+          ${this.icon
+            ? html`<temba-icon
+                name=${this.icon}
+                size="1"
+                style="margin-right:6px;color:#999;"
+              ></temba-icon>`
+            : ''}${this.label}
+        </div>
         ${this.hasError
           ? html`<temba-icon
               name="alert_warning"

package/src/layout/Modax.ts

@@ -312,9 +312,7 @@ export class Modax extends RapidElement {
         } else {
           // apply or clear header colors from response
           const headerBg = response.headers.get('X-Temba-Header-Bg');
-          const headerText = response.headers.get(
-            'X-Temba-Header-Text'
-          );
+          const headerText = response.headers.get('X-Temba-Header-Text');
           if (headerBg) {
             this.style.setProperty('--header-bg', headerBg);
           } else {

package/src/live/ContactChat.ts

@@ -68,8 +68,6 @@ export class ContactChat extends ContactStoreElement {
         --compose-padding: 3px;
         --compose-curvature: none;
         border-top: 1px inset rgba(0, 0, 0, 0.05);
-
-
       }
 
       .chat-wrapper {
@@ -612,9 +610,7 @@ export class ContactChat extends ContactStoreElement {
         this.refreshId = null;
       }
       window.setTimeout(() => {
-        const input = this.shadowRoot.querySelector(
-          '.search-input'
-        ) as any;
+        const input = this.shadowRoot.querySelector('.search-input') as any;
         if (input) {
           input.focus();
         }
@@ -1125,7 +1121,13 @@ export class ContactChat extends ContactStoreElement {
   private fetchingNewer = false;
 
   private fetchNewerMessages() {
-    if (!this.searchMode || !this.afterUUID || !this.chat || this.fetchingNewer || this.blockFetchingNewer) {
+    if (
+      !this.searchMode ||
+      !this.afterUUID ||
+      !this.chat ||
+      this.fetchingNewer ||
+      this.blockFetchingNewer
+    ) {
       return;
     }
 
@@ -1141,28 +1143,30 @@ export class ContactChat extends ContactStoreElement {
       this.currentTicket?.uuid,
       null,
       this.afterUUID
-    ).then((page: ContactHistoryPage) => {
-      if (!this.chat) {
-        this.fetchingNewer = false;
-        return;
-      }
+    )
+      .then((page: ContactHistoryPage) => {
+        if (!this.chat) {
+          this.fetchingNewer = false;
+          return;
+        }
 
-      const messages = this.createMessages(page);
-      messages.reverse();
+        const messages = this.createMessages(page);
+        messages.reverse();
 
-      if (messages.length === 0) {
-        this.blockFetchingNewer = true;
-        this.fetchingNewer = false;
-        return;
-      }
+        if (messages.length === 0) {
+          this.blockFetchingNewer = true;
+          this.fetchingNewer = false;
+          return;
+        }
 
-      // maintainScroll=true keeps the user's visual position stable
-      // so they must actively scroll down to trigger the next fetch
-      // fetchingNewer is reset in fetchComplete after scroll settles
-      this.chat.addMessages(messages, null, true, true);
-    }).catch(() => {
-      this.fetchingNewer = false;
-    });
+        // maintainScroll=true keeps the user's visual position stable
+        // so they must actively scroll down to trigger the next fetch
+        // fetchingNewer is reset in fetchComplete after scroll settles
+        this.chat.addMessages(messages, null, true, true);
+      })
+      .catch(() => {
+        this.fetchingNewer = false;
+      });
   }
 
   private getTembaCompose(): TemplateResult {
@@ -1330,7 +1334,11 @@ export class ContactChat extends ContactStoreElement {
       ${this.currentContact
         ? html`<div class="chat-container">
               ${this.showSearch && this.searchMode
-                ? html`<div class="search-overlay ${this.searchClosing ? 'closing' : ''}">
+                ? html`<div
+                    class="search-overlay ${this.searchClosing
+                      ? 'closing'
+                      : ''}"
+                  >
                     <div class="search-input-wrapper">
                       <temba-textinput
                         class="search-input"
@@ -1350,10 +1358,7 @@ export class ContactChat extends ContactStoreElement {
                         this.searchLoading}
                         title="Search (Enter)"
                       >
-                        <temba-icon
-                          name="search"
-                          size="0.8"
-                        ></temba-icon>
+                        <temba-icon name="search" size="0.8"></temba-icon>
                       </button>
                     </div>
                     ${this.searchLoading
@@ -1362,22 +1367,25 @@ export class ContactChat extends ContactStoreElement {
                         ></span>`
                       : this.searchResults.length > 0
                         ? html`<span class="search-counter"
-                            >${this.searchIndex + 1} /
-                            ${this.searchResults.length}</span
-                          ><button
-                            class="search-btn ${this.searchFocused && this.searchQuery.trim() === this.lastSearchedQuery ? 'enter-target' : ''}"
-                            @click=${this.handleSearchNext}
-                            title="Older match (Enter)"
-                          >
-                            &#x25B2;
-                          </button>
-                          <button
-                            class="search-btn"
-                            @click=${this.handleSearchPrev}
-                            title="Newer match (Shift+Enter)"
-                          >
-                            &#x25BC;
-                          </button>`
+                              >${this.searchIndex + 1} /
+                              ${this.searchResults.length}</span
+                            ><button
+                              class="search-btn ${this.searchFocused &&
+                              this.searchQuery.trim() === this.lastSearchedQuery
+                                ? 'enter-target'
+                                : ''}"
+                              @click=${this.handleSearchNext}
+                              title="Older match (Enter)"
+                            >
+                              &#x25B2;
+                            </button>
+                            <button
+                              class="search-btn"
+                              @click=${this.handleSearchPrev}
+                              title="Newer match (Shift+Enter)"
+                            >
+                              &#x25BC;
+                            </button>`
                         : null}
                     <button
                       class="search-btn"

package/src/simulator/Simulator.ts

@@ -1947,13 +1947,19 @@ export class Simulator extends RapidElement {
       totalElapsedMs === null
         ? 'n/a'
         : this.formatWebhookDuration(totalElapsedMs);
-    const renderWebhookLogContent = (log: WebhookLog, singleAttempt = false) => {
+    const renderWebhookLogContent = (
+      log: WebhookLog,
+      singleAttempt = false
+    ) => {
       const request = this.formatWebhookValue(log.request) || 'No request body';
-      const response = this.formatWebhookValue(log.response) || 'No response body';
+      const response =
+        this.formatWebhookValue(log.response) || 'No response body';
 
       return html`
         <div
-          class="webhook-log-content ${singleAttempt ? 'webhook-single-log' : ''}"
+          class="webhook-log-content ${singleAttempt
+            ? 'webhook-single-log'
+            : ''}"
         >
           <div class="webhook-log-section">
             <h4>Request</h4>

package/src/store/AppState.ts

@@ -192,7 +192,7 @@ export interface AppState {
   issuesByAction: Map<string, FlowIssue[]>;
 
   languageCode: string;
-  languageNames: { [code: string]: Language };
+  languageNames: { [code: string]: string };
   workspace: Workspace;
   isTranslating: boolean;
   viewingRevision: boolean;

package/src/store/Store.ts

@@ -30,6 +30,7 @@ import { sourceLocale, targetLocales } from '../locales/locale-codes';
 import { getFullName } from '../display/TembaUser';
 import { AppState, zustand } from './AppState';
 import { StoreApi } from 'zustand/vanilla';
+import { getLanguageDisplayName } from '../flow/utils';
 
 const { setLocale } = configureLocalization({
   sourceLocale,
@@ -379,7 +380,11 @@ export class Store extends RapidElement {
   }
 
   public getLanguageName(iso: string) {
-    return this.languages[iso];
+    const name = this.languages[iso];
+    if (!name || name === 'und' || iso === 'und') {
+      return getLanguageDisplayName(iso);
+    }
+    return name;
   }
 
   public isDynamicGroup(uuid: string): boolean {

package/src/utils.ts

@@ -7,6 +7,13 @@ import { Attachment, ContactField, Shortcut, Ticket, User } from './interfaces';
 import ColorHash from 'color-hash';
 import { Toast } from './display/Toast';
 import { v4 as generateUUID, v7 as generateUUIDv7 } from 'uuid';
+import {
+  categoryNamesEqual,
+  findCategoryByName,
+  isSystemCategory
+} from './flow/categoryUtils';
+
+export { isSystemCategory } from './flow/categoryUtils';
 
 export const DEFAULT_MEDIA_ENDPOINT = '/api/v2/media.json';
 
@@ -1096,8 +1103,9 @@ export const createOrPreserveCategory = (
   const { name, existingCategories, existingExits, existingCases, caseConfig } =
     params;
 
-  // Find existing category
-  const existingCategory = existingCategories.find((cat) => cat.name === name);
+  // Find existing category (case-insensitive so renames that only change
+  // casing preserve UUIDs and destinations)
+  const existingCategory = findCategoryByName(existingCategories, name);
   const existingExit = existingCategory
     ? existingExits.find((exit) => exit.uuid === existingCategory.exit_uuid)
     : null;
@@ -1247,13 +1255,6 @@ export const createMultiCategoryRouter = (
   };
 };
 
-// Helper function to check if a category is a system category
-export const isSystemCategory = (categoryName: string): boolean => {
-  return ['No Response', 'Other', 'All Responses', 'Timeout'].includes(
-    categoryName
-  );
-};
-
 // Helper function to check if a UUID belongs to a system category
 export const isSystemCategoryUuid = (
   uuid: string,
@@ -1529,16 +1530,18 @@ export const createRulesRouter = (
   // Name is "Other" if there are user rules, "All Responses" if there are no user rules
   const defaultCategoryName = userRules.length > 0 ? 'Other' : 'All Responses';
 
-  // Try to find existing default category by name (prefer exact match)
-  let existingDefaultCategory = existingCategories.find(
-    (cat) => cat.name === defaultCategoryName
+  // Try to find existing default category by name (case-insensitive)
+  let existingDefaultCategory = findCategoryByName(
+    existingCategories,
+    defaultCategoryName
   );
 
-  // If no exact match, try to find the other possible default category name
+  // If no match, try the other possible default category name
   if (!existingDefaultCategory) {
     const alternateName = userRules.length > 0 ? 'All Responses' : 'Other';
-    existingDefaultCategory = existingCategories.find(
-      (cat) => cat.name === alternateName
+    existingDefaultCategory = findCategoryByName(
+      existingCategories,
+      alternateName
     );
   }
 
@@ -1564,7 +1567,9 @@ export const createRulesRouter = (
 
   // Find the default category (either "Other" or "All Responses")
   const defaultCategory = categories.find(
-    (cat) => cat.name === 'Other' || cat.name === 'All Responses'
+    (cat) =>
+      categoryNamesEqual(cat.name, 'Other') ||
+      categoryNamesEqual(cat.name, 'All Responses')
   );
 
   return {