botframework-webchat-fluent-theme 4.17.0-main.20240411.647b269 → 4.17.0-main.20240411.ff34969

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

@@ -0,0 +1,107 @@
+import React, { forwardRef, memo, useCallback, type Ref } from 'react';
+
+import { useRefFrom } from 'use-ref-from';
+
+import { useStyles } from '../../../styles';
+import { type DTMF } from '../types';
+
+const styles = {
+  'webchat__telephone-keypad__button': {
+    '-webkit-user-select': 'none',
+    alignItems: 'center',
+    appearance: 'none',
+    // backgroundColor: isDarkTheme() || isHighContrastTheme() ? black : white,
+    backgroundColor: 'White',
+    borderRadius: '100%',
+
+    // Whitelabel styles
+    // border: `solid 1px ${isHighContrastTheme() ? white : isDarkTheme() ? gray160 : gray40}`,
+    // color: 'inherit',
+
+    border: 'solid 1px var(--webchat-colorNeutralStroke1)',
+    color: 'var(--webchat-colorNeutralForeground1)',
+    fontWeight: 'var(--webchat-fontWeightSemibold)',
+
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'column',
+    height: 60,
+    opacity: 0.7,
+    padding: 0,
+    position: 'relative',
+    touchAction: 'none',
+    userSelect: 'none',
+    width: 60,
+
+    '&:hover': {
+      // backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30
+      backgroundColor: 'var(--webchat-colorGray30)'
+    }
+  },
+
+  'webchat__telephone-keypad__button__ruby': {
+    // color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160,
+    color: 'var(--webchat-colorGray160)',
+    fontSize: 10
+  },
+
+  'webchat__telephone-keypad__button__text': {
+    fontSize: 24,
+    marginTop: 8
+  },
+
+  'webchat__telephone-keypad--horizontal': {
+    '& .webchat__telephone-keypad__button': {
+      height: 32,
+      width: 32,
+      margin: '8px 4px',
+      justifyContent: 'center'
+    },
+
+    'webchat__telephone-keypad__button__ruby': {
+      display: 'none'
+    },
+
+    '& .webchat__telephone-keypad__button__text': {
+      fontSize: 20,
+      marginTop: 0
+    }
+  }
+};
+
+type Props = Readonly<{
+  button: DTMF;
+  ['data-testid']?: string | undefined;
+  onClick?: (() => void) | undefined;
+  ruby?: string | undefined;
+}>;
+
+const Button = memo(
+  // As we are all TypeScript, internal components do not need propTypes.
+  // eslint-disable-next-line react/prop-types
+  forwardRef(({ button, 'data-testid': dataTestId, onClick, ruby }: Props, ref: Ref<HTMLButtonElement>) => {
+    const classNames = useStyles(styles);
+    const onClickRef = useRefFrom(onClick);
+
+    const handleClick = useCallback(() => onClickRef.current?.(), [onClickRef]);
+
+    return (
+      <button
+        className={classNames['webchat__telephone-keypad__button']}
+        data-testid={dataTestId}
+        onClick={handleClick}
+        ref={ref}
+        type="button"
+      >
+        <span className={classNames['webchat__telephone-keypad__button__text']}>
+          {button === 'star' ? '\u2217' : button === 'pound' ? '#' : button}
+        </span>
+        {!!ruby && <ruby className={classNames['webchat__telephone-keypad__button__ruby']}>{ruby}</ruby>}
+      </button>
+    );
+  })
+);
+
+Button.displayName = 'TelephoneKeypad.Button';
+
+export default Button;

package/src/components/telephoneKeypad/private/Context.ts

@@ -0,0 +1,18 @@
+import { createContext, type Dispatch, type SetStateAction } from 'react';
+
+type ContextType = Readonly<{
+  setShown: Dispatch<SetStateAction<boolean>>;
+  shown: boolean;
+}>;
+
+const Context = createContext<ContextType>(
+  new Proxy({} as ContextType, {
+    get() {
+      throw new Error('botframework-webchat: This hook can only used under its corresponding <Provider>.');
+    }
+  })
+);
+
+Context.displayName = 'TelephoneKeypad.Context';
+
+export default Context;

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

