Set up app for Jetpack's support bot integration

apps/jetpackme-support/README.md

@@ -0,0 +1,18 @@
+# Odie Support Widget for Jetpack.com
+
+This is the support chat interface available over at https://jetpack.com/contact-support.
+
+## Building
+
+### Production
+
+```bash
+cd apps/jetpackme-support
+yarn build
+```
+
+### Development
+
+``` 
+yarn dev
+```

apps/jetpackme-support/package.json

@@ -0,0 +1,60 @@
+{
+	"name": "@automattic/jetpackme-support",
+	"version": "1.0.0",
+	"description": "A Jetpack.com Odie bot interface application.",
+	"homepage": "https://github.com/Automattic/wp-calypso",
+	"license": "GPL-2.0-or-later",
+	"author": "Automattic Inc.",
+	"sideEffects": [
+		"*.css",
+		"*.scss",
+		"./config.js"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Automattic/wp-calypso.git",
+		"directory": "apps/jetpackme-support"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"bugs": "https://github.com/Automattic/wp-calypso/issues",
+	"types": "dist/types",
+	"scripts": {
+		"clean": "rm -rf dist",
+		"teamcity:build-app": "yarn run build",
+		"build": "NODE_ENV=production yarn dev",
+		"build:app": "calypso-build",
+		"dev": "yarn run calypso-apps-builder --localPath dist --remotePath /home/wpcom/public_html/widgets.wp.com/jetpackme-support",
+		"prepack": "yarn run clean && yarn run build",
+		"watch": "tsc --build ./tsconfig.json --watch",
+		"translate": "rm -rf dist/strings && wp-babel-makepot './dist/*.{js,jsx,ts,tsx}' --ignore '**/node_modules/**,**/test/**,**/*.d.ts' --base './dist' --dir './dist/strings' --output './dist/jetpackme-support.pot' && build-app-languages --stringsFilePath='./dist/jetpackme-support.pot' --outputPath='./dist/languages' --outputFormat='JS'"
+	},
+	"dependencies": {
+		"@automattic/components": "workspace:^",
+		"@automattic/i18n-utils": "workspace:^",
+		"@automattic/odie-client": "workspace:^",
+		"@tanstack/react-query": "^5.15.5",
+		"@wordpress/components": "^28.7.0",
+		"@wordpress/element": "^6.7.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
+	},
+	"devDependencies": {
+		"@automattic/calypso-apps-builder": "workspace:^",
+		"@automattic/calypso-build": "workspace:^",
+		"@automattic/calypso-typescript-config": "workspace:^",
+		"@automattic/wp-babel-makepot": "workspace:^",
+		"@wordpress/dependency-extraction-webpack-plugin": "5.9.0",
+		"@wordpress/readable-js-assets-webpack-plugin": "3.0.0",
+		"autoprefixer": "^10.4.20",
+		"copy-webpack-plugin": "^10.2.4",
+		"typescript": "^5.3.3",
+		"webpack": "^5.91.0"
+	},
+	"peerDependencies": {
+		"@wordpress/data": "^10.2.0",
+		"postcss": "*"
+	},
+	"private": true
+}

apps/jetpackme-support/src/index.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import SupportPrompt from './support-prompt';
+
+window.renderSupportPrompt = ( elementId ) => {
+	const queryClient = new QueryClient();
+
+	render(
+		<QueryClientProvider client={ queryClient }>
+			<SupportPrompt />
+		</QueryClientProvider>,
+		document.getElementById( elementId )
+	);
+};

apps/jetpackme-support/src/support-prompt/index.js

@@ -0,0 +1,32 @@
+/**
+ * Internal dependencies
+ */
+import OdieAssistantProvider, {
+	OdieAssistant,
+	EllipsisMenu,
+	useOdieAssistantContext,
+} from '@automattic/odie-client';
+
+const SupportPrompt = () => {
+	const { clearChat } = useOdieAssistantContext();
+	return (
+		<OdieAssistantProvider botNameSlug="jetpack-support-chat">
+			<div className="custom-class">
+				<EllipsisMenu popoverClassName="menu-class" position="bottom">
+					<span
+						role="button"
+						tabIndex={ 0 }
+						onClick={ () => clearChat() }
+						onKeyPress={ () => clearChat() }
+						className="menu-item-class"
+					>
+						Start a New Chat
+					</span>
+				</EllipsisMenu>
+			</div>
+			<OdieAssistant />
+		</OdieAssistantProvider>
+	);
+};
+
+export default SupportPrompt;

apps/jetpackme-support/webpack.config.js

@@ -0,0 +1,54 @@
+const path = require( 'path' );
+const getBaseWebpackConfig = require( '@automattic/calypso-build/webpack.config.js' );
+const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
+const ReadableJsAssetsWebpackPlugin = require( '@wordpress/readable-js-assets-webpack-plugin' );
+const webpack = require( 'webpack' );
+const GenerateChunksMapPlugin = require( '../../build-tools/webpack/generate-chunks-map-plugin' );
+
+/* Arguments to this function replicate webpack's so this config can be used on the command line,
+ * with individual options overridden by command line args.
+ * @see {@link https://webpack.js.org/configuration/configuration-types/#exporting-a-function}
+ * @see {@link https://webpack.js.org/api/cli/}
+ * @param   {Object}  env                           environment options
+ * @param   {string}  env.source                    plugin slugs, comma separated list
+ * @param   {Object}  argv                          options map
+ * @param   {string}  argv.entry                    entry path
+ * @returns {Object}                                webpack config
+ */
+function getWebpackConfig( env = { source: '' }, argv = {} ) {
+	const webpackConfig = getBaseWebpackConfig( { ...env, WP: true }, argv );
+
+	return {
+		...webpackConfig,
+		entry: {
+			'jetpackme-support': path.join( __dirname, 'src/index.js' ),
+		},
+		output: {
+			...webpackConfig.output,
+			filename: '[name].min.js', // dynamic filename
+		},
+		optimization: {
+			...webpackConfig.optimization,
+			// disable module concatenation so that instances of `__()` are not renamed
+			concatenateModules: false,
+		},
+		plugins: [
+			...webpackConfig.plugins.filter(
+				( plugin ) => plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'
+			),
+			new webpack.DefinePlugin( {
+				__i18n_text_domain__: JSON.stringify( 'default' ),
+			} ),
+			new DependencyExtractionWebpackPlugin( {
+				injectPolyfill: true,
+				outputFormat: 'json',
+			} ),
+			new GenerateChunksMapPlugin( {
+				output: path.resolve( './dist/chunks-map.json' ),
+			} ),
+			new ReadableJsAssetsWebpackPlugin(),
+		],
+	};
+}
+
+module.exports = getWebpackConfig;

packages/wpcom-proxy-request/src/index.js

@@ -505,6 +505,7 @@ function reject( xhr, err, headers ) {
 // taken from wpcom-proxy-request (rest-proxy/provider-v2.0.js)
 const wpcomAllowedOrigins = [
 	'https://wordpress.com',
+	'https://jetpack.com', // Odie bot on contact-support page.
 	'https://cloud.jetpack.com',
 	'https://agencies.automattic.com',
 	'http://wpcalypso.wordpress.com', // for running docker on dev instances

yarn.lock

@@ -1236,6 +1236,33 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@automattic/jetpackme-support@workspace:apps/jetpackme-support":
+  version: 0.0.0-use.local
+  resolution: "@automattic/jetpackme-support@workspace:apps/jetpackme-support"
+  dependencies:
+    "@automattic/calypso-apps-builder": "workspace:^"
+    "@automattic/calypso-build": "workspace:^"
+    "@automattic/calypso-typescript-config": "workspace:^"
+    "@automattic/components": "workspace:^"
+    "@automattic/i18n-utils": "workspace:^"
+    "@automattic/odie-client": "workspace:^"
+    "@automattic/wp-babel-makepot": "workspace:^"
+    "@wordpress/components": "npm:^28.7.0"
+    "@wordpress/dependency-extraction-webpack-plugin": "npm:5.9.0"
+    "@wordpress/element": "npm:^6.7.0"
+    "@wordpress/readable-js-assets-webpack-plugin": "npm:3.0.0"
+    autoprefixer: "npm:^10.4.20"
+    copy-webpack-plugin: "npm:^10.2.4"
+    react: "npm:^18.2.0"
+    react-dom: "npm:^18.2.0"
+    typescript: "npm:^5.3.3"
+    webpack: "npm:^5.91.0"
+  peerDependencies:
+    "@wordpress/data": ^10.2.0
+    postcss: "*"
+  languageName: unknown
+  linkType: soft
+
 "@automattic/js-utils@workspace:^, @automattic/js-utils@workspace:packages/js-utils":
   version: 0.0.0-use.local
   resolution: "@automattic/js-utils@workspace:packages/js-utils"
@@ -11873,6 +11900,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"autoprefixer@npm:^10.4.20":
+  version: 10.4.20
+  resolution: "autoprefixer@npm:10.4.20"
+  dependencies:
+    browserslist: "npm:^4.23.3"
+    caniuse-lite: "npm:^1.0.30001646"
+    fraction.js: "npm:^4.3.7"
+    normalize-range: "npm:^0.1.2"
+    picocolors: "npm:^1.0.1"
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.1.0
+  bin:
+    autoprefixer: bin/autoprefixer
+  checksum: e1f00978a26e7c5b54ab12036d8c13833fad7222828fc90914771b1263f51b28c7ddb5803049de4e77696cbd02bb25cfc3634e80533025bb26c26aacdf938940
+  languageName: node
+  linkType: hard
+
 "autosize@npm:^4.0.2, autosize@npm:^4.0.4":
   version: 4.0.4
   resolution: "autosize@npm:4.0.4"
@@ -12505,7 +12550,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.0.0, browserslist@npm:^4.12.0, browserslist@npm:^4.16.0, browserslist@npm:^4.16.3, browserslist@npm:^4.16.6, browserslist@npm:^4.21.10, browserslist@npm:^4.23.0, browserslist@npm:^4.23.1, browserslist@npm:^4.8.2":
+"browserslist@npm:^4.0.0, browserslist@npm:^4.12.0, browserslist@npm:^4.16.0, browserslist@npm:^4.16.3, browserslist@npm:^4.16.6, browserslist@npm:^4.21.10, browserslist@npm:^4.23.0, browserslist@npm:^4.23.1, browserslist@npm:^4.23.3, browserslist@npm:^4.8.2":
   version: 4.23.3
   resolution: "browserslist@npm:4.23.3"
   dependencies:
@@ -18621,6 +18666,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fraction.js@npm:^4.3.7":
+  version: 4.3.7
+  resolution: "fraction.js@npm:4.3.7"
+  checksum: df291391beea9ab4c263487ffd9d17fed162dbb736982dee1379b2a8cc94e4e24e46ed508c6d278aded9080ba51872f1bc5f3a5fd8d7c74e5f105b508ac28711
+  languageName: node
+  linkType: hard
+
 "fragment-cache@npm:^0.2.1":
   version: 0.2.1
   resolution: "fragment-cache@npm:0.2.1"
@@ -34391,7 +34443,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack@npm:5, webpack@npm:^5.63.0, webpack@npm:^5.94.0":
+"webpack@npm:5, webpack@npm:^5.63.0, webpack@npm:^5.91.0, webpack@npm:^5.94.0":
   version: 5.94.0
   resolution: "webpack@npm:5.94.0"
   dependencies: