botframework-webchat-fluent-theme 4.17.1-main.20240516.aaff0e6 → 4.17.1-main.20240625.336dd7c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.17.1-main.20240516.aaff0e6",
+  "version": "4.17.1-main.20240625.336dd7c",
   "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.17.1-main.20240516.aaff0e6",
-    "botframework-webchat-component": "4.17.1-main.20240516.aaff0e6",
-    "botframework-webchat-core": "4.17.1-main.20240516.aaff0e6",
+    "botframework-webchat-api": "4.17.1-main.20240625.336dd7c",
+    "botframework-webchat-component": "4.17.1-main.20240625.336dd7c",
+    "botframework-webchat-core": "4.17.1-main.20240625.336dd7c",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

package/src/components/decorator/Decorator.module.css

@@ -0,0 +1,3 @@
+:global(.webchat-fluent-decorator).decorator {
+  display: contents;
+}

package/src/components/decorator/Decorator.tsx

@@ -0,0 +1,27 @@
+import { DecoratorComposer, type DecoratorMiddleware } from 'botframework-webchat-api/decorator';
+import cx from 'classnames';
+import React, { memo, type ReactNode } from 'react';
+
+import { useStyles } from '../../styles';
+import styles from './Decorator.module.css';
+import Flair from './Flair';
+import Loader from './Loader';
+
+export const rootClassName = 'webchat-fluent-decorator';
+
+const middleware: DecoratorMiddleware[] = [
+  init => init === 'activity border' && (next => request => (request.state === 'completion' ? Flair : next(request))),
+  init => init === 'activity border' && (next => request => (request.state === 'informative' ? Loader : next(request)))
+];
+
+function WebChatDecorator(props: Readonly<{ readonly children?: ReactNode | undefined }>) {
+  const classNames = useStyles(styles);
+
+  return (
+    <div className={cx(rootClassName, classNames['decorator'])}>
+      <DecoratorComposer middleware={middleware}>{props.children}</DecoratorComposer>
+    </div>
+  );
+}
+
+export default memo(WebChatDecorator);

package/src/components/decorator/Flair.module.css

@@ -0,0 +1,4 @@
+:global(.webchat-fluent-decorator) .flair {
+  border-radius: inherit;
+  border: solid 2px red;
+}

package/src/components/decorator/Flair.tsx

@@ -0,0 +1,12 @@
+import React, { memo, type ReactNode } from 'react';
+
+import { useStyles } from '../../styles';
+import styles from './Flair.module.css';
+
+function Flair({ children }: Readonly<{ children?: ReactNode | undefined }>) {
+  const classNames = useStyles(styles);
+
+  return <div className={classNames['flair']}>{children}</div>;
+}
+
+export default memo(Flair);

package/src/components/decorator/Loader.module.css

@@ -0,0 +1,3 @@
+:global(.webchat-fluent-decorator) .loader {
+  border-bottom: solid 4px blue;
+}

package/src/components/decorator/Loader.tsx

@@ -0,0 +1,17 @@
+import React, { memo, type ReactNode } from 'react';
+
+import { useStyles } from '../../styles';
+import styles from './Loader.module.css';
+
+function Loader({ children }: Readonly<{ children?: ReactNode | undefined }>) {
+  const classNames = useStyles(styles);
+
+  return (
+    <React.Fragment>
+      {children}
+      <div className={classNames['loader']} />
+    </React.Fragment>
+  );
+}
+
+export default memo(Loader);

package/src/components/decorator/index.ts

@@ -0,0 +1 @@
+export { default as WebChatDecorator } from './Decorator';

package/src/components/sendBox/SendBox.module.css

@@ -79,6 +79,13 @@
   outline: none;
   padding: 4px 4px 0;
   resize: none;