@@ -0,0 +1,168 @@
+import React, { KeyboardEventHandler, memo, useCallback, useEffect, useRef, type ReactNode } from 'react';
+import { useRefFrom } from 'use-ref-from';
+
+import { useStyles } from '../../../styles';
+import Button from './Button';
+// import HorizontalDialPadController from './HorizontalDialPadController';
+import testIds from '../../../testIds';
+import { type DTMF } from '../types';
+import useShown from '../useShown';
+
+const styles = {
+  'webchat__telephone-keypad': {
+    /* Commented out whitelabel styles for now. */
+    // background: getHighContrastDarkThemeColor(highContrastColor: black, darkThemeColor: gray190, string, defaultColor: gray10),
+    // borderRadius: '8px 8px 0px 0px',
+    // boxShadow: '-3px 0px 7px 0px rgba(0, 0, 0, 0.13), -0.6px 0px 1.8px 0px rgba(0, 0, 0, 0.10)',
+
+    alignItems: 'center',
+    background: 'var(--webchat-colorNeutralBackground1)',
+    // border: isHighContrastTheme() ? `1px solid ${white}` : 'none',
+    border: 'none',
+    borderRadius: 'var(--webchat-borderRadiusXLarge)',
+    // boxShadow: 'var(--shadow16)',
+    display: 'flex',
+    flexDirection: 'column',
+    fontFamily: 'var(--webchat-fontFamilyBase)',
+    justifyContent: 'center'
+    // margin: 'var(--spacingHorizontalMNudge)'
+  },
+
+  'webchat__telephone-keypad__box': {
+    boxSizing: 'border-box',
+    display: 'grid',
+    gap: '16px',
+    gridTemplateColumns: 'repeat(3, 1fr)',
+    gridTemplateRows: 'repeat(4, 1fr)',
+    justifyItems: 'center',
+    padding: '16px',
+    width: '100%'
+  }
+};
+
+type Props = Readonly<{
+  autoFocus?: boolean | undefined;
+  isHorizontal: boolean;
+  onButtonClick: (button: DTMF) => void;
+}>;
+
+const Orientation = memo(
+  ({ children, isHorizontal }: Readonly<{ children?: ReactNode | undefined; isHorizontal: boolean }>) => {
+    const classNames = useStyles(styles);
+
+    return isHorizontal ? (
+      // <HorizontalDialPadController>{children}</HorizontalDialPadController>
+      false
+    ) : (
+      <div className={classNames['webchat__telephone-keypad__box']}>{children}</div>
+    );
+  }
+);
+
+Orientation.displayName = 'TelephoneKeypad:Orientation';
+
+const TelephoneKeypad = memo(({ autoFocus, onButtonClick, isHorizontal }: Props) => {
+  const autoFocusRef = useRefFrom(autoFocus);
+  const classNames = useStyles(styles);
+  const firstButtonRef = useRef<HTMLButtonElement>(null);
+  const onButtonClickRef = useRefFrom(onButtonClick);
+  const [, setShown] = useShown();
+
+  const handleButton1Click = useCallback(() => onButtonClickRef.current?.('1'), [onButtonClickRef]);
+  const handleButton2Click = useCallback(() => onButtonClickRef.current?.('2'), [onButtonClickRef]);
+  const handleButton3Click = useCallback(() => onButtonClickRef.current?.('3'), [onButtonClickRef]);
+  const handleButton4Click = useCallback(() => onButtonClickRef.current?.('4'), [onButtonClickRef]);
+  const handleButton5Click = useCallback(() => onButtonClickRef.current?.('5'), [onButtonClickRef]);
+  const handleButton6Click = useCallback(() => onButtonClickRef.current?.('6'), [onButtonClickRef]);
+  const handleButton7Click = useCallback(() => onButtonClickRef.current?.('7'), [onButtonClickRef]);
+  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 handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(
+    event => {
+      if (event.key === 'Escape') {
+        // TODO: Should send focus to the send box.
+        setShown(false);
+      }
+    },
+    [setShown]
+  );
+
+  useEffect(() => {
+    autoFocusRef.current && firstButtonRef.current?.focus();
+  }, [autoFocusRef, firstButtonRef]);
+
+  return (
+    <div className={classNames['webchat__telephone-keypad']} onKeyDown={handleKeyDown}>
+      <Orientation isHorizontal={isHorizontal}>
+        <Button
+          button="1"
+          data-testid={testIds.sendBoxTelephoneKeypadButton1}
+          onClick={handleButton1Click}
+          ref={firstButtonRef}
+        />
+        <Button
+          button="2"
+          data-testid={testIds.sendBoxTelephoneKeypadButton2}
+          onClick={handleButton2Click}
+          ruby="ABC"
+        />
+        <Button
+          button="3"
+          data-testid={testIds.sendBoxTelephoneKeypadButton3}
+          onClick={handleButton3Click}
+          ruby="DEF"
+        />
+        <Button
+          button="4"
+          data-testid={testIds.sendBoxTelephoneKeypadButton4}
+          onClick={handleButton4Click}
+          ruby="GHI"
+        />
+        <Button
+          button="5"
+          data-testid={testIds.sendBoxTelephoneKeypadButton5}
+          onClick={handleButton5Click}
+          ruby="JKL"
+        />
+        <Button
+          button="6"
+          data-testid={testIds.sendBoxTelephoneKeypadButton6}
+          onClick={handleButton6Click}
+          ruby="MNO"
+        />
+        <Button
+          button="7"
+          data-testid={testIds.sendBoxTelephoneKeypadButton7}
+          onClick={handleButton7Click}
+          ruby="PQRS"
+        />
+        <Button
+          button="8"
+          data-testid={testIds.sendBoxTelephoneKeypadButton8}
+          onClick={handleButton8Click}
+          ruby="TUV"
+        />
+        <Button
+          button="9"
+          data-testid={testIds.sendBoxTelephoneKeypadButton9}
+          onClick={handleButton9Click}
+          ruby="WXYZ"
+        />
+        <Button button="star" 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}
+        />
+      </Orientation>
+    </div>
+  );
+});
+
+TelephoneKeypad.displayName = 'TelephoneKeypad';
+
+export default TelephoneKeypad;

