@nyaruka/temba-components 0.108.7 → 0.109.0

package/src/charcount/CharCount.ts

@@ -47,15 +47,14 @@ export class CharCount extends RapidElement {
         overflow: hidden;
         opacity: 0.3;
         transform: scale(0.7);
-        box-shadow: var(--shadow);
+        box-shadow: var(--dropdown-shadow);
         transition: transform cubic-bezier(0.71, 0.18, 0.61, 1.33)
           var(--transition-speed);
         visibility: hidden;
-        margin-top: var(--temba-charcount-summary-margin-top);
-        right: var(--temba-charcount-summary-right);
-        bottom: var(--temba-charcount-summary-bottom);
         text-align: left;
-        position: var(--temba-charcount-summary-position);
+        position: fixed;
+        margin-left: -190px;
+        margin-top: 20px;
         z-index: 1000;
       }
 

package/src/completion/Completion.ts

@@ -116,6 +116,9 @@ export class Completion extends FormElement {
   @property({ type: Boolean })
   gsm: boolean;
 
+  @property({ type: Boolean })
+  disableCompletion: boolean;
+
   @property({ type: String })
   counter: string;
 
@@ -140,30 +143,32 @@ export class Completion extends FormElement {
   }
 
   private handleKeyUp(evt: KeyboardEvent) {
-    // if we have options, ignore keys that are meant for them
-    if (this.options && this.options.length > 0) {
-      if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {
-        return;
-      }
+    if (this.disableCompletion) {
+      // if we have options, ignore keys that are meant for them
+      if (this.options && this.options.length > 0) {
+        if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {
+          return;
+        }
+
+        if (evt.ctrlKey) {
+          if (evt.key === 'n' || evt.key === 'p') {
+            return;
+          }
+        }
 
-      if (evt.ctrlKey) {
-        if (evt.key === 'n' || evt.key === 'p') {
+        if (
+          evt.key === 'Enter' ||
+          evt.key === 'Escape' ||
+          evt.key === 'Tab' ||
+          evt.key.startsWith('Control')
+        ) {
+          evt.stopPropagation();
+          evt.preventDefault();
           return;
         }
-      }
 
-      if (
-        evt.key === 'Enter' ||
-        evt.key === 'Escape' ||
-        evt.key === 'Tab' ||
-        evt.key.startsWith('Control')
-      ) {
-        evt.stopPropagation();
-        evt.preventDefault();
-        return;
+        this.executeQuery(evt.currentTarget as TextInput);
       }
-
-      this.executeQuery(evt.currentTarget as TextInput);
     }
   }
 
@@ -172,10 +177,15 @@ export class Completion extends FormElement {
   }
 
   private executeQuery(ele: TextInput) {
+    if (this.disableCompletion) {
+      return;
+    }
+
     const store: Store = document.querySelector('temba-store');
     if (!ele.inputElement) {
       return;
     }
+
     const result = executeCompletionQuery(
       ele.inputElement,
       store,
@@ -232,6 +242,10 @@ export class Completion extends FormElement {
     }
   }
 
+  public getTextInput(): TextInput {
+    return this.textInputElement;
+  }
+
   public click() {
     super.click();
     const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;

package/src/compose/Compose.ts

@@ -1,19 +1,20 @@
 import { TemplateResult, html, css } from 'lit';
 import { FormElement } from '../FormElement';
 import { property } from 'lit/decorators.js';
-import { Attachment, CustomEventType, Language } from '../interfaces';
+import { Attachment, CustomEventType, Language, Shortcut } from '../interfaces';
 import { DEFAULT_MEDIA_ENDPOINT, getClasses } from '../utils';
 import { Completion } from '../completion/Completion';
 import { Select } from '../select/Select';
 import { TabPane } from '../tabpane/TabPane';
 import { MediaPicker } from '../mediapicker/MediaPicker';
 import { Tab } from '../tabpane/Tab';
+import { TextInput } from '../textinput/TextInput';
+import { ShortcutList } from '../list/ShortcutList';
 
 export class Compose extends FormElement {
   static get styles() {
     return css`
       :host {
-        --textarea-min-height: var(--textarea-min-height, 4em);
         overflow: hidden;
         border-top-right-radius: var(--curvature);
         border-top-left-radius: var(--curvature);
@@ -32,13 +33,15 @@ export class Compose extends FormElement {
         flex-direction: column;
         justify-content: space-between;
         position: relative;
-
-        border-radius: var(--curvature-widget);
+        overflow: hidden;
+        border-radius: var(--compose-curvature, var(--curvature-widget));
         background: var(--color-widget-bg);
         border: var(--compose-border, 1px solid var(--color-widget-border));
         transition: all ease-in-out var(--transition-speed);
         box-shadow: var(--compose-shadow, var(--widget-box-shadow));
         caret-color: var(--input-caret);
+        --color-widget-bg-focused: transparent;
+        --color-widget-bg: transparent;
       }
 
       .chatbox {
@@ -49,7 +52,10 @@ export class Compose extends FormElement {
         );
 
         --widget-box-shadow: none;
-        padding: var(--compose-padding, 0px);
+        display: block;
+        flex-grow: 1;
+        --widget-box-shadow-focused: none;
+        --temba-textinput-padding: 1em 1em;
       }
 
       .actions {
@@ -58,9 +64,6 @@ export class Compose extends FormElement {
         align-items: center;
         padding: 0em;
         background: #f9f9f9;
-        border-bottom-left-radius: var(--curvature);
-        border-bottom-right-radius: var(--curvature);
-        border-top: solid 1px var(--color-widget-border);
       }
 
       .actions-right {
@@ -86,6 +89,7 @@ export class Compose extends FormElement {
       .send-error {
         color: rgba(250, 0, 0, 0.75);
         font-size: var(--help-text-size);
+        padding: 0.5em;
       }
 
       .language {
@@ -98,12 +102,19 @@ export class Compose extends FormElement {
         display: flex;
       }
 
+      .gutter {
+        align-items: center;
+        display: flex;
+        margin: 0.5em;
+      }
+
       #send-button {
         margin: 0.3em;
       }
 
       temba-tabs {
         --focused-tab-color: #f4f4f4;
+        min-height: var(--compose-min-height, 13.5em);
       }
 
       .quick-replies {
@@ -111,14 +122,47 @@ export class Compose extends FormElement {
       }
 
       .optins {
-        padding: 1em;
+        margin: 0.8em;
+      }
+
+      .templates {
+        margin: 0.8em;
       }
 
       .attachments {
+        min-height: 5em;
+        padding: 0.2em;
+        align-items: center;
+        display: flex;
+        background: #f9f9f9;
+        border-radius: var(--curvature);
+        margin: 0.6em;
+        margin-bottom: 0em;
+      }
+
+      .pane-bottom {
+        border: 0px solid red;
+        --color-placeholder: rgba(0, 0, 0, 0.2);
+        flex-grow: 99;
+      }
+
+      .shortcut-wrapper {
+        max-height: var(--shortcuts-height, 12em);
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        --options-block-shadow: none;
+        --curvature-widget: 0px;
+        --color-options-bg: #fff;
+        border-bottom: 1px solid var(--color-widget-border);
+      }
+
+      temba-shortcuts {
+        flex-grow: 1;
       }
 
-      temba-template-editor {
-        padding: 1em;
+      .quick-replies {
+        background: #f9f9f9;
       }
     `;
   }
@@ -239,6 +283,12 @@ export class Compose extends FormElement {
   @property({ type: Object })
   currentTab: Tab;
 
+  @property({ type: Boolean })
+  hasPendingText = false;
+
+  @property({ type: Object })
+  activeShortcut: Shortcut;
+
   public constructor() {
     super();
   }
@@ -253,6 +303,14 @@ export class Compose extends FormElement {
   private handleTabChanged() {
     const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;
     this.currentTab = tabs.getCurrentTab();
+
+    if (this.currentTab && this.currentTab.name === 'Shortcuts') {
+      const shortcuts = this.shadowRoot.querySelector(
+        'temba-shortcuts'
+      ) as ShortcutList;
+      shortcuts.filter = '';
+    }
+    this.setFocusOnChatbox();
   }
 
   public firstUpdated(changes: Map<string, any>): void {
@@ -354,14 +412,15 @@ export class Compose extends FormElement {
       if (completion) {
         window.setTimeout(() => {
           completion.focus();
-          // this.resetTabs();
         }, 0);
       }
     }
   }
 
   public reset(): void {
-    (this.shadowRoot.querySelector('.chatbox') as HTMLInputElement).value = '';
+    const completion = this.shadowRoot.querySelector('.chatbox') as Completion;
+    completion.textInputElement.value = '';
+    completion.value = '';
     this.initialText = '';
     this.currentText = '';
     this.currentQuickReplies = [];
@@ -380,8 +439,28 @@ export class Compose extends FormElement {
   }
 
   private handleChatboxChange(evt: Event) {
-    const chatbox = evt.target as HTMLInputElement;
-    this.currentText = chatbox.value;
+    const chatbox = evt.target as Completion;
+    const inputElement = chatbox.getTextInput().inputElement;
+
+    this.currentText = inputElement.value;
+    this.hasPendingText = inputElement.value.length > 0;
+
+    // is the last character a / and is it at the beginning of the line
+    const cursor = inputElement.selectionStart;
+    const text = inputElement.value;
+    const lineStart = text.lastIndexOf('\n', cursor - 1) + 1;
+    const line = text.substring(lineStart, cursor);
+
+    if (line.startsWith('/')) {
+      // switch to the shortcuts tab
+      const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;
+      tabs.focusTab('Shortcuts');
+
+      const shortcuts = this.shadowRoot.querySelector(
+        'temba-shortcuts'
+      ) as ShortcutList;
+      shortcuts.filter = line.substring(1);
+    }
   }
 
   public toggleButton() {
@@ -406,16 +485,68 @@ export class Compose extends FormElement {
     this.handleSend();
   }
 
-  private handleSendEnter(evt: KeyboardEvent) {
-    if (this.button) {
+  private getCurrentLine(): { text: string; index: number } {
+    const chatbox = this.shadowRoot.querySelector('.chatbox') as Completion;
+
+    const cursor = chatbox.getTextInput().inputElement.selectionStart - 1;
+    const text = chatbox.value;
+    const start = text.substring(0, cursor).lastIndexOf('\n') + 1;
+
+    let end = chatbox.value.indexOf('\n', start);
+    if (end === -1) {
+      end = chatbox.value.length;
+    }
+
+    return { text: chatbox.value.substring(start, end), index: start };
+  }
+
+  private handleKeyDown(evt: KeyboardEvent) {
+    const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;
+    const num = parseInt(evt.key);
+    if (
+      !Number.isNaN(num) &&
+      num > 0 &&
+      evt.ctrlKey &&
+      evt.metaKey &&
+      num <= tabs.tabs.length
+    ) {
+      tabs.index = num - 1;
+    }
+
+    // if they type / as the first character in a line, switch to the shortcut
+    if (evt.key === '/' && this.currentTab.name !== 'Shortcuts') {
+      const line = this.getCurrentLine();
+      const text = line.text.trim();
+      if (text.trim().length === 1) {
+        evt.preventDefault();
+        tabs.index = tabs.tabs.findIndex((tab) => tab.name === 'Shortcuts');
+      }
+    } else if (evt.key === 'Backspace') {
+      const line = this.getCurrentLine();
+      const text = line.text;
+      if (text === '/') {
+        tabs.index = tabs.tabs.findIndex((tab) => tab.name === 'Reply');
+      }
+    }
+
+    if (this.currentTab.name === 'Shortcuts') {
       if (evt.key === 'Enter' && !evt.shiftKey) {
-        if (this.completion) {
-          const chat = evt.target as Completion;
-          if (!chat.hasVisibleOptions()) {
+        return;
+      }
+    }
+
+    if (this.button) {
+      if (evt.key === 'Enter') {
+        if (!evt.shiftKey) {
+          evt.preventDefault();
+          if (this.completion) {
+            const chat = evt.target as Completion;
+            if (!chat.hasVisibleOptions()) {
+              this.handleSend();
+            }
+          } else {
             this.handleSend();
           }
-        } else {
-          this.handleSend();
         }
       }
     }
@@ -435,7 +566,7 @@ export class Compose extends FormElement {
   }
 
   public resetTabs() {
-    (this.shadowRoot.querySelector('temba-tabs') as TabPane).index = -1;
+    (this.shadowRoot.querySelector('temba-tabs') as TabPane).index = 0;
   }
 
   public render(): TemplateResult {
@@ -463,43 +594,12 @@ export class Compose extends FormElement {
             </temba-select>`
           : null}
         <div class="container">
-          ${this.chatbox ? html`${this.getChatbox()}` : null}
           <div class="items actions">${this.getActions()}</div>
         </div>
       </temba-field>
     `;
   }
 
-  private getChatbox(): TemplateResult {
-    if (this.completion) {
-      return html`<temba-completion
-        class="chatbox"
-        .value=${this.initialText}
-        gsm
-        textarea
-        ?autogrow=${this.autogrow}
-        maxlength=${this.maxLength}
-        @change=${this.handleChatboxChange}
-        @keydown=${this.handleSendEnter}
-        placeholder="Write something here"
-      >
-      </temba-completion>`;
-    } else {
-      return html`<temba-textinput
-        class="chatbox"
-        gsm
-        textarea
-        ?autogrow=${this.autogrow}
-        maxlength=${this.maxLength}
-        .value=${this.initialText}
-        @change=${this.handleChatboxChange}
-        @keydown=${this.handleSendEnter}
-        placeholder="Write something here"
-      >
-      </temba-textinput>`;
-    }
-  }
-
   private handleTemplateChanged(evt: CustomEvent) {
     this.currentTemplate = evt.detail.template;
     this.locale = evt.detail.translation?.locale;
@@ -510,6 +610,48 @@ export class Compose extends FormElement {
     this.variables = [...evt.detail.variables];
   }
 
+  public getTextInput(): TextInput {
+    return (
+      this.shadowRoot.querySelector('.chatbox') as Completion
+    ).getTextInput();
+  }
+
+  public handleShortcutSelection(event: CustomEvent) {
+    this.activeShortcut = event.detail.selected;
+    const line = this.getCurrentLine();
+    const chatbox = this.getTextInput();
+
+    const originalText = chatbox.value;
+
+    if (line.text.startsWith('/')) {
+      const newText =
+        originalText.substring(0, line.index) +
+        this.activeShortcut.text +
+        originalText.substring(line.index + line.text.length);
+
+      chatbox.updateValue(newText);
+
+      // set our cursor to the end of the shortcut
+      const cursor = line.index + this.activeShortcut.text.length;
+      chatbox.inputElement.setSelectionRange(cursor, cursor);
+    } else {
+      // add the text where the cursor is
+      const cursor = chatbox.inputElement.selectionStart;
+      const newText =
+        originalText.substring(0, cursor) +
+        this.activeShortcut.text +
+        originalText.substring(cursor);
+      chatbox.updateValue(newText);
+
+      // set the cursor to the end of the shortcut text
+      const newCursor = cursor + this.activeShortcut.text.length;
+      chatbox.inputElement.setSelectionRange(newCursor, newCursor);
+    }
+
+    const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;
+    tabs.index = tabs.tabs.findIndex((tab) => tab.name === 'Reply');
+  }
+
   private getActions(): TemplateResult {
     const showOptins = this.optIns && this.isBaseLanguage();
     const showTemplates = this.templates && this.isBaseLanguage();
@@ -517,17 +659,22 @@ export class Compose extends FormElement {
       <temba-tabs
         embedded
         focusedname
-        bottom
-        unselect
+        index="0"
         @temba-context-changed=${this.handleTabChanged}
         refresh="${(this.currentAttachments || []).length}|${this.index}|${this
           .currentQuickReplies.length}|${showOptins}|${this
           .currentOptin}|${showTemplates}|${this.currentTemplate}"
       >
+        <temba-tab
+          name="Reply"
+          icon="message"
+          selectionBackground="#fff"
+        ></temba-tab>
         ${this.attachments
           ? html`<temba-tab
               name="Attachments"
               icon="attachment"
+              selectionBackground="#fff"
               .count=${(this.currentAttachments || []).length}
             >
               <div class="items attachments">
@@ -544,9 +691,11 @@ export class Compose extends FormElement {
           ? html`<temba-tab
               name="Quick Replies"
               icon="quick_replies"
+              selectionBackground="#fff"
               .count=${this.currentQuickReplies.length}
             >
               <temba-select
+                class="quick-replies"
                 @change=${this.handleQuickReplyChange}
                 .values=${this.currentQuickReplies}
                 class="quick-replies"
@@ -558,48 +707,90 @@ export class Compose extends FormElement {
               ></temba-select>
             </temba-tab>`
           : null}
-        <temba-tab
-          name="Opt-in"
-          icon="channel_fba"
-          ?hidden=${!showOptins}
-          ?checked=${this.currentOptin.length > 0}
-        >
-          <temba-select
-            @change=${this.handleOptInChange}
-            .values=${this.currentOptin}
-            endpoint="${this.optinEndpoint}"
-            class="optins"
-            searchable
-            clearable
-            placeholder="Select an opt-in to use for Facebook (optional)"
-          ></temba-select>
-        </temba-tab>
+        ${showOptins
+          ? html`<temba-tab
+              name="Opt-in"
+              icon="channel_fba"
+              selectionBackground="#fff"
+              ?hidden=${!showOptins}
+              ?checked=${this.currentOptin.length > 0}
+            >
+              <temba-select
+                @change=${this.handleOptInChange}
+                .values=${this.currentOptin}
+                endpoint="${this.optinEndpoint}"
+                class="optins"
+                searchable
+                clearable
+                placeholder="Select an opt-in to use for Facebook (optional)"
+              ></temba-select>
+            </temba-tab>`
+          : null}
+        ${showTemplates
+          ? html`<temba-tab
+              name="Template"
+              icon="channel_wa"
+              selectionBackground="#fff"
+              ?alert=${this.errors &&
+              this.errors.find((error) => error.includes('template'))}
+              ?hidden=${!showTemplates}
+              ?checked=${this.currentTemplate}
+            >
+              <temba-template-editor
+                class="templates"
+                @temba-context-changed=${this.handleTemplateChanged}
+                @temba-content-changed=${this.handleTemplateVariablesChanged}
+                template=${this.template}
+                variables=${JSON.stringify(this.variables)}
+                url=${this.templateEndpoint}
+                lang=${this.currentLanguage}
+              >
+              </temba-template-editor>
+            </temba-tab>`
+          : null}
 
-        <temba-tab
-          name="Template"
-          icon="channel_wa"
-          ?alert=${this.errors &&
-          this.errors.find((error) => error.includes('template'))}
-          ?hidden=${!showTemplates}
-          ?checked=${this.currentTemplate}
-        >
-          <temba-template-editor
-            @temba-context-changed=${this.handleTemplateChanged}
-            @temba-content-changed=${this.handleTemplateVariablesChanged}
-            template=${this.template}
-            variables=${JSON.stringify(this.variables)}
-            url=${this.templateEndpoint}
-            lang=${this.currentLanguage}
-          >
-          </temba-template-editor>
+        <!--temba-tab
+          name="Note"
+          icon="notes"
+          activityColor="#ffbd00"
+          selectionBackground="#fff9c2"
+          borderColor="#ebdf6f"
+        ></temba-tab-->
+
+        <temba-tab name="Shortcuts" icon="shortcut" selectionBackground="#fff">
+          <div class="shortcut-wrapper">
+            <temba-shortcuts
+              @temba-selection=${this.handleShortcutSelection}
+            ></temba-shortcuts>
+          </div>
         </temba-tab>
 
         <div slot="tab-right" class="top-right">
+          ${this.counter ? this.getCounter() : null}
+        </div>
+
+        <div
+          slot="pane-bottom"
+          class="pane-bottom ${this.hasPendingText ? 'pending' : ''}"
+        >
+          ${this.chatbox
+            ? html`<temba-completion
+                class="chatbox"
+                .value=${this.initialText}
+                gsm
+                textarea
+                ?disableCompletion=${!this.completion}
+                ?autogrow=${this.autogrow}
+                maxlength=${this.maxLength}
+                @change=${this.handleChatboxChange}
+                @keydown=${this.handleKeyDown}
+                placeholder="Write something here"
+              >
+              </temba-completion>`
+            : null}
           ${this.buttonError
             ? html`<div class="send-error">${this.buttonError}</div>`
             : null}
-          ${this.counter ? this.getCounter() : null}
-          ${this.button ? this.getButton() : null}
         </div>
       </temba-tabs>
     `;
@@ -612,11 +803,13 @@ export class Compose extends FormElement {
   }
 
   private getButton(): TemplateResult {
-    return html` <temba-button
-      id="send-button"
-      name=${this.buttonName}
+    return html`<temba-icon
+      tabindex="1"
+      class="send-icon"
+      name="send"
+      size="1"
+      clickable
       @click=${this.handleSendClick}
-      ?disabled=${this.buttonDisabled}
-    ></temba-button>`;
+    ></temba-icon>`;
   }
 }