@nyaruka/temba-components 0.108.6 → 0.109.0

package/out-tsc/src/compose/Compose.js

@@ -8,7 +8,6 @@ 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);
@@ -27,13 +26,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 {
@@ -44,7 +45,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 {
@@ -53,9 +57,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 {
@@ -81,6 +82,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 {
@@ -93,12 +95,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 {
@@ -106,14 +115,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;
       }
 
-      temba-template-editor {
-        padding: 1em;
+      .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;
+      }
+
+      .quick-replies {
+        background: #f9f9f9;
       }
     `;
     }
@@ -138,6 +180,7 @@ export class Compose extends FormElement {
         this.buttonError = '';
         this.langValues = {};
         this.currentLanguage = 'und';
+        this.hasPendingText = false;
     }
     isBaseLanguage() {
         return (this.currentLanguage == 'und' ||
@@ -146,6 +189,11 @@ export class Compose extends FormElement {
     handleTabChanged() {
         const tabs = this.shadowRoot.querySelector('temba-tabs');
         this.currentTab = tabs.getCurrentTab();
+        if (this.currentTab && this.currentTab.name === 'Shortcuts') {
+            const shortcuts = this.shadowRoot.querySelector('temba-shortcuts');
+            shortcuts.filter = '';
+        }
+        this.setFocusOnChatbox();
     }
     firstUpdated(changes) {
         var _a, _b;
@@ -229,13 +277,14 @@ export class Compose extends FormElement {
             if (completion) {
                 window.setTimeout(() => {
                     completion.focus();
-                    // this.resetTabs();
                 }, 0);
             }
         }
     }
     reset() {
-        this.shadowRoot.querySelector('.chatbox').value = '';
+        const completion = this.shadowRoot.querySelector('.chatbox');
+        completion.textInputElement.value = '';
+        completion.value = '';
         this.initialText = '';
         this.currentText = '';
         this.currentQuickReplies = [];
@@ -252,7 +301,21 @@ export class Compose extends FormElement {
     }
     handleChatboxChange(evt) {
         const chatbox = evt.target;
-        this.currentText = chatbox.value;
+        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');
+            tabs.focusTab('Shortcuts');
+            const shortcuts = this.shadowRoot.querySelector('temba-shortcuts');
+            shortcuts.filter = line.substring(1);
+        }
     }
     toggleButton() {
         if (this.button) {
@@ -277,18 +340,62 @@ export class Compose extends FormElement {
         evt.stopPropagation();
         this.handleSend();
     }
-    handleSendEnter(evt) {
-        if (this.button) {
+    getCurrentLine() {
+        const chatbox = this.shadowRoot.querySelector('.chatbox');
+        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 };
+    }
+    handleKeyDown(evt) {
+        const tabs = this.shadowRoot.querySelector('temba-tabs');
+        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;
-                    if (!chat.hasVisibleOptions()) {
+                return;
+            }
+        }
+        if (this.button) {
+            if (evt.key === 'Enter') {
+                if (!evt.shiftKey) {
+                    evt.preventDefault();
+                    if (this.completion) {
+                        const chat = evt.target;
+                        if (!chat.hasVisibleOptions()) {
+                            this.handleSend();
+                        }
+                    }
+                    else {
                         this.handleSend();
                     }
                 }
-                else {
-                    this.handleSend();
-                }
             }
         }
     }
@@ -304,7 +411,7 @@ export class Compose extends FormElement {
         this.currentLanguage = select.values[0].iso;
     }
     resetTabs() {
-        this.shadowRoot.querySelector('temba-tabs').index = -1;
+        this.shadowRoot.querySelector('temba-tabs').index = 0;
     }
     render() {
         return html `
@@ -330,42 +437,11 @@ 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>
     `;
     }
-    getChatbox() {
-        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>`;
-        }
-    }
     handleTemplateChanged(evt) {
         var _a;
         this.currentTemplate = evt.detail.template;
@@ -375,6 +451,37 @@ export class Compose extends FormElement {
     handleTemplateVariablesChanged(evt) {
         this.variables = [...evt.detail.variables];
     }
+    getTextInput() {
+        return this.shadowRoot.querySelector('.chatbox').getTextInput();
+    }
+    handleShortcutSelection(event) {
+        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');
+        tabs.index = tabs.tabs.findIndex((tab) => tab.name === 'Reply');
+    }
     getActions() {
         const showOptins = this.optIns && this.isBaseLanguage();
         const showTemplates = this.templates && this.isBaseLanguage();
@@ -382,17 +489,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">
@@ -409,9 +521,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"
@@ -423,48 +537,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>
     `;
@@ -475,12 +631,14 @@ export class Compose extends FormElement {
     ></temba-charcount>`;
     }
     getButton() {
-        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>`;
     }
 }
 __decorate([
@@ -588,4 +746,10 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], Compose.prototype, "currentTab", void 0);
+__decorate([
+    property({ type: Boolean })
+], Compose.prototype, "hasPendingText", void 0);
+__decorate([
+    property({ type: Object })
+], Compose.prototype, "activeShortcut", void 0);
 //# sourceMappingURL=Compose.js.map