Initial commit

compulim · compulim · commit 6d6f5ca5c922 · 2025-10-14T22:25:18.000Z
diff --git a/__tests__/html2/simple/fatModule/experience/chatLauncher/simple.html b/__tests__/html2/simple/fatModule/experience/chatLauncher/simple.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/experience/chatLauncher": "/__dist__/packages/bundle/static/botframework-webchat/experience/chatLauncher.js",
+          "react": "/__dist__/packages/bundle/static/react.js",
+          "react-dom": "/__dist__/packages/bundle/static/react-dom.js",
+          "react-dom/client": "/__dist__/packages/bundle/static/react-dom/client.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions } from 'botframework-webchat';
+      import { ChatLauncher } from 'botframework-webchat/experience/chatLauncher';
+      import { createElement } from 'react';
+      import { flushSync } from 'react-dom';
+      import { createRoot } from 'react-dom/client';
+
+      run(async function () {
+        const {
+          testHelpers: { createDirectLineEmulator }
+        } = window;
+
+        // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
+        window.WebChat = { createStoreWithOptions };
+
+        const { directLine, store } = createDirectLineEmulator();
+
+        flushSync(() => createRoot(document.getElementById('webchat')).render(createElement(ChatLauncher, {})));
+
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
diff --git a/lint-staged.config.js b/lint-staged.config.js
@@ -19,6 +19,7 @@ module.exports = {
   'packages/core/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:core'],
   'packages/debug-theme/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:debug-theme'],
   'packages/directlinespeech/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:directlinespeech'],
+  'packages/experience-chat-launcher/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:experience-chat-launcher'],
   'packages/fluent-theme/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:fluent-theme'],
   'packages/isomorphic-react/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:isomorphic-react'],
   'packages/isomorphic-react-dom/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:isomorphic-react-dom'],
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "./packages/isomorphic-react",
     "./packages/isomorphic-react-dom",
     "./packages/component",
+    "./packages/experience-chat-launcher",
     "./packages/repack/adaptivecards",
     "./packages/repack/base64-js",
     "./packages/repack/botframework-directlinejs",
@@ -79,6 +80,7 @@
     "precommit:eslint:core": "cd packages && cd core && npm run precommit:eslint",
     "precommit:eslint:debug-theme": "cd packages && cd debug-theme && npm run precommit:eslint",
     "precommit:eslint:directlinespeech": "cd packages && cd directlinespeech && npm run precommit:eslint",
+    "precommit:eslint:experience-chat-launcher": "cd packages && cd experience-chat-launcher && npm run precommit:eslint",
     "precommit:eslint:fluent-theme": "cd packages && cd fluent-theme && npm run precommit:eslint",
     "precommit:eslint:isomorphic-react": "cd packages && cd isomorphic-react && npm run precommit:eslint",
     "precommit:eslint:isomorphic-react-dom": "cd packages && cd isomorphic-react-dom && npm run precommit:eslint",
@@ -112,6 +114,7 @@
     "precommit:typecheck:component": "cd packages && cd component && npm run precommit:typecheck",
     "precommit:typecheck:core": "cd packages && cd core && npm run precommit:typecheck",
     "precommit:typecheck:debug-theme": "cd packages && cd debug-theme && npm run precommit:typecheck",
+    "precommit:typecheck:experience-chat-launcher": "cd packages && cd experience-chat-launcher && npm run precommit:typecheck",
     "precommit:typecheck:fluent-theme": "cd packages && cd fluent-theme && npm run precommit:typecheck",
     "precommit:typecheck:react-hooks": "cd packages && cd react-hooks && npm run precommit:typecheck",
     "precommit:typecheck:react-valibot": "cd packages && cd react-valibot && npm run precommit:typecheck",
@@ -139,6 +142,7 @@
     "start:core": "cd packages && cd core && npm start",
     "start:debug-theme": "cd packages && cd debug-theme && npm start",
     "start:directlinespeech": "cd packages && cd directlinespeech && npm start",
+    "start:experience-chat-launcher": "cd packages && cd experience-chat-launcher && npm start",
     "start:fluent-theme": "cd packages && cd fluent-theme && npm start",
     "start:react-hooks": "cd packages && cd react-hooks && npm start",
     "start:react-valibot": "cd packages && cd react-valibot && npm start",