package/src/components/telephoneKeypad/types.ts

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

package/src/components/telephoneKeypad/useShown.ts

@@ -0,0 +1,9 @@
+import { useContext, useMemo, type Dispatch, type SetStateAction } from 'react';
+
+import Context from './private/Context';
+
+export default function useShown(): readonly [boolean, Dispatch<SetStateAction<boolean>>] {
+  const { setShown, shown } = useContext(Context);
+
+  return useMemo(() => Object.freeze([shown, setShown]), [shown, setShown]);
+}

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

@@ -0,0 +1,3 @@
+module.exports = {
+  hooks: (globalThis as any).WebChat.hooks
+};

package/src/external.umd/botframework-webchat-component.ts

@@ -0,0 +1,4 @@
+module.exports = {
+  Components: (globalThis as any).WebChat.Components,
+  hooks: (globalThis as any).WebChat.hooks
+};

package/src/external.umd/react.ts

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

package/src/icons/AddDocumentIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export function AddDocumentIcon(props: Readonly<{ readonly className?: string }>) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={props.className}
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 20 20"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 2a2 2 0 0 0-2 2v5.2c.32-.08.66-.15 1-.18V4a1 1 0 0 1 1-1h4v3.5c0 .83.67 1.5 1.5 1.5H15v8a1 1 0 0 1-1 1h-3.6c-.18.36-.4.7-.66 1H14a2 2 0 0 0 2-2V7.41c0-.4-.16-.78-.44-1.06l-3.91-3.91A1.5 1.5 0 0 0 10.59 2H6Zm8.8 5h-3.3a.5.5 0 0 1-.5-.5V3.2L14.8 7ZM10 14.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-4-2a.5.5 0 0 0-1 0V14H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H6v-1.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/icons/AttachmentIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export function AttachmentIcon(props: Readonly<{ readonly className?: string }>) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={props.className}
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 20 20"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="m4.83 10.48 5.65-5.65a3 3 0 0 1 4.25 4.24L8 15.8a1.5 1.5 0 0 1-2.12-2.12l6-6.01a.5.5 0 1 0-.7-.71l-6 6.01a2.5 2.5 0 0 0 3.53 3.54l6.71-6.72a4 4 0 1 0-5.65-5.66L4.12 9.78a.5.5 0 0 0 .7.7Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/icons/SendIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export function SendIcon(props: Readonly<{ readonly className?: string }>) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={props.className}
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 20 20"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.18 2.11a.5.5 0 0 1 .54-.06l15 7.5a.5.5 0 0 1 0 .9l-15 7.5a.5.5 0 0 1-.7-.58L3.98 10 2.02 2.63a.5.5 0 0 1 .16-.52Zm2.7 8.39-1.61 6.06L16.38 10 3.27 3.44 4.88 9.5h6.62a.5.5 0 1 1 0 1H4.88Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/icons/TelephoneKeypad.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export function TelephoneKeypadIcon(props: Readonly<{ readonly className?: string }>) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={props.className}
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 20 20"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm0 4a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM7.25 12a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM10 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM11.25 8a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM10 13.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM11.25 16a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM14 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM15.25 8a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM14 13.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/index.ts

