@twilio/conversations 2.0.0-rc.3 → 2.0.1-canary.2

package/dist/util/index.js

@@ -0,0 +1,206 @@
+/*
+@license
+The following license applies to all parts of this software except as
+documented below.
+
+    Copyright (c) 2019, Twilio, inc.
+    All rights reserved.
+
+    Redistribution and use in source and binary forms, with or without
+    modification, are permitted provided that the following conditions are
+    met:
+
+      1. Redistributions of source code must retain the above copyright
+         notice, this list of conditions and the following disclaimer.
+
+      2. Redistributions in binary form must reproduce the above copyright
+         notice, this list of conditions and the following disclaimer in
+         the documentation and/or other materials provided with the
+         distribution.
+
+      3. Neither the name of Twilio nor the names of its contributors may
+         be used to endorse or promote products derived from this software
+         without specific prior written permission.
+
+    THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+    "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+    LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+    A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+    HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+    SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+    LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+    DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+    THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+    (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+    OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+This software includes javascript-state-machine under the following license.
+
+    Copyright (c) 2012, 2013, 2014, 2015, Jake Gordon and contributors
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+
+This software includes loglevel under the following license.
+
+    Copyright (c) 2013 Tim Perry
+
+    Permission is hereby granted, free of charge, to any person
+    obtaining a copy of this software and associated documentation
+    files (the "Software"), to deal in the Software without
+    restriction, including without limitation the rights to use,
+    copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the
+    Software is furnished to do so, subject to the following
+    conditions:
+
+    The above copyright notice and this permission notice shall be
+    included in all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+    OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+    NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+    HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+    WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+    OTHER DEALINGS IN THE SOFTWARE.
+
+This software includes q under the following license.
+
+    Copyright 2009–2014 Kristopher Michael Kowal. All rights reserved.
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to
+    deal in the Software without restriction, including without limitation the
+    rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+    sell copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+    IN THE SOFTWARE.
+
+This software includes platform.js under the following license.
+
+    Copyright 2014 Benjamin Tan <https://d10.github.io/>
+    Copyright 2011-2015 John-David Dalton <http://allyoucanleet.com/>
+
+    Permission is hereby granted, free of charge, to any person obtaining
+    a copy of this software and associated documentation files (the
+    "Software"), to deal in the Software without restriction, including
+    without limitation the rights to use, copy, modify, merge, publish,
+    distribute, sublicense, and/or sell copies of the Software, and to
+    permit persons to whom the Software is furnished to do so, subject to
+    the following conditions:
+
+    The above copyright notice and this permission notice shall be
+    included in all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+    MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+    NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+    LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+    OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+    WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+*/
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Deep-clone an object. Note that this does not work on object containing
+ * functions.
+ * @param {object} obj - the object to deep-clone
+ * @returns {object}
+ */
+function deepClone(obj) {
+    return JSON.parse(JSON.stringify(obj));
+}
+function parseToNumber(value) {
+    if (typeof value !== 'undefined' && !isNaN(Number(value))) {
+        return Number(value);
+    }
+    return null;
+}
+// timeString cannot be typed `string` because in member.ts
+// call to parseTime(data.lastReadTimestamp) uses number not a string for timestamp.
+function parseTime(timeString) {
+    try {
+        return new Date(timeString);
+    }
+    catch (e) {
+        return null;
+    }
+}
+function parseAttributes(rawAttributes, warningMessage, log) {
+    let attributes = {};
+    if (rawAttributes) {
+        try {
+            attributes = JSON.parse(rawAttributes);
+        }
+        catch (e) {
+            log.warn(warningMessage, e);
+        }
+    }
+    return attributes;
+}
+/**
+ * Construct URI with query parameters
+ */
+class UriBuilder {
+    constructor(base) {
+        this.base = base.replace(/\/$/, '');
+        this.args = [];
+        this.paths = [];
+    }
+    arg(name, value) {
+        if (typeof value !== 'undefined') {
+            this.args.push(encodeURIComponent(name) + '=' + encodeURIComponent(value));
+        }
+        return this;
+    }
+    path(name) {
+        this.paths.push(encodeURIComponent(name));
+        return this;
+    }
+    build() {
+        let result = this.base;
+        if (this.paths.length) {
+            result += '/' + this.paths.join('/');
+        }
+        if (this.args.length) {
+            result += '?' + this.args.join('&');
+        }
+        return result;
+    }
+}
+
+exports.UriBuilder = UriBuilder;
+exports.deepClone = deepClone;
+exports.parseAttributes = parseAttributes;
+exports.parseTime = parseTime;
+exports.parseToNumber = parseToNumber;
+//# sourceMappingURL=index.js.map