+
+  /* Prevent zoom on focus on iOS */
+  @media only screen and (hover: none) and (pointer: coarse) {
+    &:focus-within {
+      font-size: 16px;
+    }
+  }
 }
 
 :global(.webchat-fluent) .sendbox__sendbox-controls {

package/src/components/sendBox/SendBox.tsx

@@ -17,6 +17,7 @@ import useSubmitError from './private/useSubmitError';
 import useUniqueId from './private/useUniqueId';
 import styles from './SendBox.module.css';
 import { useStyles } from '../../styles';
+import useTranscriptNavigation from './private/useTranscriptNavigation';
 
 const {
   useFocus,
@@ -142,10 +143,12 @@ function SendBox(
 
   const handleTelephoneKeypadButtonClick = useCallback(
     // TODO: We need more official way of sending DTMF.
-    (dtmf: DTMF) => sendMessage(`/DTMF ${dtmf}`),
+    (dtmf: DTMF) => sendMessage(`/DTMFKey ${dtmf}`),
     [sendMessage]
   );
 
+  const handleTranscriptNavigation = useTranscriptNavigation();
+
   const aria = {
     'aria-invalid': 'false' as const,
     ...(errorMessage && {
@@ -157,7 +160,11 @@ function SendBox(
   return (
     <form {...aria} className={cx(classNames['sendbox'], props.className)} onSubmit={handleFormSubmit}>
       <SuggestedActions />
-      <div className={cx(classNames['sendbox__sendbox'])} onClickCapture={handleSendBoxClick}>
+      <div
+        className={cx(classNames['sendbox__sendbox'])}
+        onClickCapture={handleSendBoxClick}
+        onKeyDown={handleTranscriptNavigation}
+      >
         <TextArea
           aria-label={isMessageLengthExceeded ? localize('TEXT_INPUT_LENGTH_EXCEEDED_ALT') : localize('TEXT_INPUT_ALT')}
           className={cx(classNames['sendbox__sendbox-text'], classNames['sendbox__text-area--in-grid'])}

package/src/components/sendBox/private/useTranscriptNavigation.ts

@@ -0,0 +1,53 @@
+import { useCallback, type KeyboardEvent } from 'react';
+import { hooks } from 'botframework-webchat-component';
+
+const { useScrollDown, useScrollUp } = hooks;
+
+export default function useTranscriptNavigation() {
+  const scrollDown = useScrollDown();
+  const scrollUp = useScrollUp();
+
+  return useCallback(
+    (event: KeyboardEvent<unknown>) => {
+      if (event.target instanceof HTMLTextAreaElement && event.target.value) {
+        return;
+      }
+
+      const { ctrlKey, metaKey, shiftKey } = event;
+
+      if (ctrlKey || metaKey || shiftKey) {
+        return;
+      }
+
+      let handled = true;
+
+      switch (event.key) {
+        case 'End':
+          scrollDown({ displacement: Infinity });
+          break;
+
+        case 'Home':
+          scrollUp({ displacement: Infinity });
+          break;
+
+        case 'PageDown':
+          scrollDown();
+          break;
+
+        case 'PageUp':
+          scrollUp();
+          break;
+
+        default:
+          handled = false;
+          break;
+      }
+
+      if (handled) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [scrollDown, scrollUp]
+  );
+}

package/src/components/telephoneKeypad/private/Button.tsx

@@ -29,9 +29,7 @@ const Button = memo(
         ref={ref}
         type="button"
       >
-        <span className={classNames['telephone-keypad__button__text']}>
-          {button === 'star' ? '\u2217' : button === 'pound' ? '#' : button}
-        </span>
+        <span className={classNames['telephone-keypad__button__text']}>{button === '*' ? '\u2217' : button}</span>
         {!!ruby && <ruby className={classNames['telephone-keypad__button__ruby']}>{ruby}</ruby>}
       </button>
     );

package/src/components/telephoneKeypad/private/TelephoneKeypad.tsx

@@ -50,8 +50,8 @@ const TelephoneKeypad = memo(({ autoFocus, className, onButtonClick, isHorizonta
   const handleButton8Click = useCallback(() => onButtonClickRef.current?.('8'), [onButtonClickRef]);
   const handleButton9Click = useCallback(() => onButtonClickRef.current?.('9'), [onButtonClickRef]);
   const handleButton0Click = useCallback(() => onButtonClickRef.current?.('0'), [onButtonClickRef]);
-  const handleButtonStarClick = useCallback(() => onButtonClickRef.current?.('star'), [onButtonClickRef]);
-  const handleButtonPoundClick = useCallback(() => onButtonClickRef.current?.('pound'), [onButtonClickRef]);
+  const handleButtonStarClick = useCallback(() => onButtonClickRef.current?.('*'), [onButtonClickRef]);
+  const handleButtonPoundClick = useCallback(() => onButtonClickRef.current?.('#'), [onButtonClickRef]);
   const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(
     event => {
       if (event.key === 'Escape') {
@@ -123,13 +123,9 @@ const TelephoneKeypad = memo(({ autoFocus, className, onButtonClick, isHorizonta
           onClick={handleButton9Click}
           ruby="WXYZ"
         />
-        <Button button="star" data-testid={testIds.sendBoxTelephoneKeypadButtonStar} onClick={handleButtonStarClick} />
+        <Button button="*" data-testid={testIds.sendBoxTelephoneKeypadButtonStar} onClick={handleButtonStarClick} />
         <Button button="0" data-testid={testIds.sendBoxTelephoneKeypadButton0} onClick={handleButton0Click} ruby="+" />
-        <Button
-          button="pound"
-          data-testid={testIds.sendBoxTelephoneKeypadButtonPound}
-          onClick={handleButtonPoundClick}
-        />
+        <Button button="#" data-testid={testIds.sendBoxTelephoneKeypadButtonPound} onClick={handleButtonPoundClick} />
       </Orientation>
       <div className={classNames['telephone-keypad__info-message']}>
         <InfoSmallIcon />

package/src/components/telephoneKeypad/types.ts

@@ -1 +1 @@
-export type DTMF = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '0' | 'star' | 'pound';
+export type DTMF = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '0' | '*' | '#';

package/src/external.umd/botframework-webchat-api/decorator.ts

@@ -0,0 +1 @@
+module.exports = (globalThis as any).WebChat.decorator;