2024-10: content update for Chat

packages/ui-extensions/src/surfaces/checkout/components/Chat/AppBridge.ts

@@ -20,7 +20,7 @@ interface AppBridge {
 
   /**
    * The ID token providing a set of claims as a signed [JSON Web Token (JWT)](https://openid.net/specs/openid-connect-core-1_0.html#IDToken%5C)
-   * with a TTL of 5 minutes. It can be used can be used to ensure that requests came from a Shopify authenticated user.
+   * with a TTL of 5 minutes. It can be used to ensure that requests came from a Shopify authenticated user.
    * See the [ID Token documentation](https://shopify.dev/docs/apps/build/authentication-authorization/session-tokens) from more information.
    *
    * @see https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/session-token
@@ -85,8 +85,8 @@ interface Extension {
 
 interface Visitor {
   /**
-   * The unique token of a given user across all surfaces in a shop, present
-   * if a user has opted-in to tracking.
+   * The unique token of a given user across all surfaces in a shop,
+   * present if processing permission is provided.
    *
    * @ignore this maps to the _shopify_y cookie which Trekkie refers to as a
    * uniqToken.

packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.doc.ts

@@ -23,7 +23,7 @@ Use the Chat component to create real-time chat applications.
       description: `
 The App Bridge script for checkout provides APIs that enables a secure communication channel between the Shopify checkout and the embedded application within the Chat iframe. It also offers convenient methods to perform common actions like resizing the iframe from within the application.
 
-After App Bridge is set up in your app, you have access to the \`shopify\` global variable. This variable exposes the following App Bridge functionalities and configuration information:
+After App Bridge is [set up](#about-app-bridge) in your app, you have access to the \`shopify\` global variable. This variable exposes the following App Bridge functionalities and configuration information:
           `,
       type: 'AppBridge',
     },
@@ -57,7 +57,7 @@ After App Bridge is set up in your app, you have access to the \`shopify\` globa
 The \`src\` of the iframe rendered by Chat is provided by the \`preloads\` \`chat\` key in the extension configuration file. Shopify automatically appends query parameters to the URL which allows developers to verify the authenticity of the request and the identity of the merchant. We guarantee these tokens are valid and signed by Shopify.
 
 #### id_token
-The ID token providing a set of claims as a signed [JSON Web Token (JWT)](https://openid.net/specs/openid-connect-core-1_0.html#IDToken%5C) with a TTL of 5 minutes. It can be used can be used to retrieve merchants information on the backend as well as ensure that requests came from a Shopify authenticated source. See the [ID Token documentation](https://shopify.dev/docs/apps/build/authentication-authorization/session-tokens) for more information.
+The ID token providing a set of claims as a signed [JSON Web Token (JWT)](https://openid.net/specs/openid-connect-core-1_0.html#IDToken%5C) with a TTL of 5 minutes. It can be used to retrieve merchants information on the backend as well as ensure that requests came from a Shopify authenticated source. See the [ID Token documentation](https://shopify.dev/docs/apps/build/authentication-authorization/session-tokens) for more information.
 
 #### locale
 The locale of the shop that’s embedding the app, i.e. \`en-CA\`. This information is also available in the \`shopify\` global variable under \`config\`.

packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts

@@ -6,7 +6,7 @@ export interface ChatProps extends IdProps {
   /**
    * Adjust the inline size.
    *
-   * Checkout imposes sizing restrictions for the component, therefore the size set
+   * Checkout imposes [sizing restrictions](https://shopify.dev/docs/apps/build/checkout/chat#component-states) for the component, therefore the size set
    * may not be the actual size rendered.
    *
    * `number`: size in pixels.
@@ -18,7 +18,7 @@ export interface ChatProps extends IdProps {
   /**
    * Adjust the block size.
    *
-   * Checkout imposes sizing restrictions for the component, therefore the size set
+   * Checkout imposes [sizing restrictions](https://shopify.dev/docs/apps/build/checkout/chat#component-states) for the component, therefore the size set
    * may not be the actual size rendered.
    *
    * `number`: size in pixels.

packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/app-bridge-communication.example.js

@@ -8,8 +8,11 @@ shopify.extension.port.onMessage = async (event) => {
   if (event.data.action === 'ping') {
     buyerFirstName = event.data.buyer.firstName;
 
-    await shopify.extension.messagePort.postMessage({
+    await shopify.extension.port.postMessage({
       action: 'pong',
     });
   }
 };
+
+// Ensure the messagePort is ready to start sending and receiving messages.
+shopify.extension.port.start();

packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/app-bridge-resize.example.html

@@ -33,13 +33,13 @@
         // -  resize the iframe to the button's size
         if (dialog.classList.contains('visible')) {
           dialog.classList.remove('visible');
-          shopify !== undefined && window.shopify.resizeTo(150, 50);
+          shopify !== undefined && window.resizeTo(150, 50);
 
           // if the dialog is not visible,
           // - resize the iframe to the desired dialog's size
           // - then show the dialog
         } else {
-          shopify !== undefined && window.shopify.resizeTo(415, 700);
+          shopify !== undefined && window.resizeTo(415, 700);
           dialog.classList.add('visible');
         }
       }

packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/chat-custom-properties-css.example.css

@@ -4,8 +4,6 @@
 }
 
 .dialog {
-  inline-size: min(
-    100%,
-    var(--shopify-checkout-chat-maximized-max-inline-size)
-  );
+  inline-size: 100%;
+  max-inline-size: var(--shopify-checkout-chat-maximized-max-inline-size);
 }

packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/include-app-bridge.example.html

@@ -1,3 +1,3 @@
 <head>
-  <script src="https://cdn.shopifycloud.com/checkout-web/assets/app-bridge-checkout.js"></script>
+  <script src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/app-bridge-checkout.js"></script>
 </head>