@nyaruka/temba-components 0.41.7 → 0.42.0

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

@@ -0,0 +1,531 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { FormElement } from '../FormElement';
+import { property } from 'lit/decorators.js';
+import { Icon } from '../vectoricon';
+import { CustomEventType } from '../interfaces';
+import { formatFileSize, formatFileType, getClasses, postFormData, truncate, } from '../utils';
+export class Compose extends FormElement {
+    static get styles() {
+        return css `
+      .container {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        position: relative;
+
+        border-radius: var(--curvature-widget);
+        background: var(--color-widget-bg);
+        border: 1px solid var(--color-widget-border);
+        transition: all ease-in-out var(--transition-speed);
+        box-shadow: var(--widget-box-shadow);
+        caret-color: var(--input-caret);
+        padding: var(--temba-textinput-padding);
+      }
+      .container:focus-within {
+        border-color: var(--color-focus);
+        background: var(--color-widget-bg-focused);
+        box-shadow: var(--widget-box-shadow-focused);
+      }
+
+      .drop-mask {
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        z-index: 1;
+        height: 100%;
+        width: 100%;
+        bottom: 0;
+        right: 0;
+        background: rgba(210, 243, 184, 0.8);
+        border-radius: var(--curvature-widget);
+        margin: -0.5em;
+        padding: 0.5em;
+        transition: opacity ease-in-out var(--transition-speed);
+        display: flex;
+        align-items: center;
+        text-align: center;
+      }
+
+      .highlight .drop-mask {
+        opacity: 1;
+      }
+
+      .drop-mask > div {
+        margin: auto;
+        border-radius: var(--curvature-widget);
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.5);
+      }
+
+      .items {
+      }
+
+      temba-completion {
+        margin-left: 0.3em;
+        margin-top: 0.3em;
+        --color-widget-border: none;
+        --curvature-widget: none;
+        --widget-box-shadow: none;
+        --widget-box-shadow-focused: none;
+        --temba-textinput-padding: 0;
+      }
+
+      .attachments {
+        display: flex;
+        flex-direction: column;
+      }
+      .attachments-list {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+      }
+      .attachment-item {
+        background: rgba(100, 100, 100, 0.1);
+        border-radius: 2px;
+        margin: 0.3em;
+        display: flex;
+        color: var(--color-widget-text);
+      }
+      .attachment-item.error {
+        background: rgba(250, 0, 0, 0.1);
+        color: rgba(250, 0, 0, 0.75);
+      }
+      .remove-item {
+        cursor: pointer !important;
+        padding: 3px 6px;
+        border-right: 1px solid rgba(100, 100, 100, 0.2);
+        margin-top: 1px;
+        background: rgba(100, 100, 100, 0.05);
+      }
+
+      .remove-item:hover {
+        background: rgba(100, 100, 100, 0.1);
+      }
+
+      .remove-item.error:hover {
+        background: rgba(250, 0, 0, 0.1);
+      }
+
+      .remove-item.error {
+        background: rgba(250, 0, 0, 0.05);
+        color: rgba(250, 0, 0, 0.75);
+      }
+      .attachment-name {
+        align-self: center;
+        font-size: 12px;
+        padding: 2px 8px;
+      }
+
+      .actions {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-left: 0.25em;
+        padding: 0.2em;
+      }
+
+      #upload-files {
+        display: none;
+      }
+      .upload-label {
+        display: flex;
+        align-items: center;
+      }
+      .upload-icon {
+        color: rgb(102, 102, 102);
+      }
+      .actions-right {
+        display: flex;
+        align-items: center;
+      }
+      temba-charcount {
+        margin-right: 5px;
+        overflow: hidden;
+        --temba-charcount-counts-margin-top: 0px;
+        --temba-charcount-summary-margin-top: 0px;
+        --temba-charcount-summary-position: fixed;
+        --temba-charcount-summary-right: 105px;
+        --temba-charcount-summary-bottom: 105px;
+      }
+      temba-button {
+        --button-y: 1px;
+        --button-x: 12px;
+      }
+      .send-error {
+        color: rgba(250, 0, 0, 0.75);
+        font-size: var(--help-text-size);
+      }
+    `;
+    }
+    constructor() {
+        super();
+        this.currentChat = '';
+        this.accept = ''; //e.g. ".xls,.xlsx"
+        this.endpoint = '/msgmedia/upload/';
+        // values = valid and uploaded attachments
+        // errorValues = invalid and not-uploaded attachments
+        this.errorValues = [];
+        this.buttonName = 'Send';
+        this.buttonDisabled = true;
+        this.buttonError = '';
+    }
+    updated(changes) {
+        super.updated(changes);
+        if (changes.has('currentChat') ||
+            changes.has('values') ||
+            changes.has('buttonError')) {
+            this.toggleButton();
+        }
+    }
+    firstUpdated() {
+        const completion = this.shadowRoot.querySelector('temba-completion');
+        if (completion) {
+            window.setTimeout(() => {
+                completion.click();
+            }, 0);
+        }
+    }
+    reset() {
+        this.currentChat = '';
+        this.values = [];
+        this.errorValues = [];
+        this.buttonError = '';
+    }
+    handleChatboxChange(evt) {
+        const completion = evt.target;
+        const textInput = completion.textInputElement;
+        this.currentChat = textInput.value;
+        this.preventDefaults(evt);
+    }
+    handleDragEnter(evt) {
+        this.highlight(evt);
+    }
+    handleDragOver(evt) {
+        this.highlight(evt);
+    }
+    handleDragLeave(evt) {
+        this.unhighlight(evt);
+    }
+    handleDrop(evt) {
+        this.unhighlight(evt);
+        const dt = evt.dataTransfer;
+        if (dt) {
+            const files = dt.files;
+            this.uploadFiles(files);
+        }
+    }
+    preventDefaults(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+    }
+    highlight(evt) {
+        this.pendingDrop = true;
+        this.preventDefaults(evt);
+    }
+    unhighlight(evt) {
+        this.pendingDrop = false;
+        this.preventDefaults(evt);
+    }
+    handleAddAttachments() {
+        this.dispatchEvent(new Event('change'));
+    }
+    handleUploadFileChanged(evt) {
+        const target = evt.target;
+        const files = target.files;
+        this.uploadFiles(files);
+    }
+    uploadFiles(files) {
+        let filesToUpload = [];
+        if (this.values && this.values.length > 0) {
+            //remove duplicate files that have already been uploaded
+            filesToUpload = [...files].filter(file => {
+                const index = this.values.findIndex(value => value.name === file.name && value.size === file.size);
+                if (index === -1) {
+                    return file;
+                }
+            });
+        }
+        else {
+            filesToUpload = [...files];
+        }
+        filesToUpload.map(fileToUpload => {
+            this.uploadFile(fileToUpload);
+        });
+    }
+    uploadFile(file) {
+        this.uploading = true;
+        const url = this.endpoint;
+        const payload = new FormData();
+        payload.append('file', file);
+        postFormData(url, payload)
+            .then((response) => {
+            if (response.json.error) {
+                this.addErrorValue(file, response.json.error);
+            }
+            else {
+                const attachment = response.json;
+                if (attachment) {
+                    this.addValue(attachment);
+                    this.fireCustomEvent(CustomEventType.AttachmentAdded, attachment);
+                }
+            }
+        })
+            .catch((error) => {
+            console.log(error);
+            this.addErrorValue(file, error);
+        })
+            .finally(() => {
+            this.uploading = false;
+        });
+    }
+    addErrorValue(file, error) {
+        const errorValue = {
+            uuid: Math.random().toString(36).slice(2, 6),
+            content_type: file.type,
+            type: file.type,
+            name: file.name,
+            url: file.name,
+            size: file.size,
+            error: error,
+        };
+        this.errorValues.push(errorValue);
+        this.requestUpdate('errorValues');
+    }
+    removeErrorValue(valueToRemove) {
+        this.errorValues = this.errorValues.filter((value) => value !== valueToRemove);
+        this.requestUpdate('errorValues');
+    }
+    handleRemoveAttachment(evt) {
+        const target = evt.target;
+        const attachment = this.values.find(({ uuid }) => uuid === target.id);
+        if (attachment) {
+            this.removeValue(attachment);
+            this.fireCustomEvent(CustomEventType.AttachmentRemoved, attachment);
+        }
+        const errorAttachment = this.errorValues.find(({ uuid }) => uuid === target.id);
+        if (errorAttachment) {
+            this.removeErrorValue(errorAttachment);
+            this.fireCustomEvent(CustomEventType.AttachmentRemoved, attachment);
+        }
+    }
+    toggleButton() {
+        if (this.button) {
+            if (this.buttonError && this.buttonError.length > 0) {
+                this.buttonDisabled = true;
+            }
+            else {
+                const chatboxEmpty = this.currentChat.trim().length === 0;
+                const attachmentsEmpty = this.values.length === 0;
+                if (this.chatbox && this.attachments) {
+                    this.buttonDisabled = chatboxEmpty && attachmentsEmpty;
+                }
+                else if (this.chatbox) {
+                    this.buttonDisabled = chatboxEmpty;
+                }
+                else if (this.attachments) {
+                    this.buttonDisabled = attachmentsEmpty;
+                }
+                else {
+                    this.buttonDisabled = true;
+                }
+            }
+        }
+    }
+    handleSendClick() {
+        this.handleSend();
+    }
+    handleSendEnter(evt) {
+        if (evt.key === 'Enter' && !evt.shiftKey) {
+            const chat = evt.target;
+            if (!chat.hasVisibleOptions()) {
+                this.handleSend();
+            }
+        }
+    }
+    handleSend() {
+        if (!this.buttonDisabled) {
+            this.buttonDisabled = true;
+            const name = this.buttonName;
+            this.fireCustomEvent(CustomEventType.ButtonClicked, { name });
+        }
+    }
+    handleSendBlur() {
+        if (this.buttonError.length > 0) {
+            this.buttonError = '';
+        }
+    }
+    render() {
+        return html `
+      <div
+        class=${getClasses({ container: true, highlight: this.pendingDrop })}
+        @dragenter="${this.handleDragEnter}"
+        @dragover="${this.handleDragOver}"
+        @dragleave="${this.handleDragLeave}"
+        @drop="${this.handleDrop}"
+      >
+        <div class="drop-mask"><div>Upload Attachment</div></div>
+
+        ${this.chatbox
+            ? html `<div class="items chatbox">${this.getChatbox()}</div>`
+            : null}
+        ${this.attachments
+            ? html `<div class="items attachments">${this.getAttachments()}</div>`
+            : null}
+        <div class="items actions">${this.getActions()}</div>
+      </div>
+    `;
+    }
+    getChatbox() {
+        return html ` <temba-completion
+      value=${this.currentChat}
+      gsm
+      textarea
+      autogrow
+      @change=${this.handleChatboxChange}
+      @keydown=${this.handleSendEnter}
+      placeholder="Write something here"
+      @blur=${this.handleSendBlur}
+    >
+    </temba-completion>`;
+    }
+    getAttachments() {
+        return html `
+      ${(this.values && this.values.length > 0) ||
+            (this.errorValues && this.errorValues.length > 0)
+            ? html ` <div class="attachments-list">
+            ${this.values.map(attachment => {
+                return html ` <div class="attachment-item">
+                <div
+                  class="remove-item"
+                  @click="${this.handleRemoveAttachment}"
+                >
+                  <temba-icon
+                    id="${attachment.uuid}"
+                    name="${Icon.delete_small}"
+                  ></temba-icon>
+                </div>
+                <div class="attachment-name">
+                  <span
+                    title="${attachment.name} (${formatFileSize(attachment.size, 2)}) ${attachment.type}"
+                    >${truncate(attachment.name, 25)}
+                    (${formatFileSize(attachment.size, 0)})
+                    ${formatFileType(attachment.type)}</span
+                  >
+                </div>
+              </div>`;
+            })}
+            ${this.errorValues.map(errorAttachment => {
+                return html ` <div class="attachment-item error">
+                <div
+                  class="remove-item error"
+                  @click="${this.handleRemoveAttachment}"
+                >
+                  <temba-icon
+                    id="${errorAttachment.uuid}"
+                    name="${Icon.delete_small}"
+                  ></temba-icon>
+                </div>
+                <div class="attachment-name">
+                  <span
+                    title="${errorAttachment.name} (${formatFileSize(0, 0)}) - Attachment failed - ${errorAttachment.error}"
+                    >${truncate(errorAttachment.name, 25)}
+                    (${formatFileSize(0, 0)}) - Attachment failed</span
+                  >
+                </div>
+              </div>`;
+            })}
+          </div>`
+            : null}
+    `;
+    }
+    getActions() {
+        return html `
+      <div class="actions-left">
+        ${this.attachments ? this.getUploader() : null}
+      </div>
+      <div class="actions-center"></div>
+      <div class="actions-right">
+        ${this.buttonError
+            ? html `<div class="send-error">${this.buttonError}</div>`
+            : null}
+        ${this.counter ? this.getCounter() : null}
+        ${this.button ? this.getButton() : null}
+      </div>
+    `;
+    }
+    getUploader() {
+        if (this.uploading) {
+            return html `<temba-loading units="3" size="12"></temba-loading>`;
+        }
+        else {
+            return html ` <input
+          type="file"
+          id="upload-files"
+          multiple
+          accept="${this.accept}"
+          @change="${this.handleUploadFileChanged}"
+        />
+        <label class="actions-left upload-label" for="upload-files">
+          <temba-icon
+            class="upload-icon"
+            name="${Icon.attachment}"
+            @click="${this.handleAddAttachments}"
+            clickable
+          ></temba-icon>
+        </label>`;
+        }
+    }
+    getCounter() {
+        return html `<temba-charcount text="${this.currentChat}"></temba-charcount>`;
+    }
+    getButton() {
+        return html ` <temba-button
+      id="send-button"
+      name=${this.buttonName}
+      @click=${this.handleSendClick}
+      ?disabled=${this.buttonDisabled}
+      @blur=${this.handleSendBlur}
+    ></temba-button>`;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], Compose.prototype, "chatbox", void 0);
+__decorate([
+    property({ type: Boolean })
+], Compose.prototype, "attachments", void 0);
+__decorate([
+    property({ type: Boolean })
+], Compose.prototype, "counter", void 0);
+__decorate([
+    property({ type: Boolean })
+], Compose.prototype, "pendingDrop", void 0);
+__decorate([
+    property({ type: Boolean })
+], Compose.prototype, "button", void 0);
+__decorate([
+    property({ type: String, attribute: false })
+], Compose.prototype, "currentChat", void 0);
+__decorate([
+    property({ type: String })
+], Compose.prototype, "accept", void 0);
+__decorate([
+    property({ type: String, attribute: false })
+], Compose.prototype, "endpoint", void 0);
+__decorate([
+    property({ type: Boolean, attribute: false })
+], Compose.prototype, "uploading", void 0);
+__decorate([
+    property({ type: Array, attribute: false })
+], Compose.prototype, "errorValues", void 0);
+__decorate([
+    property({ type: String })
+], Compose.prototype, "buttonName", void 0);
+__decorate([
+    property({ type: Boolean, attribute: false })
+], Compose.prototype, "buttonDisabled", void 0);
+__decorate([
+    property({ type: String, attribute: false })
+], Compose.prototype, "buttonError", void 0);
+//# sourceMappingURL=Compose.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Compose.js","sourceRoot":"","sources":["../../../src/compose/Compose.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../vectoricon';\nimport { CustomEventType } from '../interfaces';\nimport {\n  formatFileSize,\n  formatFileType,\n  getClasses,\n  postFormData,\n  truncate,\n  WebResponse,\n} from '../utils';\nimport { Completion } from '../completion/Completion';\n\nexport interface Attachment {\n  uuid: string;\n  content_type: string;\n  type: string; //deprecated\n  url: string;\n  name: string;\n  size: number;\n  error: string;\n}\n\nexport class Compose extends FormElement {\n  static get styles() {\n    return css`\n      .container {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        position: relative;\n\n        border-radius: var(--curvature-widget);\n        background: var(--color-widget-bg);\n        border: 1px solid var(--color-widget-border);\n        transition: all ease-in-out var(--transition-speed);\n        box-shadow: var(--widget-box-shadow);\n        caret-color: var(--input-caret);\n        padding: var(--temba-textinput-padding);\n      }\n      .container:focus-within {\n        border-color: var(--color-focus);\n        background: var(--color-widget-bg-focused);\n        box-shadow: var(--widget-box-shadow-focused);\n      }\n\n      .drop-mask {\n        opacity: 0;\n        pointer-events: none;\n        position: absolute;\n        z-index: 1;\n        height: 100%;\n        width: 100%;\n        bottom: 0;\n        right: 0;\n        background: rgba(210, 243, 184, 0.8);\n        border-radius: var(--curvature-widget);\n        margin: -0.5em;\n        padding: 0.5em;\n        transition: opacity ease-in-out var(--transition-speed);\n        display: flex;\n        align-items: center;\n        text-align: center;\n      }\n\n      .highlight .drop-mask {\n        opacity: 1;\n      }\n\n      .drop-mask > div {\n        margin: auto;\n        border-radius: var(--curvature-widget);\n        font-weight: 400;\n        color: rgba(0, 0, 0, 0.5);\n      }\n\n      .items {\n      }\n\n      temba-completion {\n        margin-left: 0.3em;\n        margin-top: 0.3em;\n        --color-widget-border: none;\n        --curvature-widget: none;\n        --widget-box-shadow: none;\n        --widget-box-shadow-focused: none;\n        --temba-textinput-padding: 0;\n      }\n\n      .attachments {\n        display: flex;\n        flex-direction: column;\n      }\n      .attachments-list {\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n      }\n      .attachment-item {\n        background: rgba(100, 100, 100, 0.1);\n        border-radius: 2px;\n        margin: 0.3em;\n        display: flex;\n        color: var(--color-widget-text);\n      }\n      .attachment-item.error {\n        background: rgba(250, 0, 0, 0.1);\n        color: rgba(250, 0, 0, 0.75);\n      }\n      .remove-item {\n        cursor: pointer !important;\n        padding: 3px 6px;\n        border-right: 1px solid rgba(100, 100, 100, 0.2);\n        margin-top: 1px;\n        background: rgba(100, 100, 100, 0.05);\n      }\n\n      .remove-item:hover {\n        background: rgba(100, 100, 100, 0.1);\n      }\n\n      .remove-item.error:hover {\n        background: rgba(250, 0, 0, 0.1);\n      }\n\n      .remove-item.error {\n        background: rgba(250, 0, 0, 0.05);\n        color: rgba(250, 0, 0, 0.75);\n      }\n      .attachment-name {\n        align-self: center;\n        font-size: 12px;\n        padding: 2px 8px;\n      }\n\n      .actions {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-left: 0.25em;\n        padding: 0.2em;\n      }\n\n      #upload-files {\n        display: none;\n      }\n      .upload-label {\n        display: flex;\n        align-items: center;\n      }\n      .upload-icon {\n        color: rgb(102, 102, 102);\n      }\n      .actions-right {\n        display: flex;\n        align-items: center;\n      }\n      temba-charcount {\n        margin-right: 5px;\n        overflow: hidden;\n        --temba-charcount-counts-margin-top: 0px;\n        --temba-charcount-summary-margin-top: 0px;\n        --temba-charcount-summary-position: fixed;\n        --temba-charcount-summary-right: 105px;\n        --temba-charcount-summary-bottom: 105px;\n      }\n      temba-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n      .send-error {\n        color: rgba(250, 0, 0, 0.75);\n        font-size: var(--help-text-size);\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  chatbox: boolean;\n\n  @property({ type: Boolean })\n  attachments: boolean;\n\n  @property({ type: Boolean })\n  counter: boolean;\n\n  @property({ type: Boolean })\n  pendingDrop: boolean;\n\n  @property({ type: Boolean })\n  button: boolean;\n\n  @property({ type: String, attribute: false })\n  currentChat = '';\n\n  @property({ type: String })\n  accept = ''; //e.g. \".xls,.xlsx\"\n\n  @property({ type: String, attribute: false })\n  endpoint = '/msgmedia/upload/';\n\n  @property({ type: Boolean, attribute: false })\n  uploading: boolean;\n\n  // values = valid and uploaded attachments\n  // errorValues = invalid and not-uploaded attachments\n  @property({ type: Array, attribute: false })\n  errorValues: Attachment[] = [];\n\n  @property({ type: String })\n  buttonName = 'Send';\n\n  @property({ type: Boolean, attribute: false })\n  buttonDisabled = true;\n\n  @property({ type: String, attribute: false })\n  buttonError = '';\n\n  public constructor() {\n    super();\n  }\n\n  public updated(changes: Map<string, any>): void {\n    super.updated(changes);\n\n    if (\n      changes.has('currentChat') ||\n      changes.has('values') ||\n      changes.has('buttonError')\n    ) {\n      this.toggleButton();\n    }\n  }\n\n  firstUpdated(): void {\n    const completion = this.shadowRoot.querySelector(\n      'temba-completion'\n    ) as Completion;\n    if (completion) {\n      window.setTimeout(() => {\n        completion.click();\n      }, 0);\n    }\n  }\n\n  public reset(): void {\n    this.currentChat = '';\n    this.values = [];\n    this.errorValues = [];\n    this.buttonError = '';\n  }\n\n  private handleChatboxChange(evt: Event) {\n    const completion = evt.target as Completion;\n    const textInput = completion.textInputElement;\n    this.currentChat = textInput.value;\n    this.preventDefaults(evt);\n  }\n\n  private handleDragEnter(evt: DragEvent): void {\n    this.highlight(evt);\n  }\n\n  private handleDragOver(evt: DragEvent): void {\n    this.highlight(evt);\n  }\n\n  private handleDragLeave(evt: DragEvent): void {\n    this.unhighlight(evt);\n  }\n\n  private handleDrop(evt: DragEvent): void {\n    this.unhighlight(evt);\n\n    const dt = evt.dataTransfer;\n    if (dt) {\n      const files = dt.files;\n      this.uploadFiles(files);\n    }\n  }\n\n  private preventDefaults(evt: Event): void {\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  private highlight(evt: DragEvent): void {\n    this.pendingDrop = true;\n    this.preventDefaults(evt);\n  }\n\n  private unhighlight(evt: DragEvent): void {\n    this.pendingDrop = false;\n    this.preventDefaults(evt);\n  }\n\n  private handleAddAttachments(): void {\n    this.dispatchEvent(new Event('change'));\n  }\n\n  private handleUploadFileChanged(evt: Event): void {\n    const target = evt.target as HTMLInputElement;\n    const files = target.files;\n    this.uploadFiles(files);\n  }\n\n  public uploadFiles(files: FileList): void {\n    let filesToUpload = [];\n    if (this.values && this.values.length > 0) {\n      //remove duplicate files that have already been uploaded\n      filesToUpload = [...files].filter(file => {\n        const index = this.values.findIndex(\n          value => value.name === file.name && value.size === file.size\n        );\n        if (index === -1) {\n          return file;\n        }\n      });\n    } else {\n      filesToUpload = [...files];\n    }\n    filesToUpload.map(fileToUpload => {\n      this.uploadFile(fileToUpload);\n    });\n  }\n\n  private uploadFile(file: File): void {\n    this.uploading = true;\n\n    const url = this.endpoint;\n    const payload = new FormData();\n    payload.append('file', file);\n    postFormData(url, payload)\n      .then((response: WebResponse) => {\n        if (response.json.error) {\n          this.addErrorValue(file, response.json.error);\n        } else {\n          const attachment = response.json as Attachment;\n          if (attachment) {\n            this.addValue(attachment);\n            this.fireCustomEvent(CustomEventType.AttachmentAdded, attachment);\n          }\n        }\n      })\n      .catch((error: string) => {\n        console.log(error);\n        this.addErrorValue(file, error);\n      })\n      .finally(() => {\n        this.uploading = false;\n      });\n  }\n\n  private addErrorValue(file: File, error: string) {\n    const errorValue = {\n      uuid: Math.random().toString(36).slice(2, 6),\n      content_type: file.type,\n      type: file.type,\n      name: file.name,\n      url: file.name,\n      size: file.size,\n      error: error,\n    };\n    this.errorValues.push(errorValue);\n    this.requestUpdate('errorValues');\n  }\n  public removeErrorValue(valueToRemove: any) {\n    this.errorValues = this.errorValues.filter(\n      (value: any) => value !== valueToRemove\n    );\n    this.requestUpdate('errorValues');\n  }\n\n  private handleRemoveAttachment(evt: Event): void {\n    const target = evt.target as HTMLDivElement;\n\n    const attachment = this.values.find(({ uuid }) => uuid === target.id);\n    if (attachment) {\n      this.removeValue(attachment);\n      this.fireCustomEvent(CustomEventType.AttachmentRemoved, attachment);\n    }\n    const errorAttachment = this.errorValues.find(\n      ({ uuid }) => uuid === target.id\n    );\n    if (errorAttachment) {\n      this.removeErrorValue(errorAttachment);\n      this.fireCustomEvent(CustomEventType.AttachmentRemoved, attachment);\n    }\n  }\n\n  public toggleButton() {\n    if (this.button) {\n      if (this.buttonError && this.buttonError.length > 0) {\n        this.buttonDisabled = true;\n      } else {\n        const chatboxEmpty = this.currentChat.trim().length === 0;\n        const attachmentsEmpty = this.values.length === 0;\n        if (this.chatbox && this.attachments) {\n          this.buttonDisabled = chatboxEmpty && attachmentsEmpty;\n        } else if (this.chatbox) {\n          this.buttonDisabled = chatboxEmpty;\n        } else if (this.attachments) {\n          this.buttonDisabled = attachmentsEmpty;\n        } else {\n          this.buttonDisabled = true;\n        }\n      }\n    }\n  }\n\n  private handleSendClick() {\n    this.handleSend();\n  }\n\n  private handleSendEnter(evt: KeyboardEvent) {\n    if (evt.key === 'Enter' && !evt.shiftKey) {\n      const chat = evt.target as Completion;\n      if (!chat.hasVisibleOptions()) {\n        this.handleSend();\n      }\n    }\n  }\n\n  private handleSend() {\n    if (!this.buttonDisabled) {\n      this.buttonDisabled = true;\n      const name = this.buttonName;\n      this.fireCustomEvent(CustomEventType.ButtonClicked, { name });\n    }\n  }\n\n  private handleSendBlur() {\n    if (this.buttonError.length > 0) {\n      this.buttonError = '';\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div\n        class=${getClasses({ container: true, highlight: this.pendingDrop })}\n        @dragenter=\"${this.handleDragEnter}\"\n        @dragover=\"${this.handleDragOver}\"\n        @dragleave=\"${this.handleDragLeave}\"\n        @drop=\"${this.handleDrop}\"\n      >\n        <div class=\"drop-mask\"><div>Upload Attachment</div></div>\n\n        ${this.chatbox\n          ? html`<div class=\"items chatbox\">${this.getChatbox()}</div>`\n          : null}\n        ${this.attachments\n          ? html`<div class=\"items attachments\">${this.getAttachments()}</div>`\n          : null}\n        <div class=\"items actions\">${this.getActions()}</div>\n      </div>\n    `;\n  }\n\n  private getChatbox(): TemplateResult {\n    return html` <temba-completion\n      value=${this.currentChat}\n      gsm\n      textarea\n      autogrow\n      @change=${this.handleChatboxChange}\n      @keydown=${this.handleSendEnter}\n      placeholder=\"Write something here\"\n      @blur=${this.handleSendBlur}\n    >\n    </temba-completion>`;\n  }\n\n  private getAttachments(): TemplateResult {\n    return html`\n      ${(this.values && this.values.length > 0) ||\n      (this.errorValues && this.errorValues.length > 0)\n        ? html` <div class=\"attachments-list\">\n            ${this.values.map(attachment => {\n              return html` <div class=\"attachment-item\">\n                <div\n                  class=\"remove-item\"\n                  @click=\"${this.handleRemoveAttachment}\"\n                >\n                  <temba-icon\n                    id=\"${attachment.uuid}\"\n                    name=\"${Icon.delete_small}\"\n                  ></temba-icon>\n                </div>\n                <div class=\"attachment-name\">\n                  <span\n                    title=\"${attachment.name} (${formatFileSize(\n                      attachment.size,\n                      2\n                    )}) ${attachment.type}\"\n                    >${truncate(attachment.name, 25)}\n                    (${formatFileSize(attachment.size, 0)})\n                    ${formatFileType(attachment.type)}</span\n                  >\n                </div>\n              </div>`;\n            })}\n            ${this.errorValues.map(errorAttachment => {\n              return html` <div class=\"attachment-item error\">\n                <div\n                  class=\"remove-item error\"\n                  @click=\"${this.handleRemoveAttachment}\"\n                >\n                  <temba-icon\n                    id=\"${errorAttachment.uuid}\"\n                    name=\"${Icon.delete_small}\"\n                  ></temba-icon>\n                </div>\n                <div class=\"attachment-name\">\n                  <span\n                    title=\"${errorAttachment.name} (${formatFileSize(\n                      0,\n                      0\n                    )}) - Attachment failed - ${errorAttachment.error}\"\n                    >${truncate(errorAttachment.name, 25)}\n                    (${formatFileSize(0, 0)}) - Attachment failed</span\n                  >\n                </div>\n              </div>`;\n            })}\n          </div>`\n        : null}\n    `;\n  }\n\n  private getActions(): TemplateResult {\n    return html`\n      <div class=\"actions-left\">\n        ${this.attachments ? this.getUploader() : null}\n      </div>\n      <div class=\"actions-center\"></div>\n      <div class=\"actions-right\">\n        ${this.buttonError\n          ? html`<div class=\"send-error\">${this.buttonError}</div>`\n          : null}\n        ${this.counter ? this.getCounter() : null}\n        ${this.button ? this.getButton() : null}\n      </div>\n    `;\n  }\n\n  private getUploader(): TemplateResult {\n    if (this.uploading) {\n      return html`<temba-loading units=\"3\" size=\"12\"></temba-loading>`;\n    } else {\n      return html` <input\n          type=\"file\"\n          id=\"upload-files\"\n          multiple\n          accept=\"${this.accept}\"\n          @change=\"${this.handleUploadFileChanged}\"\n        />\n        <label class=\"actions-left upload-label\" for=\"upload-files\">\n          <temba-icon\n            class=\"upload-icon\"\n            name=\"${Icon.attachment}\"\n            @click=\"${this.handleAddAttachments}\"\n            clickable\n          ></temba-icon>\n        </label>`;\n    }\n  }\n\n  private getCounter(): TemplateResult {\n    return html`<temba-charcount text=\"${this.currentChat}\"></temba-charcount>`;\n  }\n\n  private getButton(): TemplateResult {\n    return html` <temba-button\n      id=\"send-button\"\n      name=${this.buttonName}\n      @click=${this.handleSendClick}\n      ?disabled=${this.buttonDisabled}\n      @blur=${this.handleSendBlur}\n    ></temba-button>`;\n  }\n}\n"]}