botframework-webchat-fluent-theme 4.17.0-main.20240411.647b269 → 4.17.0-main.20240416.4ff01ae

package/src/env.d.ts

@@ -0,0 +1,7 @@
+// CSS modules
+type CSSModuleClasses = { readonly [key: string]: any };
+
+declare module '*.module.css' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}

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,13 @@
 import { injectMetaTag } from 'inject-meta-tag';
 
 import FluentThemeProvider from './private/FluentThemeProvider';
+import testIds from './testIds';
+import { injectStyle } from './styles';
 
 declare const NPM_PACKAGE_VERSION: string;
 
 injectMetaTag('botframework-webchat-fluent-theme:version', NPM_PACKAGE_VERSION);
 
-export { FluentThemeProvider };
+injectStyle();
+
+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/styles/injectStyle.ts

@@ -0,0 +1,9 @@
+export const injectedStyles = '@--INJECTED-STYLES-CONTENT--@';
+
+export default function injectStyles() {
+  if (globalThis.document) {
+    const style = document.createElement('style');
+    style.append(document.createTextNode(injectedStyles));
+    document.head.appendChild(style);
+  }
+}

package/src/styles/useStyles.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+
+function useStyles<T extends CSSModuleClasses>(styles: T): T {
+  // @ts-expect-error: entries/fromEntries don't allow to specify keys type
+  return useMemo(
+    () =>
+      Object.freeze(
+        Object.fromEntries(
+          Object.entries(styles).map(([baseClassName, resultClassName]) => [
+            baseClassName,
+            `${baseClassName} ${resultClassName}`
+          ])
+        )
+      ),
+    [styles]
+  );
+}
+
+export default useStyles;

package/src/styles.ts

@@ -0,0 +1,4 @@
+import injectStyle from './styles/injectStyle';
+import useStyles from './styles/useStyles';
+
+export { injectStyle, useStyles };

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/tsconfig.json

@@ -5,7 +5,8 @@
     "jsx": "react",
     "moduleResolution": "Bundler",
     "skipLibCheck": true,
-    "target": "ESNext"
+    "target": "ESNext",
+    "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
   "extends": "@tsconfig/strictest/tsconfig.json"
 }

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);