package/dist/util/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/util/index.ts"],"sourcesContent":["import { Logger } from '../logger';\n\n/**\n * Deep-clone an object. Note that this does not work on object containing\n * functions.\n * @param {object} obj - the object to deep-clone\n * @returns {object}\n */\nfunction deepClone<T>(obj: T): T {\n  return JSON.parse(JSON.stringify(obj)) as T;\n}\n\nfunction parseToNumber(value) {\n  if (typeof value !== 'undefined' && !isNaN(Number(value))) {\n    return Number(value);\n  }\n  return null;\n}\n\n// timeString cannot be typed `string` because in member.ts\n// call to parseTime(data.lastReadTimestamp) uses number not a string for timestamp.\nfunction parseTime(timeString): Date {\n  try {\n    return new Date(timeString);\n  } catch (e) {\n    return null;\n  }\n}\n\nfunction parseAttributes(rawAttributes, warningMessage: string, log: Logger): Object {\n  let attributes = {};\n  if (rawAttributes) {\n    try {\n      attributes = JSON.parse(rawAttributes);\n    } catch (e) {\n      log.warn(warningMessage, e);\n    }\n  }\n\n  return attributes;\n}\n\n/**\n * Construct URI with query parameters\n */\nclass UriBuilder {\n  private base: string;\n  private args: string[];\n  private paths: string[];\n\n  constructor(base: string) {\n    this.base = base.replace(/\\/$/, '');\n    this.args = [];\n    this.paths = [];\n  }\n\n  public arg(name: string, value: any): UriBuilder {\n    if (typeof value !== 'undefined') {\n      this.args.push(encodeURIComponent(name) + '=' + encodeURIComponent(value));\n    }\n    return this;\n  }\n\n  public path(name: string): UriBuilder {\n    this.paths.push(encodeURIComponent(name));\n    return this;\n  }\n\n  public build(): string {\n    let result = this.base;\n    if (this.paths.length) {\n      result += '/' + this.paths.join('/');\n    }\n\n    if (this.args.length) {\n      result += '?' + this.args.join('&');\n    }\n    return result;\n  }\n}\n\nexport { deepClone, UriBuilder, parseToNumber, parseTime, parseAttributes };\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;;;;;;AAMA,SAAS,SAAS,CAAI,GAAM;IAC1B,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAM,CAAC;AAC9C,CAAC;AAED,SAAS,aAAa,CAAC,KAAK;IAC1B,IAAI,OAAO,KAAK,KAAK,WAAW,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE;QACzD,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;KACtB;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;AACA;AACA,SAAS,SAAS,CAAC,UAAU;IAC3B,IAAI;QACF,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;KAC7B;IAAC,OAAO,CAAC,EAAE;QACV,OAAO,IAAI,CAAC;KACb;AACH,CAAC;AAED,SAAS,eAAe,CAAC,aAAa,EAAE,cAAsB,EAAE,GAAW;IACzE,IAAI,UAAU,GAAG,EAAE,CAAC;IACpB,IAAI,aAAa,EAAE;QACjB,IAAI;YACF,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;SACxC;QAAC,OAAO,CAAC,EAAE;YACV,GAAG,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;SAC7B;KACF;IAED,OAAO,UAAU,CAAC;AACpB,CAAC;AAED;;;AAGA,MAAM,UAAU;IAKd,YAAY,IAAY;QACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACpC,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;QACf,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;KACjB;IAEM,GAAG,CAAC,IAAY,EAAE,KAAU;QACjC,IAAI,OAAO,KAAK,KAAK,WAAW,EAAE;YAChC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC;SAC5E;QACD,OAAO,IAAI,CAAC;KACb;IAEM,IAAI,CAAC,IAAY;QACtB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC;QAC1C,OAAO,IAAI,CAAC;KACb;IAEM,KAAK;QACV,IAAI,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACrB,MAAM,IAAI,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SACtC;QAED,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YACpB,MAAM,IAAI,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SACrC;QACD,OAAO,MAAM,CAAC;KACf;;;;;;;;;"}

