Better props validation and standardize component template

CHANGELOG.md

@@ -112,7 +112,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 - Switched math block syntax from `$$` to Tex-style `\[ \]` and `\( \)` delimiters with improved rendering and error handling, in PR [#5353](https://github.com/microsoft/BotFramework-WebChat/pull/5353), by [@OEvgeny](https://github.com/OEvgeny)
 - Improved avatar display and grouping behavior by fixing rendering issues and activity sender identification, in PR [#5346](https://github.com/microsoft/BotFramework-WebChat/pull/5346), by [@OEvgeny](https://github.com/OEvgeny)
 - Activity "copy" button will use `outerHTML` and `textContent` for clipboard content, in PR [#5378](https://github.com/microsoft/BotFramework-WebChat/pull/5378), by [@compulim](https://github.com/compulim)
-- Bumped dependencies to the latest versions, by [@compulim](https://github.com/compulim) in PR [#5385](https://github.com/microsoft/BotFramework-WebChat/pull/5385), [#5400](https://github.com/microsoft/BotFramework-WebChat/pull/5400), and [#5426](https://github.com/microsoft/BotFramework-WebChat/pull/5426)
+- Bumped dependencies to the latest versions, by [@compulim](https://github.com/compulim) in PR [#5385](https://github.com/microsoft/BotFramework-WebChat/pull/5385), [#5400](https://github.com/microsoft/BotFramework-WebChat/pull/5400), [#5426](https://github.com/microsoft/BotFramework-WebChat/pull/5426), and [#5476](https://github.com/microsoft/BotFramework-WebChat/pull/5476)
    - Production dependencies
       - [`web-speech-cognitive-services@8.1.0`](https://npmjs.com/package/web-speech-cognitive-services)
       - [`react-dictate-button@4.0.0`](https://npmjs.com/package/react-dictate-button)
@@ -135,7 +135,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
       - [`shiki@2.3.2`](https://npmjs.com/package/shiki/)
       - [`use-propagate@0.2.1`](https://npmjs.com/package/use-propagate/)
       - [`use-state-with-ref@0.1.0`](https://npmjs.com/package/use-state-with-ref/)
-      - [`valibot@0.42.1`](https://npmjs.com/package/valibot/)
+      - [`valibot@1.1.0`](https://npmjs.com/package/valibot/)
       - [`web-speech-cognitive-services@8.1.1`](https://npmjs.com/package/web-speech-cognitive-services/)
    - Development dependencies
       - [`@biomejs/biome@1.9.4`](https://npmjs.com/package/@biomejs/biome/)
@@ -191,6 +191,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
       - [`webpack-cli@6.0.1`](https://npmjs.com/package/webpack-cli/)
       - [`webpack@5.98.0`](https://npmjs.com/package/webpack/)
 - Fixed [#5446](https://github.com/microsoft/BotFramework-WebChat/issues/5446). Embedded `uuid` so `microsoft-cognitiveservices-speech-sdk` do not need to use dynamic loading, as this could fail in Webpack 4 environment, in PR [#5445](https://github.com/microsoft/BotFramework-WebChat/pull/5445), by [@compulim](https://github.com/compulim)
+- Fixed [#5476](https://github.com/microsoft/BotFramework-WebChat/issues/5476). Modernizing components through memoization and use [`valibot`](https://npmjs.com/package/valibot) for props validation, by [@compulim](https://github.com/compulim)
 
 ### Fixed
 

__tests__/html/sendAttachmentOn/useSendFiles.deprecation.html

@@ -29,8 +29,8 @@
         await pageObjects.runHook(({ useSendFiles }) => useSendFiles()([fileBlob]));
 
         // THEN: It should send the file.
-        await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.numActivitiesShown(3);
+        await pageConditions.allOutgoingActivitiesSent();
         await host.snapshot();
 
         // THEN: Should print deprecation warning.

__tests__/html/upload.image.html

@@ -21,8 +21,8 @@
 
         await pageConditions.uiConnected();
         await pageObjects.uploadFile('seaofthieves.jpg');
-        await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.numActivitiesShown(2);
+        await pageConditions.allOutgoingActivitiesSent();
 
         await host.snapshot();
       });

__tests__/html2/bubble/nub/carousel.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        await host.windowSize(1080, 1920);
+
+        document.getElementById('webchat').style.zoom = 3;
+
+        WebChat.renderWebChat(
+          {
+            directLine: WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() }),
+            store: testHelpers.createStore(),
+            styleOptions: {
+              bubbleNubOffset: 0,
+              bubbleNubSize: 10,
+              bubbleFromUserNubOffset: 0,
+              bubbleFromUserNubSize: 10
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        await pageObjects.sendMessageViaSendBox('layout carousel');
+        await pageConditions.numActivitiesShown(2);
+        await pageConditions.allImagesLoaded();
+
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>

__tests__/html2/bubble/nub/offset/flipped.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        await host.windowSize(1080, 1920);
+
+        document.getElementById('webchat').style.zoom = 3;
+
+        WebChat.renderWebChat(
+          {
+            directLine: WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() }),
+            store: testHelpers.createStore(),
+            styleOptions: {
+              bubbleBorderColor: 'red',
+              bubbleBorderRadius: 10,
+              bubbleBorderWidth: 2,
+              bubbleFromUserBorderColor: 'green',
+              bubbleFromUserBorderRadius: 10,
+              bubbleFromUserBorderWidth: 2,
+              bubbleFromUserNubOffset: 'bottom',
+              bubbleFromUserNubSize: 10,
+              bubbleNubOffset: 'bottom',
+              bubbleNubSize: 10
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        await pageObjects.sendMessageViaSendBox('Hello, World!');
+        await pageConditions.numActivitiesShown(2);
+
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>

__tests__/html2/bubble/nub/offset/negative10.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        await host.windowSize(1080, 1920);
+
+        document.getElementById('webchat').style.zoom = 3;
+
+        WebChat.renderWebChat(
+          {
+            directLine: WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() }),
+            store: testHelpers.createStore(),
+            styleOptions: {
+              bubbleBorderColor: 'red',
+              bubbleBorderRadius: 10,
+              bubbleBorderWidth: 2,
+              bubbleFromUserBorderColor: 'green',
+              bubbleFromUserBorderRadius: 10,
+              bubbleFromUserBorderWidth: 2,
+              bubbleFromUserNubOffset: -10,
+              bubbleFromUserNubSize: 10,
+              bubbleNubOffset: -10,
+              bubbleNubSize: 10
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        await pageObjects.sendMessageViaSendBox('Hello, World!');
+        await pageConditions.numActivitiesShown(2);
+
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>