diff --git a/packages/bundle/esbuild.static.mjs b/packages/bundle/esbuild.static.mjs
@@ -11,28 +11,6 @@ import { readPackage } from 'read-pkg';
 import { fileURLToPath } from 'url';
 import { cssPlugin } from '../../esbuildPlugins.mjs';
 
-// eslint-disable-next-line no-unused-vars
-const isomorphicReactPlugin = {
-  name: 'isomorphic-react',
-  setup(build) {
-    // eslint-disable-next-line require-unicode-regexp
-    build.onResolve({ filter: /^(react|react-dom)$/, namespace: 'file' }, ({ path }) => ({
-      namespace: 'isomorphic-react',
-      path
-    }));
-
-    // eslint-disable-next-line require-unicode-regexp
-    build.onLoad({ filter: /^react$/, namespace: 'isomorphic-react' }, () => ({
-      contents: "import React from 'react'; module.exports = globalThis.React || React;"
-    }));
-
-    // eslint-disable-next-line require-unicode-regexp
-    build.onLoad({ filter: /^react-dom$/, namespace: 'isomorphic-react' }, () => ({
-      contents: "import ReactDOM from 'react-dom'; module.exports = globalThis.ReactDOM || ReactDOM;"
-    }));
-  }
-};
-
 function createWatcherPlugin(name) {
   /** @type { import('esbuild').Plugin } */
   return {
@@ -130,6 +108,7 @@ const IGNORED_OWN_PACKAGES = [
     'botframework-webchat': './src/boot/exports/index.ts',
     'botframework-webchat/component': './src/boot/exports/component.ts',
     'botframework-webchat/decorator': './src/boot/exports/decorator.ts',
+    'botframework-webchat/experience/chatLauncher': './src/boot/exports/experience/chatLauncher.ts',
     'botframework-webchat/hook': './src/boot/exports/hook.ts',
     'botframework-webchat/internal': './src/boot/exports/internal.ts',
     'botframework-webchat/middleware': './src/boot/exports/middleware.ts',
diff --git a/packages/bundle/experience/chatLauncher.js b/packages/bundle/experience/chatLauncher.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.experience.chat-launcher.js');
diff --git a/packages/bundle/package.json b/packages/bundle/package.json
@@ -35,6 +35,12 @@
         "default": "./dist/botframework-webchat.decorator.js"
       }
     },
+    "./experience/chatLauncher": {
+      "import": {
+        "types": "./dist/botframework-webchat.experience.chat-launcher.d.mts",
+        "default": "./dist/botframework-webchat.experience.chat-launcher.mjs"
+      }
+    },
     "./hook": {
       "import": {
         "types": "./dist/botframework-webchat.hook.d.mts",
@@ -82,6 +88,7 @@
   "homepage": "https://github.com/microsoft/BotFramework-WebChat/#readme",
   "files": [
     "./dist/**/*",
+    "./experience/**/*",
     "./src/**/*",
     "./static/**/*"
   ],
@@ -121,8 +128,9 @@
   "localDependencies": {
     "@msinternal/adaptivecards": "development",
     "@msinternal/base64-js": "development",
-    "@msinternal/botframework-webchat-base": "development",
     "@msinternal/botframework-directlinejs": "development",
+    "@msinternal/botframework-webchat-base": "development",
+    "@msinternal/botframework-webchat-experience-chat-launcher": "development",
     "@msinternal/botframework-webchat-react-valibot": "development",
     "@msinternal/botframework-webchat-tsconfig": "development",
     "@msinternal/isomorphic-react-baseline": "development",
@@ -212,6 +220,7 @@
     "@msinternal/base64-js": "0.0.0-0",
     "@msinternal/botframework-directlinejs": "0.0.0-0",
     "@msinternal/botframework-webchat-base": "0.0.0-0",
+    "@msinternal/botframework-webchat-experience-chat-launcher": "0.0.0-0",
     "@msinternal/botframework-webchat-react-valibot": "0.0.0-0",
     "@msinternal/botframework-webchat-tsconfig": "0.0.0-0",
     "@msinternal/isomorphic-react": "0.0.0-0",
diff --git a/packages/bundle/src/boot/actual/experience/chatLauncher.ts b/packages/bundle/src/boot/actual/experience/chatLauncher.ts
@@ -0,0 +1 @@
+export { ChatLauncher } from '@msinternal/botframework-webchat-experience-chat-launcher';
diff --git a/packages/bundle/src/boot/exports/experience/chatLauncher.ts b/packages/bundle/src/boot/exports/experience/chatLauncher.ts
@@ -0,0 +1 @@
+export * from '../../actual/experience/chatLauncher';
diff --git a/packages/bundle/tsup.config.ts b/packages/bundle/tsup.config.ts
@@ -21,6 +21,7 @@ const commonConfig = applyConfig(config => ({
     'botframework-webchat': './src/boot/exports/index.ts',
     'botframework-webchat.component': './src/boot/exports/component.ts',
     'botframework-webchat.decorator': './src/boot/exports/decorator.ts',
+    'botframework-webchat.experience.chatLauncher': './src/boot/exports/experience/chatLauncher.ts',
     'botframework-webchat.hook': './src/boot/exports/hook.ts',
     'botframework-webchat.internal': './src/boot/exports/internal.ts',
     'botframework-webchat.middleware': './src/boot/exports/middleware.ts'
diff --git a/packages/experience-chat-launcher/.eslintrc.yml b/packages/experience-chat-launcher/.eslintrc.yml
@@ -0,0 +1,14 @@
+extends:
+  - ../../.eslintrc.production.yml
+  - ../../.eslintrc.react.yml
+
+# This package is compatible with web browser.
+env:
+  browser: true
+
+rules:
+  # React functional component is better in function style than arrow style.
+  prefer-arrow-callback: off
+
+  # React already deprecated default props.
+  react/require-default-props: off
diff --git a/packages/experience-chat-launcher/.gitignore b/packages/experience-chat-launcher/.gitignore
@@ -0,0 +1,5 @@
+/*.tgz
+/dist/
+/dist.tmp/
+/node_modules/
+/tsup.config.bundled_*.mjs
diff --git a/packages/experience-chat-launcher/README.md b/packages/experience-chat-launcher/README.md
diff --git a/packages/experience-chat-launcher/package.json b/packages/experience-chat-launcher/package.json
@@ -0,0 +1,60 @@
+{
+  "name": "@msinternal/botframework-webchat-experience-chat-launcher",
+  "version": "0.0.0-0",
+  "description": "botframework-webchat-api/middleware package",
+  "main": "./dist/botframework-webchat-experience-chat-launcher.js",
+  "types": "./dist/botframework-webchat-experience-chat-launcher.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/botframework-webchat-experience-chat-launcher.d.mts",
+        "default": "./dist/botframework-webchat-experience-chat-launcher.mjs"
+      }
+    }
+  },
+  "author": "Microsoft Corporation",
+  "license": "MIT",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/microsoft/BotFramework-WebChat.git"
+  },
+  "bugs": {
+    "url": "https://github.com/microsoft/BotFramework-WebChat/issues"
+  },
+  "files": [
+    "./dist/**/*",
+    "./src/**/*",
+    "*.js"
+  ],
+  "localDependencies": {
+    "@msinternal/botframework-webchat-react-valibot": "development",
+    "@msinternal/botframework-webchat-styles": "development"
+  },
+  "homepage": "https://github.com/microsoft/BotFramework-WebChat/tree/main/packages/experience-chat-launcher#readme",
+  "scripts": {
+    "build": "tsup --config ./tsup.config.ts",
+    "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",
+    "eslint": "npm run precommit",
+    "postversion": "cat package.json | jq '.version as $V | (.localDependencies // {} | with_entries(select(.value == \"production\") | { key: .key, value: $V })) as $L1 | (.localDependencies // {} | with_entries(select(.value == \"development\") | { key: .key, value: $V })) as $L2 | ((.dependencies // {}) + $L1 | to_entries | sort_by(.key) | from_entries) as $D1 | ((.devDependencies // {}) + $L2 | to_entries | sort_by(.key) | from_entries) as $D2 | . + { dependencies: $D1, devDependencies: $D2 }' > package-temp.json && mv package-temp.json package.json",
+    "precommit": "npm run precommit:eslint -- src && npm run precommit:typecheck",
+    "precommit:eslint": "../../node_modules/.bin/eslint --report-unused-disable-directives --max-warnings 0",
+    "precommit:typecheck": "tsc --project ./src --emitDeclarationOnly false --esModuleInterop true --noEmit --pretty false",
+    "preversion": "cat package.json | jq '(.localDependencies // {} | to_entries | map([if .value == \"production\" then \"dependencies\" else \"devDependencies\" end, .key])) as $P | delpaths($P)' > package-temp.json && mv package-temp.json package.json",
+    "start": "npm run build -- --watch"
+  },
+  "devDependencies": {
+    "@msinternal/botframework-webchat-react-valibot": "0.0.0-0",
+    "@msinternal/botframework-webchat-styles": "0.0.0-0",
+    "@types/node": "^22.13.4",
+    "typescript": "^5.7.3"
+  },
+  "peerDependencies": {
+    "react": ">= 16.8.6"
+  },
+  "dependencies": {
+    "valibot": "1.1.0"
+  }
+}
diff --git a/packages/experience-chat-launcher/src/env.d.ts b/packages/experience-chat-launcher/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="@msinternal/botframework-webchat-styles/env" />
diff --git a/packages/experience-chat-launcher/src/index.ts b/packages/experience-chat-launcher/src/index.ts
@@ -0,0 +1 @@
+export { default as ChatLauncher } from './private/ChatLauncher';
diff --git a/packages/experience-chat-launcher/src/private/ChatLauncher.module.css b/packages/experience-chat-launcher/src/private/ChatLauncher.module.css
@@ -0,0 +1,3 @@
+:global(.webchat).webchat-experience-chat-launcher {
+  display: contents;
+}
diff --git a/packages/experience-chat-launcher/src/private/ChatLauncher.tsx b/packages/experience-chat-launcher/src/private/ChatLauncher.tsx
@@ -0,0 +1,34 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { memo } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import ChatLauncherStylesheet from '../stylesheet/ChatLauncherStylesheet';
+import styles from './ChatLauncher.module.css';
+import ChatLauncherButton from './private/ChatLauncherButton';
+
+const chatLauncherPropsSchema = pipe(
+  object({
+    nonce: optional(string())
+  }),
+  readonly()
+);
+
+type ChatLauncherProps = InferInput<typeof chatLauncherPropsSchema>;
+
+function ChatLauncher(props: ChatLauncherProps) {
+  const { nonce } = validateProps(chatLauncherPropsSchema, props);
+  const classNames = useStyles(styles);
+
+  return (
+    <div className={cx('webchat', classNames['webchat-experience-chat-launcher'])}>
+      <ChatLauncherStylesheet nonce={nonce} />
+      <ChatLauncherButton />
+    </div>
+  );
+}
+
+ChatLauncher.displayName = 'ChatLauncher';
+
+export default memo(ChatLauncher);
diff --git a/packages/experience-chat-launcher/src/private/private/ChatLauncherButton.module.css b/packages/experience-chat-launcher/src/private/private/ChatLauncherButton.module.css
@@ -0,0 +1,6 @@
+:global(.webchat-experience-chat-launcher) .chat-launcher-button {
+  background-color: #e00;
+  color: White;
+  height: 40px;
+  width: 40px;
+}
diff --git a/packages/experience-chat-launcher/src/private/private/ChatLauncherButton.tsx b/packages/experience-chat-launcher/src/private/private/ChatLauncherButton.tsx
@@ -0,0 +1,18 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import React, { memo } from 'react';
+
+import styles from './ChatLauncherButton.module.css';
+
+function ChatLauncherButton() {
+  const classNames = useStyles(styles);
+
+  return (
+    <button className={classNames['chat-launcher-button']} type="button">
+      {'💬'}
+    </button>
+  );
+}
+
+ChatLauncherButton.displayName = 'ChatLauncherButton';
+
+export default memo(ChatLauncherButton);
diff --git a/packages/experience-chat-launcher/src/stylesheet/ChatLauncherStylesheet.tsx b/packages/experience-chat-launcher/src/stylesheet/ChatLauncherStylesheet.tsx
diff --git a/packages/experience-chat-launcher/src/stylesheet/createChatLauncherStyleElements.ts b/packages/experience-chat-launcher/src/stylesheet/createChatLauncherStyleElements.ts
diff --git a/packages/experience-chat-launcher/src/tsconfig.json b/packages/experience-chat-launcher/src/tsconfig.json
diff --git a/packages/experience-chat-launcher/tsup.config.ts b/packages/experience-chat-launcher/tsup.config.ts
diff --git a/serve-test.json b/serve-test.json

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+// This is required for Webpack 4 which does not support named exports.`
	`2`	`+// eslint-disable-next-line no-undef`
	`3`	`+module.exports = require('./dist/botframework-webchat.experience.chat-launcher.js');`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { ChatLauncher } from '@msinternal/botframework-webchat-experience-chat-launcher';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export * from '../../actual/experience/chatLauncher';`