package/{dist/docs → docs}/index.html

@@ -2818,27 +2818,34 @@ img {
 			<a href="#instantiating-and-using" id="instantiating-and-using" style="color: inherit; text-decoration: none;">
 				<h2>Instantiating and using</h2>
 			</a>
-			<p>To use the library you need <a href="https://www.twilio.com/docs/conversations/create-tokens">to generate a token</a> and pass it to the conversations Client <code>create</code> factory.</p>
+			<p>To use the library you need <a href="https://www.twilio.com/docs/conversations/create-tokens">to generate a token</a> and pass it to the Conversations Client constructor.</p>
 			<a href="#npm" id="npm" style="color: inherit; text-decoration: none;">
 				<h3>NPM</h3>
 			</a>
 			<pre><code><span style="color: #001080">npm</span><span style="color: #000000"> </span><span style="color: #001080">install</span><span style="color: #000000"> --</span><span style="color: #001080">save</span><span style="color: #000000"> @</span><span style="color: #001080">twilio</span><span style="color: #000000">/</span><span style="color: #001080">conversations</span>
 </code></pre>
-			<p>Using this method, you can <code>require</code> <code>twilio-conversations</code> and then use the client:</p>
-			<pre><code><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">Conversations</span><span style="color: #000000"> = </span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">'@twilio/conversations'</span><span style="color: #000000">);</span>
-<span style="color: #001080">Conversations</span><span style="color: #000000">.</span><span style="color: #001080">Client</span><span style="color: #000000">.</span><span style="color: #795E26">create</span><span style="color: #000000">(</span><span style="color: #001080">token</span><span style="color: #000000">).</span><span style="color: #795E26">then</span><span style="color: #000000">(</span><span style="color: #001080">client</span><span style="color: #000000"> </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
-<span style="color: #000000">    </span><span style="color: #008000">// Use client</span>
-<span style="color: #000000">});</span>
-</code></pre>
-			<p>Or, if you prefer <code>async</code>/<code>await</code> syntax:</p>
-			<pre><code><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">Conversations</span><span style="color: #000000"> = </span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">'@twilio/conversations'</span><span style="color: #000000">);</span>
-<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">client</span><span style="color: #000000"> = </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #001080">Conversations</span><span style="color: #000000">.</span><span style="color: #001080">Client</span><span style="color: #000000">.</span><span style="color: #795E26">create</span><span style="color: #000000">(</span><span style="color: #001080">token</span><span style="color: #000000">);</span>
-<span style="color: #008000">// Use client</span>
+			<p>Using this method, you can <code>require</code> <code>twilio-conversations</code> and then use the
+			client:</p>
+			<pre><code><span style="color: #0000FF">const</span><span style="color: #000000"> { </span><span style="color: #0070C1">Client</span><span style="color: #000000"> } = </span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">'@twilio/conversations'</span><span style="color: #000000">);</span>
+<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">client</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">Client</span><span style="color: #000000">(</span><span style="color: #001080">token</span><span style="color: #000000">);</span>
+<span style="color: #008000">// Before you use the client, subscribe to the `'stateChanged'` event and wait </span>
+<span style="color: #008000">// for the `'initialized'` state to be reported.</span>
+<span style="color: #001080">client</span><span style="color: #000000">.</span><span style="color: #795E26">on</span><span style="color: #000000">(</span><span style="color: #A31515">'stateChanged'</span><span style="color: #000000">, (</span><span style="color: #001080">state</span><span style="color: #000000">) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
+<span style="color: #000000">  </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">state</span><span style="color: #000000"> === </span><span style="color: #A31515">'initialized'</span><span style="color: #000000">) {</span>
+<span style="color: #000000">    </span><span style="color: #008000">// Use the client</span>
+<span style="color: #000000">  }</span>
+<span style="color: #000000">}</span>
 </code></pre>
 			<p>The SDK could also be imported using the ES module syntax:</p>
