Hide the send box of the Fluent theme when hideSendBox is set

.changelog/5918-fix-fluent-hidesendbox.md

@@ -0,0 +1,3 @@
+### Fixed
+
+- Fixed the Fluent theme ignoring `styleOptions.hideSendBox`, in PR [#5918](https://github.com/microsoft/BotFramework-WebChat/pull/5918), by [@OEvgeny](https://github.com/OEvgeny)

__tests__/html2/fluentTheme/hideSendBox.copilot.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      location = './hideSendBox?variant=copilot';
+    </script>
+  </head>
+  <body></body>
+</html>

__tests__/html2/fluentTheme/hideSendBox.html

@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for",
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/": "/__dist__/packages/bundle/static/botframework-webchat/",
+          "botframework-webchat-fluent-theme": "/__dist__/packages/fluent-theme/static/botframework-webchat-fluent-theme.js",
+          "react": "/__dist__/packages/bundle/static/react.js",
+          "react-dom": "/__dist__/packages/bundle/static/react-dom.js",
+          "react-dom/client": "/__dist__/packages/bundle/static/react-dom/client.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { waitFor } from '@testduet/wait-for';
+      import { createStoreWithOptions, ReactWebChat } from 'botframework-webchat';
+      import { FluentThemeProvider, testIds } from 'botframework-webchat-fluent-theme';
+      import { createElement } from 'react';
+      import { createRoot } from 'react-dom/client';
+
+      // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
+      window.WebChat = { createStoreWithOptions };
+
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        // GIVEN: Web Chat with the Fluent theme (or its Copilot variant) and `hideSendBox: true`.
+        createRoot(document.getElementById('webchat')).render(
+          createElement(
+            FluentThemeProvider,
+            { variant: new URLSearchParams(location.search).get('variant') || 'fluent' },
+            createElement(ReactWebChat, { directLine, store, styleOptions: { hideSendBox: true } })
+          )
+        );
+
+        await pageConditions.uiConnected();
+
+        // WHEN: The bot sends a message with suggested actions, which are shown inside the send box.
+        await directLine.emulateIncomingActivity({
+          from: { role: 'bot' },
+          suggestedActions: {
+            actions: [
+              { title: 'Yes', type: 'imBack', value: 'Yes' },
+              { title: 'No', type: 'imBack', value: 'No' }
+            ]
+          },
+          text: 'Do you want to continue?',
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+        await waitFor(() => expect(store.getState().suggestedActions).toHaveLength(2));
+
+        // THEN: The send box, its toolbar, and the suggested actions should not be rendered.
+        expect(pageElements.byTestId(testIds.sendBoxContainer)).toBeFalsy();
+        expect(pageElements.byTestId(testIds.sendBoxTextBox)).toBeFalsy();
+        expect(pageElements.byTestId(testIds.sendBoxSendButton)).toBeFalsy();
+        expect(pageElements.byTestId(testIds.sendBoxSuggestedAction)).toBeFalsy();
+
+        // THEN: The transcript shows the message, without a send box or suggested actions below it.
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>

packages/api/src/StyleOptions.ts

@@ -283,6 +283,9 @@ type StrictStyleOptions = {
    * Send box styling
    */
 
+  /**
+   * `true` to hide the send box and its suggested actions, otherwise, `false`. Defaults to `false`.
+   */
   hideSendBox: boolean | undefined;
 
   /**

packages/fluent-theme/src/components/sendBox/SendBox.tsx

@@ -296,10 +296,16 @@ function SendBox(props: Props) {
   );
 }
 
-const PrimarySendBox = memo((props: Exclude<Props, 'primary'>) => <SendBox {...props} isPrimary={true} />);
+function PrimarySendBox(props: Exclude<Props, 'primary'>) {
+  const [{ hideSendBox }] = useStyleOptions();
+
+  return hideSendBox ? null : <SendBox {...props} isPrimary={true} />;
+}
 
 PrimarySendBox.displayName = 'PrimarySendBox';
 
+const MemoizedPrimarySendBox = memo(PrimarySendBox);
+
 export default memo(SendBox);
 
-export { PrimarySendBox };
+export { MemoizedPrimarySendBox as PrimarySendBox };