@nyaruka/temba-components 0.129.7 → 0.129.9

package/src/form/MessageEditor.ts

@@ -0,0 +1,449 @@
+import { TemplateResult, css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { FormElement } from './FormElement';
+import { Completion } from './Completion';
+import { MediaPicker } from './MediaPicker';
+import { Attachment } from '../interfaces';
+import { getClasses } from '../utils';
+import { Icon } from '../Icons';
+
+/**
+ * MessageEditor is a composed component that combines temba-completion and temba-media-picker
+ * for editing messages with text completion and file attachments
+ */
+export class MessageEditor extends FormElement {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      .message-editor-container {
+        border: 1px solid var(--color-widget-border);
+        border-radius: var(--curvature-widget);
+        background: #fff;
+        position: relative;
+        transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+      }
+
+      .message-editor-container:focus-within {
+        border-color: var(--color-focus);
+        box-shadow: var(--widget-box-shadow-focused);
+      }
+
+      .message-editor-container.highlight {
+        border-color: rgba(156, 222, 106, 0.88);
+      }
+
+      /* Hide the completion field border since we draw our own */
+      .message-editor-container temba-completion::part(field) {
+        border: none;
+        box-shadow: none;
+        border-radius: 0;
+      }
+
+      .message-editor-container temba-completion {
+        --widget-box-shadow: none;
+        --widget-box-shadow-focused: none;
+        --widget-box-shadow-focused: none;
+        --color-widget-border: transparent;
+        --color-focus: transparent;
+      }
+
+      .completion-wrapper {
+      }
+
+      .media-wrapper {
+        padding: 4px 8px;
+        background: rgba(0, 0, 0, 0.03);
+        border-top: 1px solid var(--color-widget-border);
+        border-radius: 0 0 var(--curvature-widget) var(--curvature-widget);
+        box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
+        margin-top: 3px;
+        display: none;
+      }
+      .has-attachments .media-wrapper {
+        display: flex;
+      }
+
+      /* Override media picker styles to integrate better */
+      .media-wrapper temba-media-picker {
+        --color-widget-border: transparent;
+      }
+
+      .media-wrapper .attachments-list {
+        padding: 0.2em 0;
+      }
+
+      .drop-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(210, 243, 184, 0.5);
+        border-radius: var(--curvature-widget);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s ease-in-out;
+        z-index: 10;
+      }
+
+      .message-editor-container.highlight .drop-overlay {
+        opacity: 1;
+      }
+
+      .drop-message {
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 12px 24px;
+        border-radius: var(--curvature);
+        font-weight: 500;
+      }
+
+      .attachment-icon {
+        position: absolute;
+        bottom: 4px;
+        right: 4px;
+        color: var(--color-text-dark);
+        cursor: pointer;
+        padding: 6px;
+        border-radius: var(--curvature);
+        transition: background-color 0.2s ease-in-out;
+        display: block;
+      }
+
+      .has-attachments .attachment-icon {
+        display: none;
+      }
+
+      .attachment-icon:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+    `;
+  }
+
+  @property({ type: String })
+  name = '';
+
+  @property({ type: String })
+  value = '';
+
+  @property({ type: String })
+  placeholder = '';
+
+  @property({ type: Boolean })
+  textarea = true;
+
+  @property({ type: Boolean })
+  autogrow = true;
+
+  @property({ type: Number })
+  minHeight = 60;
+
+  @property({ type: Number })
+  maxLength: number;
+
+  @property({ type: Boolean })
+  session: boolean;
+
+  @property({ type: Boolean })
+  submitOnEnter = false;
+
+  @property({ type: Boolean })
+  gsm: boolean;
+
+  @property({ type: Boolean })
+  disableCompletion: boolean;
+
+  @property({ type: String })
+  counter: string;
+
+  @property({ type: Array })
+  attachments: (Attachment | string)[] = [];
+
+  @property({ type: String })
+  accept = '';
+
+  @property({ type: Number, attribute: 'max-attachments' })
+  maxAttachments = 3;
+
+  @property({ type: String })
+  endpoint = '';
+
+  @property({ type: Boolean, attribute: false })
+  pendingDrop = false;
+
+  @property({ type: Boolean, attribute: false })
+  uploading = false;
+
+  private completionElement: Completion;
+  private mediaPickerElement: MediaPicker;
+
+  public firstUpdated(changes: Map<string, any>) {
+    super.firstUpdated(changes);
+
+    this.completionElement = this.shadowRoot.querySelector(
+      'temba-completion'
+    ) as Completion;
+
+    // Get the visible media picker (either in media-wrapper or the hidden one)
+    this.mediaPickerElement = this.shadowRoot.querySelector(
+      'temba-media-picker'
+    ) as MediaPicker;
+
+    // Set up proper attachment filtering and parsing
+    this.parseAndFilterAttachments();
+  }
+
+  /**
+   * Parse attachments and filter out runtime attachments for media picker
+   */
+  private parseAndFilterAttachments() {
+    if (!this.attachments) return;
+
+    // Filter out runtime attachments (those without '/' in content type)
+    const staticAttachments = this.attachments.filter((attachment) => {
+      if (typeof attachment === 'string') {
+        const [contentType] = attachment.split(':');
+        return contentType.includes('/');
+      }
+      return true;
+    });
+
+    // Convert string attachments to Attachment objects for media picker
+    const mediaAttachments = staticAttachments.map((attachment) => {
+      if (typeof attachment === 'string') {
+        // split into content type and URL
+        // e.g. "image/jpeg:http://example.com/image.jpg"
+        const colonIndex = attachment.indexOf(':');
+        const contentType = attachment.substring(0, colonIndex);
+        const url = attachment.substring(colonIndex + 1);
+        return {
+          content_type: contentType,
+          url: url,
+          filename: this.getFilenameFromUrl(url),
+          size: 0
+        } as Attachment;
+      }
+      return attachment;
+    });
+
+    if (this.mediaPickerElement) {
+      this.mediaPickerElement.attachments = mediaAttachments;
+    }
+  }
+
+  /**
+   * Check if there are any static attachments (excluding runtime attachments)
+   */
+  private hasStaticAttachments(): boolean {
+    if (!this.attachments || this.attachments.length === 0) return false;
+
+    return this.attachments.some((attachment) => {
+      if (typeof attachment === 'string') {
+        const [contentType] = attachment.split(':');
+        return contentType.includes('/');
+      }
+      return true;
+    });
+  }
+
+  private getFilenameFromUrl(url: string): string {
+    try {
+      const urlObj = new URL(url);
+      const pathname = urlObj.pathname;
+      return pathname.substring(pathname.lastIndexOf('/') + 1) || 'attachment';
+    } catch {
+      return 'attachment';
+    }
+  }
+
+  private handleCompletionChange(event: Event) {
+    event.stopPropagation();
+    const completion = event.target as Completion;
+    this.value = completion.value;
+    this.fireEvent('change');
+  }
+
+  private handleMediaChange(event: Event) {
+    event.stopPropagation();
+    const mediaPicker = event.target as MediaPicker;
+    // Convert media picker attachments back to the format expected by the form
+    const formattedAttachments = mediaPicker.attachments.map((attachment) => {
+      return `${attachment.content_type}:${attachment.url}`;
+    });
+
+    // Merge with any runtime attachments that were filtered out
+    const runtimeAttachments = (this.attachments || []).filter((attachment) => {
+      if (typeof attachment === 'string') {
+        const [contentType] = attachment.split(':');
+        return !contentType.includes('/');
+      }
+      return false;
+    }) as string[];
+
+    this.attachments = [...runtimeAttachments, ...formattedAttachments];
+    this.fireEvent('change');
+  }
+
+  private handleDragEnter(evt: DragEvent): void {
+    this.highlight(evt);
+  }
+
+  private handleDragOver(evt: DragEvent): void {
+    this.highlight(evt);
+  }
+
+  private handleDragLeave(evt: DragEvent): void {
+    this.unhighlight(evt);
+  }
+
+  private handleDrop(evt: DragEvent): void {
+    this.unhighlight(evt);
+
+    // Forward to media picker
+    if (this.mediaPickerElement) {
+      const files = [...evt.dataTransfer.files];
+      this.mediaPickerElement.uploadFiles(files);
+    }
+  }
+
+  private handleAttachmentIconClick(): void {
+    // Trigger the file picker on the media picker
+    if (this.mediaPickerElement) {
+      const uploadInput = this.mediaPickerElement.shadowRoot.querySelector(
+        '#upload-input'
+      ) as HTMLInputElement;
+      if (uploadInput) {
+        uploadInput.click();
+      }
+    }
+  }
+
+  private highlight(evt: DragEvent): void {
+    evt.preventDefault();
+    evt.stopPropagation();
+
+    // Always allow highlight for testing purposes, but in real usage check media picker
+    this.pendingDrop = true;
+  }
+
+  private unhighlight(evt: DragEvent): void {
+    evt.preventDefault();
+    evt.stopPropagation();
+    this.pendingDrop = false;
+  }
+
+  public updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('attachments')) {
+      // Re-query media picker since the DOM structure may have changed
+      this.mediaPickerElement = this.shadowRoot.querySelector(
+        'temba-media-picker'
+      ) as MediaPicker;
+    }
+
+    if (changedProperties.has('uploading')) {
+      this.dispatchEvent(
+        new CustomEvent('loading', {
+          detail: { loading: this.uploading }
+        })
+      );
+    }
+  }
+
+  public focus() {
+    super.focus();
+    if (this.completionElement) {
+      this.completionElement.focus();
+    }
+  }
+
+  public click() {
+    super.click();
+    if (this.completionElement) {
+      this.completionElement.click();
+    }
+  }
+
+  public render(): TemplateResult {
+    const hasAttachments = this.hasStaticAttachments();
+
+    return html`
+      <temba-field
+        name=${this.name}
+        .label=${this.label}
+        .helpText=${this.helpText}
+        .errors=${this.errors}
+        .widgetOnly=${this.widgetOnly}
+      >
+        <div
+          class=${getClasses({
+            'message-editor-container': true,
+            highlight: this.pendingDrop,
+            'has-attachments': hasAttachments
+          })}
+          @dragenter=${this.handleDragEnter}
+          @dragover=${this.handleDragOver}
+          @dragleave=${this.handleDragLeave}
+          @drop=${this.handleDrop}
+        >
+          <div class="completion-wrapper">
+            <temba-completion
+              name=${this.name}
+              .value=${this.value}
+              placeholder=${this.placeholder}
+              ?textarea=${this.textarea}
+              ?autogrow=${this.autogrow}
+              ?session=${this.session}
+              ?submitOnEnter=${this.submitOnEnter}
+              ?gsm=${this.gsm}
+              ?disableCompletion=${this.disableCompletion}
+              maxlength=${ifDefined(this.maxLength)}
+              counter=${ifDefined(this.counter)}
+              minHeight=${ifDefined(this.minHeight)}
+              widgetOnly
+              @change=${this.handleCompletionChange}
+            ></temba-completion>
+          </div>
+
+          <div class="media-wrapper ">
+            <temba-media-picker
+              .accept=${this.accept}
+              .max=${this.maxAttachments}
+              .endpoint=${this.endpoint}
+              @change=${this.handleMediaChange}
+              ignoreDrops
+            ></temba-media-picker>
+          </div>
+          <temba-icon
+            class="attachment-icon"
+            name=${Icon.attachment}
+            size="1.2"
+            @click=${this.handleAttachmentIconClick}
+          ></temba-icon>
+
+          <div class="drop-overlay"></div>
+
+          <!-- Hidden media picker for handling uploads when no attachments are shown -->
+          ${!hasAttachments
+            ? html`<temba-media-picker
+                style="display: none;"
+                .accept=${this.accept}
+                .max=${this.maxAttachments}
+                .endpoint=${this.endpoint}
+                @change=${this.handleMediaChange}
+                ignoreDrops
+              ></temba-media-picker>`
+            : ''}
+        </div>
+      </temba-field>
+    `;
+  }
+}

package/src/form/TextInput.ts

@@ -193,7 +193,7 @@ export class TextInput extends FormElement {
 
     this.inputElement = this.shadowRoot.querySelector('.textinput');
 
-    if (changes.has('counter')) {
+    if (changes.has('counter') && this.counter && this.counter.trim()) {
       let root = this.getParentModax() as any;
       if (root) {
         root = root.shadowRoot;
@@ -202,7 +202,20 @@ export class TextInput extends FormElement {
         root = document;
       }
       this.counterElement = root.querySelector(this.counter);
-      this.counterElement.text = this.value;
+      if (this.counterElement) {
+        this.counterElement.text = this.value;
+      }
+    }
+  }
+
+  private updateAutogrowSize(): void {
+    if (this.textarea && this.autogrow) {
+      const autogrow = this.shadowRoot.querySelector(
+        '.grow-wrap > div'
+      ) as HTMLDivElement;
+      if (autogrow) {
+        autogrow.innerText = this.value + String.fromCharCode(10);
+      }
     }
   }
 
@@ -214,12 +227,7 @@ export class TextInput extends FormElement {
         this.fireEvent('change');
       }
 
-      if (this.textarea && this.autogrow) {
-        const autogrow = this.shadowRoot.querySelector(
-          '.grow-wrap > div'
-        ) as HTMLDivElement;
-        autogrow.innerText = this.value + String.fromCharCode(10);
-      }
+      this.updateAutogrowSize();
 
       if (this.cursorStart > -1 && this.cursorEnd > -1) {
         this.inputElement.setSelectionRange(this.cursorStart, this.cursorEnd);

package/src/form/select/Select.ts

@@ -81,7 +81,7 @@ export class Select<T extends SelectOption> extends FormElement {
         background: rgba(100, 100, 100, 0.05);
       }
 
-      . selected-item.multi .remove-item {
+      .selected-item.multi .remove-item {
         display: none;
       }
 
@@ -222,6 +222,7 @@ export class Select<T extends SelectOption> extends FormElement {
 
       .multi temba-sortable-list {
         margin: 0 !important;
+        flex-grow: 1;
       }
 
       input {
@@ -255,6 +256,12 @@ export class Select<T extends SelectOption> extends FormElement {
 
       .multi .input-wrapper {
         margin-left: 2px !important;
+        margin-right: 2px !important;
+        margin-top: 2px;
+        margin-bottom: 2px;
+        flex-shrink: 0;
+        min-width: 100px;
+        align-self: center;
       }
 
       .input-wrapper:focus-within .placeholder {
@@ -290,11 +297,6 @@ export class Select<T extends SelectOption> extends FormElement {
         box-shadow: none !important;
       }
 
-      .multi .input-wrapper {
-        flex-shrink: 0;
-        min-width: 100px;
-      }
-
       .input-wrapper .searchbox {
       }
 
@@ -310,6 +312,17 @@ export class Select<T extends SelectOption> extends FormElement {
         margin-left: 6px;
       }
 
+      .empty .placeholder {
+        display: block;
+      }
+
+      .multi .placeholder {
+        display: block;
+        margin: 2px 2px;
+        padding: 2px 8px;
+        align-self: center;
+      }
+
       .footer {
         padding: 5px 10px;
         background: var(--color-primary-light);
@@ -320,10 +333,10 @@ export class Select<T extends SelectOption> extends FormElement {
       }
 
       .small {
-        --temba-select-selected-padding: 7px;
-        --temba-select-selected-line-height: 13px;
-        --temba-select-selected-font-size: 12px;
-        --search-input-height: 7px !important;
+        --temba-select-selected-padding: 6px;
+        --temba-select-selected-line-height: 12px;
+        --temba-select-selected-font-size: 14px;
+        --temba-select-min-height: 2.28em;
       }
 
       .info-text {
@@ -476,15 +489,26 @@ export class Select<T extends SelectOption> extends FormElement {
   @property({ type: String, attribute: 'info_text' })
   infoText = '';
 
+  // Override the setter to ensure values is always an array
   @property({ type: Array })
-  values: T[] = [];
+  set values(newValues: any) {
+    this._values = Array.isArray(newValues) ? newValues : [];
+    this.requestUpdate('values');
+  }
+
+  get values(): T[] {
+    return this._values || [];
+  }
+
+  private _values: T[] = [];
 
   @property({ type: Object })
   selection: any;
 
   @property({ attribute: false })
-  getName: (option: any) => string = (option: any) =>
-    option[this.nameKey || 'name'];
+  getName: (option: any) => string = (option: any) => {
+    return option[this.nameKey || 'name'];
+  };
 
   @property({ attribute: false })
   isMatch: (option: any, q: string) => boolean = this.isMatchDefault;
@@ -545,7 +569,7 @@ export class Select<T extends SelectOption> extends FormElement {
   private alphaSort = (a: any, b: any) => {
     // by default, all endpoint values are sorted by name
     if (this.endpoint) {
-      return this.getName(a).localeCompare(this.getName(b));
+      return this.getNameInternal(a).localeCompare(this.getNameInternal(b));
     }
     return 0;
   };
@@ -573,7 +597,7 @@ export class Select<T extends SelectOption> extends FormElement {
   }
 
   public isMatchDefault(option: T, q: string) {
-    const name = this.getName(option) || '';
+    const name = this.getNameInternal(option) || '';
     return name.toLowerCase().indexOf(q) > -1;
   }
 
@@ -963,7 +987,9 @@ export class Select<T extends SelectOption> extends FormElement {
   }
 
   protected getNameInternal: (option: T) => string = (option: T) => {
-    return this.getName(option);
+    return this.getName
+      ? this.getName(option)
+      : option[this.nameKey || 'name'] || '';
   };
 
   private getOptionsDefault(response: WebResponse): any[] {
@@ -1493,7 +1519,7 @@ export class Select<T extends SelectOption> extends FormElement {
               name="${icon}"
               style="margin-right:0.5em;"
             ></temba-icon>`
-          : null}<span>${this.getName(option)}</span>
+          : null}<span>${this.getNameInternal(option)}</span>
       </div>
     `;
   }
@@ -1636,9 +1662,13 @@ export class Select<T extends SelectOption> extends FormElement {
 
   public render(): TemplateResult {
     const placeholder = this.values.length === 0 ? this.placeholder : '';
-    const placeholderDiv = html`
-      <div class="placeholder">${placeholder}</div>
-    `;
+
+    // Single unified placeholder - shows when empty and (not focused OR not searchable)
+    const shouldShowPlaceholder =
+      this.values.length === 0 && (!this.focused || !this.searchable);
+    const placeholderElement = shouldShowPlaceholder
+      ? html`<div class="placeholder">${placeholder}</div>`
+      : null;
 
     const clear =
       this.clearable && this.values.length > 0 && !this.isMultiMode
@@ -1683,10 +1713,9 @@ export class Select<T extends SelectOption> extends FormElement {
               .value=${this.input}
             />
             <div id="anchor" style=${styleMap(anchorStyles)}></div>
-            ${placeholderDiv}
           </div>
         `
-      : placeholderDiv;
+      : null;
 
     const items = html`${!this.isMultiMode && !this.resolving ? input : null}
     ${this.isMultiMode && this.values.length > 1
@@ -1760,9 +1789,10 @@ export class Select<T extends SelectOption> extends FormElement {
                 </div>
               `
             )}
+            ${this.searchable && this.focused ? input : null}
           </temba-sortable-list>
         `
-      : this.values.map(
+      : html`${this.values.map(
           (selected: any, index: number) => html`
             <div
               class="selected-item ${index === this.selectedIndex
@@ -1811,7 +1841,8 @@ export class Select<T extends SelectOption> extends FormElement {
             </div>
           `
         )}
-    ${this.isMultiMode ? input : null}`;
+        ${this.isMultiMode && this.searchable && this.focused ? input : null}
+        ${placeholderElement}`}`;
 
     return html`