-			<pre><code><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">Conversations</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">'@twilio/conversations'</span><span style="color: #000000">;</span>
-<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">client</span><span style="color: #000000"> = </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #001080">Conversations</span><span style="color: #000000">.</span><span style="color: #001080">Client</span><span style="color: #000000">.</span><span style="color: #795E26">create</span><span style="color: #000000">(</span><span style="color: #001080">token</span><span style="color: #000000">);</span>
-<span style="color: #008000">// Use client</span>
+			<pre><code><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">Client</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">'@twilio/conversations'</span><span style="color: #000000">;</span>
+<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">client</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">Client</span><span style="color: #000000">(</span><span style="color: #001080">token</span><span style="color: #000000">);</span>
+<span style="color: #008000">// Before you use the client, subscribe to the `'stateChanged'` event and wait </span>
+<span style="color: #008000">// for the `'initialized'` state to be reported.</span>
+<span style="color: #001080">client</span><span style="color: #000000">.</span><span style="color: #795E26">on</span><span style="color: #000000">(</span><span style="color: #A31515">'stateChanged'</span><span style="color: #000000">, (</span><span style="color: #001080">state</span><span style="color: #000000">) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
+<span style="color: #000000">  </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">state</span><span style="color: #000000"> === </span><span style="color: #A31515">'initialized'</span><span style="color: #000000">) {</span>
+<span style="color: #000000">    </span><span style="color: #008000">// Use the client</span>
+<span style="color: #000000">  }</span>
+<span style="color: #000000">}</span>
 </code></pre>
 			<a href="#cdn" id="cdn" style="color: inherit; text-decoration: none;">
 				<h3>CDN</h3>
@@ -2847,14 +2854,8 @@ img {
 			directly in your web app using a <code>&lt;script&gt;</code> tag.</p>
 			<pre><code class="language-html"><span style="color: #800000">&lt;script</span><span style="color: #000000FF"> </span><span style="color: #FF0000">src</span><span style="color: #000000FF">=</span><span style="color: #0000FF">"https://media.twiliocdn.com/sdk/js/conversations/v2.0/twilio-conversations.min.js"</span><span style="color: #800000">&gt;&lt;/script&gt;</span>
 </code></pre>
-			<p>Using this method, <code>twilio-conversations.js</code> will set a browser global <code>Twilio.Conversations</code> through which you can use the client :</p>
-			<pre><code><span style="color: #001080">Twilio</span><span style="color: #000000">.</span><span style="color: #001080">Conversations</span><span style="color: #000000">.</span><span style="color: #001080">Client</span><span style="color: #000000">.</span><span style="color: #795E26">create</span><span style="color: #000000">(</span><span style="color: #001080">token</span><span style="color: #000000">).</span><span style="color: #795E26">then</span><span style="color: #000000">(</span><span style="color: #001080">client</span><span style="color: #000000"> </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
-<span style="color: #000000">    </span><span style="color: #008000">// Use client</span>
-<span style="color: #000000">});</span>
-</code></pre>
-			<p>or, if you prefer <code>async</code>/<code>await</code> syntax:</p>
-			<pre><code><span style="color: #0000FF">let</span><span style="color: #000000"> </span><span style="color: #001080">client</span><span style="color: #000000"> = </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #001080">Twilio</span><span style="color: #000000">.</span><span style="color: #001080">Conversations</span><span style="color: #000000">.</span><span style="color: #001080">Client</span><span style="color: #000000">.</span><span style="color: #795E26">create</span><span style="color: #000000">(</span><span style="color: #001080">token</span><span style="color: #000000">);</span>
-<span style="color: #008000">// Use client</span>
+			<p>Using this method, <code>twilio-conversations.js</code> will set a browser global <code>Twilio.Conversations</code> through which you can use the client:</p>
+			<pre><code><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">client</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #001080">Twilio</span><span style="color: #000000">.</span><span style="color: #001080">Conversations</span><span style="color: #000000">.</span><span style="color: #795E26">Client</span><span style="color: #000000">(</span><span style="color: #001080">token</span><span style="color: #000000">);</span>
 </code></pre>
 			<a href="#security" id="security" style="color: inherit; text-decoration: none;">
 				<h3>Security</h3>