@@ -1,9 +1,10 @@
 import { injectMetaTag } from 'inject-meta-tag';
 
 import FluentThemeProvider from './private/FluentThemeProvider';
+import testIds from './testIds';
 
 declare const NPM_PACKAGE_VERSION: string;
 
 injectMetaTag('botframework-webchat-fluent-theme:version', NPM_PACKAGE_VERSION);
 
-export { FluentThemeProvider };
+export { FluentThemeProvider, testIds };

package/src/private/FluentThemeProvider.tsx

@@ -1,18 +1,22 @@
+import { Components } from 'botframework-webchat-component';
 import React, { memo, type ReactNode } from 'react';
 
-import ThemeProvider from '../external/ThemeProvider';
-import SendBox from './SendBox';
+import { TelephoneKeypadProvider } from '../components/TelephoneKeypad';
+import WebChatTheme from '../components/Theme';
+import SendBox from '../components/SendBox';
 
-type Props = Readonly<{ children?: ReactNode | undefined }>;
+const { ThemeProvider } = Components;
 
-const STYLE_OPTIONS = { bubbleBackground: '#fee' };
+type Props = Readonly<{ children?: ReactNode | undefined }>;
 
 const sendBoxMiddleware = [() => () => () => SendBox];
 
 const FluentThemeProvider = ({ children }: Props) => (
-  <ThemeProvider sendBoxMiddleware={sendBoxMiddleware} styleOptions={STYLE_OPTIONS}>
-    {children}
-  </ThemeProvider>
+  <WebChatTheme>
+    <TelephoneKeypadProvider>
+      <ThemeProvider sendBoxMiddleware={sendBoxMiddleware}>{children}</ThemeProvider>
+    </TelephoneKeypadProvider>
+  </WebChatTheme>
 );
 
 export default memo(FluentThemeProvider);

package/src/private/useStyleToEmotionObject.ts

@@ -0,0 +1,32 @@
+import createEmotion, { type Emotion } from '@emotion/css/create-instance';
+// TODO: [P0] Use `math-random`. Today, it requires "crypto" today, maybe missing "conditions" or what.
+// import random from 'math-random';
+import { useMemo } from 'react';
+
+const { random } = Math;
+
+const emotionPool: Record<string, Emotion> = {};
+const nonce = '';
+
+/* eslint no-magic-numbers: ["error", { "ignore": [0, 2, 5, 26, 65] }] */
+
+function createCSSKey() {
+  return random()
+    .toString(26)
+    .substr(2, 5)
+    .replace(/\d/gu, (value: string) => String.fromCharCode(value.charCodeAt(0) + 65));
+}
+
+export default function useStyleToEmotionObject() {
+  return useMemo(() => {
+    // Emotion doesn't hash with nonce. We need to provide the pooling mechanism.
+    // 1. If 2 instances use different nonce, they should result in different hash;
+    // 2. If 2 instances are being mounted, pooling will make sure we render only 1 set of <style> tags, instead of 2.
+    const emotion =
+      // Prefix "id-" to prevent object injection attack.
+      emotionPool[`id-${nonce}`] ||
+      (emotionPool[`id-${nonce}`] = createEmotion({ key: `webchat--css-${createCSSKey()}`, nonce }));
+
+    return (style: TemplateStringsArray) => emotion.css(style);
+  }, []);
+}

