@nylas/web-elements 1.0.0-prealpha1

package/dist/collection/components/mailbox/nylas-mailbox-toolbar-button/nylas-mailbox-toolbar-button.js

@@ -0,0 +1,182 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+import { RegisterComponent } from "../../../common/register-component";
+import { debug } from "../../../utils/utils";
+import { Host, h } from "@stencil/core";
+export class NylasMailboxToolbarButton {
+    constructor() {
+        this.onClick = async () => {
+            const method = this.method;
+            debug(`[nylas-mailbox-toolbar-button] onClick`, { method, mailboxConnector: this.mailboxConnector });
+            if (this.mailboxConnector && method) {
+                const methodToCall = this.callMethod(this.mailboxConnector, method);
+                if (methodToCall) {
+                    await methodToCall();
+                }
+            }
+        };
+        this.method = undefined;
+        this.dataState = undefined;
+        this.iconOnly = false;
+        this.mailboxConnector = undefined;
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    async componentWillLoad() {
+        debug(`[nylas-if-state] Component will load`);
+    }
+    async componentDidLoad() {
+        debug(`[nylas-if-state] Component did load`);
+    }
+    callMethod(obj, accessString) {
+        const parts = accessString.split('.');
+        let current = obj;
+        for (const part of parts.slice(0, -1)) {
+            current = current[part];
+            if (!current) {
+                return undefined;
+            }
+        }
+        const methodName = parts[parts.length - 1];
+        const method = current[methodName];
+        if (typeof method === 'function') {
+            return method.bind(current);
+        }
+        return undefined;
+    }
+    renderByState(state) {
+        return state ? h("slot", { name: "loading" }, "Loading...") : h("slot", null, "Click");
+    }
+    hasSlot(name) {
+        return !!this.host.querySelector(`[slot="${name}"]`);
+    }
+    render() {
+        let state = false;
+        const store = this.mailboxConnector?.nylasMailboxStore;
+        if (typeof store !== 'undefined') {
+            const storeKey = String(this.dataState);
+            state = this.dataState ? store.get(storeKey) === 'loading' : false;
+        }
+        const key = state ? `state-loading` : 'state-ready';
+        return (h(Host, { key: '8885d53e61f2fb52afc9a8b795a71de850b2fbe7' }, h("sp-theme", { key: '7b7d856caa9e2389eaaff33381d374092572f922', scale: "medium", color: "dark" }, h("sp-button", { onClick: this.onClick, disabled: state, key: key, "icon-only": this.iconOnly, label: this.renderByState(state) }, this.hasSlot('icon') && (h("div", { slot: "icon", class: 'slot' }, h("slot", { name: "icon" }))), !this.iconOnly && this.renderByState(state)))));
+    }
+    static get is() { return "nylas-mailbox-toolbar-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-mailbox-toolbar-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-mailbox-toolbar-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "method": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "MethodsOfNylasMailboxConnector",
+                    "resolved": "\"init\" | \"resetStores\" | \"logout\" | \"auth.isAuthenticated\" | \"messages.getMessages\" | \"messages.getThreadMessages\" | \"messages.downloadMessageAttachments\" | \"messages.summarizeText\" | \"messages.textToSpeech\" | \"threads.back\" | \"threads.getThreads\" | \"threads.getThread\" | \"threads.nextThreadPage\" | \"threads.previousThreadPage\" | \"threads.updateThreadQueryParams\" | \"threads.unSelectThread\" | \"threads.selectThread\" | \"threads.markThreadAsRead\" | \"threads.updateThread\" | \"folders.getFolders\" | \"folders.selectFolder\" | \"nylasAuth.isAuthenticated\" | \"nylasAuth.logout\" | \"nylasAuth.getHostedAuthRedirectURL\" | \"nylasAuth.nylasAPIRequest\" | \"nylasAuth.exchangeAuthCodeForTokenInfo\" | \"nylasAuth.nylasDownloadFileRequest\" | \"nylasAuth.getTokenInfo\" | \"nylasAuth.isAccessTokenValid\" | \"nylasAuth.refreshAccessToken\" | \"nylasAuth.hasScopeByType\" | \"nylasAuth.hasScope\" | `nylasAuth.config.${string}` | \"nylasMailboxStore.set\" | \"nylasMailboxStore.use\" | \"nylasMailboxStore.reset\" | \"nylasMailboxStore.get\" | \"nylasMailboxStore.on\" | \"nylasMailboxStore.onChange\" | \"nylasMailboxStore.dispose\" | \"nylasMailboxStore.forceUpdate\" | `nylasMailboxStore.state.${string}` | \"nylasAuthStore.set\" | \"nylasAuthStore.use\" | \"nylasAuthStore.reset\" | \"nylasAuthStore.get\" | \"nylasAuthStore.on\" | \"nylasAuthStore.onChange\" | \"nylasAuthStore.dispose\" | \"nylasAuthStore.forceUpdate\" | \"nylasAuthStore.state.state.\" | \"nylasAuthStore.state.isAuthenticated.\" | \"nylasAuthStore.state.tokenInfo.\" | \"nylasAuthStore.state.tokenInfo.email.\" | \"nylasAuthStore.state.tokenInfo.grant_id.\" | \"nylasAuthStore.state.tokenInfo.expires_in.\" | \"nylasAuthStore.state.tokenInfo.id_token.\" | \"nylasAuthStore.state.tokenInfo.token_type.\" | \"nylasAuthStore.state.tokenInfo.scope.\" | \"nylasAuthStore.state.tokenInfo.refresh_token.\" | \"router.init\" | \"router.addRouteChangeListener\" | \"router.setRoute\" | \"router.navigate\" | \"router.getRoute\" | \"router.getBasePath\" | \"router.matchRoute\" | \"mailboxStore.set\" | \"mailboxStore.use\" | \"mailboxStore.reset\" | \"mailboxStore.get\" | \"mailboxStore.on\" | \"mailboxStore.onChange\" | \"mailboxStore.dispose\" | \"mailboxStore.forceUpdate\" | `mailboxStore.state.${string}` | \"authStore.set\" | \"authStore.use\" | \"authStore.reset\" | \"authStore.get\" | \"authStore.on\" | \"authStore.onChange\" | \"authStore.dispose\" | \"authStore.forceUpdate\" | \"authStore.state.state.\" | \"authStore.state.isAuthenticated.\" | \"authStore.state.tokenInfo.\" | \"authStore.state.tokenInfo.email.\" | \"authStore.state.tokenInfo.grant_id.\" | \"authStore.state.tokenInfo.expires_in.\" | \"authStore.state.tokenInfo.id_token.\" | \"authStore.state.tokenInfo.token_type.\" | \"authStore.state.tokenInfo.scope.\" | \"authStore.state.tokenInfo.refresh_token.\" | \"auth.logout\" | \"auth.getHostedAuthRedirectURL\" | \"auth.getTokenInfo\" | \"auth.isAccessTokenValid\" | \"auth.validateSession\" | \"auth.manageHostedAuthCodeExchange\"",
+                    "references": {
+                        "MethodsOfNylasMailboxConnector": {
+                            "location": "local",
+                            "path": "/Users/aarondemello/Developer/nylas/nylas/packages/nylas-web-elements/src/components/mailbox/nylas-mailbox-toolbar-button/nylas-mailbox-toolbar-button.tsx",
+                            "id": "src/components/mailbox/nylas-mailbox-toolbar-button/nylas-mailbox-toolbar-button.tsx::MethodsOfNylasMailboxConnector"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the mailbox connector method to call."
+                },
+                "attribute": "method",
+                "reflect": false
+            },
+            "dataState": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the state to compare against to check if the data is loading, error, or ready."
+                },
+                "attribute": "data-state",
+                "reflect": false
+            },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, then the component will render the icon only."
+                },
+                "attribute": "icon-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "mailboxConnector": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "NylasMailboxConnectorInterface",
+                    "resolved": "NylasMailboxConnectorInterface | undefined",
+                    "references": {
+                        "NylasMailboxConnectorInterface": {
+                            "location": "import",
+                            "path": "@/connector/connector-interface",
+                            "id": "src/connector/connector-interface.ts::NylasMailboxConnectorInterface"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, then the component will render if the state is true.\nThis prop is used with the `state` prop."
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+__decorate([
+    RegisterComponent({
+        name: 'nylas-mailbox-toolbar-button',
+        connectorToProp: 'mailboxConnector',
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasMailboxToolbarButton.prototype, "render", null);
+//# sourceMappingURL=nylas-mailbox-toolbar-button.js.map

package/dist/collection/components/mailbox/nylas-mailbox-toolbar-button/nylas-mailbox-toolbar-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-mailbox-toolbar-button.js","sourceRoot":"","sources":["../../../../src/components/mailbox/nylas-mailbox-toolbar-button/nylas-mailbox-toolbar-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { MethodKeys } from '@/common/types';\nimport { NylasMailboxConnectorInterface } from '@/connector/connector-interface';\nimport { debug } from '@/utils/utils';\nimport { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { ObservableMap } from '@stencil/store';\n\nexport type Stores = Record<string, ObservableMap<any>>;\nexport type PublicMethodsOfNylasMailboxConnector = Pick<NylasMailboxConnectorInterface, MethodKeys<NylasMailboxConnectorInterface>>;\nexport type PropertyPaths<T> = T extends object\n  ? {\n      [K in keyof T]: T[K] extends Function ? `${K & string}` : `${K & string}.${PropertyPaths<T[K]>}`;\n    }[keyof T]\n  : '';\nexport type MethodsOfNylasMailboxConnector = PropertyPaths<NylasMailboxConnectorInterface>;\n\n@Component({\n  tag: 'nylas-mailbox-toolbar-button',\n  styleUrl: 'nylas-mailbox-toolbar-button.scss',\n  shadow: true,\n})\nexport class NylasMailboxToolbarButton {\n  @Element() private host!: HTMLNylasMailboxToolbarButtonElement;\n\n  /**\n   * The name of the mailbox connector method to call.\n   */\n  @Prop({ attribute: 'method' }) readonly method!: MethodsOfNylasMailboxConnector;\n\n  /**\n   * The value of the state to compare against to check if the data is loading, error, or ready.\n   */\n  @Prop({ attribute: 'data-state' }) readonly dataState?: string;\n\n  /**\n   * If true, then the component will render the icon only.\n   */\n  @Prop() readonly iconOnly: boolean = false;\n\n  /**\n   * If true, then the component will render if the state is true.\n   * This prop is used with the `state` prop.\n   */\n  @Prop() readonly mailboxConnector?: NylasMailboxConnectorInterface;\n\n  constructor() {}\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-if-state] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-if-state] Component did load`);\n  }\n\n  /**\n   * The click handler for the button.\n   */\n  private onClick = async () => {\n    const method = this.method as unknown as string;\n    debug(`[nylas-mailbox-toolbar-button] onClick`, { method, mailboxConnector: this.mailboxConnector });\n    if (this.mailboxConnector && method) {\n      const methodToCall = this.callMethod(this.mailboxConnector, method);\n      if (methodToCall) {\n        await methodToCall();\n      }\n    }\n  };\n\n  /**\n   * Traverses the object to find the method.\n   * @param obj The object to traverse.\n   * @param accessString The string to access the method.\n   * @returns The method if it exists, undefined otherwise.\n   */\n  private callMethod(obj: any, accessString: string): (() => void) | undefined {\n    // Split the string into parts\n    const parts = accessString.split('.');\n\n    // Traverse the object to find the method\n    let current = obj;\n    for (const part of parts.slice(0, -1)) {\n      current = current[part];\n      if (!current) {\n        return undefined;\n      }\n    }\n\n    // Get the method\n    const methodName = parts[parts.length - 1];\n    const method = current[methodName];\n\n    // Check if the method is a function\n    if (typeof method === 'function') {\n      return method.bind(current);\n    }\n\n    return undefined;\n  }\n\n  /**\n   * Renders the slot based on the state.\n   * @param state The state of the data.\n   */\n  private renderByState(state: boolean) {\n    return state ? <slot name=\"loading\">Loading...</slot> : <slot>Click</slot>;\n  }\n\n  /**\n   * Checks if the slot exists.\n   * @param name The name of the slot.\n   * @returns True if the slot exists, false otherwise.\n   */\n  private hasSlot(name: string) {\n    return !!this.host.querySelector(`[slot=\"${name}\"]`);\n  }\n\n  @RegisterComponent({\n    name: 'nylas-mailbox-toolbar-button',\n    connectorToProp: 'mailboxConnector',\n    fireRegisterEvent: true,\n  })\n  render() {\n    let state = false;\n    const store = this.mailboxConnector?.nylasMailboxStore;\n    if (typeof store !== 'undefined') {\n      const storeKey = String(this.dataState) as keyof typeof store.state;\n      state = this.dataState ? store.get(storeKey) === 'loading' : false;\n    }\n    const key = state ? `state-loading` : 'state-ready';\n    return (\n      <Host>\n        <sp-theme scale=\"medium\" color=\"dark\">\n          <sp-button onClick={this.onClick} disabled={state} key={key} icon-only={this.iconOnly} label={this.renderByState(state)}>\n            {this.hasSlot('icon') && (\n              <div slot=\"icon\" class={'slot'}>\n                <slot name=\"icon\" />\n              </div>\n            )}\n            {!this.iconOnly && this.renderByState(state)}\n          </sp-button>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/mailbox/nylas-summarize-message-button/nylas-summarize-message-button.css

@@ -0,0 +1,61 @@
+:host {
+  display: block;
+}
+
+sp-button {
+  padding: 0;
+  border: 0;
+  border-radius: var(--nylas-border-radius);
+  min-block-size: 50%;
+  min-inline-size: 2rem;
+  background-color: var(--nylas-color-primary-300);
+  fill: var(--nylas-color-primary-800);
+}
+sp-button:hover {
+  background-color: var(--nylas-color-primary-400);
+}
+
+.summarize-button.stopped {
+  animation: none;
+}
+.summarize-button.playing {
+  animation: pulse 2s infinite;
+}
+.summarize-button.loading {
+  display: flex;
+  align-content: center;
+  height: 1.5rem;
+  width: 2rem;
+  vertical-align: middle;
+  animation: pulse 2s infinite;
+  flex-wrap: wrap;
+}
+.summarize-button.loading loading-icon {
+  --dot-color: var(--nylas-color-primary-600);
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 var(--nylas-color-primary-300);
+  }
+  70% {
+    transform: scale(1.05);
+    box-shadow: 0 0 0 10px rgba(255, 69, 0, 0);
+  }
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(255, 69, 0, 0);
+  }
+}
+@keyframes wave {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}

package/dist/collection/components/mailbox/nylas-summarize-message-button/nylas-summarize-message-button.js

@@ -0,0 +1,329 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+import { Host, h } from "@stencil/core";
+import { debug, htmlToPlainText } from "../../../utils/utils";
+import { RegisterComponent } from "../../../common/register-component";
+export class NylasSummarizeMessageButton {
+    constructor() {
+        this.abortController = new AbortController();
+        this.onClick = async (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.state === 'stopped') {
+                if (this.message) {
+                    this.abortController = new AbortController();
+                    const event = this.summarize.emit({
+                        abortController: this.abortController,
+                        playAudio: this.playAudio,
+                        message: this.message,
+                        updateState: this.updateState,
+                    });
+                    if (!event.defaultPrevented) {
+                        debug(`[nylas-summarize-message-button] Default event not prevented, summarizing message`);
+                        if (this.audioRef) {
+                            await this.audioRef
+                                .play()
+                                .then(() => this.audioRef?.pause())
+                                .catch(error => console.error('Error playing audio:', error));
+                            await this.audioRef.play().catch(error => console.error('Error playing audio:', error));
+                        }
+                    }
+                }
+            }
+            else if (this.state === 'playing') {
+                this.abortController?.abort();
+                this.audioRef?.pause();
+            }
+            else {
+                this.state = 'stopped';
+            }
+        };
+        this.message = undefined;
+        this.state = 'stopped';
+        this.playAudio = this.playAudio.bind(this);
+        this.updateState = this.updateState.bind(this);
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    async componentWillLoad() {
+        debug(`[nylas-summarize-message-button] Component will load`);
+    }
+    async componentDidLoad() {
+        debug(`[nylas-summarize-message-button] Component did load`);
+    }
+    async updateState(state) {
+        this.state = state;
+    }
+    async playAudio(ttsResponseBody) {
+        if (!this.audioRef) {
+            this.state = 'stopped';
+            return;
+        }
+        if (!ttsResponseBody) {
+            this.state = 'stopped';
+            return;
+        }
+        const audioElement = this.audioRef;
+        if (!('MediaSource' in window)) {
+            const rb = await ttsResponseBody;
+            if (rb == null) {
+                throw new Error('ReadableStream not yet supported in this browser.');
+            }
+            const reader = rb.getReader();
+            const chunks = [];
+            await this.readChunk(reader, chunks);
+            const blob = new Blob(chunks, { type: 'audio/mpeg' });
+            const blobUrl = URL.createObjectURL(blob);
+            audioElement.src = blobUrl;
+            return;
+        }
+        const mediaSource = new MediaSource();
+        let sourceBuffer;
+        let sourceDone = false;
+        audioElement.src = URL.createObjectURL(mediaSource);
+        mediaSource.addEventListener('sourceopen', onMediaSourceOpen);
+        async function onMediaSourceOpen() {
+            sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');
+            sourceBuffer.addEventListener('updateend', onUpdateEnd);
+            const rb = await ttsResponseBody;
+            if (rb == null) {
+                throw new Error('ReadableStream not yet supported in this browser.');
+            }
+            const reader = rb.getReader();
+            const pump = () => {
+                reader
+                    .read()
+                    .then(({ done, value }) => {
+                    if (done) {
+                        sourceDone = true;
+                        return;
+                    }
+                    if (!sourceBuffer.updating) {
+                        sourceBuffer.appendBuffer(value);
+                    }
+                    pump();
+                })
+                    .catch(error => {
+                    console.error('Error while fetching and appending chunks:', error);
+                });
+            };
+            pump();
+            if (audioElement.paused) {
+                audioElement.play().catch(error => console.error('Error playing audio:', error));
+            }
+        }
+        function onUpdateEnd() {
+            if (sourceDone) {
+                mediaSource.endOfStream();
+                mediaSource.removeEventListener('sourceopen', onMediaSourceOpen);
+                mediaSource.removeEventListener('sourceclose', () => {
+                    debug(`[nylas-summarize-message-button] Source closed`);
+                });
+                sourceBuffer.removeEventListener('updateend', onUpdateEnd);
+                return;
+            }
+        }
+    }
+    async readChunk(reader, chunks) {
+        return reader.read().then(({ done, value }) => {
+            if (done) {
+                return chunks;
+            }
+            chunks.push(value);
+            return this.readChunk(reader, chunks);
+        });
+    }
+    render() {
+        return (h(Host, { key: '507fa8a1d6570be296501c8e154ef8b85cda0871' }, h("sp-theme", { key: '2db0d8c57e95c758f240a0e9328c26ec4e3d2e77', scale: "medium", color: "dark" }, h("sp-button", { key: 'df8bb0eb9069456125bd570eb280f018e0ebb9e3', label: "Summarize email", "icon-only": true, onClickCapture: this.onClick, class: {
+                'summarize-button': true,
+                'stopped': this.state === 'stopped',
+                'loading': this.state === 'loading',
+                'playing': this.state === 'playing',
+            } }, this.state === 'stopped' && h("play-icon", null), this.state === 'loading' && h("loading-icon", null), this.state === 'playing' && h("stop-icon", null)), h("audio", { key: '3bc2427c264410ae9c68f1aec3d3b0c675ae108b', ref: r => (this.audioRef = r), autoPlay: true, onPlaying: () => (this.state = 'playing'), onPause: () => (this.state = 'stopped'), onEnded: () => {
+                this.state = 'stopped';
+                debug(`[nylas-summarize-message-button] Audio ended`);
+            } }))));
+    }
+    static get is() { return "nylas-summarize-message-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-summarize-message-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-summarize-message-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "message": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Message",
+                    "resolved": "Message | undefined",
+                    "references": {
+                        "Message": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Message"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The message to summarize"
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "state": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "summarize",
+                "name": "summarize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The on summarize event handler"
+                },
+                "complexType": {
+                    "original": "SummarizeEvent",
+                    "resolved": "{ playAudio: (ttsResponseBody: Promise<ReadableStream<Uint8Array> | null>) => Promise<void>; updateState: (state: \"loading\" | \"playing\" | \"stopped\") => Promise<void>; abortController: AbortController; message: Message; }",
+                    "references": {
+                        "SummarizeEvent": {
+                            "location": "local",
+                            "path": "/Users/aarondemello/Developer/nylas/nylas/packages/nylas-web-elements/src/components/mailbox/nylas-summarize-message-button/nylas-summarize-message-button.tsx",
+                            "id": "src/components/mailbox/nylas-summarize-message-button/nylas-summarize-message-button.tsx::SummarizeEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "updateState": {
+                "complexType": {
+                    "signature": "(state: 'loading' | 'playing' | 'stopped') => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "\"loading\" | \"playing\" | \"stopped\"",
+                            "docs": "The new state"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Update the state of the summarize button",
+                    "tags": [{
+                            "name": "param",
+                            "text": "state The new state"
+                        }, {
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }]
+                }
+            },
+            "playAudio": {
+                "complexType": {
+                    "signature": "(ttsResponseBody: Promise<ReadableStream<Uint8Array> | null>) => Promise<void>",
+                    "parameters": [{
+                            "name": "ttsResponseBody",
+                            "type": "Promise<ReadableStream<Uint8Array> | null>",
+                            "docs": "Text to speech response body"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ReadableStream": {
+                            "location": "global",
+                            "id": "global::ReadableStream"
+                        },
+                        "Uint8Array": {
+                            "location": "global",
+                            "id": "global::Uint8Array"
+                        },
+                        "HTMLAudioElement": {
+                            "location": "global",
+                            "id": "global::HTMLAudioElement"
+                        },
+                        "ReadableStreamDefaultReader": {
+                            "location": "global",
+                            "id": "global::ReadableStreamDefaultReader"
+                        },
+                        "SourceBuffer": {
+                            "location": "global",
+                            "id": "global::SourceBuffer"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Play audio",
+                    "tags": [{
+                            "name": "param",
+                            "text": "ttsResponseBody Text to speech response body"
+                        }, {
+                            "name": "param",
+                            "text": "audioRef Audio element"
+                        }]
+                }
+            }
+        };
+    }
+}
+__decorate([
+    RegisterComponent({
+        name: 'nylas-summarize-message-button',
+        eventToProps: {
+            summarize: async (event, nylasConnector) => {
+                const { playAudio, updateState, abortController, message } = event.detail;
+                const text = htmlToPlainText(message.body || '');
+                await updateState('loading');
+                try {
+                    const summary = await nylasConnector.messages.summarizeText(text);
+                    const ttsResponseBody = nylasConnector.messages.textToSpeech(summary, abortController);
+                    await playAudio(ttsResponseBody);
+                }
+                catch (error) {
+                    await updateState('stopped');
+                    console.error('Error summarizing message:', error);
+                }
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasSummarizeMessageButton.prototype, "render", null);
+//# sourceMappingURL=nylas-summarize-message-button.js.map

package/dist/collection/components/mailbox/nylas-summarize-message-button/nylas-summarize-message-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-summarize-message-button.js","sourceRoot":"","sources":["../../../../src/components/mailbox/nylas-summarize-message-button/nylas-summarize-message-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Message } from '@nylas/core';\nimport { Component, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core';\nimport { NylasMailboxConnector } from '../../../components';\nimport { debug, htmlToPlainText } from '@/utils/utils';\nimport { RegisterComponent } from '@/common/register-component';\nimport { NylasMailbox } from '../nylas-mailbox/nylas-mailbox';\n\nexport type SummarizeEvent = {\n  playAudio: (ttsResponseBody: Promise<ReadableStream<Uint8Array> | null>) => Promise<void>;\n  updateState: (state: 'loading' | 'playing' | 'stopped') => Promise<void>;\n  abortController: AbortController;\n  message: Message;\n};\n\n@Component({\n  tag: 'nylas-summarize-message-button',\n  styleUrl: 'nylas-summarize-message-button.scss',\n  shadow: true,\n})\nexport class NylasSummarizeMessageButton {\n  /**\n   * The message to summarize\n   */\n  @Prop() readonly message?: Message;\n\n  /**\n   * The on summarize event handler\n   */\n  @Event() readonly summarize!: EventEmitter<SummarizeEvent>;\n\n  /**\n   * The state of the summarize button\n   */\n  @State() state: 'loading' | 'playing' | 'stopped' = 'stopped';\n\n  /**\n   * The audio element used to play the summary\n   */\n  private audioRef?: HTMLAudioElement;\n\n  /**\n   * The AbortController used to cancel the summarize request\n   */\n  private abortController: AbortController = new AbortController();\n\n  constructor() {\n    this.playAudio = this.playAudio.bind(this);\n    this.updateState = this.updateState.bind(this);\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-summarize-message-button] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-summarize-message-button] Component did load`);\n  }\n\n  /**\n   * Handle summarize button click\n   * @param event Click event\n   */\n  private onClick = async (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (this.state === 'stopped') {\n      if (this.message) {\n        this.abortController = new AbortController();\n        const event = this.summarize.emit({\n          abortController: this.abortController,\n          playAudio: this.playAudio,\n          message: this.message,\n          updateState: this.updateState,\n        });\n\n        if (!event.defaultPrevented) {\n          debug(`[nylas-summarize-message-button] Default event not prevented, summarizing message`);\n\n          if (this.audioRef) {\n            await this.audioRef\n              .play()\n              .then(() => this.audioRef?.pause())\n              .catch(error => console.error('Error playing audio:', error));\n            await this.audioRef.play().catch(error => console.error('Error playing audio:', error));\n          }\n        }\n      }\n    } else if (this.state === 'playing') {\n      this.abortController?.abort();\n      this.audioRef?.pause();\n    } else {\n      this.state = 'stopped';\n    }\n  };\n\n  /**\n   * Update the state of the summarize button\n   * @param state The new state\n   * @returns Promise<void>\n   */\n  @Method()\n  public async updateState(state: 'loading' | 'playing' | 'stopped') {\n    this.state = state;\n  }\n\n  /**\n   * Play audio\n   * @param ttsResponseBody Text to speech response body\n   * @param audioRef Audio element\n   */\n  @Method()\n  public async playAudio(ttsResponseBody: Promise<ReadableStream<Uint8Array> | null>) {\n    if (!this.audioRef) {\n      this.state = 'stopped';\n      return;\n    }\n\n    if (!ttsResponseBody) {\n      this.state = 'stopped';\n      return;\n    }\n\n    const audioElement: HTMLAudioElement = this.audioRef;\n\n    // If no MediaSource support, use a blob URL\n    if (!('MediaSource' in window)) {\n      const rb = await ttsResponseBody;\n\n      if (rb == null) {\n        throw new Error('ReadableStream not yet supported in this browser.');\n      }\n\n      const reader: ReadableStreamDefaultReader<Uint8Array> = rb.getReader();\n      const chunks: Uint8Array[] = [];\n\n      // Start reading chunks\n      await this.readChunk(reader, chunks);\n\n      // Create a blob from the chunks\n      const blob = new Blob(chunks, { type: 'audio/mpeg' });\n      const blobUrl = URL.createObjectURL(blob);\n      audioElement.src = blobUrl;\n      return;\n    }\n\n    const mediaSource = new MediaSource();\n    let sourceBuffer: SourceBuffer;\n\n    let sourceDone: boolean = false;\n\n    audioElement.src = URL.createObjectURL(mediaSource);\n    mediaSource.addEventListener('sourceopen', onMediaSourceOpen);\n\n    async function onMediaSourceOpen() {\n      sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');\n      sourceBuffer.addEventListener('updateend', onUpdateEnd);\n      const rb = await ttsResponseBody;\n\n      if (rb == null) {\n        throw new Error('ReadableStream not yet supported in this browser.');\n      }\n\n      const reader = rb.getReader();\n      const pump = () => {\n        reader\n          .read()\n          .then(({ done, value }) => {\n            if (done) {\n              sourceDone = true;\n              return;\n            }\n            if (!sourceBuffer.updating) {\n              sourceBuffer.appendBuffer(value);\n            }\n            pump();\n          })\n          .catch(error => {\n            console.error('Error while fetching and appending chunks:', error);\n          });\n      };\n\n      pump();\n\n      if (audioElement.paused) {\n        audioElement.play().catch(error => console.error('Error playing audio:', error));\n      }\n    }\n\n    function onUpdateEnd() {\n      if (sourceDone) {\n        mediaSource.endOfStream();\n        mediaSource.removeEventListener('sourceopen', onMediaSourceOpen);\n        mediaSource.removeEventListener('sourceclose', () => {\n          debug(`[nylas-summarize-message-button] Source closed`);\n        });\n        sourceBuffer.removeEventListener('updateend', onUpdateEnd);\n        return;\n      }\n    }\n  }\n\n  /**\n   * Read chunks from the ReadableStream\n   * @param reader The reader to read chunks from for the TTS audio\n   * @param chunks The chunks array to append the chunks to\n   * @returns Promise<Uint8Array[]>\n   */\n  private async readChunk(reader: ReadableStreamDefaultReader<Uint8Array>, chunks: Uint8Array[]): Promise<Uint8Array[]> {\n    return reader.read().then(({ done, value }) => {\n      if (done) {\n        // All chunks have been read, return the chunks array\n        return chunks;\n      }\n      chunks.push(value);\n      return this.readChunk(reader, chunks); // Read the next chunk\n    });\n  }\n\n  @RegisterComponent<NylasSummarizeMessageButton, NylasMailboxConnector, Exclude<NylasMailbox['stores'], undefined>>({\n    name: 'nylas-summarize-message-button',\n    eventToProps: {\n      summarize: async (event: CustomEvent<SummarizeEvent>, nylasConnector: NylasMailboxConnector) => {\n        const { playAudio, updateState, abortController, message } = event.detail;\n        const text = htmlToPlainText(message.body || '');\n        await updateState('loading');\n        try {\n          const summary = await nylasConnector.messages.summarizeText(text);\n          const ttsResponseBody = nylasConnector.messages.textToSpeech(summary, abortController);\n          await playAudio(ttsResponseBody);\n        } catch (error) {\n          await updateState('stopped');\n          console.error('Error summarizing message:', error);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <sp-theme scale=\"medium\" color=\"dark\">\n          <sp-button\n            label=\"Summarize email\"\n            icon-only\n            onClickCapture={this.onClick}\n            class={{\n              'summarize-button': true,\n              'stopped': this.state === 'stopped',\n              'loading': this.state === 'loading',\n              'playing': this.state === 'playing',\n            }}\n          >\n            {this.state === 'stopped' && <play-icon />}\n            {this.state === 'loading' && <loading-icon />}\n            {this.state === 'playing' && <stop-icon />}\n          </sp-button>\n          <audio\n            ref={r => (this.audioRef = r)}\n            autoPlay={true}\n            onPlaying={() => (this.state = 'playing')}\n            onPause={() => (this.state = 'stopped')}\n            onEnded={() => {\n              this.state = 'stopped';\n              debug(`[nylas-summarize-message-button] Audio ended`);\n            }}\n          ></audio>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/mailbox/nylas-summarize-message-button/test/nylas-summarize-message-button.e2e.js

@@ -0,0 +1,10 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('nylas-summarize-message-button', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<nylas-summarize-message-button></nylas-summarize-message-button>');
+        const element = await page.find('nylas-summarize-message-button');
+        expect(element).toHaveClass('hydrated');
+    });
+});
+//# sourceMappingURL=nylas-summarize-message-button.e2e.js.map

package/dist/collection/components/mailbox/nylas-summarize-message-button/test/nylas-summarize-message-button.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-summarize-message-button.e2e.js","sourceRoot":"","sources":["../../../../../src/components/mailbox/nylas-summarize-message-button/test/nylas-summarize-message-button.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,gCAAgC,EAAE,GAAG,EAAE;IAC9C,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,mEAAmE,CAAC,CAAC;QAE3F,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC;QAClE,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('nylas-summarize-message-button', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<nylas-summarize-message-button></nylas-summarize-message-button>');\n\n    const element = await page.find('nylas-summarize-message-button');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}