@@ -2864,7 +2865,7 @@ img {
 			<p>If you require more security you will have to consume SDK by using <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">SRI</a> and using an exact version
 			number. While less flexible it is significantly more secure, which is required by some applications.</p>
 			<p>To consume securely use the following script snippet format:</p>
-			<pre><code class="language-html"><span style="color: #800000">&lt;script</span><span style="color: #000000FF"> </span><span style="color: #FF0000">src</span><span style="color: #000000FF">=</span><span style="color: #0000FF">"https://media.twiliocdn.com/sdk/js/conversations/releases/2.0.0/twilio-conversations.min.js"</span>
+			<pre><code class="language-html"><span style="color: #800000">&lt;script</span><span style="color: #000000FF"> </span><span style="color: #FF0000">src</span><span style="color: #000000FF">=</span><span style="color: #0000FF">"https://media.twiliocdn.com/sdk/js/conversations/releases/2.0.1/twilio-conversations.min.js"</span>
 <span style="color: #000000FF">        </span><span style="color: #FF0000">integrity</span><span style="color: #000000FF">=</span><span style="color: #0000FF">"sha256-&lt;HASH FROM THE CHANGELOGS PAGE&gt;"</span>
 <span style="color: #000000FF">        </span><span style="color: #FF0000">crossorigin</span><span style="color: #000000FF">=</span><span style="color: #0000FF">"anonymous"</span><span style="color: #800000">&gt;&lt;/script&gt;</span>
 </code></pre>

package/{dist/docs → docs}/interfaces/PushNotificationData.html

@@ -2886,7 +2886,7 @@ img {
 				</aside>
 				<div class="tsd-comment tsd-typography">
 					<div class="lead">
-						<p>SID of the message in the conversation.s</p>
+						<p>SID of the message in the conversation.</p>
 					</div>
 				</div>
 			</section>

package/{dist/docs → docs}/interfaces/SendMediaOptions.html

@@ -2826,7 +2826,8 @@ img {
 			<div class="tsd-comment tsd-typography">
 				<div class="lead">
 					<p>Configuration for attaching a media file to a message.
-					These options can be passed to <a href="../classes/Conversation.html#sendMessage">Conversation.sendMessage</a>.</p>
+						These options can be passed to <a href="../classes/Conversation.html#sendMessage">Conversation.sendMessage</a> and
+					<a href="../classes/MessageBuilder.html#addMedia">MessageBuilder.addMedia</a>.</p>
 				</div>
 			</div>
 		</section>

package/{dist/docs → docs}/modules.html

@@ -2820,27 +2820,34 @@ img {
 			<a href="#instantiating-and-using" id="instantiating-and-using" style="color: inherit; text-decoration: none;">
 				<h2>Instantiating and using</h2>
 			</a>
-			<p>To use the library you need <a href="https://www.twilio.com/docs/conversations/create-tokens">to generate a token</a> and pass it to the conversations Client <code>create</code> factory.</p>
+			<p>To use the library you need <a href="https://www.twilio.com/docs/conversations/create-tokens">to generate a token</a> and pass it to the Conversations Client constructor.</p>
 			<a href="#npm" id="npm" style="color: inherit; text-decoration: none;">
 				<h3>NPM</h3>
 			</a>
 			<pre><code><span style="color: #001080">npm</span><span style="color: #000000"> </span><span style="color: #001080">install</span><span style="color: #000000"> --</span><span style="color: #001080">save</span><span style="color: #000000"> @</span><span style="color: #001080">twilio</span><span style="color: #000000">/</span><span style="color: #001080">conversations</span>
 </code></pre>
-			<p>Using this method, you can <code>require</code> <code>twilio-conversations</code> and then use the client:</p>
-			<pre><code><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">Conversations</span><span style="color: #000000"> = </span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;@twilio/conversations&#039;</span><span style="color: #000000">);</span>
-<span style="color: #001080">Conversations</span><span style="color: #000000">.</span><span style="color: #001080">Client</span><span style="color: #000000">.</span><span style="color: #795E26">create</span><span style="color: #000000">(</span><span style="color: #001080">token</span><span style="color: #000000">).</span><span style="color: #795E26">then</span><span style="color: #000000">(</span><span style="color: #001080">client</span><span style="color: #000000"> </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
-<span style="color: #000000">    </span><span style="color: #008000">// Use client</span>
-<span style="color: #000000">});</span>
-</code></pre>
-			<p>Or, if you prefer <code>async</code>/<code>await</code> syntax:</p>
-			<pre><code><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">Conversations</span><span style="color: #000000"> = </span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;@twilio/conversations&#039;</span><span style="color: #000000">);</span>
-<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">client</span><span style="color: #000000"> = </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #001080">Conversations</span><span style="color: #000000">.</span><span style="color: #001080">Client</span><span style="color: #000000">.</span><span style="color: #795E26">create</span><span style="color: #000000">(</span><span style="color: #001080">token</span><span style="color: #000000">);</span>
-<span style="color: #008000">// Use client</span>
+			<p>Using this method, you can <code>require</code> <code>twilio-conversations</code> and then use the
+			client:</p>
+			<pre><code><span style="color: #0000FF">const</span><span style="color: #000000"> { </span><span style="color: #0070C1">Client</span><span style="color: #000000"> } = </span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;@twilio/conversations&#039;</span><span style="color: #000000">);</span>
+<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">client</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">Client</span><span style="color: #000000">(</span><span style="color: #001080">token</span><span style="color: #000000">);</span>
+<span style="color: #008000">// Before you use the client, subscribe to the `&#039;stateChanged&#039;` event and wait </span>
+<span style="color: #008000">// for the `&#039;initialized&#039;` state to be reported.</span>
+<span style="color: #001080">client</span><span style="color: #000000">.</span><span style="color: #795E26">on</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;stateChanged&#039;</span><span style="color: #000000">, (</span><span style="color: #001080">state</span><span style="color: #000000">) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
+<span style="color: #000000">  </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">state</span><span style="color: #000000"> === </span><span style="color: #A31515">&#039;initialized&#039;</span><span style="color: #000000">) {</span>
+<span style="color: #000000">    </span><span style="color: #008000">// Use the client</span>
+<span style="color: #000000">  }</span>
+<span style="color: #000000">}</span>
 </code></pre>
 			<p>The SDK could also be imported using the ES module syntax:</p>
-			<pre><code><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">Conversations</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@twilio/conversations&#039;</span><span style="color: #000000">;</span>
-<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">client</span><span style="color: #000000"> = </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #001080">Conversations</span><span style="color: #000000">.</span><span style="color: #001080">Client</span><span style="color: #000000">.</span><span style="color: #795E26">create</span><span style="color: #000000">(</span><span style="color: #001080">token</span><span style="color: #000000">);</span>
-<span style="color: #008000">// Use client</span>
+			<pre><code><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">Client</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@twilio/conversations&#039;</span><span style="color: #000000">;</span>
+<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">client</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">Client</span><span style="color: #000000">(</span><span style="color: #001080">token</span><span style="color: #000000">);</span>
+<span style="color: #008000">// Before you use the client, subscribe to the `&#039;stateChanged&#039;` event and wait </span>
+<span style="color: #008000">// for the `&#039;initialized&#039;` state to be reported.</span>
+<span style="color: #001080">client</span><span style="color: #000000">.</span><span style="color: #795E26">on</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;stateChanged&#039;</span><span style="color: #000000">, (</span><span style="color: #001080">state</span><span style="color: #000000">) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
+<span style="color: #000000">  </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">state</span><span style="color: #000000"> === </span><span style="color: #A31515">&#039;initialized&#039;</span><span style="color: #000000">) {</span>
+<span style="color: #000000">    </span><span style="color: #008000">// Use the client</span>
+<span style="color: #000000">  }</span>
+<span style="color: #000000">}</span>
 </code></pre>
 			<a href="#cdn" id="cdn" style="color: inherit; text-decoration: none;">
 				<h3>CDN</h3>