package/src/styles/index.ts

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+
+import useStyleToEmotionObject from '../private/useStyleToEmotionObject';
+
+export function useStyles<T extends Record<`webchat-fluent__${string}`, any>>(styles: T): Record<keyof T, string> {
+  const getClassName = useStyleToEmotionObject();
+  // @ts-expect-error: entries/fromEntries don't allow to specify keys type
+  return useMemo(
+    () =>
+      Object.freeze(
+        Object.fromEntries(Object.entries(styles).map(([cls, style]) => [cls, `${cls} ${getClassName(style)}`]))
+      ),
+    [styles, getClassName]
+  );
+}

package/src/testIds.ts

@@ -0,0 +1,21 @@
+const testIds = {
+  sendBoxDropZone: 'send box drop zone',
+  sendBoxSendButton: 'send box send button',
+  sendBoxTextBox: 'send box text area',
+  sendBoxTelephoneKeypadButton1: `send box telephone keypad button 1`,
+  sendBoxTelephoneKeypadButton2: `send box telephone keypad button 2`,
+  sendBoxTelephoneKeypadButton3: `send box telephone keypad button 3`,
+  sendBoxTelephoneKeypadButton4: `send box telephone keypad button 4`,
+  sendBoxTelephoneKeypadButton5: `send box telephone keypad button 5`,
+  sendBoxTelephoneKeypadButton6: `send box telephone keypad button 6`,
+  sendBoxTelephoneKeypadButton7: `send box telephone keypad button 7`,
+  sendBoxTelephoneKeypadButton8: `send box telephone keypad button 8`,
+  sendBoxTelephoneKeypadButton9: `send box telephone keypad button 9`,
+  sendBoxTelephoneKeypadButton0: `send box telephone keypad button 0`,
+  sendBoxTelephoneKeypadButtonStar: `send box telephone keypad button star`,
+  sendBoxTelephoneKeypadButtonPound: `send box telephone keypad button pound`,
+  sendBoxTelephoneKeypadToolbarButton: 'send box telephone keypad toolbar button',
+  sendBoxUploadButton: 'send box upload button'
+};
+
+export default testIds;

package/src/types/PropsOf.ts

@@ -0,0 +1,7 @@
+import { type ComponentType, type MemoExoticComponent } from 'react';
+
+export type PropsOf<T> = T extends ComponentType<infer P>
+  ? P
+  : T extends MemoExoticComponent<ComponentType<infer P>>
+    ? P
+    : never;

package/src/external/ThemeProvider.tsx

@@ -1,16 +0,0 @@
-import { type Components } from 'botframework-webchat-component';
-
-// TODO: We should do isomorphic:
-//       - If loading UMD, we should look at window.WebChat.Components.ThemeProvider
-//       - Otherwise, we should import { type Components } from 'botframework-webchat-component'
-type ThemeProviderType = (typeof Components)['ThemeProvider'];
-
-const {
-  WebChat: {
-    Components: { ThemeProvider }
-  }
-} = globalThis as unknown as {
-  WebChat: { Components: { ThemeProvider: ThemeProviderType } };
-};
-
-export default ThemeProvider;

package/src/private/SendBox.tsx

@@ -1,7 +0,0 @@
-import React, { memo } from 'react';
-
-type Props = Readonly<{ className?: string | undefined }>;
-
-const SendBox = ({ className }: Props) => <div className={className}>{'Fluent send box'}</div>;
-
-export default memo(SendBox);