[Fat module] fluent-theme should imports from bundle only

CHANGELOG.md

@@ -131,6 +131,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
       - The `position` property takes precedence over existing sequence ID
 - Unified build info and injection of `<meta>` tag, in PR [#5571](https://github.com/microsoft/BotFramework-WebChat/pull/5571), by [@compulim](https://github.com/compulim)
 - Added documentation for `isPartOf` property, in PR [#5573](https://github.com/microsoft/BotFramework-WebChat/pull/5573), by [@compulim](https://github.com/compulim)
+- `fluent-theme`: Changed dependencies to import solely from the "bundle" package, in PR [#5584](https://github.com/microsoft/BotFramework-WebChat/pull/5584), by [@compulim](https://github.com/compulim)
 
 ### Changed
 

jest.legacy.config.js

@@ -39,7 +39,12 @@ const TRANSFORM_IGNORE_PACKAGES = [
   'micromark',
   'mime',
   'unist-util-stringify-position',
-  'uuid'
+  'uuid',
+
+  // Related to Adaptive Cards.
+  'dom7',
+  'ssr-window',
+  'swiper'
 ];
 
 module.exports = {

packages/bundle/internal.js

@@ -0,0 +1,3 @@
+// This is required for Webpack 4 which does not support named exports.
+// eslint-disable-next-line no-undef
+module.exports = require('./dist/botframework-webchat.internal.js');

packages/bundle/package.json

@@ -15,6 +15,16 @@
         "default": "./dist/botframework-webchat.js"
       }
     },
+    "./internal": {
+      "import": {
+        "types": "./dist/botframework-webchat.internal.d.mts",
+        "default": "./dist/botframework-webchat.internal.mjs"
+      },
+      "require": {
+        "types": "./dist/botframework-webchat.internal.d.ts",
+        "default": "./dist/botframework-webchat.internal.js"
+      }
+    },
     "./middleware": {
       "import": {
         "types": "./dist/botframework-webchat.middleware.d.mts",

packages/bundle/src/boot/exports/internal.ts

@@ -0,0 +1,11 @@
+// We should review exports in this file to make sure 1P = 3P.
+export { type ActivityMiddleware, type TypingIndicatorMiddleware } from 'botframework-webchat-api';
+export {
+  createActivityBorderMiddleware,
+  createActivityGroupingMiddleware,
+  DecoratorComposer,
+  type DecoratorMiddleware
+} from 'botframework-webchat-api/decorator';
+export { WebChatDecorator } from 'botframework-webchat-component/decorator';
+export { createIconComponent, PartGrouping, useLiveRegion } from 'botframework-webchat-component/internal';
+export { getOrgSchemaMessage, type DirectLineCardAction, type WebChatActivity } from 'botframework-webchat-core';

packages/bundle/tsup.config.ts

@@ -33,6 +33,7 @@ const commonConfig = applyConfig(config => ({
   entry: {
     'botframework-webchat': './src/boot/exports/full.ts',
     'botframework-webchat.es5': './src/boot/exports/full-es5.ts',
+    'botframework-webchat.internal': './src/boot/exports/internal.ts',
     'botframework-webchat.middleware': './src/boot/exports/middleware.ts',
     'botframework-webchat.minimal': './src/boot/exports/minimal.ts'
   },
@@ -43,8 +44,7 @@ const commonConfig = applyConfig(config => ({
     SPEECH_CONDUCT_OCSP_CHECK: '',
     SPEECH_OCSP_CACHE_ROOT: ''
   },
-  // Intentionally overriding existing esbuild plugins.
-  esbuildPlugins: [resolveCognitiveServicesToES2015],
+  esbuildPlugins: [...(config.esbuildPlugins ?? []), resolveCognitiveServicesToES2015],
   noExternal: [
     ...(config.noExternal ?? []),
     '@babel/runtime',
@@ -75,7 +75,7 @@ export default defineConfig([
       'webchat-es5': './src/boot/bundle/full-es5.ts',
       'webchat-minimal': './src/boot/bundle/minimal.ts'
     },
-    esbuildPlugins: [...commonConfig.esbuildPlugins, resolveReact],
+    esbuildPlugins: [...(commonConfig.esbuildPlugins ?? []), resolveReact],
     format: 'iife',
     outExtension() {
       return { js: '.js' };

packages/component/package.json

@@ -55,7 +55,9 @@
   ],
   "homepage": "https://github.com/microsoft/BotFramework-WebChat/tree/main/packages/component#readme",
   "scripts": {
-    "build": "tsup",
+    "build": "npm run build:tsup && npm run build:validate",
+    "build:tsup": "tsup",
+    "build:validate": "grep -L '.webchat .w' dist/*.css 2>/dev/null || { echo \"Error: dist/*.css is not compiled by Lightning CSS\" >&2; exit 1; }",
     "bump": "npm run bump:prod && npm run bump:dev && (npm audit fix || exit 0)",
     "bump:dev": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localDependencies // {} | keys) as $L | (.devDependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install $PACKAGES_TO_BUMP || true",
     "bump:prod": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localDependencies // {} | keys) as $L | (.dependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install --save-exact $PACKAGES_TO_BUMP || true",

packages/directlinespeech/tsup.config.ts

@@ -31,8 +31,7 @@ const config = applyConfig(config => ({
     SPEECH_CONDUCT_OCSP_CHECK: '',
     SPEECH_OCSP_CACHE_ROOT: ''
   },
-  // Intentionally overriding existing esbuild plugins.
-  esbuildPlugins: [resolveCognitiveServicesToES2015],
+  esbuildPlugins: [...(config.esbuildPlugins ?? []), resolveCognitiveServicesToES2015],
   // We need to internalize event-target-shim because it appear as transient packages with a different version.
   noExternal: [...(config.noExternal ?? []), 'event-target-shim']
 }));

packages/fluent-theme/package.json

@@ -38,7 +38,9 @@
     "src/**/*"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "npm run build:tsup && npm run build:validate",
+    "build:tsup": "tsup",
+    "build:validate": "grep -L '.webchat-fluent .w' dist/*.css 2>/dev/null || { echo \"Error: dist/*.css is not compiled by Lightning CSS\" >&2; exit 1; }",
     "bump": "npm run bump:prod && npm run bump:dev && (npm audit fix || exit 0)",
     "bump:dev": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localDependencies // {} | keys) as $L | (.devDependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install $PACKAGES_TO_BUMP || true",
     "bump:prod": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localDependencies // {} | keys) as $L | (.dependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install --save-exact $PACKAGES_TO_BUMP || true",
@@ -51,12 +53,8 @@
     "start": "npm run build -- --watch"
   },
   "localDependencies": {
-    "@msinternal/botframework-webchat-base": "development",
-    "@msinternal/botframework-webchat-styles": "development",
     "@msinternal/botframework-webchat-tsconfig": "development",
-    "botframework-webchat-api": "production",
-    "botframework-webchat-component": "production",
-    "botframework-webchat-core": "production"
+    "botframework-webchat": "production"
   },
   "pinDependencies": {
     "@types/react": [
@@ -69,8 +67,6 @@
     ]
   },
   "devDependencies": {
-    "@msinternal/botframework-webchat-base": "0.0.0-0",
-    "@msinternal/botframework-webchat-styles": "0.0.0-0",
     "@msinternal/botframework-webchat-tsconfig": "^0.0.0-0",
     "@types/math-random": "^1.0.2",
     "@types/node": "^24.1.0",
@@ -79,9 +75,7 @@
     "typescript": "~5.8.3"
   },
   "dependencies": {
-    "botframework-webchat-api": "0.0.0-0",
-    "botframework-webchat-component": "0.0.0-0",
-    "botframework-webchat-core": "0.0.0-0",
+    "botframework-webchat": "0.0.0-0",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

packages/fluent-theme/src/components/activity/ActivityDecorator.tsx

@@ -1,5 +1,5 @@
 import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { WebChatActivity } from 'botframework-webchat-component';
+import { type WebChatActivity } from 'botframework-webchat/internal';
 import cx from 'classnames';
 import React, { ReactNode, memo } from 'react';
 import { object, optional, pipe, readonly, type InferInput } from 'valibot';

packages/fluent-theme/src/components/activity/CopilotMessageHeader.tsx

@@ -1,8 +1,10 @@
 import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { WebChatActivity, hooks } from 'botframework-webchat-component';
+import { hooks } from 'botframework-webchat';
+import { type WebChatActivity } from 'botframework-webchat/internal';
 import cx from 'classnames';
 import React, { memo, useMemo, type CSSProperties } from 'react';
 import { custom, object, optional, pipe, readonly, safeParse, string, type InferInput } from 'valibot';
+
 import { useStyles } from '../../styles';
 import styles from './CopilotMessageHeader.module.css';
 import isAIGeneratedActivity from './private/isAIGeneratedActivity';

packages/fluent-theme/src/components/activity/PartGroupingDecorator.tsx

@@ -1,6 +1,5 @@
 import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { PartGrouping } from 'botframework-webchat-component/internal';
-import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
+import { getOrgSchemaMessage, PartGrouping, type WebChatActivity } from 'botframework-webchat/internal';
 import cx from 'classnames';
 import React, { memo, useMemo, type ReactNode } from 'react';
 import { array, custom, object, optional, pipe, readonly, safeParse } from 'valibot';

packages/fluent-theme/src/components/activity/private/isAIGeneratedActivity.ts

@@ -1,4 +1,4 @@
-import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
+import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat/internal';
 
 export default function isAIGeneratedActivity(activity: undefined | WebChatActivity) {
   return !!(activity && getOrgSchemaMessage(activity?.entities || [])?.keywords?.includes('AIGeneratedContent'));

packages/fluent-theme/src/components/activity/private/useActivityAuthor.ts

@@ -1,5 +1,5 @@
+import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat/internal';
 import { useMemo } from 'react';
-import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
 
 export default function useActivityAuthor(activity?: WebChatActivity | undefined) {
   return useMemo(() => {

packages/fluent-theme/src/components/activity/private/useActivityStyleOptions.ts

@@ -1,6 +1,6 @@
+import { type StrictStyleOptions, hooks } from 'botframework-webchat';
+import { type WebChatActivity } from 'botframework-webchat/internal';
 import { useMemo } from 'react';
-import { hooks, type WebChatActivity } from 'botframework-webchat-component';
-import { type StrictStyleOptions } from 'botframework-webchat-api';
 
 const { useStyleOptions } = hooks;
 

packages/fluent-theme/src/components/assets/AssetComposer.tsx

@@ -1,10 +1,7 @@
-import { type ContextOf } from 'botframework-webchat-api';
 import React, { memo, useEffect, useMemo, type ReactNode } from 'react';
 
 import { type AssetName } from './AssetName';
-import Context from './private/Context';
-
-type ContextType = ContextOf<typeof Context>;
+import Context, { type ContextType } from './private/Context';
 
 type AssetComposerProps = Readonly<{
   children?: ReactNode | undefined;

packages/fluent-theme/src/components/assets/SlidingDots.tsx

@@ -1,4 +1,4 @@
-import { hooks } from 'botframework-webchat-component';
+import { hooks } from 'botframework-webchat';
 import React, { memo, useCallback, useEffect, useRef } from 'react';
 import { useRefFrom } from 'use-ref-from';
 

packages/fluent-theme/src/components/assets/private/Context.ts

@@ -22,3 +22,4 @@ const Context = createContext<ContextType>(Object.create({}, defaultContextValue
 Context.displayName = 'AssetComposerContext';
 
 export default Context;
+export { type ContextType };

packages/fluent-theme/src/components/assets/private/useContext.ts

@@ -1,8 +1,7 @@
-import { type ContextOf } from 'botframework-webchat-api';
 import { useContext as useReactContext } from 'react';
 
-import Context from './Context';
+import Context, { ContextType } from './Context';
 
-export default function useContext(): ContextOf<typeof Context> {
+export default function useContext(): ContextType {
   return useReactContext(Context);
 }

packages/fluent-theme/src/components/dropZone/DropZone.tsx

@@ -1,20 +1,20 @@
-import { hooks } from 'botframework-webchat-component';
+import { hooks } from 'botframework-webchat';
 import cx from 'classnames';
 import React, {
   memo,
   useCallback,
   useEffect,
   useRef,
   useState,
-  type DragEvent as ReactDragEvent,
-  type DragEventHandler
+  type DragEventHandler,
+  type DragEvent as ReactDragEvent
 } from 'react';
 import { useRefFrom } from 'use-ref-from';
 
-import { FluentIcon } from '../icon';
+import { useStyles } from '../../styles';
 import testIds from '../../testIds';
+import { FluentIcon } from '../icon';
 import styles from './DropZone.module.css';
-import { useStyles } from '../../styles';
 
 const { useLocalizer } = hooks;
 

packages/fluent-theme/src/components/icon/FluentIcon.tsx

@@ -1,6 +1,6 @@
-import { createIconComponent } from 'botframework-webchat-component/internal';
 import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import { createIconComponent } from 'botframework-webchat/internal';
 import cx from 'classnames';
 import React, { memo, useMemo, type CSSProperties } from 'react';
 import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';

packages/fluent-theme/src/components/linerActivity/private/LinerActivity.tsx

@@ -1,5 +1,6 @@
-import { type WebChatActivity } from 'botframework-webchat-core';
+import { type WebChatActivity } from 'botframework-webchat/internal';
 import React, { memo } from 'react';
+
 import { useStyles } from '../../../styles/index.js';
 import styles from './LinerMessageActivity.module.css';
 

packages/fluent-theme/src/components/linerActivity/private/isLinerMessageActivity.ts

@@ -1,4 +1,4 @@
-import { type WebChatActivity } from 'botframework-webchat-core';
+import { type WebChatActivity } from 'botframework-webchat/internal';
 
 export default function isLinerMessageActivity(
   activity: undefined | WebChatActivity

packages/fluent-theme/src/components/preChatActivity/PreChatMessageActivity.tsx

@@ -1,11 +1,12 @@
-import { hooks } from 'botframework-webchat-component';
-import { type WebChatActivity } from 'botframework-webchat-core';
+import { hooks } from 'botframework-webchat';
+import { type WebChatActivity } from 'botframework-webchat/internal';
 import cx from 'classnames';
 import React, { memo, useMemo } from 'react';
+
 import { useStyles } from '../../styles/index.js';
+import { useActivityAuthor } from '../activity/index.js';
 import styles from './PreChatMessageActivity.module.css';
 import StarterPromptsToolbar from './StarterPromptsToolbar.js';
-import { useActivityAuthor } from '../activity/index.js';
 
 type Props = Readonly<{ activity: WebChatActivity & { type: 'message' } }>;
 

packages/fluent-theme/src/components/preChatActivity/StarterPromptsCardAction.tsx

@@ -1,5 +1,5 @@
-import { hooks } from 'botframework-webchat-component';
-import { type DirectLineCardAction } from 'botframework-webchat-core';
+import { hooks } from 'botframework-webchat';
+import { type DirectLineCardAction } from 'botframework-webchat/internal';
 import cx from 'classnames';
 import React, { memo, useCallback, useMemo } from 'react';
 import { useRefFrom } from 'use-ref-from';

packages/fluent-theme/src/components/preChatActivity/StarterPromptsToolbar.tsx

@@ -1,7 +1,8 @@
-import { hooks } from 'botframework-webchat-api';
-import { type DirectLineCardAction } from 'botframework-webchat-core';
+import { hooks } from 'botframework-webchat';
+import { type DirectLineCardAction } from 'botframework-webchat/internal';
 import cx from 'classnames';
 import React, { memo } from 'react';
+
 import { useStyles } from '../../styles/index.js';
 import StarterPromptsCardAction from './StarterPromptsCardAction.js';
 import styles from './StarterPromptsToolbar.module.css';

packages/fluent-theme/src/components/preChatActivity/isPreChatMessageActivity.ts

@@ -1,4 +1,4 @@
-import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
+import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat/internal';
 
 export default function isPreChatMessageActivity(
   activity: undefined | WebChatActivity

packages/fluent-theme/src/components/sendBox/AddAttachmentButton.tsx

@@ -1,12 +1,12 @@
-import { hooks } from 'botframework-webchat-component';
-import React, { useCallback, useRef, type ChangeEventHandler, memo } from 'react';
+import { hooks } from 'botframework-webchat';
+import React, { memo, useCallback, useRef, type ChangeEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
 
-import { FluentIcon } from '../icon';
+import { useStyles } from '../../styles';
 import testIds from '../../testIds';
-import { ToolbarButton } from './Toolbar';
+import { FluentIcon } from '../icon';
 import styles from './AddAttachmentButton.module.css';
-import { useStyles } from '../../styles';
+import { ToolbarButton } from './Toolbar';
 
 const { useLocalizer, useStyleOptions } = hooks;
 

packages/fluent-theme/src/components/sendBox/ErrorMessage.tsx

@@ -1,5 +1,6 @@
-import { useLiveRegion } from 'botframework-webchat-component/internal';
+import { useLiveRegion } from 'botframework-webchat/internal';
 import React, { memo } from 'react';
+
 import { useStyles } from '../../styles';
 import styles from './ErrorMessage.module.css';
 

packages/fluent-theme/src/components/sendBox/SendBox.tsx

@@ -1,4 +1,4 @@
-import { hooks, Components, type SendBoxFocusOptions } from 'botframework-webchat-component';
+import { Components, hooks } from 'botframework-webchat';
 import cx from 'classnames';
 import React, {
   memo,
@@ -11,10 +11,10 @@ import React, {
 } from 'react';
 import { useRefFrom } from 'use-ref-from';
 
-import { FluentIcon } from '../icon';
 import { useStyles, useVariantClassName } from '../../styles';
 import testIds from '../../testIds';
 import { DropZone } from '../dropZone';
+import { FluentIcon } from '../icon';
 import { SuggestedActions } from '../suggestedActions';
 import { TelephoneKeypadSurrogate, useTelephoneKeypadShown, type DTMF } from '../telephoneKeypad';
 import AddAttachmentButton from './AddAttachmentButton';
@@ -75,7 +75,7 @@ function SendBox(props: Props) {
 
   useRegisterFocusSendBox(
     useCallback(
-      ({ noKeyboard, waitUntil }: SendBoxFocusOptions) => {
+      ({ noKeyboard, waitUntil }) => {
         if (!inputRef.current) {
           return;
         }

packages/fluent-theme/src/components/sendBox/TelephoneKeypadToolbarButton.tsx

@@ -1,8 +1,8 @@
+import { hooks } from 'botframework-webchat';
 import React, { memo, useCallback } from 'react';
 
-import { hooks } from 'botframework-webchat-component';
-import { FluentIcon } from '../icon';
 import testIds from '../../testIds';
+import { FluentIcon } from '../icon';
 import { useTelephoneKeypadShown } from '../telephoneKeypad';
 import { ToolbarButton } from './Toolbar';
 

packages/fluent-theme/src/components/sendBox/Toolbar.tsx

@@ -1,6 +1,7 @@
-import { hooks } from 'botframework-webchat-api';
+import { hooks } from 'botframework-webchat';
 import cx from 'classnames';
 import React, { memo, type MouseEventHandler, type ReactNode } from 'react';
+
 import { useStyles } from '../../styles';
 import styles from './Toolbar.module.css';
 

packages/fluent-theme/src/components/sendBox/private/useSubmitError.ts

@@ -1,4 +1,4 @@
-import { hooks } from 'botframework-webchat-component';
+import { hooks } from 'botframework-webchat';
 import { useCallback, useMemo, useState } from 'react';
 import { useRefFrom } from 'use-ref-from';