@@ -2849,14 +2856,8 @@ img {
 			directly in your web app using a <code>&lt;script&gt;</code> tag.</p>
 			<pre><code class="language-html"><span style="color: #800000">&lt;script</span><span style="color: #000000FF"> </span><span style="color: #FF0000">src</span><span style="color: #000000FF">=</span><span style="color: #0000FF">&quot;https://media.twiliocdn.com/sdk/js/conversations/v2.0/twilio-conversations.min.js&quot;</span><span style="color: #800000">&gt;&lt;/script&gt;</span>
 </code></pre>
-			<p>Using this method, <code>twilio-conversations.js</code> will set a browser global <code>Twilio.Conversations</code> through which you can use the client :</p>
-			<pre><code><span style="color: #001080">Twilio</span><span style="color: #000000">.</span><span style="color: #001080">Conversations</span><span style="color: #000000">.</span><span style="color: #001080">Client</span><span style="color: #000000">.</span><span style="color: #795E26">create</span><span style="color: #000000">(</span><span style="color: #001080">token</span><span style="color: #000000">).</span><span style="color: #795E26">then</span><span style="color: #000000">(</span><span style="color: #001080">client</span><span style="color: #000000"> </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
-<span style="color: #000000">    </span><span style="color: #008000">// Use client</span>
-<span style="color: #000000">});</span>
-</code></pre>
-			<p>or, if you prefer <code>async</code>/<code>await</code> syntax:</p>
-			<pre><code><span style="color: #0000FF">let</span><span style="color: #000000"> </span><span style="color: #001080">client</span><span style="color: #000000"> = </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #001080">Twilio</span><span style="color: #000000">.</span><span style="color: #001080">Conversations</span><span style="color: #000000">.</span><span style="color: #001080">Client</span><span style="color: #000000">.</span><span style="color: #795E26">create</span><span style="color: #000000">(</span><span style="color: #001080">token</span><span style="color: #000000">);</span>
-<span style="color: #008000">// Use client</span>
+			<p>Using this method, <code>twilio-conversations.js</code> will set a browser global <code>Twilio.Conversations</code> through which you can use the client:</p>
+			<pre><code><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">client</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #001080">Twilio</span><span style="color: #000000">.</span><span style="color: #001080">Conversations</span><span style="color: #000000">.</span><span style="color: #795E26">Client</span><span style="color: #000000">(</span><span style="color: #001080">token</span><span style="color: #000000">);</span>
 </code></pre>
 			<a href="#security" id="security" style="color: inherit; text-decoration: none;">
 				<h3>Security</h3>
