botframework-webchat-fluent-theme 4.17.1 → 4.18.1-hotfix.20260127.b53acdf

package/src/components/theme/Theme.tsx

@@ -1,11 +1,12 @@
 import React, { type ReactNode } from 'react';
 import cx from 'classnames';
 import styles from './Theme.module.css';
-import { useStyles } from '../../styles';
+import { useStyles, useVariantClassName } from '../../styles';
 
 export const rootClassName = 'webchat-fluent';
 
-export default function WebchatTheme(props: Readonly<{ readonly children: ReactNode | undefined }>) {
+export default function Theme(props: Readonly<{ readonly children: ReactNode | undefined }>) {
   const classNames = useStyles(styles);
-  return <div className={cx(rootClassName, classNames['theme'])}>{props.children}</div>;
+  const variantClassName = useVariantClassName(styles);
+  return <div className={cx(rootClassName, classNames['theme'], variantClassName)}>{props.children}</div>;
 }

package/src/components/typingIndicator/SlidingDotsTypingIndicator.module.css

@@ -0,0 +1,12 @@
+:global(.webchat-fluent) .sliding-dots-typing-indicator {
+  align-self: start;
+  display: flex;
+  flex: none;
+  height: 16px;
+  margin: auto var(--webchat-spacingHorizontalMNudge);
+}
+
+:global(.webchat-fluent) .sliding-dots-typing-indicator__image {
+  height: 6px;
+  width: auto;
+}

package/src/components/typingIndicator/SlidingDotsTypingIndicator.tsx

@@ -0,0 +1,19 @@
+import { testIds } from 'botframework-webchat-component';
+import { useStyles } from 'botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { memo } from 'react';
+
+import SlidingDots from '../assets/SlidingDots';
+import styles from './SlidingDotsTypingIndicator.module.css';
+
+function SlidingDotsTypingIndicator() {
+  const classNames = useStyles(styles);
+
+  return (
+    <div className={classNames['sliding-dots-typing-indicator']} data-testid={testIds.typingIndicator}>
+      <SlidingDots className={cx(classNames['sliding-dots-typing-indicator__image'])} />
+    </div>
+  );
+}
+
+export default memo(SlidingDotsTypingIndicator);

package/src/env.d.ts

@@ -1,7 +1 @@
-// CSS modules
-type CSSModuleClasses = { readonly [key: string]: any };
-
-declare module '*.module.css' {
-  const classes: CSSModuleClasses;
-  export default classes;
-}
+/// <reference types="botframework-webchat-styles/env" />

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

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

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

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

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

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

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

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

package/src/icons/AddDocumentIcon.tsx

@@ -1,21 +1,13 @@
+import { Components } from 'botframework-webchat-component';
+import cx from 'classnames';
 import React, { memo } from 'react';
 
-function AddDocumentIcon(props: Readonly<{ readonly className?: string }>) {
-  return (
-    <svg
-      aria-hidden="true"
-      className={props.className}
-      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>
-  );
+const { MonochromeImageMasker } = Components;
+
+const addDocumentIcon = `data:image/svg+xml;utf8,${encodeURIComponent('<svg viewBox="0 0 20 20" 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"/></svg>')}`;
+
+function AddDocumentIcon(props: Readonly<{ className?: string }>) {
+  return <MonochromeImageMasker className={cx('icon__add-document', props.className)} src={addDocumentIcon} />;
 }
 
 export default memo(AddDocumentIcon);

package/src/icons/AttachmentIcon.tsx

@@ -1,21 +1,13 @@
+import { Components } from 'botframework-webchat-component';
+import cx from 'classnames';
 import React, { memo } from 'react';
 
-function AttachmentIcon(props: Readonly<{ readonly className?: string }>) {
-  return (
-    <svg
-      aria-hidden="true"
-      className={props.className}
-      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>
-  );
+const { MonochromeImageMasker } = Components;
+
+const attachmentIcon = `data:image/svg+xml;utf8,${encodeURIComponent('<svg viewBox="0 0 20 20" 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"/></svg>')}`;
+
+function AttachmentIcon(props: Readonly<{ className?: string }>) {
+  return <MonochromeImageMasker className={cx('icon__attachment', props.className)} src={attachmentIcon} />;
 }
 
 export default memo(AttachmentIcon);

package/src/icons/InfoSmallIcon.tsx

@@ -1,21 +1,13 @@
+import { Components } from 'botframework-webchat-component';
+import cx from 'classnames';
 import React, { memo } from 'react';
 
+const { MonochromeImageMasker } = Components;
+
+const infoSmallIcon = `data:image/svg+xml;utf8,${encodeURIComponent('<svg viewBox="0 0 16 16" 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"/></svg>')}`;
+
 function InfoSmallIcon(props: Readonly<{ readonly className?: string }>) {
-  return (
-    <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>
-  );
+  return <MonochromeImageMasker className={cx('icon__info--small', props.className)} src={infoSmallIcon} />;
 }
 
 export default memo(InfoSmallIcon);

package/src/icons/SendIcon.tsx

@@ -1,21 +1,13 @@
+import { Components } from 'botframework-webchat-component';
+import cx from 'classnames';
 import React, { memo } from 'react';
 
+const { MonochromeImageMasker } = Components;
+
+const sendIcon = `data:image/svg+xml;utf8,${encodeURIComponent('<svg viewBox="0 0 20 20" 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"/></svg>')}`;
+
 function SendIcon(props: Readonly<{ readonly className?: string }>) {
-  return (
-    <svg
-      aria-hidden="true"
-      className={props.className}
-      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>
-  );
+  return <MonochromeImageMasker className={cx('icon__send', props.className)} src={sendIcon} />;
 }
 
 export default memo(SendIcon);

package/src/icons/TelephoneKeypadIcon.tsx

@@ -1,21 +1,13 @@
+import { Components } from 'botframework-webchat-component';
+import cx from 'classnames';
 import React, { memo } from 'react';
 
+const { MonochromeImageMasker } = Components;
+
+const telephoneKeypadIcon = `data:image/svg+xml;utf8,${encodeURIComponent('<svg viewBox="0 0 20 20" 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"/></svg>')}`;
+
 function TelephoneKeypadIcon(props: Readonly<{ readonly className?: string }>) {
-  return (
-    <svg
-      aria-hidden="true"
-      className={props.className}
-      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>
-  );
+  return <MonochromeImageMasker className={cx('icon__telephone-keypad', props.className)} src={telephoneKeypadIcon} />;
 }
 
 export default memo(TelephoneKeypadIcon);

package/src/index.ts

@@ -1,7 +1,7 @@
 import { injectMetaTag } from 'inject-meta-tag';
 
+import { SendBox as FluentSendBox } from './components/sendBox/index';
 import FluentThemeProvider from './private/FluentThemeProvider';
-import { injectStyle } from './styles';
 import testIds from './testIds';
 
 const buildTool = process.env['build_tool'];
@@ -15,6 +15,4 @@ injectMetaTag(
   `version=${process.env['npm_package_version']}; build-tool=${process.env['build_tool']}; module-format=${process.env['module_format']}`
 );
 
-injectStyle();
-
-export { FluentThemeProvider, buildInfo, testIds };
+export { FluentThemeProvider, FluentSendBox, buildInfo, testIds };

package/src/private/FluentThemeProvider.tsx

@@ -1,22 +1,103 @@
+import { type ActivityMiddleware, type StyleOptions, type TypingIndicatorMiddleware } from 'botframework-webchat-api';
+import {
+  DecoratorComposer,
+  DecoratorMiddleware,
+  type DecoratorMiddlewareInit,
+  type DecoratorMiddlewareTypes
+} from 'botframework-webchat-api/decorator';
 import { Components } from 'botframework-webchat-component';
+import { WebChatDecorator } from 'botframework-webchat-component/decorator';
 import React, { memo, type ReactNode } from 'react';
 
+import { ActivityDecorator } from '../components/activity';
+import ActivityLoader from '../components/activity/ActivityLoader';
+import AssetComposer from '../components/assets/AssetComposer';
+import { isLinerMessageActivity, LinerMessageActivity } from '../components/linerActivity';
+import { isPreChatMessageActivity, PreChatMessageActivity } from '../components/preChatActivity';
+import { PrimarySendBox } from '../components/sendBox';
 import { TelephoneKeypadProvider } from '../components/telephoneKeypad';
 import { WebChatTheme } from '../components/theme';
-import { SendBox } from '../components/sendBox';
+import SlidingDotsTypingIndicator from '../components/typingIndicator/SlidingDotsTypingIndicator';
+import { createStyles } from '../styles';
+import VariantComposer, { VariantList } from './VariantComposer';
 
 const { ThemeProvider } = Components;
 
-type Props = Readonly<{ children?: ReactNode | undefined }>;
+type FluentThemeProviderProps = Readonly<{
+  children?: ReactNode | undefined;
+  variant?: VariantList | undefined;
+}>;
 
-const sendBoxMiddleware = [() => () => () => SendBox];
+const activityMiddleware: readonly ActivityMiddleware[] = Object.freeze([
+  () =>
+    next =>
+    (...args) => {
+      const activity = args[0]?.activity;
 
-const FluentThemeProvider = ({ children }: Props) => (
-  <WebChatTheme>
-    <TelephoneKeypadProvider>
-      <ThemeProvider sendBoxMiddleware={sendBoxMiddleware}>{children}</ThemeProvider>
-    </TelephoneKeypadProvider>
-  </WebChatTheme>
-);
+      // TODO: Should show pre-chat only when it is the very first message in the chat history.
+      if (isPreChatMessageActivity(activity)) {
+        return () => <PreChatMessageActivity activity={activity} />;
+      }
+
+      if (isLinerMessageActivity(activity)) {
+        return () => <LinerMessageActivity activity={activity} />;
+      }
+
+      const renderActivity = next(...args);
+
+      return renderActivity
+        ? (...args) => <ActivityDecorator activity={activity}>{renderActivity(...args)}</ActivityDecorator>
+        : renderActivity;
+    }
+]);
+
+const sendBoxMiddleware = [() => () => () => PrimarySendBox];
+
+const decoratorMiddleware: readonly DecoratorMiddleware[] = Object.freeze([
+  (init: DecoratorMiddlewareInit) =>
+    init === 'activity border' &&
+    ((next => request =>
+      request.livestreamingState === 'preparing'
+        ? ActivityLoader
+        : next(request)) satisfies DecoratorMiddlewareTypes['activity border'])
+]);
+
+const styles = createStyles();
+
+const fluentStyleOptions: StyleOptions = Object.freeze({
+  feedbackActionsPlacement: 'activity-actions'
+});
+
+const typingIndicatorMiddleware = Object.freeze([
+  () =>
+    next =>
+    (...args) =>
+      args[0].visible ? <SlidingDotsTypingIndicator /> : next(...args)
+] satisfies TypingIndicatorMiddleware[]);
+
+function FluentThemeProvider({ children, variant = 'fluent' }: FluentThemeProviderProps) {
+  return (
+    <VariantComposer variant={variant}>
+      <WebChatTheme>
+        <TelephoneKeypadProvider>
+          <ThemeProvider
+            activityMiddleware={activityMiddleware}
+            sendBoxMiddleware={sendBoxMiddleware}
+            styleOptions={fluentStyleOptions}
+            styles={styles}
+            typingIndicatorMiddleware={typingIndicatorMiddleware}
+          >
+            <AssetComposer>
+              <WebChatDecorator>
+                <DecoratorComposer middleware={decoratorMiddleware}>{children}</DecoratorComposer>
+              </WebChatDecorator>
+            </AssetComposer>
+          </ThemeProvider>
+        </TelephoneKeypadProvider>
+      </WebChatTheme>
+    </VariantComposer>
+  );
+}
 
 export default memo(FluentThemeProvider);
+export { type FluentThemeProviderProps };

package/src/private/VariantComposer.ts

@@ -0,0 +1,29 @@
+import { createContext } from 'react';
+
+import createComposer from './createComposer';
+
+type VariantName = 'fluent' | 'copilot' | '';
+
+export type VariantList = `${VariantName}`;
+
+export type VariantContextType = {
+  variant: VariantList;
+};
+
+export const VariantContext = createContext<VariantContextType>(
+  new Proxy(
+    {},
+    {
+      get() {
+        throw new Error('Unable to use VariantContext without VariantComposer');
+      }
+    }
+  ) as unknown as VariantContextType
+);
+
+const VariantComposer = createComposer<VariantContextType>(VariantContext, {
+  defaults: { variant: '' },
+  displayName: 'VariantComposer'
+});
+
+export default VariantComposer;

package/src/private/createComposer.tsx

@@ -0,0 +1,16 @@
+import React, { type Context, memo, type ReactNode, useMemo } from 'react';
+
+export default function createComposer<
+  C,
+  P extends { children?: ReactNode | undefined } = Partial<C> & { children?: ReactNode | undefined }
+>({ Provider }: Context<C>, { defaults, displayName }: Readonly<{ defaults: Readonly<C>; displayName: string }>) {
+  const Composer = ({ children, ...props }: Readonly<P>) => {
+    const value = useMemo(() => Object.freeze({ ...defaults, ...props }), [props]);
+
+    return <Provider value={value}>{children}</Provider>;
+  };
+
+  Composer.displayName = displayName;
+
+  return memo(Composer);
+}

package/src/private/useVariants.ts

@@ -0,0 +1,7 @@
+import { useContext, useMemo } from 'react';
+import { VariantContext } from './VariantComposer';
+
+export default function useVariants() {
+  const { variant } = useContext(VariantContext);
+  return useMemo(() => variant.split(' '), [variant]);
+}

package/src/styles/createStyles.ts

@@ -0,0 +1,5 @@
+import { makeCreateStyles } from 'botframework-webchat-styles';
+
+export const fluentStyleContent = '@--FLUENT-STYLES-CONTENT--@';
+
+export default makeCreateStyles(fluentStyleContent);

package/src/styles/index.ts

@@ -1,4 +1,5 @@
-import injectStyle from './injectStyle';
+import createStyles from './createStyles';
 import useStyles from './useStyles';
+import useVariantClassName from './useVariantClassName';
 
-export { injectStyle, useStyles };
+export { createStyles, useStyles, useVariantClassName };

package/src/styles/useStyles.ts

@@ -1,19 +1,2 @@
-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;
+// TODO: refactor after initial approval gained
+export { useStyles as default } from 'botframework-webchat-styles/react';

package/src/styles/useVariantClassName.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import useVariants from '../private/useVariants';
+import useStyles from './useStyles';
+
+export default function useVariantClassName<T extends CSSModuleClasses>(styles: T): string {
+  const classNames = useStyles(styles);
+  const variants = useVariants();
+  return useMemo(
+    () =>
+      variants
+        .map(variant => classNames[`variant-${variant}`])
+        .filter(value => value)
+        .join(' '),
+    [classNames, variants]
+  );
+}

package/src/testIds.ts

@@ -1,6 +1,9 @@
 const testIds = {
+  preChatMessageActivityStarterPromptsCardAction: 'pre-chat message activity starter prompts card action',
+  sendBoxContainer: 'send box container',
   sendBoxDropZone: 'send box drop zone',
   sendBoxSendButton: 'send box send button',
+  sendBoxSuggestedAction: 'send box suggested action',
   sendBoxTextBox: 'send box text area',
   sendBoxTelephoneKeypadButton1: `send box telephone keypad button 1`,
   sendBoxTelephoneKeypadButton2: `send box telephone keypad button 2`,

package/src/tsconfig.json

@@ -1,12 +1,14 @@
 {
-  "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "checkJs": false,
-    "jsx": "react",
-    "moduleResolution": "Bundler",
-    "skipLibCheck": true,
-    "target": "ESNext",
-    "plugins": [{ "name": "typescript-plugin-css-modules" }]
-  },
-  "extends": "@tsconfig/strictest/tsconfig.json"
+	"compilerOptions": {
+		"allowSyntheticDefaultImports": true,
+		"checkJs": false,
+		"jsx": "react",
+		"moduleResolution": "Bundler",
+		"skipLibCheck": true,
+		"target": "ESNext"
+	},
+	"extends": [
+		"@tsconfig/strictest/tsconfig.json",
+		"botframework-webchat-styles/tsconfig.json"
+	]
 }

package/src/types/PropsOf.ts

@@ -1,7 +1,4 @@
 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;
+export type PropsOf<T> =
+  T extends ComponentType<infer P> ? P : T extends MemoExoticComponent<ComponentType<infer P>> ? P : never;

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

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

package/src/styles/injectStyle.ts

@@ -1,9 +0,0 @@
-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);
-  }
-}