botframework-webchat-fluent-theme 4.17.0-main.20240416.4ff01ae → 4.17.0-main.20240419.2240f2a

package/src/components/sendbox/Toolbar.module.css

@@ -11,6 +11,7 @@
   background: transparent;
   border-radius: var(--webchat-borderRadiusSmall);
   border: none;
+  color: currentColor;
   cursor: pointer;
   display: flex;
   justify-content: center;
@@ -22,15 +23,16 @@
     pointer-events: none;
   }
 
+  &.sendbox__toolbar-button--selected {
+    color: var(--webchat-colorNeutralForeground2BrandSelected);
+  }
   @media (hover: hover) {
     &:not([aria-disabled="true"]):hover {
-      background-color: var(--webchat-colorSubtleBackgroundHover);
-      color: var(--webchat-colorCompoundBrandForeground1Hover);
+      color: var(--webchat-colorNeutralForeground2BrandHover);
     }
   }
   &:not([aria-disabled="true"]):active {
-    background-color: var(--webchat-colorSubtleBackgroundPressed);
-    color: var(--webchat-colorCompoundBrandForeground1Pressed);
+    color: var(--webchat-colorNeutralForeground2BrandPressed);
   }
   &[aria-disabled="true"] {
     color: var(--webchat-colorNeutralForegroundDisabled);

package/src/components/sendbox/Toolbar.tsx

@@ -14,6 +14,7 @@ export const ToolbarButton = memo(
       'data-testid'?: string | undefined;
       disabled?: boolean | undefined;
       onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
+      selected?: boolean | undefined;
       type?: 'button' | 'submit' | undefined;
     }>
   ) => {
@@ -22,7 +23,9 @@ export const ToolbarButton = memo(
     return (
       <button
         aria-label={props['aria-label']}
-        className={cx(classNames['sendbox__toolbar-button'], props.className)}
+        className={cx(classNames['sendbox__toolbar-button'], props.className, {
+          [classNames['sendbox__toolbar-button--selected']]: props.selected
+        })}
         data-testid={props['data-testid']}
         onClick={props.disabled ? preventDefaultHandler : props.onClick}
         type={props.type === 'submit' ? 'submit' : 'button'}

package/src/components/sendbox/index.module.css

@@ -3,6 +3,8 @@
   font-family: var(--webchat-fontFamilyBase);
   padding: 0 10px 10px;
   text-rendering: optimizeLegibility;
+
+  --webchat-sendbox-attachment-area-active: ;
 }
 
 :global(.webchat-fluent) .sendbox__sendbox {
@@ -13,10 +15,19 @@
   font-family: var(--webchat-fontFamilyBase);
   font-size: 14px;
   gap: 6px;
+  grid-template:
+    [telephone-keypad-start] 'text-area' [telephone-keypad-end]
+    var(--webchat-sendbox-attachment-area-active)
+    'controls' / [telephone-keypad] 1fr
+  ;
   line-height: 20px;
   padding: 8px;
   position: relative;
 
+  &:has(.sendbox__attachment--in-grid) {
+    --webchat-sendbox-attachment-area-active: 'attachment'
+  }
+
   &:focus-within {
     border-color: var(--webchat-colorNeutralStroke1Selected);
     /* TODO clarify with design the color:
@@ -25,6 +36,22 @@
       - we are using colorCompoundBrandForeground1Hover */
     box-shadow: inset 0 -6px 0 -3px var(--webchat-colorCompoundBrandForeground1Hover);
   }
+
+  > .sendbox__text-area--in-grid {
+    grid-area: text-area;
+  }
+
+  > .sendbox__attachment--in-grid {
+    grid-area: attachment;
+  }
+
+  > .sendbox__sendbox-controls--in-grid {
+    grid-area: controls;
+  }
+
+  > .sendbox__telephone-keypad--in-grid {
+    grid-area: telephone-keypad;
+  }
 }
 
 :global(.webchat-fluent) .sendbox__sendbox-text {
@@ -51,6 +78,7 @@
   font-family: var(--webchat-fontFamilyNumeric);
   font-size: 10px;
   line-height: 14px;
+  margin-inline-end: 4px;
 }
 
 :global(.webchat-fluent) .sendbox__text-counter--error {

package/src/components/sendbox/index.tsx

@@ -119,14 +119,9 @@ function SendBox(
     <form {...aria} className={cx(classNames['sendbox'], props.className)} onSubmit={handleFormSubmit}>
       <SuggestedActions />
       <div className={cx(classNames['sendbox__sendbox'])} onClickCapture={handleSendBoxClick}>
-        <TelephoneKeypadSurrogate
-          autoFocus={true}
-          isHorizontal={false}
-          onButtonClick={handleTelephoneKeypadButtonClick}
-        />
         <TextArea
           aria-label={isMessageLengthExceeded ? localize('TEXT_INPUT_LENGTH_EXCEEDED_ALT') : localize('TEXT_INPUT_ALT')}
-          className={classNames['sendbox__sendbox-text']}
+          className={cx(classNames['sendbox__sendbox-text'], classNames['sendbox__text-area--in-grid'])}
           data-testid={testIds.sendBoxTextBox}
           hidden={telephoneKeypadShown}
           onInput={handleMessageChange}
@@ -134,9 +129,15 @@ function SendBox(
           ref={inputRef}
           value={message}
         />
-        <Attachments attachments={attachments} />
-        <div className={cx(classNames['sendbox__sendbox-controls'])}>
-          {maxMessageLength && (
+        <TelephoneKeypadSurrogate
+          autoFocus={true}
+          className={classNames['sendbox__telephone-keypad--in-grid']}
+          isHorizontal={false}
+          onButtonClick={handleTelephoneKeypadButtonClick}
+        />
+        <Attachments attachments={attachments} className={classNames['sendbox__attachment--in-grid']} />
+        <div className={cx(classNames['sendbox__sendbox-controls'], classNames['sendbox__sendbox-controls--in-grid'])}>
+          {!telephoneKeypadShown && maxMessageLength && (
             <div
               className={cx(classNames['sendbox__text-counter'], {
                 [classNames['sendbox__text-counter--error']]: isMessageLengthExceeded
@@ -152,7 +153,7 @@ function SendBox(
             <ToolbarButton
               aria-label={localize('TEXT_INPUT_SEND_BUTTON_ALT')}
               data-testid={testIds.sendBoxSendButton}
-              disabled={isMessageLengthExceeded}
+              disabled={isMessageLengthExceeded || telephoneKeypadShown}
               type="submit"
             >
               <SendIcon />

package/src/components/suggestedActions/SuggestedAction.module.css

@@ -3,6 +3,7 @@
   background: transparent;
   border-radius: 8px;
   border: 1px solid var(--webchat-colorBrandStroke2);
+  color: currentColor;
   cursor: pointer;
   display: flex;
   font-size: 12px;

package/src/components/telephoneKeypad/private/TelephoneKeypad.module.css

@@ -28,3 +28,32 @@
   padding: 16px;
   width: 100%;
 }
+
+:global(.webchat-fluent) .telephone-keypad__info-message {
+  align-items: center;
+  color: var(--webchat-colorNeutralForeground4);
+  display: flex;
+  font-size: 12px;
+  gap: 6px;
+  margin-block-end: 6px;
+}
+
+:global(.webchat-fluent) .telephone-keypad__info-message-link {
+  color: var(--webchat-colorBrandForegroundLink);
+  text-decoration-color: transparent;
+
+  &:target {
+    color: var(--webchat-colorBrandForegroundLinkSelected);
+  }
+  &:hover {
+    color: var(--webchat-colorBrandForegroundLinkHover);
+    text-decoration: underline 1px currentColor;
+  }
+  &:active {
+    color: var(--webchat-colorBrandForegroundLinkPressed);
+  }
+  &:focus-visible {
+    outline: none;
+    text-decoration: underline 1px double var(--webchat-colorStrokeFocus2);
+  }
+}

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

@@ -1,5 +1,7 @@
 import React, { KeyboardEventHandler, memo, useCallback, useEffect, useRef, type ReactNode } from 'react';
+import cx from 'classnames';
 import { useRefFrom } from 'use-ref-from';
+import { Components } from 'botframework-webchat-component';
 
 import Button from './Button';
 // import HorizontalDialPadController from './HorizontalDialPadController';
@@ -8,9 +10,13 @@ import { type DTMF } from '../types';
 import useShown from '../useShown';
 import styles from './TelephoneKeypad.module.css';
 import { useStyles } from '../../../styles';
+import InfoSmallIcon from '../../../icons/InfoSmallIcon';
+
+const { LocalizedString } = Components;
 
 type Props = Readonly<{
   autoFocus?: boolean | undefined;
+  className?: string | undefined;
   isHorizontal: boolean;
   onButtonClick: (button: DTMF) => void;
 }>;
@@ -30,7 +36,7 @@ const Orientation = memo(
 
 Orientation.displayName = 'TelephoneKeypad:Orientation';
 
-const TelephoneKeypad = memo(({ autoFocus, onButtonClick, isHorizontal }: Props) => {
+const TelephoneKeypad = memo(({ autoFocus, className, onButtonClick, isHorizontal }: Props) => {
   const autoFocusRef = useRefFrom(autoFocus);
   const classNames = useStyles(styles);
   const firstButtonRef = useRef<HTMLButtonElement>(null);
@@ -64,7 +70,7 @@ const TelephoneKeypad = memo(({ autoFocus, onButtonClick, isHorizontal }: Props)
   }, [autoFocusRef, firstButtonRef]);
 
   return (
-    <div className={classNames['telephone-keypad']} onKeyDown={handleKeyDown}>
+    <div className={cx(classNames['telephone-keypad'], className)} onKeyDown={handleKeyDown}>
       <Orientation isHorizontal={isHorizontal}>
         <Button
           button="1"
@@ -128,6 +134,13 @@ const TelephoneKeypad = memo(({ autoFocus, onButtonClick, isHorizontal }: Props)
           onClick={handleButtonPoundClick}
         />
       </Orientation>
+      <div className={classNames['telephone-keypad__info-message']}>
+        <InfoSmallIcon />
+        <LocalizedString
+          linkClassName={classNames['telephone-keypad__info-message-link']}
+          stringIds="TELEPHONE_KEYPAD_INPUT_MESSAGE"
+        />
+      </div>
     </div>
   );
 });

package/src/icons/AddDocumentIcon.tsx

@@ -5,7 +5,6 @@ export function AddDocumentIcon(props: Readonly<{ readonly className?: string }>
     <svg
       aria-hidden="true"
       className={props.className}
-      fill="currentColor"
       height="1em"
       viewBox="0 0 20 20"
       width="1em"

package/src/icons/AttachmentIcon.tsx

@@ -5,7 +5,6 @@ export function AttachmentIcon(props: Readonly<{ readonly className?: string }>)
     <svg
       aria-hidden="true"
       className={props.className}
-      fill="currentColor"
       height="1em"
       viewBox="0 0 20 20"
       width="1em"

package/src/icons/InfoSmallIcon.tsx

@@ -0,0 +1,17 @@
+import React, { memo } from 'react';
+
+export default memo((props: Readonly<{ readonly className?: string }>) => (
+  <svg
+    aria-hidden="true"
+    className={props.className}
+    height="1em"
+    viewBox="0 0 16 16"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.5 7.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3Zm.25-2a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"
+      fill="currentColor"
+    />
+  </svg>
+));

package/src/icons/SendIcon.tsx

@@ -5,7 +5,6 @@ export function SendIcon(props: Readonly<{ readonly className?: string }>) {
     <svg
       aria-hidden="true"
       className={props.className}
-      fill="currentColor"
       height="1em"
       viewBox="0 0 20 20"
       width="1em"

package/src/icons/TelephoneKeypad.tsx

@@ -5,7 +5,6 @@ export function TelephoneKeypadIcon(props: Readonly<{ readonly className?: strin
     <svg
       aria-hidden="true"
       className={props.className}
-      fill="currentColor"
       height="1em"
       viewBox="0 0 20 20"
       width="1em"