@@ -2866,7 +2867,7 @@ img {
 			<p>If you require more security you will have to consume SDK by using <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">SRI</a> and using an exact version
 			number. While less flexible it is significantly more secure, which is required by some applications.</p>
 			<p>To consume securely use the following script snippet format:</p>
-			<pre><code class="language-html"><span style="color: #800000">&lt;script</span><span style="color: #000000FF"> </span><span style="color: #FF0000">src</span><span style="color: #000000FF">=</span><span style="color: #0000FF">&quot;https://media.twiliocdn.com/sdk/js/conversations/releases/2.0.0/twilio-conversations.min.js&quot;</span>
+			<pre><code class="language-html"><span style="color: #800000">&lt;script</span><span style="color: #000000FF"> </span><span style="color: #FF0000">src</span><span style="color: #000000FF">=</span><span style="color: #0000FF">&quot;https://media.twiliocdn.com/sdk/js/conversations/releases/2.0.1/twilio-conversations.min.js&quot;</span>
 <span style="color: #000000FF">        </span><span style="color: #FF0000">integrity</span><span style="color: #000000FF">=</span><span style="color: #0000FF">&quot;sha256-&lt;HASH FROM THE CHANGELOGS PAGE&gt;&quot;</span>
 <span style="color: #000000FF">        </span><span style="color: #FF0000">crossorigin</span><span style="color: #000000FF">=</span><span style="color: #0000FF">&quot;anonymous&quot;</span><span style="color: #800000">&gt;&lt;/script&gt;</span>
 </code></pre>