botframework-webchat-fluent-theme 4.18.1-main.20240807.dfe788c → 4.18.1-main.20240808.851825d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20240807.dfe788c",
+  "version": "4.18.1-main.20240808.851825d",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -69,9 +69,9 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20240807.dfe788c",
-    "botframework-webchat-component": "4.18.1-main.20240807.dfe788c",
-    "botframework-webchat-core": "4.18.1-main.20240807.dfe788c",
+    "botframework-webchat-api": "4.18.1-main.20240808.851825d",
+    "botframework-webchat-component": "4.18.1-main.20240808.851825d",
+    "botframework-webchat-core": "4.18.1-main.20240808.851825d",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

package/src/components/preChatActivity/StarterPromptsCardAction.tsx

@@ -4,6 +4,7 @@ import cx from 'classnames';
 import React, { memo, useCallback, useMemo } from 'react';
 import { useRefFrom } from 'use-ref-from';
 import { useStyles } from '../../styles/index.js';
+import testIds from '../../testIds.js';
 import MonochromeImageMasker from './private/MonochromeImageMasker.js';
 import styles from './StarterPromptsCardAction.module.css';
 
@@ -35,6 +36,7 @@ const StarterPromptAction = ({ className, messageBackAction }: Props) => {
   return (
     <button
       className={cx(className, classNames['pre-chat-message-activity__card-action-box'])}
+      data-testid={testIds.preChatMessageActivityStarterPromptsCardAction}
       onClick={handleClick}
       type="button"
     >

package/src/components/sendBox/SendBox.tsx

@@ -3,6 +3,7 @@ import cx from 'classnames';
 import React, { memo, useCallback, useRef, useState, type FormEventHandler, type MouseEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
 import { SendIcon } from '../../icons';
+import { useStyles } from '../../styles';
 import testIds from '../../testIds';
 import { DropZone } from '../dropZone';
 import { SuggestedActions } from '../suggestedActions';
@@ -10,14 +11,13 @@ import { TelephoneKeypadSurrogate, useTelephoneKeypadShown, type DTMF } from '..
 import AddAttachmentButton from './AddAttachmentButton';
 import Attachments from './Attachments';
 import ErrorMessage from './ErrorMessage';
-import TelephoneKeypadToolbarButton from './TelephoneKeypadToolbarButton';
-import TextArea from './TextArea';
-import { Toolbar, ToolbarButton, ToolbarSeparator } from './Toolbar';
 import useSubmitError from './private/useSubmitError';
+import useTranscriptNavigation from './private/useTranscriptNavigation';
 import useUniqueId from './private/useUniqueId';
 import styles from './SendBox.module.css';
-import { useStyles } from '../../styles';
-import useTranscriptNavigation from './private/useTranscriptNavigation';
+import TelephoneKeypadToolbarButton from './TelephoneKeypadToolbarButton';
+import TextArea from './TextArea';
+import { Toolbar, ToolbarButton, ToolbarSeparator } from './Toolbar';
 
 const {
   useFocus,
@@ -25,18 +25,23 @@ const {
   useMakeThumbnail,
   useRegisterFocusSendBox,
   useSendBoxAttachments,
+  useSendBoxValue,
   useSendMessage,
   useStyleOptions
 } = hooks;
 
-function SendBox(
-  props: Readonly<{
-    className?: string | undefined;
-    placeholder?: string | undefined;
-  }>
-) {
+type Props = Readonly<{
+  className?: string | undefined;
+  isPrimary?: boolean | undefined;
+  placeholder?: string | undefined;
+}>;
+
+function SendBox(props: Props) {
   const inputRef = useRef<HTMLTextAreaElement>(null);
-  const [message, setMessage] = useState('');
+  const [localMessage, setLocalMessage] = useState('');
+  const [globalMessage, setGlobalMessage] = useSendBoxValue();
+  const message = props.isPrimary ? globalMessage : localMessage;
+  const setMessage = props.isPrimary ? setGlobalMessage : setLocalMessage;
   const [attachments, setAttachments] = useSendBoxAttachments();
   const [{ hideTelephoneKeypadButton, hideUploadButton, maxMessageLength }] = useStyleOptions();
   const isMessageLengthExceeded = !!maxMessageLength && message.length > maxMessageLength;
@@ -213,4 +218,10 @@ function SendBox(
   );
 }
 
+const PrimarySendBox = memo((props: Exclude<Props, 'primary'>) => <SendBox {...props} isPrimary={true} />);
+
+PrimarySendBox.displayName = 'PrimarySendBox';
+
 export default memo(SendBox);
+
+export { PrimarySendBox };

package/src/components/sendBox/index.tsx

@@ -1 +1 @@
-export { default as SendBox } from './SendBox';
+export { PrimarySendBox, default as SendBox } from './SendBox';

package/src/private/FluentThemeProvider.tsx

@@ -3,7 +3,7 @@ import React, { memo, type ReactNode } from 'react';
 
 import type { ActivityMiddleware } from 'botframework-webchat-api';
 import { isPreChatMessageActivity, PreChatMessageActivity } from '../components/preChatActivity';
-import { SendBox } from '../components/sendBox';
+import { PrimarySendBox } from '../components/sendBox';
 import { TelephoneKeypadProvider } from '../components/telephoneKeypad';
 import { WebChatTheme } from '../components/theme';
 
@@ -24,7 +24,7 @@ const activityMiddleware: ActivityMiddleware[] = [
       return next(...args);
     }
 ];
-const sendBoxMiddleware = [() => () => () => SendBox];
+const sendBoxMiddleware = [() => () => () => PrimarySendBox];
 
 const FluentThemeProvider = ({ children }: Props) => (
   <WebChatTheme>

package/src/testIds.ts

@@ -1,4 +1,5 @@
 const testIds = {
+  preChatMessageActivityStarterPromptsCardAction: 'pre-chat message activity starter prompts card action',
   sendBoxDropZone: 'send box drop zone',
   sendBoxSendButton: 'send box send button',
   sendBoxTextBox: 'send box text area',